Align event types with k8s

openshift · Dec 3, 2019 · 8c366b3 · 8c366b3
1 parent 3ef9754
commit 8c366b3
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 24 deletions.
diff --git a/frontend/packages/console-shared/src/components/dashboard/activity-card/EventItem.tsx b/frontend/packages/console-shared/src/components/dashboard/activity-card/EventItem.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { AccordionContent, AccordionItem, AccordionToggle } from '@patternfly/react-core';
 import classNames from 'classnames';
-import { RedExclamationCircleIcon } from '@console/shared';
 import { categoryFilter, getLastTime } from '@console/internal/components/events';
 import { twentyFourHourTime } from '@console/internal/components/utils/datetime';
 import { ResourceIcon } from '@console/internal/components/utils/resource-icon';
 import { ResourceLink } from '@console/internal/components/utils/resource-link';
 import { EventKind, referenceFor } from '@console/internal/module/k8s';
+import { YellowExclamationTriangleIcon } from '../../status';
 
 const propsAreEqual = (prevProps: EventItemProps, nextProps: EventItemProps) =>
   prevProps.event.metadata.uid === nextProps.event.metadata.uid &&
@@ -15,9 +15,9 @@ const propsAreEqual = (prevProps: EventItemProps, nextProps: EventItemProps) =>
   prevProps.onToggle === nextProps.onToggle;
 
 const EventItem: React.FC<EventItemProps> = React.memo(({ event, isExpanded, onToggle }) => {
-  const { involvedObject, message, reason, metadata } = event;
+  const { involvedObject, message, metadata } = event;
   const lastTime = getLastTime(event);
-  const isError = categoryFilter('error', { reason });
+  const isWarning = categoryFilter('warning', event);
   const expanded = isExpanded(metadata.uid);
   return (
     <div className="co-recent-item__body">
@@ -27,7 +27,7 @@ const EventItem: React.FC<EventItemProps> = React.memo(({ event, isExpanded, onT
           isExpanded={expanded}
           id={metadata.uid}
           className={classNames('co-recent-item__toggle', {
-            'co-recent-item--error': isError && expanded,
+            'co-recent-item--warning': isWarning && expanded,
           })}
         >
           <div className="co-recent-item__title">
@@ -39,8 +39,8 @@ const EventItem: React.FC<EventItemProps> = React.memo(({ event, isExpanded, onT
               )}
             </div>
             <div className="co-recent-item__title-message">
-              {isError && (
-                <RedExclamationCircleIcon className="co-dashboard-icon co-recent-item__icon--error" />
+              {isWarning && (
+                <YellowExclamationTriangleIcon className="co-dashboard-icon co-recent-item__icon--warning" />
               )}
               {!expanded && (
                 <>
@@ -53,7 +53,9 @@ const EventItem: React.FC<EventItemProps> = React.memo(({ event, isExpanded, onT
         </AccordionToggle>
         <AccordionContent
           isHidden={!expanded}
-          className={classNames('co-recent-item__content', { 'co-recent-item--error': isError })}
+          className={classNames('co-recent-item__content', {
+            'co-recent-item--warning': isWarning,
+          })}
         >
           <div>
             <div className="co-recent-item__content-header">

diff --git a/frontend/packages/console-shared/src/components/dashboard/activity-card/activity-card.scss b/frontend/packages/console-shared/src/components/dashboard/activity-card/activity-card.scss
@@ -40,8 +40,8 @@
     padding-right: var(--pf-c-card--child--PaddingRight);
   }
 
-  .co-recent-item--error {
-    border-left-color: var(--pf-global--danger-color--100);
+  .co-recent-item--warning {
+    border-left-color: var(--pf-global--warning-color--100);
   }
 
   .pf-c-accordion__toggle {
@@ -104,7 +104,7 @@
   white-space: nowrap;
 }
 
-.co-recent-item__icon--error {
+.co-recent-item__icon--warning {
   align-items: center;
   display: flex;
   margin-right: 0.3rem;

diff --git a/frontend/public/components/_sysevent-icon.scss b/frontend/public/components/_sysevent-icon.scss
@@ -10,14 +10,12 @@
 }
 
 
-.co-sysevent--error {
-  $failure-red: #d64456;
-
+.co-sysevent--warning {
   .co-sysevent-icon,
   .co-sysevent__box {
-    border-color: $failure-red;
+    border-color: var(--pf-global--warning-color--100);
   }
   .co-sysevent__icon-line {
-    background-color: $failure-red;
+    background-color: var(--pf-global--warning-color--100);
   }
 }
diff --git a/frontend/public/components/events.jsx b/frontend/public/components/events.jsx
@@ -41,16 +41,13 @@ export const sortEvents = (events) => {
   return _.orderBy(events, [getLastTime, getFirstTime, 'name'], ['desc', 'desc', 'asc']);
 };
 
-// Predicate function to filter by event "category" (info, error, or all)
+// Predicate function to filter by event "category" (normal, warning, or all)
 export const categoryFilter = (category, event) => {
   if (category === 'all') {
     return true;
   }
-  const { reason = '' } = event;
-  const errorSubstrings = ['error', 'failed', 'unhealthy', 'nodenotready'];
-  const isError =
-    reason && errorSubstrings.find((substring) => reason.toLowerCase().includes(substring));
-  return category === 'error' ? isError : !isError;
+  const { type = 'normal' } = event;
+  return type.toLowerCase() === category;
 };
 
 const kindFilter = (kind, { involvedObject }) => {
@@ -63,13 +60,13 @@ const Inner = connectToFlags(FLAGS.CAN_LIST_NODE)(
       const { event, flags } = this.props;
       const { involvedObject: obj, source, message, reason, series } = event;
       const tooltipMsg = `${reason} (${obj.kind})`;
-      const isError = categoryFilter('error', event);
+      const isWarning = categoryFilter('warning', event);
       const firstTime = getFirstTime(event);
       const lastTime = getLastTime(event);
       const count = series ? series.count : event.count;
 
       return (
-        <div className={classNames('co-sysevent', { 'co-sysevent--error': isError })}>
+        <div className={classNames('co-sysevent', { 'co-sysevent--warning': isWarning })}>
           <div className="co-sysevent__icon-box">
             <i className="co-sysevent-icon" title={tooltipMsg} />
             <div className="co-sysevent__icon-line" />
@@ -132,7 +129,7 @@ const Inner = connectToFlags(FLAGS.CAN_LIST_NODE)(
   },
 );
 
-const categories = { all: 'All Categories', info: 'Info', error: 'Error' };
+const categories = { all: 'All Categories', normal: 'Normal', warning: 'Warning' };
 
 export class EventsList extends React.Component {
   constructor(props) {