Fixes #37122 - Update system status chart in job invocations detail page

theforeman · Feb 5, 2024 · 9da75ee · 9da75ee
1 parent 45c0639
commit 9da75ee
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 31 deletions.
diff --git a/app/views/api/v2/job_invocations/base.json.rabl b/app/views/api/v2/job_invocations/base.json.rabl
@@ -11,8 +11,10 @@ node do |invocation|
     :succeeded => invocation_count(invocation, :output_key => :success_count),
     :failed    => invocation_count(invocation, :output_key => :failed_count),
     :pending   => invocation_count(invocation, :output_key => :pending_count),
+    :cancelled => invocation_count(invocation, :output_key => :cancelled_count),
     :total     => invocation_count(invocation, :output_key => :total_count),
     :missing   => invocation.missing_hosts_count,
+    :total_hosts => invocation.total_hosts_count,
   }
 end
 

diff --git a/webpack/JobInvocationDetail/JobInvocationConstants.js b/webpack/JobInvocationDetail/JobInvocationConstants.js
@@ -5,3 +5,13 @@ export const STATUS = {
   SUCCEEDED: 'succeeded',
   FAILED: 'failed',
 };
+
+export const DATE_OPTIONS = {
+  day: 'numeric',
+  month: 'short',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit',
+  hour12: false,
+  timeZoneName: 'short',
+};
diff --git a/webpack/JobInvocationDetail/JobInvocationDetail.scss b/webpack/JobInvocationDetail/JobInvocationDetail.scss
@@ -0,0 +1,39 @@
+.chart-donut {
+  height: 105px;
+  width: 105px;
+  margin-bottom: 15px;
+
+  .chart-title tspan {
+    font-size: 20px !important;
+  }
+
+  .chart-subtitle tspan {
+    font-size: 12px !important;
+    fill: #6A6E73 !important;
+  }
+}
+
+.chart-legend {
+  height: 105px;
+  width: 270px;
+
+  .legend-title {
+    font-weight: bold;
+    font-size: 14px;
+    margin-left: 8px;
+    margin-bottom: 0;
+  }
+
+  .pf-c-description-list {
+    margin-left: 8px;
+    margin-top: 8px;
+
+    .pf-c-description-list__term .pf-c-description-list__text {
+      font-weight: normal;
+    }
+  }
+}
+
+.pf-c-divider {
+  max-height: 105px !important;
+}
diff --git a/webpack/JobInvocationDetail/JobInvocationOverview.js b/webpack/JobInvocationDetail/JobInvocationOverview.js
@@ -7,12 +7,15 @@ import {
   DescriptionListGroup,
   DescriptionListDescription,
 } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
 import DefaultLoaderEmptyState from 'foremanReact/components/HostDetails/DetailsCard/DefaultLoaderEmptyState';
-import { translate as __, documentLocale } from 'foremanReact/common/I18n';
 
-const JobInvocationOverview = ({ data }) => {
+const JobInvocationOverview = ({
+  data,
+  isAlreadyStarted,
+  formattedStartDate,
+}) => {
   const {
-    start_at: startAt,
     ssh_user: sshUser,
     template_id: templateId,
     template_name: templateName,
@@ -22,27 +25,6 @@ const JobInvocationOverview = ({ data }) => {
   const canEditJobTemplates = permissions
     ? permissions.edit_job_templates
     : false;
-  const dateOptions = {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-    timeZoneName: 'short',
-  };
-  let formattedStartDate = __('Not yet');
-
-  if (startAt) {
-    // Ensures date string compatibility across browsers
-    const convertedDate = new Date(startAt.replace(/[-.]/g, '/'));
-    if (convertedDate.getTime() <= new Date().getTime()) {
-      formattedStartDate = convertedDate.toLocaleString(
-        documentLocale(),
-        dateOptions
-      );
-    }
-  }
 
   return (
     <DescriptionList
@@ -63,7 +45,7 @@ const JobInvocationOverview = ({ data }) => {
       <DescriptionListGroup>
         <DescriptionListTerm>{__('Started at:')}</DescriptionListTerm>
         <DescriptionListDescription>
-          {formattedStartDate}
+          {isAlreadyStarted ? formattedStartDate : __('Not yet')}
         </DescriptionListDescription>
       </DescriptionListGroup>
       <DescriptionListGroup>
@@ -99,6 +81,8 @@ const JobInvocationOverview = ({ data }) => {
 
 JobInvocationOverview.propTypes = {
   data: PropTypes.object.isRequired,
+  isAlreadyStarted: PropTypes.bool.isRequired,
+  formattedStartDate: PropTypes.string.isRequired,
 };
 
 export default JobInvocationOverview;
diff --git a/webpack/JobInvocationDetail/JobInvocationSystemStatusChart.js b/webpack/JobInvocationDetail/JobInvocationSystemStatusChart.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ChartDonut,
+  ChartLabel,
+  ChartLegend,
+  ChartTooltip,
+} from '@patternfly/react-charts';
+import {
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  FlexItem,
+  Text,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import './JobInvocationDetail.scss';
+
+const JobInvocationSystemStatusChart = ({
+  data,
+  isAlreadyStarted,
+  formattedStartDate,
+}) => {
+  const {
+    succeeded,
+    failed,
+    pending,
+    cancelled,
+    total,
+    total_hosts: totalHosts, // includes scheduled
+  } = data;
+  const chartData = [
+    { title: __('Succeeded:'), count: succeeded, color: '#3E8635' },
+    { title: __('Failed:'), count: failed, color: '#C9190B' },
+    { title: __('In Progress:'), count: pending, color: '#2B9AF3' },
+    { title: __('Canceled:'), count: cancelled, color: '#6A6E73' },
+  ];
+  const chartDonutTitle = () => {
+    if (total > 0) return `${succeeded.toString()}/${total}`;
+    if (totalHosts > 0) return `0/${totalHosts}`;
+    return '0';
+  };
+
+  return (
+    <>
+      <FlexItem className="chart-donut">
+        <ChartDonut
+          allowTooltip
+          constrainToVisibleArea
+          data={
+            total > 0
+              ? chartData.map(d => ({
+                  label: `${d.title} ${d.count} hosts`,
+                  y: d.count,
+                }))
+              : [{ label: `Scheduled: ${totalHosts} hosts`, y: 1 }]
+          }
+          colorScale={total > 0 ? chartData.map(d => d.color) : ['#8A8D90']}
+          labelComponent={
+            <ChartTooltip pointerLength={0} constrainToVisibleArea />
+          }
+          title={chartDonutTitle}
+          titleComponent={<ChartLabel className="chart-title" />}
+          subTitle={__('Systems')}
+          subTitleComponent={<ChartLabel className="chart-subtitle" />}
+          padding={{
+            bottom: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+          }}
+          width={105}
+          height={105}
+        />
+      </FlexItem>
+      <FlexItem className="chart-legend">
+        <Text className="legend-title">{__('System status')}</Text>
+        {isAlreadyStarted ? (
+          <ChartLegend
+            orientation="vertical"
+            itemsPerRow={2}
+            gutter={25}
+            rowGutter={7}
+            padding={{
+              bottom: 0,
+              left: 15,
+              right: 0,
+              top: 0,
+            }}
+            data={chartData.map(d => ({
+              name: `${d.title} ${d.count}`,
+              symbol: { type: 'circle' },
+            }))}
+            colorScale={chartData.map(d => d.color)}
+            width={270}
+            height={105}
+          />
+        ) : (
+          <DescriptionList>
+            <DescriptionListGroup>
+              <DescriptionListTerm>{__('Scheduled at:')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {formattedStartDate}
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        )}
+      </FlexItem>
+    </>
+  );
+};
+
+JobInvocationSystemStatusChart.propTypes = {
+  data: PropTypes.object.isRequired,
+  isAlreadyStarted: PropTypes.bool.isRequired,
+  formattedStartDate: PropTypes.string.isRequired,
+};
+
+export default JobInvocationSystemStatusChart;
diff --git a/webpack/JobInvocationDetail/index.js b/webpack/JobInvocationDetail/index.js
@@ -2,13 +2,19 @@ import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Divider, PageSection, Flex, FlexItem } from '@patternfly/react-core';
-import { translate as __ } from 'foremanReact/common/I18n';
+import { translate as __, documentLocale } from 'foremanReact/common/I18n';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
 import { getData } from './JobInvocationActions';
 import { selectItems } from './JobInvocationSelectors';
 import JobInvocationOverview from './JobInvocationOverview';
-import { JOB_INVOCATION_KEY, STATUS } from './JobInvocationConstants';
+import JobInvocationSystemStatusChart from './JobInvocationSystemStatusChart';
+import {
+  JOB_INVOCATION_KEY,
+  STATUS,
+  DATE_OPTIONS,
+} from './JobInvocationConstants';
+import './JobInvocationDetail.scss';
 
 const JobInvocationDetailPage = ({
   match: {
@@ -17,11 +23,28 @@ const JobInvocationDetailPage = ({
 }) => {
   const dispatch = useDispatch();
   const items = useSelector(selectItems);
-  const { description, status_label: statusLabel, task } = items;
+  const {
+    description,
+    status_label: statusLabel,
+    task,
+    start_at: startAt,
+  } = items;
   const finished =
     statusLabel === STATUS.FAILED || statusLabel === STATUS.SUCCEEDED;
   const autoRefresh = task?.state === STATUS.PENDING || false;
 
+  let isAlreadyStarted = false;
+  let formattedStartDate;
+  if (startAt) {
+    // Ensures date string compatibility across browsers
+    const convertedDate = new Date(startAt.replace(/[-.]/g, '/'));
+    isAlreadyStarted = convertedDate.getTime() <= new Date().getTime();
+    formattedStartDate = convertedDate.toLocaleString(
+      documentLocale(),
+      DATE_OPTIONS
+    );
+  }
+
   useEffect(() => {
     dispatch(getData(`/api/job_invocations/${id}`));
     if (finished && !autoRefresh) {
@@ -49,15 +72,23 @@ const JobInvocationDetailPage = ({
     >
       <React.Fragment>
         <PageSection isFilled variant="light">
-          <Flex>
-            <FlexItem> </FlexItem>
+          <Flex alignItems={{ default: 'alignItemsCenter' }}>
+            <JobInvocationSystemStatusChart
+              data={items}
+              isAlreadyStarted={isAlreadyStarted}
+              formattedStartDate={formattedStartDate}
+            />
             <Divider
               orientation={{
                 default: 'vertical',
               }}
             />
             <FlexItem>
-              <JobInvocationOverview data={items} />
+              <JobInvocationOverview
+                data={items}
+                isAlreadyStarted={isAlreadyStarted}
+                formattedStartDate={formattedStartDate}
+              />
             </FlexItem>
           </Flex>
         </PageSection>