Replace StatusIconAndText with Status component

openshift · Jun 24, 2019 · 099db40 · 099db40
1 parent 4601ad1
commit 099db40
Show file tree

Hide file tree

Showing 15 changed files with 48 additions and 38 deletions.
diff --git a/frontend/public/components/build.tsx b/frontend/public/components/build.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash-es';
 import { Link } from 'react-router-dom';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+import { Status } from '@console/shared';
 import { K8sResourceKindReference, referenceFor, K8sResourceKind, k8sPatch, K8sKind } from '../module/k8s';
 import { cloneBuild, formatBuildDuration, getBuildNumber } from '../module/k8s/builds';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
@@ -23,7 +24,6 @@ import {
   resourcePath,
   ResourceSummary,
   SectionHeading,
-  StatusIconAndText,
   Timestamp,
 } from './utils';
 import { BuildPipeline, BuildPipelineLogLink } from './build-pipeline';
@@ -172,7 +172,7 @@ export const BuildsDetails: React.SFC<BuildsDetailsProps> = ({ obj: build }) =>
         <div className="col-sm-6">
           <BuildStrategy resource={build}>
             <dt>Status</dt>
-            <dd><StatusIconAndText status={build.status.phase} /></dd>
+            <dd><Status status={build.status.phase} /></dd>
             {logSnippet && <dt>Log Snippet</dt>}
             {logSnippet && <dd><pre>{logSnippet}</pre></dd>}
             {message && <dt>Reason</dt>}
@@ -286,7 +286,7 @@ const BuildsTableRow: React.FC<BuildsTableRowProps> = ({obj, index, key, style})
         <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
       </TableData>
       <TableData className={tableColumnClasses[2]}>
-        <StatusIconAndText status={obj.status.phase} />
+        <Status status={obj.status.phase} />
       </TableData>
       <TableData className={tableColumnClasses[3]}>
         {fromNow(obj.metadata.creationTimestamp)}

diff --git a/frontend/public/components/container.tsx b/frontend/public/components/container.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
 
+import { Status } from '@console/shared';
 import {
   ContainerLifecycle,
   ContainerLifecycleStage,
@@ -28,7 +29,6 @@ import {
   ResourceLink,
   ScrollToTopOnMount,
   SectionHeading,
-  StatusIconAndText,
   Timestamp,
 } from './utils';
 import { resourcePath } from './utils/resource-link';
@@ -190,7 +190,7 @@ const ContainerDetails: React.FC<ContainerDetailsProps> = (props) => {
         <SectionHeading text="Container Overview" />
         <dl className="co-m-pane__details">
           <dt>State</dt>
-          <dd><StatusIconAndText status={stateValue} /></dd>
+          <dd><Status status={stateValue} /></dd>
           <dt>ID</dt>
           <dd className="co-break-all">{status.containerID || '-'}</dd>
           <dt>Restarts</dt>

diff --git a/frontend/public/components/deployment-config.tsx b/frontend/public/components/deployment-config.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
+
+import { Status } from '@console/shared';
 import { k8sCreate, K8sKind, K8sResourceKind, K8sResourceKindReference } from '../module/k8s';
 import { errorModal } from './modals';
 import { DeploymentConfigModel } from '../models';
@@ -25,7 +27,6 @@ import {
   SectionHeading,
   togglePaused,
   WorkloadPausedAlert,
-  StatusIconAndText,
 } from './utils';
 
 import {
@@ -139,8 +140,8 @@ export const DeploymentConfigsDetails: React.FC<{obj: K8sResourceKind}> = ({obj:
               <dt>Status</dt>
               <dd>
                 {dc.status.availableReplicas === dc.status.updatedReplicas && dc.spec.replicas === dc.status.availableReplicas
-                  ? <StatusIconAndText status="Up to date" />
-                  : <StatusIconAndText status="Updating" />}
+                  ? <Status status="Up to date" />
+                  : <Status status="Updating" />}
               </dd>
             </ResourceSummary>
           </div>

diff --git a/frontend/public/components/deployment.tsx b/frontend/public/components/deployment.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
+
+import { Status } from '@console/shared';
 import { DeploymentModel } from '../models';
 import { K8sKind, K8sResourceKind, K8sResourceKindReference } from '../module/k8s';
 import { configureUpdateStrategyModal, errorModal } from './modals';
@@ -22,7 +24,6 @@ import {
   pluralize,
   ResourceSummary,
   SectionHeading,
-  StatusIconAndText,
   togglePaused,
   WorkloadPausedAlert,
 } from './utils';
@@ -98,8 +99,8 @@ const DeploymentDetails: React.FC<DeploymentDetailsProps> = ({obj: deployment})
               <dt>Status</dt>
               <dd>
                 {deployment.status.availableReplicas === deployment.status.updatedReplicas && deployment.spec.replicas === deployment.status.availableReplicas
-                  ? <StatusIconAndText status="Up to date" />
-                  : <StatusIconAndText status="Updating" />}
+                  ? <Status status="Up to date" />
+                  : <Status status="Updating" />}
               </dd>
             </ResourceSummary>
           </div>

diff --git a/frontend/public/components/job.jsx b/frontend/public/components/job.jsx
@@ -2,10 +2,11 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+import { Status } from '@console/shared';
 import { getJobTypeAndCompletions } from '../module/k8s';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
 import { configureJobParallelismModal } from './modals';
-import { Kebab, ContainerTable, SectionHeading, LabelList, ResourceKebab, ResourceLink, ResourceSummary, Timestamp, navFactory, StatusIconAndText } from './utils';
+import { Kebab, ContainerTable, SectionHeading, LabelList, ResourceKebab, ResourceLink, ResourceSummary, Timestamp, navFactory } from './utils';
 import { ResourceEventStream } from './events';
 
 const ModifyJobParallelism = (kind, obj) => ({
@@ -109,7 +110,7 @@ const Details = ({obj: job}) => <React.Fragment>
         <SectionHeading text="Job Status" />
         <dl className="co-m-pane__details">
           <dt>Status</dt>
-          <dd>{job.status.conditions ? <StatusIconAndText status={job.status.conditions[0].type} /> : <StatusIconAndText status="In Progress" />}</dd>
+          <dd>{job.status.conditions ? <Status status={job.status.conditions[0].type} /> : <Status status="In Progress" />}</dd>
           <dt>Start Time</dt>
           <dd><Timestamp timestamp={job.status.startTime} /></dd>
           <dt>Completion Time</dt>

diff --git a/frontend/public/components/namespace.jsx b/frontend/public/components/namespace.jsx
@@ -6,12 +6,13 @@ import { connect } from 'react-redux';
 import { Tooltip } from './utils/tooltip';
 import { Link } from 'react-router-dom';
 import * as fuzzy from 'fuzzysearch';
+import { Status } from '@console/shared';
 
 import { NamespaceModel, ProjectModel, SecretModel } from '../models';
 import { k8sGet } from '../module/k8s';
 import * as UIActions from '../actions/ui';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
-import { Kebab, Dropdown, Firehose, LabelList, LoadingInline, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceSummary, MsgBox, StatusIconAndText, ExternalLink, humanizeCpuCores, humanizeDecimalBytes, useAccessReview } from './utils';
+import { Kebab, Dropdown, Firehose, LabelList, LoadingInline, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceSummary, MsgBox, ExternalLink, humanizeCpuCores, humanizeDecimalBytes, useAccessReview } from './utils';
 import { createNamespaceModal, createProjectModal, deleteNamespaceModal, configureNamespacePullSecretModal } from './modals';
 import { RoleBindingsPage } from './RBAC';
 import { Bar, Area, requirePrometheus } from './graphs';
@@ -84,7 +85,7 @@ const NamespacesTableRow = ({obj: ns, index, key, style}) => {
         <ResourceLink kind="Namespace" name={ns.metadata.name} title={ns.metadata.uid} />
       </TableData>
       <TableData className={classNames(namespacesColumnClasses[1], 'co-break-word')}>
-        <StatusIconAndText status={ns.status.phase} />
+        <Status status={ns.status.phase} />
       </TableData>
       <TableData className={namespacesColumnClasses[2]}>
         <LabelList kind="Namespace" labels={ns.metadata.labels} />
@@ -146,7 +147,7 @@ const ProjectTableRow = ({obj: project, index, key, style}) => {
         </span>
       </TableData>
       <TableData className={projectColumnClasses[1]}>
-        <StatusIconAndText status={project.status.phase} />
+        <Status status={project.status.phase} />
       </TableData>
       <TableData className={classNames(projectColumnClasses[2], 'co-break-word')}>
         {requester || <span className="text-muted">No requester</span>}
@@ -272,7 +273,7 @@ export const NamespaceSummary = ({ns}) => {
     <div className="col-sm-6 col-xs-12">
       <dl className="co-m-pane__details">
         <dt>Status</dt>
-        <dd><StatusIconAndText status={ns.status.phase} /></dd>
+        <dd><Status status={ns.status.phase} /></dd>
         {canListSecrets && <React.Fragment>
           <dt>Default Pull Secret</dt>
           <dd><PullSecret namespace={ns} /></dd>

diff --git a/frontend/public/components/node.tsx b/frontend/public/components/node.tsx
@@ -2,12 +2,13 @@ import * as _ from 'lodash-es';
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+import { Status } from '@console/shared';
 import { getNodeRoles, nodeStatus, makeNodeSchedulable, K8sResourceKind, referenceForModel } from '../module/k8s';
 import { ResourceEventStream } from './events';
 import { Table, TableRow, TableData, DetailsPage, ListPage } from './factory';
 import { configureUnschedulableModal } from './modals';
 import { PodsPage } from './pod';
-import { Kebab, navFactory, LabelList, ResourceKebab, SectionHeading, ResourceLink, Timestamp, units, cloudProviderNames, cloudProviderID, pluralize, StatusIconAndText, humanizeDecimalBytes, humanizeCpuCores, useAccessReview } from './utils';
+import { Kebab, navFactory, LabelList, ResourceKebab, SectionHeading, ResourceLink, Timestamp, units, cloudProviderNames, cloudProviderID, pluralize, humanizeDecimalBytes, humanizeCpuCores, useAccessReview } from './utils';
 import { Area, requirePrometheus } from './graphs';
 import { MachineModel, NodeModel } from '../models';
 import { CamelCaseWrap } from './utils/camel-case-wrap';
@@ -95,7 +96,7 @@ const NodeTableHeader = () => {
 };
 NodeTableHeader.displayName = 'NodeTableHeader';
 
-const NodeStatus = ({node}) => <StatusIconAndText status={nodeStatus(node)} />;
+const NodeStatus = ({node}) => <Status status={nodeStatus(node)} />;
 
 const NodeTableRow: React.FC<NodeTableRowProps> = ({obj: node, index, key, style}) => {
   const machine = getMachine(node);

diff --git a/frontend/public/components/operator-lifecycle-manager/clusterserviceversion-resource.tsx b/frontend/public/components/operator-lifecycle-manager/clusterserviceversion-resource.tsx
@@ -4,6 +4,7 @@ import * as _ from 'lodash-es';
 import { connect } from 'react-redux';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+import { Status, SuccessStatus } from '@console/shared';
 import { ClusterServiceVersionResourceKind, ClusterServiceVersionKind, referenceForProvidedAPI } from './index';
 import { StatusDescriptor } from './descriptors/status';
 import { SpecDescriptor } from './descriptors/spec';
@@ -12,7 +13,7 @@ import { StatusCapability, Descriptor } from './descriptors/types';
 import { Resources } from './k8s-resource';
 import { ErrorPage404 } from '../error';
 import { MultiListPage, ListPage, DetailsPage, Table, TableRow, TableData } from '../factory';
-import { ResourceSummary, StatusBox, navFactory, Timestamp, LabelList, ResourceIcon, MsgBox, ResourceKebab, Kebab, KebabAction, LoadingBox, StatusIconAndText } from '../utils';
+import { ResourceSummary, StatusBox, navFactory, Timestamp, LabelList, ResourceIcon, MsgBox, ResourceKebab, Kebab, KebabAction, LoadingBox } from '../utils';
 import { connectToModel } from '../../kinds';
 import { apiVersionForReference, kindForReference, K8sResourceKind, OwnerReference, K8sKind, referenceFor, GroupVersionKind, referenceForModel } from '../../module/k8s';
 import { ClusterServiceVersionModel } from '../../models';
@@ -115,7 +116,7 @@ export const CSVRTableRow: React.FC<CSVRTableRowProps> = ({obj, index, key, styl
       <TableData className={tableColumnClasses[3]}>
         {_.isEmpty(status) ?
           <div className="text-muted">Unknown</div> :
-          <StatusIconAndText status={status} iconName={status === 'Running' ? 'ok' : undefined} />
+          {status === 'Running' ? <SuccessStatus status={status} /> : <Status status={status} />}
         }
       </TableData>
       <TableData className={tableColumnClasses[4]}>

diff --git a/frontend/public/components/operator-lifecycle-manager/descriptors/status/index.tsx b/frontend/public/components/operator-lifecycle-manager/descriptors/status/index.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
 import { Map as ImmutableMap } from 'immutable';
+import { Status, SuccessStatus } from '@console/shared';
 
-import { ResourceLink, StatusIconAndText } from '../../../utils';
+import { ResourceLink } from '../../../utils';
 import { StatusCapability, CapabilityProps, DescriptorProps } from '../types';
 import { Phase } from './phase';
 import { PodStatusChart } from './pods';
@@ -79,7 +80,7 @@ export const StatusDescriptor: React.SFC<DescriptorProps> = (props) => {
     </div>
     <dd className="olm-descriptor__value">
       {descriptor.displayName === 'Status' ?
-        (<StatusIconAndText status={value} iconName={value === 'Running' ? 'ok' : undefined} />) :
+        ({value === 'Running' ? <SuccessStatus status={value} /> : <Status status={value} />) :
         (<Capability descriptor={descriptor} capability={capability} value={value} namespace={namespace} />)
       }
     </dd>

diff --git a/frontend/public/components/persistent-volume-claim.jsx b/frontend/public/components/persistent-volume-claim.jsx
@@ -2,11 +2,12 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import { sortable } from '@patternfly/react-table';
 import * as classNames from 'classnames';
+import { Status } from '@console/shared';
 import { connectToFlags } from '../reducers/features';
 import { Conditions } from './conditions';
 import { FLAGS } from '../const';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
-import { Kebab, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceSummary, Selector, StatusIconAndText } from './utils';
+import { Kebab, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceSummary, Selector } from './utils';
 import { ResourceEventStream } from './events';
 
 const pvcPhase = pvc => pvc.status.phase;
@@ -16,7 +17,7 @@ const menuActions = [ExpandPVC, ...common];
 
 const PVCStatus = ({pvc}) => {
   const phase = pvcPhase(pvc);
-  return <StatusIconAndText status={phase} />;
+  return <Status status={phase} />;
 };
 
 const tableColumnClasses = [

diff --git a/frontend/public/components/persistent-volume.jsx b/frontend/public/components/persistent-volume.jsx
@@ -2,13 +2,14 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import { sortable } from '@patternfly/react-table';
 import * as classNames from 'classnames';
+import { Status } from '@console/shared';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
-import { Kebab, LabelList, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceSummary, Timestamp, StatusIconAndText } from './utils';
+import { Kebab, LabelList, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceSummary, Timestamp } from './utils';
 
 const { common } = Kebab.factory;
 const menuActions = [...common];
 
-const PVStatus = ({pv}) => <StatusIconAndText status={pv.status.phase} />;
+const PVStatus = ({pv}) => <Status status={pv.status.phase} />;
 
 const tableColumnClasses = [
   classNames('col-lg-2', 'col-md-2', 'col-sm-4', 'col-xs-6'),

diff --git a/frontend/public/components/pod.tsx b/frontend/public/components/pod.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { sortable } from '@patternfly/react-table';
 import * as classNames from 'classnames';
 import * as _ from 'lodash-es';
+import { Status } from '@console/shared';
 
 import { ContainerSpec, K8sResourceKindReference, PodKind } from '../module/k8s';
 import { getRestartPolicyLabel, podPhase, podPhaseFilterReducer, podReadiness } from '../module/k8s/pods';
@@ -21,7 +22,6 @@ import {
   ScrollToTopOnMount,
   SectionHeading,
   Selector,
-  StatusIconAndText,
   Timestamp,
   navFactory,
   units,
@@ -81,7 +81,7 @@ const PodTableRow: React.FC<PodTableRowProps> = ({obj: pod, index, key, style})
         <NodeLink name={pod.spec.nodeName} />
       </TableData>
       <TableData className={tableColumnClasses[4]}>
-        <StatusIconAndText status={phase} />
+        <Status status={phase} />
       </TableData>
       <TableData className={tableColumnClasses[5]}>
         <Readiness pod={pod} />
@@ -149,7 +149,7 @@ export const ContainerRow: React.FC<ContainerRowProps> = ({pod, container}) => {
       <ContainerLink pod={pod} name={container.name} />
     </div>
     <div className="col-lg-2 col-md-3 col-sm-5 col-xs-7 co-truncate co-nowrap co-select-to-copy">{container.image || '-'}</div>
-    <div className="col-lg-2 col-md-2 col-sm-3 hidden-xs"><StatusIconAndText status={cstate.label} /></div>
+    <div className="col-lg-2 col-md-2 col-sm-3 hidden-xs"><Status status={cstate.label} /></div>
     <div className="col-lg-1 col-md-2 hidden-sm hidden-xs">{_.get(cstatus, 'restartCount', '0')}</div>
     <div className="col-lg-2 col-md-2 hidden-sm hidden-xs"><Timestamp timestamp={startedAt} /></div>
     <div className="col-lg-2 hidden-md hidden-sm hidden-xs"><Timestamp timestamp={finishedAt} /></div>
@@ -206,7 +206,7 @@ const PodGraphs = requirePrometheus(({pod}) => <React.Fragment>
   <br />
 </React.Fragment>);
 
-export const PodStatus: React.FC<PodStatusProps> = ({pod}) => <StatusIconAndText status={podPhase(pod)} />;
+export const PodStatus: React.FC<PodStatusProps> = ({pod}) => <Status status={podPhase(pod)} />;
 
 export const PodDetailsList: React.FC<PodDetailsListProps> = ({pod}) => {
   const activeDeadlineSeconds = _.get(pod, 'spec.activeDeadlineSeconds');

diff --git a/frontend/public/components/routes.tsx b/frontend/public/components/routes.tsx
@@ -4,8 +4,9 @@ import * as classNames from 'classnames';
 import { Popover } from '@patternfly/react-core';
 import { sortable } from '@patternfly/react-table';
 import { QuestionCircleIcon } from '@patternfly/react-icons';
+import { Status } from '@console/shared';
 import { DetailsPage,ListPage, Table, TableRow, TableData } from './factory';
-import { Kebab, CopyToClipboard, SectionHeading, ResourceKebab, detailsPage, navFactory, ResourceLink, ResourceSummary, StatusIconAndText, ExternalLink } from './utils';
+import { Kebab, CopyToClipboard, SectionHeading, ResourceKebab, detailsPage, navFactory, ResourceLink, ResourceSummary, ExternalLink } from './utils';
 import { MaskedData } from './configmap-and-secret-data';
 import { K8sResourceKind, K8sResourceKindReference } from '../module/k8s';
 import { Conditions, conditionProps } from './conditions';
@@ -104,7 +105,7 @@ export const routeStatus = (route) => {
 
 export const RouteStatus: React.SFC<RouteStatusProps> = ({obj: route}) => {
   const status: string = routeStatus(route);
-  return <StatusIconAndText status={status} />;
+  return <Status status={status} />;
 };
 RouteStatus.displayName = 'RouteStatus';
 

diff --git a/frontend/public/components/template-instance.tsx b/frontend/public/components/template-instance.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+import { Status } from '@console/shared';
 import {
   DetailsPage,
   ListPage,
@@ -19,7 +20,6 @@ import {
   ResourceLink,
   ResourceSummary,
   SectionHeading,
-  StatusIconAndText,
 } from './utils';
 
 const menuActions = Kebab.factory.common;
@@ -62,7 +62,7 @@ const TemplateInstanceTableRow: React.FC<TemplateInstanceTableRowProps> = ({obj,
         <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
       </TableData>
       <TableData className={tableColumnClasses[2]}>
-        <StatusIconAndText status={getTemplateInstanceStatus(obj)} />
+        <Status status={getTemplateInstanceStatus(obj)} />
       </TableData>
       <TableData className={tableColumnClasses[3]}>
         <ResourceKebab actions={menuActions} kind="TemplateInstance" resource={obj} />
@@ -120,7 +120,7 @@ const TemplateInstanceDetails: React.SFC<TemplateInstanceDetailsProps> = ({obj})
             <div className="col-sm-6">
               <dl className="co-m-pane__details">
                 <dt>Status</dt>
-                <dd><StatusIconAndText status={status} /></dd>
+                <dd><Status status={status} /></dd>
                 {secretName && (
                   <React.Fragment>
                     <dt>Parameters</dt>

diff --git a/frontend/public/components/utils/service-catalog-status.tsx b/frontend/public/components/utils/service-catalog-status.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
+import { Status } from '@console/shared';
 
 import { K8sResourceKind, serviceCatalogStatus } from '../../module/k8s';
-import { StatusIconAndText } from '../utils';
 
 export const StatusWithIcon: React.SFC<StatusWithIconProps> = ({obj}) => {
   const objStatus: string = serviceCatalogStatus(obj);
-  return <StatusIconAndText status={objStatus} />;
+  return <Status status={objStatus} />;
 };
 
 export type StatusWithIconProps = {