Add extra chart, test, details page, kebab actions, list page table rows

openshift · Oct 19, 2021 · 2c07d76 · 2c07d76
1 parent 5845eee
commit 2c07d76
Show file tree

Hide file tree

Showing 8 changed files with 356 additions and 83 deletions.
diff --git a/frontend/__tests__/components/resource-quota.spec.tsx b/frontend/__tests__/components/resource-quota.spec.tsx
@@ -1,6 +1,56 @@
 import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
-import { UsageIcon, ResourceUsageRow } from '../../public/components/resource-quota';
+import {
+  UsageIcon,
+  ResourceUsageRow,
+  getResourceUsage,
+} from '../../public/components/resource-quota';
+
+// We don't render ResourceUsageRows for cluster-only data, but use it in a Gauge chart
+describe('Check getResourceUsage for AppliedClusterResourceQuota', () => {
+  const quota = {
+    apiVersion: 'quota.openshift.io/v1',
+    kind: 'AppliedClusterResourceQuota',
+    metadata: { name: 'example' },
+    spec: { quota: { hard: { 'limits.cpu': '2' } } },
+    status: {
+      namespaces: [
+        {
+          namespace: 'test-namespace',
+          status: { used: { 'limits.cpu': '0' }, total: { 'limits.cpu': '2' } },
+        },
+        {
+          namespace: 'test-namespace2',
+          status: { used: { 'limits.cpu': '1' }, total: { 'limits.cpu': '2' } },
+        },
+      ],
+      total: { hard: { 'limits.cpu': '2' }, used: { 'limits.cpu': '1' } },
+    },
+  };
+
+  it('Provides correct cluster-only data', () => {
+    expect(getResourceUsage(quota, 'limits.cpu', 'test-namespace', true)).toEqual({
+      used: '1',
+      totalUsed: '1',
+      max: '2',
+      percent: 50,
+    });
+  });
+  it('Provides correct namespaced data', () => {
+    expect(getResourceUsage(quota, 'limits.cpu', 'test-namespace')).toEqual({
+      used: '0',
+      totalUsed: '1',
+      max: '2',
+      percent: 0,
+    });
+    expect(getResourceUsage(quota, 'limits.cpu', 'test-namespace2')).toEqual({
+      used: '1',
+      totalUsed: '1',
+      max: '2',
+      percent: 50,
+    });
+  });
+});
 
 describe('UsageIcon', () => {
   let wrapper: ShallowWrapper;

diff --git a/...e-shared/src/components/dashboard/resource-quota-card/AppliedClusterResourceQuotaItem.tsx b/...e-shared/src/components/dashboard/resource-quota-card/AppliedClusterResourceQuotaItem.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import { Text, TextVariants } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
 import {
   getQuotaResourceTypes,
   QuotaScopesInline,
   QuotaGaugeCharts,
 } from '@console/internal/components/resource-quota';
 import { ResourceLink } from '@console/internal/components/utils/resource-link';
 import { AppliedClusterResourceQuotaModel } from '@console/internal/models';
-import { referenceForModel, K8sResourceKind } from '@console/internal/module/k8s';
+import { referenceForModel, AppliedClusterResourceQuotaKind } from '@console/internal/module/k8s';
 
 import './resource-quota-card.scss';
 
@@ -16,7 +17,8 @@ const AppliedClusterResourceQuotaItem: React.FC<AppliedClusterResourceQuotaItemP
   namespace,
 }) => {
   const resourceTypes = getQuotaResourceTypes(resourceQuota);
-  const scopes = _.get(resourceQuota, 'spec.scopes');
+  const scopes = resourceQuota?.spec?.scopes;
+  const { t } = useTranslation();
   return (
     <>
       <div>
@@ -29,19 +31,28 @@ const AppliedClusterResourceQuotaItem: React.FC<AppliedClusterResourceQuotaItemP
         />
         {scopes && <QuotaScopesInline scopes={scopes} />}
       </div>
+      <Text component={TextVariants.h4}>{t('public~For project')}</Text>
       <QuotaGaugeCharts
         quota={resourceQuota}
         resourceTypes={resourceTypes}
         namespace={namespace}
         chartClassName="co-resource-quota-card__chart"
       />
+      <Text component={TextVariants.h4}>{t('public~Total used')}</Text>
+      <QuotaGaugeCharts
+        quota={resourceQuota}
+        resourceTypes={resourceTypes}
+        namespace={namespace}
+        chartClassName="co-resource-quota-card__chart"
+        clusterOnly
+      />
     </>
   );
 };
 
 export default AppliedClusterResourceQuotaItem;
 
 type AppliedClusterResourceQuotaItemProps = {
-  resourceQuota: K8sResourceKind;
+  resourceQuota: AppliedClusterResourceQuotaKind;
   namespace: string;
 };
diff --git a/frontend/public/components/dashboard/project-dashboard/resource-quota-card.tsx b/frontend/public/components/dashboard/project-dashboard/resource-quota-card.tsx
@@ -10,7 +10,7 @@ import ResourceQuotaBody from '@console/shared/src/components/dashboard/resource
 import ResourceQuotaItem from '@console/shared/src/components/dashboard/resource-quota-card/ResourceQuotaItem';
 import AppliedClusterResourceQuotaItem from '@console/shared/src/components/dashboard/resource-quota-card/AppliedClusterResourceQuotaItem';
 import { getQuotaResourceTypes, hasComputeResources } from '../../resource-quota';
-import { FirehoseResult } from '../../utils';
+import { FirehoseResult, FirehoseResource } from '../../utils';
 import { AppliedClusterResourceQuotaModel, ResourceQuotaModel } from '../../../models';
 import { withDashboardResources, DashboardItemProps } from '../with-dashboard-resources';
 import { ProjectDashboardContext } from './project-dashboard-context';
@@ -23,7 +23,7 @@ const getResourceQuota = (namespace: string) => ({
   prop: 'resourceQuotas',
 });
 
-const getAppliedClusterResourceQuota = (namespace: string) => ({
+const getAppliedClusterResourceQuota = (namespace: string): FirehoseResource => ({
   kind: referenceForModel(AppliedClusterResourceQuotaModel),
   namespace,
   isList: true,

diff --git a/frontend/public/components/resource-pages.ts b/frontend/public/components/resource-pages.ts
@@ -278,7 +278,7 @@ export const baseDetailsPages = ImmutableMap<ResourceMapKey, ResourceMapValue>()
   )
   .set(referenceForModel(AppliedClusterResourceQuotaModel), () =>
     import('./resource-quota' /* webpackChunkName: "resource-quota" */).then(
-      (m) => m.ResourceQuotasDetailsPage,
+      (m) => m.AppliedClusterResourceQuotasDetailsPage,
     ),
   )
   .set(referenceForModel(LimitRangeModel), () =>