Address PR feedback

frontend/packages/console-shared/src/components/dashboard/resource-quota-card/AppliedClusterResourceQuotaItem.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+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 './resource-quota-card.scss';
+
+const AppliedClusterResourceQuotaItem: React.FC<AppliedClusterResourceQuotaItemProps> = ({
+  resourceQuota,
+  namespace,
+}) => {
+  const resourceTypes = getQuotaResourceTypes(resourceQuota);
+  const scopes = _.get(resourceQuota, 'spec.scopes');
+  return (
+    <>
+      <div>
+        <ResourceLink
+          kind={referenceForModel(AppliedClusterResourceQuotaModel)}
+          name={resourceQuota.metadata.name}
+          className="co-resource-item--truncate co-resource-quota-card__item-title"
+          namespace={namespace}
+          inline
+        />
+        {scopes && <QuotaScopesInline scopes={scopes} />}
+      </div>
+      <QuotaGaugeCharts
+        quota={resourceQuota}
+        resourceTypes={resourceTypes}
+        namespace={namespace}
+        chartClassName="co-resource-quota-card__chart"
+      />
+    </>
+  );
+};
+
+export default AppliedClusterResourceQuotaItem;
+
+type AppliedClusterResourceQuotaItemProps = {
+  resourceQuota: K8sResourceKind;
+  namespace: string;
+};

frontend/public/components/dashboard/project-dashboard/inventory-card.tsx

@@ -7,7 +7,6 @@ import DashboardCardBody from '@console/shared/src/components/dashboard/dashboar
 import DashboardCardHeader from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardHeader';
 import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
 import {
-  AppliedClusterResourceQuotaModel,
   PodModel,
   DeploymentModel,
   DeploymentConfigModel,
@@ -164,7 +163,6 @@ export const InventoryCard = () => {
         <ProjectInventoryItem projectName={projectName} model={RouteModel} />
         <ProjectInventoryItem projectName={projectName} model={ConfigMapModel} />
         {canListSecrets && <ProjectInventoryItem projectName={projectName} model={SecretModel} />}
-        <ProjectInventoryItem projectName={projectName} model={AppliedClusterResourceQuotaModel} />
         {itemExtensions.map((item) => (
           <ProjectInventoryItem
             key={item.properties.model.kind}

frontend/public/components/dashboard/project-dashboard/resource-quota-card.tsx

@@ -8,11 +8,13 @@ import DashboardCardHeader from '@console/shared/src/components/dashboard/dashbo
 import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardTitle';
 import ResourceQuotaBody from '@console/shared/src/components/dashboard/resource-quota-card/ResourceQuotaBody';
 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 { ResourceQuotaModel } from '../../../models';
+import { AppliedClusterResourceQuotaModel, ResourceQuotaModel } from '../../../models';
 import { withDashboardResources, DashboardItemProps } from '../with-dashboard-resources';
 import { ProjectDashboardContext } from './project-dashboard-context';
+import { referenceForModel } from '../../../module/k8s';
 
 const getResourceQuota = (namespace: string) => ({
   kind: ResourceQuotaModel.kind,
@@ -21,6 +23,13 @@ const getResourceQuota = (namespace: string) => ({
   prop: 'resourceQuotas',
 });
 
+const getAppliedClusterResourceQuota = (namespace: string) => ({
+  kind: referenceForModel(AppliedClusterResourceQuotaModel),
+  namespace,
+  isList: true,
+  prop: 'appliedClusterResourceQuotas',
+});
+
 export const ResourceQuotaCard = withDashboardResources(
   ({ watchK8sResource, stopWatchK8sResource, resources }: DashboardItemProps) => {
     const { obj } = React.useContext(ProjectDashboardContext);
@@ -29,10 +38,24 @@ export const ResourceQuotaCard = withDashboardResources(
       watchK8sResource(resourceQuota);
       return () => stopWatchK8sResource(resourceQuota);
     }, [obj.metadata.name, watchK8sResource, stopWatchK8sResource]);
+    React.useEffect(() => {
+      const appliedClusterResourceQuota = getAppliedClusterResourceQuota(obj.metadata.name);
+      watchK8sResource(appliedClusterResourceQuota);
+      return () => stopWatchK8sResource(appliedClusterResourceQuota);
+    }, [obj.metadata.name, watchK8sResource, stopWatchK8sResource]);
 
     const quotas = _.get(resources.resourceQuotas, 'data', []) as FirehoseResult['data'];
-    const loaded = _.get(resources.resourceQuotas, 'loaded');
-    const error = _.get(resources.resourceQuotas, 'loadError');
+    const clusterQuotas = _.get(
+      resources.appliedClusterResourceQuotas,
+      'data',
+      [],
+    ) as FirehoseResult['data'];
+    const loaded =
+      _.get(resources.resourceQuotas, 'loaded') &&
+      _.get(resources.appliedClusterResourceQuotas, 'loaded');
+    const error =
+      _.get(resources.resourceQuotas, 'loadError') ||
+      _.get(resources.appliedClusterResourceQuotas, 'loadError');
     const { t } = useTranslation();
 
     return (
@@ -47,6 +70,16 @@ export const ResourceQuotaCard = withDashboardResources(
               .map((rq) => (
                 <ResourceQuotaItem key={rq.metadata.uid} resourceQuota={rq} />
               ))}
+            {clusterQuotas &&
+              clusterQuotas
+                .filter((rq) => hasComputeResources(getQuotaResourceTypes(rq)))
+                .map((rq) => (
+                  <AppliedClusterResourceQuotaItem
+                    key={rq.metadata.uid}
+                    resourceQuota={rq}
+                    namespace={obj.metadata.name}
+                  />
+                ))}
           </ResourceQuotaBody>
         </DashboardCardBody>
       </DashboardCard>

frontend/public/components/default-resource.tsx

@@ -8,7 +8,6 @@ import { Conditions } from './conditions';
 import { DetailsPage, ListPage, Table, TableData, TableProps, RowFunctionArgs } from './factory';
 import {
   referenceFor,
-  referenceForModel,
   kindForReference,
   K8sResourceKind,
   modelFor,
@@ -24,7 +23,6 @@ import {
   SectionHeading,
   Timestamp,
 } from './utils';
-import { AppliedClusterResourceQuotaModel } from '../models';
 
 const { common } = Kebab.factory;
 
@@ -72,12 +70,10 @@ export const DetailsForKind = (
     );
   };
 
-export const DefaultList: React.FC<TableProps & { kinds: string[] } & { namespace: string }> = (
-  props,
-) => {
+export const DefaultList: React.FC<TableProps & { kinds: string[] }> = (props) => {
   const { t } = useTranslation();
 
-  const { kinds, namespace } = props;
+  const { kinds } = props;
 
   const TableHeader = () => {
     return [
@@ -136,36 +132,6 @@ export const DefaultList: React.FC<TableProps & { kinds: string[] } & { namespac
     );
   };
 
-  const TableRowForACRQ: React.FC<RowFunctionArgs<K8sResourceKind>> = ({ obj, customData }) => {
-    const kind = referenceFor(obj) || customData.kind;
-    const menuActions = [...Kebab.getExtensionsActionsForKind(kindObj(kind)), ...common];
-
-    return (
-      <>
-        <TableData className={tableColumnClasses[0]}>
-          <ResourceLink
-            kind={customData.kind}
-            name={obj.metadata.name}
-            namespace={customData.namespace}
-          />
-        </TableData>
-        <TableData className={classNames(tableColumnClasses[1], 'co-break-word')}>
-          {customData.namespace ? (
-            <ResourceLink kind="Namespace" name={customData.namespace} />
-          ) : (
-            t('public~None')
-          )}
-        </TableData>
-        <TableData className={tableColumnClasses[2]}>
-          <Timestamp timestamp={obj.metadata.creationTimestamp} />
-        </TableData>
-        <TableData className={tableColumnClasses[3]}>
-          <ResourceKebab actions={menuActions} kind={kind} resource={obj} />
-        </TableData>
-      </>
-    );
-  };
-
   const getAriaLabel = (item) => {
     const model = modelFor(item);
     // API discovery happens asynchronously. Avoid runtime errors if the model hasn't loaded.
@@ -182,26 +148,7 @@ export const DefaultList: React.FC<TableProps & { kinds: string[] } & { namespac
     [kinds],
   );
 
-  const customDataForACRQ = React.useMemo(
-    () => ({
-      kind: kinds[0],
-      namespace,
-    }),
-    [kinds, namespace],
-  );
-
-  const appliedClusterQuotaReference = referenceForModel(AppliedClusterResourceQuotaModel);
-  const isACRQ = kinds[0] === appliedClusterQuotaReference;
-  return isACRQ ? (
-    <Table
-      {...props}
-      aria-label={getAriaLabel(kinds[0])}
-      customData={customDataForACRQ}
-      Header={TableHeader}
-      Row={TableRowForACRQ}
-      virtualize
-    />
-  ) : (
+  return (
     <Table
       {...props}
       aria-label={getAriaLabel(kinds[0])}
@@ -229,5 +176,4 @@ export const DefaultDetailsPage: React.FC<React.ComponentProps<typeof DetailsPag
 
   return <DetailsPage {...props} menuActions={menuActions} pages={pages} />;
 };
-
 DefaultDetailsPage.displayName = 'DefaultDetailsPage';

frontend/public/components/resource-pages.ts

@@ -525,6 +525,11 @@ export const baseListPages = ImmutableMap<ResourceMapKey, ResourceMapValue>()
       (m) => m.ResourceQuotasPage,
     ),
   )
+  .set(referenceForModel(AppliedClusterResourceQuotaModel), () =>
+    import('./resource-quota' /* webpackChunkName: "resource-quota" */).then(
+      (m) => m.AppliedClusterResourceQuotasPage,
+    ),
+  )
   .set(referenceForModel(LimitRangeModel), () =>
     import('./limit-range' /* webpackChunkName: "limit-range" */).then((m) => m.LimitRangeListPage),
   )