Use clean PF components for building Overview cards

Expose Overview & OverviewGrid components
openshift · Nov 9, 2021 · 91a0e88 · 91a0e88
1 parent bc6e954
commit 91a0e88
Show file tree

Hide file tree

Showing 117 changed files with 1,361 additions and 1,598 deletions.
diff --git a/frontend/integration-tests/views/dashboard.view.ts b/frontend/integration-tests/views/dashboard.view.ts
@@ -6,7 +6,7 @@ export const statusCard = $('[data-test-id="status-card"]');
 export const inventoryCard = $('[data-test-id="inventory-card"]');
 export const utilizationCard = $('[data-test-id="utilization-card"]');
 export const utilizationItems = $$('[data-test-id="utilization-item"]');
-export const durationDropdown = utilizationCard.$('[data-test-id="dropdown-button"]');
+export const durationDropdown = utilizationCard.$('[data-test-id="duration-button"]');
 export const activityCard = $('[data-test-id="activity-card"]');
 export const eventsPauseButton = $('[data-test-id="events-pause-button"]');
 export const launcherCard = $('[data-test-id="launcher-card"]');

diff --git a/...ckages/ceph-storage-plugin/integration-tests/views/ocp-dashboard-card-healthcheck.view.ts b/...ckages/ceph-storage-plugin/integration-tests/views/ocp-dashboard-card-healthcheck.view.ts
@@ -3,9 +3,7 @@ import { $ } from 'protractor';
 import { getPodData } from '../utils/helpers';
 import { OCP_HEALTH_ICON_COLORS } from '../utils/consts';
 
-export const mainHealthCardStatus = $(
-  '.co-dashboard-card__body--top-margin.co-status-card__health-body',
-);
+export const mainHealthCardStatus = $('.co-status-card__health-body');
 export const smallDivInside = mainHealthCardStatus.$$('.co-dashboard-icon').get(3);
 export const mainHealtGreenSvg = smallDivInside.$(`svg[fill="${OCP_HEALTH_ICON_COLORS.GREEN46}"]`);
 

diff --git a/frontend/packages/ceph-storage-plugin/integration-tests/views/storage-dashboard.view.ts b/frontend/packages/ceph-storage-plugin/integration-tests/views/storage-dashboard.view.ts
@@ -2,7 +2,7 @@ import { $, $$, browser } from 'protractor';
 import { appHost } from '@console/internal-integration-tests/protractor.conf';
 import { isLoaded } from '@console/shared/src/test-views/dashboard-shared.view';
 
-// export const clusterHealth = $('[class="co-dashboard-text--small co-health-card__text"]');
+// export const clusterHealth = $('[class="co-health-card__text"]');
 export const clusterHealth = $('div.co-status-card__health-item div svg');
 export const detailsCardStructure = $$('.co-details-card__body dt');
 const clusterDetails = $$('.co-details-card__body dd');

diff --git a/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json b/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json
@@ -522,9 +522,9 @@
   "Namespace store name": "Namespace store name",
   "A unique name for the namespace store within the project": "A unique name for the namespace store within the project",
   "Namespace Store Table": "Namespace Store Table",
-  "Where can I find Google Cloud credentials?": "Where can I find Google Cloud credentials?",
   "Service account keys are needed for Google Cloud Storage authentication. The keys can be found in the service accounts page in the GCP console.": "Service account keys are needed for Google Cloud Storage authentication. The keys can be found in the service accounts page in the GCP console.",
   "Learn more": "Learn more",
+  "Where can I find Google Cloud credentials?": "Where can I find Google Cloud credentials?",
   "Upload a .json file with the service account keys provided by Google Cloud Storage.": "Upload a .json file with the service account keys provided by Google Cloud Storage.",
   "Secret Key": "Secret Key",
   "Upload JSON": "Upload JSON",

diff --git a/.../packages/ceph-storage-plugin/src/__tests__/independent-dashboard-breakdown-card.spec.tsx b/.../packages/ceph-storage-plugin/src/__tests__/independent-dashboard-breakdown-card.spec.tsx
@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { ShallowWrapper, shallow } from 'enzyme';
-import { Select } from '@patternfly/react-core';
+import { CardBody, CardHeader, CardTitle, Select } from '@patternfly/react-core';
 import { DashboardItemProps } from '@console/internal/components/dashboard/with-dashboard-resources';
-import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
-import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
-import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
 import { PROJECTS, STORAGE_CLASSES, PODS } from '../constants';
 import { BreakdownCard } from '../components/dashboards/persistent-external/breakdown-card';
 import { dashboardData } from '../__mocks__/independent-mode-dashboard-data';
@@ -48,11 +45,11 @@ describe('BreakdownCard', () => {
   });
 
   it('Should render Card Header', () => {
-    expect(wrapper.find(DashboardCardHeader).exists()).toBe(true);
+    expect(wrapper.find(CardHeader).exists()).toBe(true);
   });
 
   it('Should render Card Title', () => {
-    expect(wrapper.find(DashboardCardTitle).exists()).toBe(true);
+    expect(wrapper.find(CardTitle).exists()).toBe(true);
   });
 
   it('Should render Dropdown', () => {
@@ -61,7 +58,7 @@ describe('BreakdownCard', () => {
   });
 
   it('Should render Card body', () => {
-    expect(wrapper.find(DashboardCardBody).exists()).toBe(true);
+    expect(wrapper.find(CardBody).exists()).toBe(true);
   });
 
   it('Should render Breakdown Card body', () => {

diff --git a/...nd/packages/ceph-storage-plugin/src/__tests__/independent-dashboard-details-card.spec.tsx b/...nd/packages/ceph-storage-plugin/src/__tests__/independent-dashboard-details-card.spec.tsx
@@ -2,8 +2,7 @@ import * as React from 'react';
 import { ShallowWrapper, shallow } from 'enzyme';
 
 import { DashboardItemProps } from '@console/internal/components/dashboard/with-dashboard-resources';
-import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
-import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
+import { CardHeader, CardTitle } from '@patternfly/react-core';
 import { DetailsCard } from '../components/dashboards/persistent-external/details-card';
 import { dashboardData } from '../__mocks__/independent-mode-dashboard-data';
 
@@ -30,11 +29,11 @@ xdescribe('DetailsCard', () => {
   });
 
   it('Should render Card Header', () => {
-    expect(wrapper.find(DashboardCardHeader).exists()).toBe(true);
+    expect(wrapper.find(CardHeader).exists()).toBe(true);
   });
 
   it('Should render Card Title', () => {
-    expect(wrapper.find(DashboardCardTitle).exists()).toBe(true);
+    expect(wrapper.find(CardTitle).exists()).toBe(true);
   });
 
   it('Should render details properly', () => {

diff --git a/...ges/ceph-storage-plugin/src/components/dashboards/block-pool/compression-details-card.tsx b/...ges/ceph-storage-plugin/src/components/dashboards/block-pool/compression-details-card.tsx
@@ -3,11 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { compose } from 'redux';
 
 import { getInstantVectorStats } from '@console/internal/components/graphs/utils';
-
-import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
-import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
-import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
-import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
+import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
 import DetailItem from '@console/shared/src/components/dashboard/details-card/DetailItem';
 import DetailsBody from '@console/shared/src/components/dashboard/details-card/DetailsBody';
 import { usePrometheusQueries } from '@console/shared/src/components/dashboard/utilization-card/prometheus-hook';
@@ -81,11 +77,11 @@ export const CompressionDetailsCard: React.FC = () => {
   };
 
   return (
-    <DashboardCard data-test-id="compression-details-card">
-      <DashboardCardHeader>
-        <DashboardCardTitle>{t('ceph-storage-plugin~Compression')}</DashboardCardTitle>
-      </DashboardCardHeader>
-      <DashboardCardBody>
+    <Card data-test-id="compression-details-card">
+      <CardHeader>
+        <CardTitle>{t('ceph-storage-plugin~Compression')}</CardTitle>
+      </CardHeader>
+      <CardBody>
         <DetailsBody>
           <DetailItem isLoading={!obj} title={t('ceph-storage-plugin~Compression status')}>
             {!compressionEnabled
@@ -106,7 +102,7 @@ export const CompressionDetailsCard: React.FC = () => {
             </div>
           </DetailsBody>
         )}
-      </DashboardCardBody>
-    </DashboardCard>
+      </CardBody>
+    </Card>
   );
 };
diff --git a/frontend/packages/ceph-storage-plugin/src/components/dashboards/block-pool/details-card.tsx b/frontend/packages/ceph-storage-plugin/src/components/dashboards/block-pool/details-card.tsx
@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
-import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
-import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
-import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
+import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
 import DetailItem from '@console/shared/src/components/dashboard/details-card/DetailItem';
 import DetailsBody from '@console/shared/src/components/dashboard/details-card/DetailsBody';
 
@@ -16,11 +13,11 @@ export const DetailsCard: React.FC = () => {
   const volumeType = obj.spec?.deviceClass?.toUpperCase() ?? '-';
 
   return (
-    <DashboardCard data-test-id="details-card">
-      <DashboardCardHeader>
-        <DashboardCardTitle>{t('ceph-storage-plugin~Details')}</DashboardCardTitle>
-      </DashboardCardHeader>
-      <DashboardCardBody>
+    <Card data-test-id="details-card">
+      <CardHeader>
+        <CardTitle>{t('ceph-storage-plugin~Details')}</CardTitle>
+      </CardHeader>
+      <CardBody>
         <DetailsBody>
           <DetailItem isLoading={!obj} title={t('ceph-storage-plugin~Pool name')}>
             {obj.metadata?.name}
@@ -32,7 +29,7 @@ export const DetailsCard: React.FC = () => {
             {obj.spec?.replicated?.size}
           </DetailItem>
         </DetailsBody>
-      </DashboardCardBody>
-    </DashboardCard>
+      </CardBody>
+    </Card>
   );
 };
diff --git a/...tend/packages/ceph-storage-plugin/src/components/dashboards/block-pool/inventory-card.tsx b/...tend/packages/ceph-storage-plugin/src/components/dashboards/block-pool/inventory-card.tsx
@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
-import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
-import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
-import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
+import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { PersistentVolumeClaimKind } from '@console/internal/module/k8s';
 import { useDeepCompareMemoize } from '@console/shared';
@@ -42,11 +39,11 @@ export const InventoryCard: React.FC = () => {
   }, [poolSc, pvcMemoized]);
 
   return (
-    <DashboardCard data-test-id="inventory-card">
-      <DashboardCardHeader>
-        <DashboardCardTitle>{t('ceph-storage-plugin~Inventory')}</DashboardCardTitle>
-      </DashboardCardHeader>
-      <DashboardCardBody>
+    <Card data-test-id="inventory-card">
+      <CardHeader>
+        <CardTitle>{t('ceph-storage-plugin~Inventory')}</CardTitle>
+      </CardHeader>
+      <CardBody>
         <ResourceInventoryItem
           dataTest="inventory-sc"
           isLoading={!scLoaded}
@@ -64,7 +61,7 @@ export const InventoryCard: React.FC = () => {
           mapper={getPVCStatusGroups}
           showLink
         />
-      </DashboardCardBody>
-    </DashboardCard>
+      </CardBody>
+    </Card>
   );
 };
diff --git a/...packages/ceph-storage-plugin/src/components/dashboards/block-pool/mirroring-card-body.tsx b/...packages/ceph-storage-plugin/src/components/dashboards/block-pool/mirroring-card-body.tsx
@@ -2,9 +2,7 @@ import * as React from 'react';
 import './mirroring-card.scss';
 
 export const MirroringCardBody: React.FC<MirroringCardBodyProps> = ({ children }) => (
-  <dl className="co-dashboard-card__body--top-margin odf-block-pool__mirroring-card-body co-dashboard-text--small">
-    {children}
-  </dl>
+  <dl className="odf-block-pool__mirroring-card-body">{children}</dl>
 );
 
 type MirroringCardBodyProps = {

diff --git a/...tend/packages/ceph-storage-plugin/src/components/dashboards/block-pool/mirroring-card.tsx b/...tend/packages/ceph-storage-plugin/src/components/dashboards/block-pool/mirroring-card.tsx
@@ -12,12 +12,13 @@ import {
   Button,
   List,
   ListItem,
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
-import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
-import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
-import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
-import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
+
 import { StoragePoolKind } from 'packages/ceph-storage-plugin/src/types';
 import { MirroringCardBody } from './mirroring-card-body';
 import { MirroringCardItem } from './mirroring-card-item';
@@ -141,11 +142,11 @@ export const MirroringCard: React.FC = () => {
     : '-';
 
   return (
-    <DashboardCard data-test-id="mirroring-card">
-      <DashboardCardHeader>
-        <DashboardCardTitle>{t('ceph-storage-plugin~Mirroring')}</DashboardCardTitle>
-      </DashboardCardHeader>
-      <DashboardCardBody>
+    <Card data-test-id="mirroring-card">
+      <CardHeader>
+        <CardTitle>{t('ceph-storage-plugin~Mirroring')}</CardTitle>
+      </CardHeader>
+      <CardBody>
         <MirroringCardBody>
           <MirroringCardItem isLoading={!obj} title={t('ceph-storage-plugin~Mirroring status')}>
             {mirroringStatus ? t('ceph-storage-plugin~Enabled') : t('ceph-storage-plugin~Disabled')}
@@ -180,8 +181,8 @@ export const MirroringCard: React.FC = () => {
             </>
           )}
         </MirroringCardBody>
-      </DashboardCardBody>
-    </DashboardCard>
+      </CardBody>
+    </Card>
   );
 };
 

diff --git a/frontend/packages/ceph-storage-plugin/src/components/dashboards/block-pool/status-card.tsx b/frontend/packages/ceph-storage-plugin/src/components/dashboards/block-pool/status-card.tsx
@@ -2,10 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Status } from '@console/shared';
-import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
-import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
-import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
-import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
+import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
 import DetailsBody from '@console/shared/src/components/dashboard/details-card/DetailsBody';
 
 import { BlockPoolDashboardContext } from './block-pool-dashboard-context';
@@ -15,15 +12,15 @@ export const StatusCard: React.FC = () => {
   const { obj } = React.useContext(BlockPoolDashboardContext);
 
   return (
-    <DashboardCard data-test-id="status-card">
-      <DashboardCardHeader>
-        <DashboardCardTitle>{t('ceph-storage-plugin~Status')}</DashboardCardTitle>
-      </DashboardCardHeader>
-      <DashboardCardBody>
+    <Card data-test-id="status-card">
+      <CardHeader>
+        <CardTitle>{t('ceph-storage-plugin~Status')}</CardTitle>
+      </CardHeader>
+      <CardBody>
         <DetailsBody>
           <Status status={obj.status?.phase} />
         </DetailsBody>
-      </DashboardCardBody>
-    </DashboardCard>
+      </CardBody>
+    </Card>
   );
 };
diff --git a/...nd/packages/ceph-storage-plugin/src/components/dashboards/block-pool/utilization-card.tsx b/...nd/packages/ceph-storage-plugin/src/components/dashboards/block-pool/utilization-card.tsx
@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
-import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
-import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
+import { Card, CardActions, CardHeader, CardTitle } from '@patternfly/react-core';
 import UtilizationBody from '@console/shared/src/components/dashboard/utilization-card/UtilizationBody';
 import { PrometheusUtilizationItem } from '@console/internal/components/dashboard/dashboards-page/cluster-dashboard/utilization-card';
 import { humanizeDecimalBytesPerSec } from '@console/internal/components/utils';
@@ -19,11 +17,13 @@ export const UtilizationCard: React.FC = () => {
   const { name } = obj.metadata;
 
   return (
-    <DashboardCard>
-      <DashboardCardHeader>
-        <DashboardCardTitle>{t('ceph-storage-plugin~Performance')}</DashboardCardTitle>
-        <UtilizationDurationDropdown />
-      </DashboardCardHeader>
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('ceph-storage-plugin~Performance')}</CardTitle>
+        <CardActions>
+          <UtilizationDurationDropdown />
+        </CardActions>
+      </CardHeader>
       <UtilizationBody>
         <PrometheusUtilizationItem
           title={t('ceph-storage-plugin~IOPS')}
@@ -39,7 +39,7 @@ export const UtilizationCard: React.FC = () => {
           humanizeValue={humanizeDecimalBytesPerSec}
         />
       </UtilizationBody>
-    </DashboardCard>
+    </Card>
   );
 };
 

diff --git a/...ages/ceph-storage-plugin/src/components/dashboards/common/capacity-card/capacity-card.tsx b/...ages/ceph-storage-plugin/src/components/dashboards/common/capacity-card/capacity-card.tsx
@@ -4,10 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { ChartDonut, ChartLabel } from '@patternfly/react-charts';
 import { global_warning_color_100 as globalWarning100 } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import { global_danger_color_100 as globalDanger100 } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import DashboardCard from '@console/shared/src/components/dashboard/dashboard-card/DashboardCard';
-import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
-import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
-import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
+import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
 import { FieldLevelHelp, humanizeBinaryBytes } from '@console/internal/components/utils';
 import {
   RedExclamationCircleIcon,
@@ -73,14 +70,14 @@ export const CapacityCard: React.FC<CapacityCardProps> = React.memo((props) => {
   ];
 
   return (
-    <DashboardCard>
-      <DashboardCardHeader>
-        <DashboardCardTitle>
+    <Card>
+      <CardHeader>
+        <CardTitle>
           {t('ceph-storage-plugin~Raw capacity')}
           <FieldLevelHelp>{description}</FieldLevelHelp>
-        </DashboardCardTitle>
-      </DashboardCardHeader>
-      <DashboardCardBody className="ceph-raw-usage__container">
+        </CardTitle>
+      </CardHeader>
+      <CardBody>
         {!loading && !loadError && (
           <>
             <div className="ceph-raw-usage__item ceph-raw-usage__legend">
@@ -121,13 +118,13 @@ export const CapacityCard: React.FC<CapacityCardProps> = React.memo((props) => {
         )}
         {loading && !loadError && <LoadingCardBody />}
         {loadError && <ErrorCardBody />}
-      </DashboardCardBody>
-    </DashboardCard>
+      </CardBody>
+    </Card>
   );
 });
 
 const LoadingCardBody: React.FC = () => (
-  <div className="ceph-raw-usage__container">
+  <div>
     <div className="ceph-raw-usage-loading__legend">
       <div className="ceph-raw-usage-loading-legend__item skeleton-activity" />
       <div className="ceph-raw-usage-loading-legend__item skeleton-activity" />