foreman-tasks 12.2.1 → 12.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f3ab9dfe5221351a1c392ddc1ba3c9c8693ba9c7dd6ceea8659aabc30de78d56
-  data.tar.gz: d666650ff5f3073c9c66e3c37ec6d9c2d28ac08e3abd18f13157261cf0e511b6
+  metadata.gz: 200260a81901f7159c565c8188aa71de7b80bc0583b7cf3bf6432a2541130567
+  data.tar.gz: 3cb1afe2a7706fe328155ac0b32da0864155dfcb9e97a7b026283ba020f41489
 SHA512:
-  metadata.gz: 99b91eb15001bc4d8d93605b1e7ffff2d39aab63ae044259d474f84827cf9888233d3e7b7b107e32ab63a7145ed419f5ac163a5c8d8a13857bfa6a2dc2fc935e
-  data.tar.gz: f95f6d9169b3b442fe9a4c8a20a3426984d997365fb9c7bf2708828e4f7e8ca634f78f70b8f07d02f9e22e92ed597b6f59d4140f36bb3661532f459adfd4baa3
+  metadata.gz: 26157491f3be0ce0e7386008c492476db1e49d28d28934f1139daec25771626d3e7813c3e858b501020f719930ad4fee3fcf6a54850bb661d4104b0628676993
+  data.tar.gz: d295b0470a35efb6a20801431614256612fdb16fb9f85f6c2c79ffdfaf0bd384656986d82f9d1bf0072b68366420884fbb552638152ccf9ca397f4c8a20a14c8

data/config/routes.rb

@@ -36,7 +36,6 @@ Foreman::Application.routes.draw do
 
     match '/tasks', to: '/react#index', via: :get
     match '/tasks/:id/sub_tasks', to: '/react#index', via: :get
-    match '/ex_tasks/:id', to: '/react#index', via: :get
 
     namespace :api do
       resources :recurring_logics, :only => [:index, :show, :update] do

data/lib/foreman_tasks/version.rb

@@ -1,3 +1,3 @@
 module ForemanTasks
-  VERSION = '12.2.1'.freeze
+  VERSION = '12.2.3'.freeze
 end

data/webpack/ForemanTasks/Components/TaskDetails/Components/Dependencies.js

@@ -1,55 +1,75 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { capitalize } from 'lodash';
 import {
-  Alert,
-  AlertVariant,
   Grid,
   GridItem,
+  Text,
+  TextVariants,
   Title,
 } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-const DependencyTable = ({ title, tasks }) => {
-  const tableId = title.toLowerCase().replace(/\s+/g, '-');
-  return (
-    <div>
-      <Title headingLevel="h4" size="md" ouiaId={`${tableId}-title`}>
-        {title}
-      </Title>
-      {tasks.length === 0 ? (
-        <p className="text-muted">{__('None')}</p>
-      ) : (
-        <Table aria-label={title} variant="compact" ouiaId={`${tableId}-table`}>
-          <Thead>
-            <Tr ouiaId={`${tableId}-table-header`}>
-              <Th width={50}>{__('Action')}</Th>
-              <Th width={25}>{__('State')}</Th>
-              <Th width={25}>{__('Result')}</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {tasks.map(task => (
-              <Tr key={task.id} ouiaId={`${tableId}-table-row-${task.id}`}>
-                <Td>
-                  <a href={`/foreman_tasks/tasks/${task.id}`}>
-                    {task.humanized || task.action}
-                  </a>
-                </Td>
-                <Td>{task.state}</Td>
-                <Td>{task.result}</Td>
+const DependencyTable = ({ title, tasks, ouiaSectionId }) => (
+  <React.Fragment>
+    <Title headingLevel="h3" size="lg" ouiaId={`${ouiaSectionId}-title`}>
+      {title}
+    </Title>
+    <Grid hasGutter>
+      <GridItem span={12} xl={8}>
+        {tasks.length === 0 ? (
+          <Text component={TextVariants.small} ouiaId={`${ouiaSectionId}-none`}>
+            {__('None')}
+          </Text>
+        ) : (
+          <Table
+            aria-label={title}
+            variant="compact"
+            ouiaId={`${ouiaSectionId}-table`}
+          >
+            <Thead>
+              <Tr ouiaId={`${ouiaSectionId}-table-header`}>
+                <Th>{__('Name')}</Th>
+                <Th>{__('State')}</Th>
+                <Th>{__('Result')}</Th>
               </Tr>
-            ))}
-          </Tbody>
-        </Table>
-      )}
-    </div>
-  );
-};
+            </Thead>
+            <Tbody>
+              {tasks.map(task => (
+                <Tr
+                  key={task.id}
+                  ouiaId={`${ouiaSectionId}-table-row-${task.id}`}
+                >
+                  <Td dataLabel={__('Name')}>
+                    <Text
+                      component={TextVariants.a}
+                      href={`/foreman_tasks/tasks/${task.id}`}
+                      ouiaId={`${ouiaSectionId}-task-link-${task.id}`}
+                    >
+                      {task.humanized || task.action}
+                    </Text>
+                  </Td>
+                  <Td dataLabel={__('State')}>
+                    {capitalize(String(task.state || ''))}
+                  </Td>
+                  <Td dataLabel={__('Result')}>
+                    {capitalize(String(task.result || ''))}
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        )}
+      </GridItem>
+    </Grid>
+  </React.Fragment>
+);
 
 DependencyTable.propTypes = {
   title: PropTypes.string.isRequired,
   tasks: PropTypes.array,
+  ouiaSectionId: PropTypes.string.isRequired,
 };
 
 DependencyTable.defaultProps = {
@@ -57,27 +77,18 @@ DependencyTable.defaultProps = {
 };
 
 const Dependencies = ({ dependsOn, blocks }) => (
-  <div>
-    <Alert
-      variant={AlertVariant.info}
-      isInline
-      title={__('Task dependencies')}
-      ouiaId="task-dependencies-info-alert"
-    >
-      {__(
-        'This task may have dependencies on other tasks or may be blocking other tasks from executing. Dependencies are established through task chaining relationships.'
-      )}
-    </Alert>
-    <br />
-    <Grid hasGutter>
-      <GridItem span={6}>
-        <DependencyTable title={__('Depends on')} tasks={dependsOn} />
-      </GridItem>
-      <GridItem span={6}>
-        <DependencyTable title={__('Blocks')} tasks={blocks} />
-      </GridItem>
-    </Grid>
-  </div>
+  <React.Fragment>
+    <DependencyTable
+      title={__('Task depends on')}
+      tasks={dependsOn}
+      ouiaSectionId="task-dependencies-depends-on"
+    />
+    <DependencyTable
+      title={__('Task blocks')}
+      tasks={blocks}
+      ouiaSectionId="task-dependencies-blocks"
+    />
+  </React.Fragment>
 );
 
 Dependencies.propTypes = {

data/webpack/ForemanTasks/Components/TaskDetails/Components/Locks.js

@@ -1,56 +1,183 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Card, Row, Col } from 'patternfly-react';
-import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  Icon,
+  Text,
+  TextContent,
+  TextVariants,
+  Title,
+} from '@patternfly/react-core';
+import { Table, Tbody, Tr, Td } from '@patternfly/react-table';
+import { LockIcon, LockOpenIcon } from '@patternfly/react-icons';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
 
-const ConditionalLink = ({ children, link }) =>
-  link ? <a href={link}>{children}</a> : children;
+const LocksSection = ({
+  title,
+  description,
+  items,
+  RowIcon,
+  ouiaSectionId,
+}) => (
+  <Flex direction={{ default: 'column' }}>
+    <FlexItem spacer={{ default: 'spacerSm' }}>
+      <Flex
+        alignItems={{ default: 'alignItemsCenter' }}
+        spaceItems={{ default: 'spaceItemsSm' }}
+      >
+        <FlexItem>
+          <Title
+            headingLevel="h3"
+            size="lg"
+            style={{ margin: '0' }}
+            ouiaId={`${ouiaSectionId}-title`}
+          >
+            {title}
+          </Title>
+        </FlexItem>
+        <FlexItem>
+          <RowIcon aria-hidden />
+        </FlexItem>
+      </Flex>
+    </FlexItem>
+    <FlexItem>
+      <TextContent>
+        <Text
+          component={TextVariants.p}
+          ouiaId={`${ouiaSectionId}-description`}
+        >
+          {description}
+        </Text>
+      </TextContent>
+    </FlexItem>
+    <FlexItem>
+      <Grid>
+        <GridItem span={5}>
+          <Table
+            aria-label={title}
+            variant="compact"
+            ouiaId={`${ouiaSectionId}-table`}
+          >
+            <Tbody>
+              {items.map((lock, index) => (
+                <Tr
+                  key={`${lock.resource_type}-${lock.resource_id}-${index}`}
+                  ouiaId={`${ouiaSectionId}-row-${index}`}
+                >
+                  <Td>
+                    <Flex
+                      alignItems={{ default: 'alignItemsCenter' }}
+                      spaceItems={{ default: 'spaceItemsSm' }}
+                      flexWrap={{ default: 'nowrap' }}
+                    >
+                      <FlexItem>
+                        <Icon size="sm">
+                          <RowIcon />
+                        </Icon>
+                      </FlexItem>
+                      <FlexItem>
+                        {lock.link ? (
+                          <a
+                            href={lock.link}
+                            data-ouia-component-id={`${ouiaSectionId}-resource-type-link-${index}`}
+                          >
+                            {lock.resource_type}
+                          </a>
+                        ) : (
+                          lock.resource_type
+                        )}
+                      </FlexItem>
+                    </Flex>
+                  </Td>
+                  <Td>{sprintf(__('id: %s'), String(lock.resource_id))}</Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </GridItem>
+      </Grid>
+    </FlexItem>
+  </Flex>
+);
 
-ConditionalLink.propTypes = {
-  children: PropTypes.node.isRequired,
-  link: PropTypes.string,
+LocksSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  items: PropTypes.array.isRequired,
+  RowIcon: PropTypes.elementType.isRequired,
+  ouiaSectionId: PropTypes.string.isRequired,
 };
 
-ConditionalLink.defaultProps = {
-  link: null,
-};
+const Locks = ({ locks }) => {
+  const nonExclusive = locks.filter(l => !l.exclusive);
+  const exclusive = locks.filter(l => l.exclusive);
 
-const Locks = ({ locks }) => (
-  <div>
-    <Alert type="info">
-      {__(
-        'You can find resource locks on this page. Exclusive lock marked with locked icon means that no other task can use locked resource while this task is running. Non-exclusive lock marked with unlocked icon means other tasks can access the resource freely, it is only used to indicate the relation of this task with the resource'
+  if (locks.length === 0) {
+    return (
+      <EmptyState variant={EmptyStateVariant.lg}>
+        <EmptyStateHeader
+          headingLevel="h3"
+          titleText={__('No resources')}
+          icon={<EmptyStateIcon icon={LockOpenIcon} />}
+        />
+        <EmptyStateBody>
+          {__(
+            'No resources currently associated with this task. Locking resources prevents conflicting tasks from running simultaneously. Other tasks must wait until this process completes.'
+          )}
+        </EmptyStateBody>
+      </EmptyState>
+    );
+  }
+
+  return (
+    <Flex
+      direction={{ default: 'column' }}
+      gap={{ default: 'gap2xl' }}
+      data-ouia-component-id="task-locks-populated"
+    >
+      {nonExclusive.length > 0 && (
+        <LocksSection
+          title={__('Non-exclusive resources')}
+          description={__(
+            "Other tasks can access the resource simultaneously. This lock tracks the task's relationship to the resource without blocking others."
+          )}
+          items={nonExclusive}
+          RowIcon={LockOpenIcon}
+          ouiaSectionId="task-locks-non-exclusive"
+        />
       )}
-    </Alert>
-    <Card.Grid>
-      <Row>
-        {locks.map((lock, key) => (
-          <Col xs={6} sm={4} md={4} key={key}>
-            <ConditionalLink link={lock.link}>
-              <Card className="card-pf-aggregate-status" accented>
-                <Card.Title>
-                  <span
-                    className={`fa ${
-                      lock.exclusive ? 'fa-lock' : 'fa-unlock-alt'
-                    }`}
-                  />
-                  {lock.resource_type}
-                </Card.Title>
-                <Card.Body>
-                  {`id:${lock.resource_id}`}
-                  <br />
-                </Card.Body>
-              </Card>
-            </ConditionalLink>
-          </Col>
-        ))}
-      </Row>
-    </Card.Grid>
-  </div>
-);
+      {exclusive.length > 0 && (
+        <LocksSection
+          title={__('Exclusive resources')}
+          description={__(
+            'Only this task can access the resource. Other tasks must wait until this process completes.'
+          )}
+          items={exclusive}
+          RowIcon={LockIcon}
+          ouiaSectionId="task-locks-exclusive"
+        />
+      )}
+    </Flex>
+  );
+};
+
+const lockShape = PropTypes.shape({
+  exclusive: PropTypes.bool,
+  resource_type: PropTypes.string,
+  resource_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  link: PropTypes.string,
+});
 
 Locks.propTypes = {
-  locks: PropTypes.array,
+  locks: PropTypes.arrayOf(lockShape),
 };
 
 Locks.defaultProps = {

data/webpack/ForemanTasks/Components/TaskDetails/Components/RunningSteps.js

@@ -1,68 +1,174 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, AlertVariant, Button } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertVariant,
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { HourglassStartIcon } from '@patternfly/react-icons';
 import { translate as __, sprintf } from 'foremanReact/common/I18n';
 
+const RunningStepDetailBlock = ({ label, children }) => (
+  <GridItem span={12}>
+    <Flex
+      direction={{ default: 'column' }}
+      spaceItems={{ default: 'spaceItemsXs' }}
+    >
+      <FlexItem>
+        <strong>{label}</strong>
+      </FlexItem>
+      <FlexItem>{children}</FlexItem>
+    </Flex>
+  </GridItem>
+);
+
+RunningStepDetailBlock.propTypes = {
+  label: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
 const RunningSteps = ({
+  executionPlan,
+  result,
   runningSteps,
   id,
   cancelStep,
   taskReload,
   taskReloadStart,
 }) => {
-  if (!runningSteps.length) return <span>{__('No running steps')}</span>;
-  return (
-    <div>
-      {runningSteps.map((step, i) => (
+  const planState = executionPlan?.state;
+  const resultIsPending = String(result) === 'pending';
+
+  if (!runningSteps.length) {
+    if (planState === 'running' && resultIsPending) {
+      return (
         <Alert
           variant={AlertVariant.warning}
           isInline
-          key={step.id || i}
-          ouiaId={`running-step-${i}`}
-          title={sprintf(__('Running step %s'), i + 1)}
+          ouiaId="running-steps-suspended-pending"
+          title={__('Temporarily suspended step(s)')}
         >
-          {step.cancellable && (
-            <p>
-              <Button
-                variant="danger"
-                size="sm"
-                ouiaId={`running-step-cancel-button-${i}`}
-                onClick={() => {
-                  if (!taskReload) {
-                    taskReloadStart(id);
-                  }
-                  cancelStep(id, step.id);
-                }}
-              >
-                {__('Cancel')}
-              </Button>
-            </p>
-          )}
-
-          <p>
-            <span>{__('Action')}:</span>
-            <span />
-          </p>
-          <pre>{step.action_class}</pre>
-          <p>
-            <span>{__('State')}:</span>
-            <span>{step.state}</span>
-          </p>
-          <span>{__('Input')}:</span>
-          <span>
-            <pre>{step.input}</pre>
-          </span>
-          <span>{__('Output')}:</span>
-          <span>
-            <pre>{step.output}</pre>
-          </span>
+          {__('The task is still being processed. Please wait.')}
         </Alert>
+      );
+    }
+
+    if (planState === 'planned' && resultIsPending) {
+      return (
+        <Grid>
+          <GridItem span={12}>
+            <Flex
+              direction={{ default: 'column' }}
+              alignItems={{ default: 'alignItemsCenter' }}
+              justifyContent={{ default: 'justifyContentCenter' }}
+              fullWidth={{ default: 'fullWidth' }}
+            >
+              <FlexItem>
+                <EmptyState variant={EmptyStateVariant.full}>
+                  <EmptyStateHeader
+                    titleText={__('Planned task')}
+                    headingLevel="h2"
+                    icon={<EmptyStateIcon icon={HourglassStartIcon} />}
+                  />
+                  <EmptyStateBody>
+                    {__('The task has not started yet.')}
+                  </EmptyStateBody>
+                </EmptyState>
+              </FlexItem>
+            </Flex>
+          </GridItem>
+        </Grid>
+      );
+    }
+
+    return <span>{__('No running steps')}</span>;
+  }
+
+  return (
+    <Stack hasGutter>
+      {runningSteps.map((step, i) => (
+        <StackItem key={step.id || i}>
+          <Alert
+            variant={AlertVariant.warning}
+            isInline
+            title={sprintf(__('Running step %s'), i + 1)}
+            ouiaId={`running-step-${i}`}
+          >
+            <Grid hasGutter>
+              {step.cancellable && (
+                <GridItem span={12}>
+                  <Flex>
+                    <FlexItem>
+                      <Button
+                        ouiaId={`running-step-${i}-cancel`}
+                        variant="danger"
+                        size="sm"
+                        onClick={() => {
+                          if (!taskReload) {
+                            taskReloadStart(id);
+                          }
+
+                          cancelStep(id, step.id);
+                        }}
+                      >
+                        {__('Cancel')}
+                      </Button>
+                    </FlexItem>
+                  </Flex>
+                </GridItem>
+              )}
+              <GridItem span={12}>
+                <Flex
+                  direction={{ default: 'row' }}
+                  spaceItems={{ default: 'spaceItemsSm' }}
+                  alignItems={{ default: 'alignItemsBaseline' }}
+                >
+                  <FlexItem>
+                    <strong>{`${__('Action')}:`}</strong>
+                  </FlexItem>
+                  <FlexItem>{step.action_class}</FlexItem>
+                </Flex>
+              </GridItem>
+              <GridItem span={12}>
+                <Flex
+                  direction={{ default: 'row' }}
+                  spaceItems={{ default: 'spaceItemsSm' }}
+                  alignItems={{ default: 'alignItemsBaseline' }}
+                >
+                  <FlexItem>
+                    <strong>{`${__('State')}:`}</strong>
+                  </FlexItem>
+                  <FlexItem>{step.state}</FlexItem>
+                </Flex>
+              </GridItem>
+              <RunningStepDetailBlock label={__('Input')}>
+                <pre>{step.input}</pre>
+              </RunningStepDetailBlock>
+              <RunningStepDetailBlock label={__('Output')}>
+                <pre>{step.output}</pre>
+              </RunningStepDetailBlock>
+            </Grid>
+          </Alert>
+        </StackItem>
       ))}
-    </div>
+    </Stack>
   );
 };
 
 RunningSteps.propTypes = {
+  executionPlan: PropTypes.shape({ state: PropTypes.string }),
+  result: PropTypes.string,
   runningSteps: PropTypes.array,
   id: PropTypes.string.isRequired,
   cancelStep: PropTypes.func.isRequired,
@@ -72,6 +178,8 @@ RunningSteps.propTypes = {
 
 RunningSteps.defaultProps = {
   runningSteps: [],
+  executionPlan: {},
+  result: undefined,
 };
 
 export default RunningSteps;