Merge pull request #9200 from kbrock/state_logos

Update Workflow State icons

Author: agrare

app/javascript/components/miq-data-table/miq-table-cell.jsx

@@ -90,12 +90,12 @@ const MiqTableCell = ({
   };
 
   /** Function to render icon(s) in cell. */
-  const renderIcon = (icon, style, showText) => {
+  const renderIcon = (icon, style, showText, title = '') => {
     const hasBackground = Object.keys(style).includes('background');
     const styledIconClass = hasBackground ? 'styled_icon' : '';
     const longerTextClass = hasBackground && veryLongText ? 'styled_icon_margin' : '';
     return (
-      <div className={cellClass}>
+      <div className={cellClass} title={title}>
         {
           typeof (icon) === 'string'
             ? returnIcon(icon, style, styledIconClass, longerTextClass)
@@ -111,7 +111,7 @@ const MiqTableCell = ({
     if (showText) {
       const color = item.props ? item.props.style : {};
       const iconStyle = item.background ? { background: item.background, color: '#FFF' } : color;
-      return renderIcon(item.icon, iconStyle, showText);
+      return renderIcon(item.icon, iconStyle, showText, item.title);
     }
     const { className, style } = item.props ? item.props : { className: item.icon, style: { color: '#000' } };
     return renderIcon(className, style, showText);

app/javascript/components/request-workflow-status/data.js

@@ -65,12 +65,19 @@ const convertDuration = (duration) => {
 };
 
 const getItemIcon = (item) => {
-  if (item.RunnerContext && item.RunnerContext.success) {
-    return { icon: 'carbon--CheckmarkOutline' };
-  } if (item.RunnerContext && item.RunnerContext.Error) {
-    return { icon: 'carbon--MisuseOutline' };
+  if (item.FinishedTime) {
+    if (item.Output && item.Output.Error) {
+      if (item.RetryCount) {
+        return { icon: 'carbon--RetryFailed' }
+      } else {
+        return { icon: 'carbon--MisuseOutline' }
+      }
+    } else {
+      return { icon: 'carbon--CheckmarkOutline' }
+    }
+  } else {
+    return { icon: 'carbon--PlayOutline' }
   }
-  return { icon: 'carbon--PlayOutline' };
 };
 
 /** Function to get the row data of workflow states table. */
@@ -97,7 +104,7 @@ export const workflowStatusData = (response) => {
 
     rows.push({
       id: state.Guid.toString(),
-      name: { text: state.Name, icon: 'carbon--PlayOutline' },
+      name: { text: state.Name, ...getItemIcon(state)  },
       enteredTime: convertDate(state.EnteredTime.toString()),
       finishedTime: '',
       duration: convertDuration(durationTime),

app/stylesheet/miq-data-table.scss

@@ -409,4 +409,8 @@ table.miq_preview {
   .carbon--PlayOutline {
     color: var(--yellow)
   }
+
+  .carbon--RetryFailed {
+    color: var(--red);
+  }
 }