Change upgrade activity visual

openshift · Dec 16, 2019 · df2971a · df2971a
1 parent 1b698ab
commit df2971a
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 28 deletions.
diff --git a/...nd/packages/console-app/src/components/dashboards-page/ClusterOperatorUpgradeActivity.tsx b/...nd/packages/console-app/src/components/dashboards-page/ClusterOperatorUpgradeActivity.tsx
@@ -1,32 +1,22 @@
 import * as React from 'react';
-import {
-  ClusterOperator,
-  getStatusAndMessage,
-  referenceForModel,
-} from '@console/internal/module/k8s';
+import { ClusterOperator, referenceForModel } from '@console/internal/module/k8s';
 import ActivityItem from '@console/shared/src/components/dashboard/activity-card/ActivityItem';
 import { ResourceLink } from '@console/internal/components/utils/resource-link';
 import { ClusterOperatorModel } from '@console/internal/models';
 
 const ClusterOperatorUpgradeActivity: React.FC<ClusterOperatorUpgradeActivityProps> = ({
   resource,
-}) => {
-  const { message } = getStatusAndMessage(resource);
-  return (
-    <>
-      <ActivityItem>
-        Upgrading operator{' '}
-        <ResourceLink
-          kind={referenceForModel(ClusterOperatorModel)}
-          name={resource.metadata.name}
-          inline
-          hideIcon
-        />
-      </ActivityItem>
-      {message}
-    </>
-  );
-};
+}) => (
+  <>
+    <ActivityItem className="co-cluster-operator__upgrade-item">Upgrading</ActivityItem>
+    <ResourceLink
+      kind={referenceForModel(ClusterOperatorModel)}
+      name={resource.metadata.name}
+      inline
+      className="co-cluster-operator__upgrade"
+    />
+  </>
+);
 
 export default ClusterOperatorUpgradeActivity;
 

diff --git a/frontend/packages/console-app/src/components/dashboards-page/activity.ts b/frontend/packages/console-app/src/components/dashboards-page/activity.ts
@@ -1,3 +1,4 @@
+import * as _ from 'lodash';
 import {
   ClusterVersionKind,
   ClusterUpdateStatus,
@@ -15,3 +16,9 @@ export const getClusterUpdateTimestamp = (cv: ClusterVersionKind) =>
 
 export const isClusterOperatorUpgradeActivity = (resource: ClusterOperator) =>
   getClusterOperatorStatus(resource) === OperatorStatus.Updating;
+
+export const getCLusterOperatorUpgradeTimestamp = (resource: ClusterOperator) => {
+  const conditions = _.get(resource, 'status.conditions');
+  const progressing: any = _.find(conditions, { type: 'Progressing', status: 'True' });
+  return progressing ? new Date(progressing.lastTransitionTime) : null;
+};
diff --git a/frontend/packages/console-app/src/plugin.tsx b/frontend/packages/console-app/src/plugin.tsx
@@ -35,6 +35,7 @@ import {
   SCHEDULERS_UP,
 } from './queries';
 import {
+  getCLusterOperatorUpgradeTimestamp,
   isClusterOperatorUpgradeActivity,
   getClusterUpdateTimestamp,
   isClusterUpdateActivity,
@@ -147,6 +148,7 @@ const plugin: Plugin<ConsumedExtensions> = [
         namespaced: false,
       },
       isActivity: isClusterOperatorUpgradeActivity,
+      getTimestamp: getCLusterOperatorUpgradeTimestamp,
       loader: () =>
         import(
           './components/dashboards-page/ClusterOperatorUpgradeActivity' /* webpackChunkName: "console-app" */

diff --git a/frontend/packages/console-shared/src/components/dashboard/activity-card/ActivityItem.tsx b/frontend/packages/console-shared/src/components/dashboard/activity-card/ActivityItem.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import { Progress, ProgressSize } from '@patternfly/react-core';
 import { InProgressIcon } from '@patternfly/react-icons';
 
@@ -18,17 +19,22 @@ export const ActivityProgress: React.FC<ActivityProgressProps> = ({
   </>
 );
 
-const ActivityItem: React.FC = ({ children }) => (
+const ActivityItem: React.FC<ActivityItemProps> = ({ children, className, hideIcon = false }) => (
   <>
-    <div className="co-activity-item">
-      <InProgressIcon className="co-dashboard-icon" />
-      <div className="co-activity-item__title">{children}</div>
+    <div className={classNames('co-activity-item', className)}>
+      {!hideIcon && <InProgressIcon className="co-dashboard-icon co-activity-item__icon" />}
+      {children}
     </div>
   </>
 );
 
 export default ActivityItem;
 
+type ActivityItemProps = {
+  hideIcon?: boolean;
+  className?: string;
+};
+
 type ActivityProgressProps = {
   title: string;
   progress: number;

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
@@ -80,8 +80,8 @@
   padding-bottom: 0.2rem;
 }
 
-.co-activity-item__title {
-  padding-left: 0.3rem;
+.co-activity-item__icon {
+  padding-right: 0.3rem;
 }
 
 .co-recent-item__content-header {