Add new cluster utilization item extension

djzager · Dec 17, 2021 · f4482e4 · f4482e4
1 parent f2a1734
commit f4482e4
Show file tree

Hide file tree

Showing 20 changed files with 790 additions and 648 deletions.
diff --git a/dynamic-demo-plugin/console-extensions.json b/dynamic-demo-plugin/console-extensions.json
@@ -267,5 +267,21 @@
  "properties": {
  "component": { "$codeRef": "clusterInventoryOverview.default" }
  }
+ },
+ {
+ "type": "console.cluster-overview/utilization-item",
+ "properties": {
+ "title": "%plugin__console-demo-plugin~Foo item%",
+ "getUtilizationQuery": { "$codeRef": "clusterOverview.getUtilizationQuery" },
+ "humanize": { "$codeRef": "clusterOverview.humanize" }
+ }
+ },
+ {
+ "type": "console.cluster-overview/multiline-utilization-item",
+ "properties": {
+ "title": "%plugin__console-demo-plugin~Bar item%",
+ "getUtilizationQueries": { "$codeRef": "clusterOverview.getUtilizationQueries" },
+ "humanize": { "$codeRef": "clusterOverview.humanize" }
+ }
  }
 ]
diff --git a/dynamic-demo-plugin/locales/en/plugin__console-demo-plugin.json b/dynamic-demo-plugin/locales/en/plugin__console-demo-plugin.json
@@ -29,6 +29,8 @@
  "Dynamic Nav 2": "Dynamic Nav 2",
  "Test Consumer": "Test Consumer",
  "Test Utilities": "Test Utilities",
+ "Foo item": "Foo item",
+ "Bar item": "Bar item",
  "Dynamic Page 1": "Dynamic Page 1",
  "Dynamic Page 2": "Dynamic Page 2"
 }
diff --git a/dynamic-demo-plugin/package.json b/dynamic-demo-plugin/package.json
@@ -54,7 +54,8 @@
  "K8sAPIConsumer": "./components/k8sConsumer/K8sAPIConsumer",
  "navPage": "./components/Nav",
  "listPage": "./components/ListPage",
- "clusterInventoryOverview": "./components/ClusterOverview/Inventory"
+ "clusterInventoryOverview": "./components/ClusterOverview/Inventory",
+ "clusterOverview": "./utils/cluster-overview"
  },
  "dependencies": {
  "@console/pluginAPI": "*"

diff --git a/dynamic-demo-plugin/src/i18n.ts b/dynamic-demo-plugin/src/i18n.ts
@@ -10,3 +10,5 @@
 // t('plugin__console-demo-plugin~Dynamic Nav 2')
 // t('plugin__console-demo-plugin~Test Consumer')
 // t('plugin__console-demo-plugin~Test Utilities')
+// t('plugin__console-demo-plugin~Foo item')
+// t('plugin__console-demo-plugin~Bar item')
diff --git a/dynamic-demo-plugin/src/utils/cluster-overview.ts b/dynamic-demo-plugin/src/utils/cluster-overview.ts
@@ -0,0 +1,54 @@
+import { GetMultilineQueries, GetQuery, Humanize } from '@openshift-console/dynamic-plugin-sdk';
+
+export const getUtilizationQuery: GetQuery = (nodeTypes) =>
+ `
+ sum(
+ (
+ 1 - rate(node_cpu_seconds_total{mode="idle"}[2m])
+ *
+ on(namespace, pod) group_left(node) node_namespace_pod:kube_pod_info:{pod=~"node-exporter.+"}
+ )
+ *
+ on(node) group_left(role) (
+ max by (node) (kube_node_role{role=~"${nodeTypes?.length ? nodeTypes.join('|') : '.+'}"})
+ )
+ )
+ `;
+
+export const getUtilizationQueries: GetMultilineQueries = (nodeTypes) => [
+ {
+ query: 
+ `
+ sum(
+ instance:node_network_receive_bytes_excluding_lo:rate1m
+ *
+ on(instance) group_left(role) (
+ label_replace(max by (node) (kube_node_role{role=~"${nodeTypes?.length ? nodeTypes.join('|') : '.+'}"}), "instance", "$1", "node", "(.*)")
+ )
+ )
+ `,
+ desc: 'desc1',
+ },
+ {
+ query:
+ `
+ sum(
+ instance:node_network_transmit_bytes_excluding_lo:rate1m
+ *
+ on(instance) group_left(role) (
+ label_replace(max by (node) (kube_node_role{role=~"${nodeTypes?.length ? nodeTypes.join('|') : '.+'}"}), "instance", "$1", "node", "(.*)")
+ )
+ )
+ `,
+ desc: 'desc2',
+ },
+];
+
+export const humanize: Humanize = (val) => {
+ const value = Number.parseInt(`${val}`);
+ return {
+ string: `${value}`,
+ unit: '',
+ value,
+ };
+};
diff --git a/...lugin/src/components/dashboards/persistent-internal/utilization-card/utilization-item.tsx b/...lugin/src/components/dashboards/persistent-internal/utilization-card/utilization-item.tsx
@@ -9,7 +9,7 @@ import {
  RedExclamationCircleIcon,
  ColoredIconProps,
 } from '@console/shared/src/components/status';
-import { TopConsumerPopoverProp } from '@console/dynamic-plugin-sdk/src/api/internal-types';
+import { TopConsumerPopoverProps } from '@console/dynamic-plugin-sdk';
 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
 import { AreaChart } from './area-chart';
@@ -144,7 +144,6 @@ export const UtilizationItem: React.FC<UtilizationItemProps> = React.memo(
  {TopConsumerPopover ? (
  <TopConsumerPopover
  current={currentHumanized}
- max={humanMax}
  limit={latestLimit ? humanizeValue(latestLimit).string : null}
  requested={latestRequested ? humanizeValue(latestRequested).string : null}
  available={humanAvailable}
@@ -213,6 +212,6 @@ type UtilizationItemProps = {
  error: boolean;
  max?: number;
  byteDataType?: ByteDataTypes;
- TopConsumerPopover?: React.ComponentType<TopConsumerPopoverProp>;
+ TopConsumerPopover?: React.ComponentType<TopConsumerPopoverProps>;
  setLimitReqState?: (state: { limit: LIMIT_STATE; requested: LIMIT_STATE }) => void;
 };
diff --git a/frontend/packages/console-app/src/components/nodes/node-dashboard/NodeAlerts.tsx b/frontend/packages/console-app/src/components/nodes/node-dashboard/NodeAlerts.tsx
@@ -7,16 +7,8 @@ import {
  getResourceQutoaQueries,
  NodeQueries,
 } from '@console/app/src/components/nodes/node-dashboard/queries';
-import {
- CPUPopover,
- PopoverProps,
- MemoryPopover,
-} from '@console/app/src/components/nodes/node-dashboard/UtilizationCard';
-import {
- humanizeCpuCores,
- humanizeBinaryBytes,
- Humanize,
-} from '@console/internal/components/utils';
+import { LIMIT_STATE, Humanize } from '@console/dynamic-plugin-sdk';
+import { humanizeCpuCores, humanizeBinaryBytes } from '@console/internal/components/utils';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { MachineModel } from '@console/internal/models';
 import {
@@ -27,10 +19,7 @@ import {
 import { StatusItem } from '@console/shared/src/components/dashboard/status-card/AlertItem';
 import AlertsBody from '@console/shared/src/components/dashboard/status-card/AlertsBody';
 import { usePrometheusQuery } from '@console/shared/src/components/dashboard/utilization-card/prometheus-hook';
-import {
- LIMIT_STATE,
- LimitRequested,
-} from '@console/shared/src/components/dashboard/utilization-card/UtilizationItem';
+import { LimitRequested } from '@console/shared/src/components/dashboard/utilization-card/UtilizationItem';
 import {
  YellowResourcesAlmostFullIcon,
  RedResourcesFullIcon,
@@ -42,6 +31,12 @@ import {
 } from '@console/shared/src/selectors/node';
 import * as msg from './messages';
 import { getMachineHealth, HealthChecksPopup, machineHealthChecksResource } from './NodeHealth';
+import {
+ CPUPopover,
+ MemoryPopover,
+ NodeUtilizationContext,
+ PopoverProps,
+} from './utilization-popovers';
 
 const LimitLink: React.FC<LimitLinkProps> = ({
  humanize,
@@ -55,10 +50,10 @@ const LimitLink: React.FC<LimitLinkProps> = ({
 }) => {
  const { obj } = React.useContext(NodeDashboardContext);
  const nodeName = obj.metadata.name;
- const nodeIp = getNodeAddresses(obj).find((addr) => addr.type === 'InternalIP')?.address;
+ const nodeIP = getNodeAddresses(obj).find((addr) => addr.type === 'InternalIP')?.address;
  const [queries, resourceQuotaQueries] = React.useMemo(
- () => [getUtilizationQueries(nodeName, nodeIp), getResourceQutoaQueries(nodeName)],
- [nodeIp, nodeName],
+ () => [getUtilizationQueries(nodeName, nodeIP), getResourceQutoaQueries(nodeName)],
+ [nodeIP, nodeName],
  );
  const [current, currentError, currentValue] = usePrometheusQuery(queries[currentKey], humanize);
  const [total, totalError, totalValue] = usePrometheusQuery(queries[totalKey], humanize);
@@ -74,19 +69,19 @@ const LimitLink: React.FC<LimitLinkProps> = ({
  : t('console-app~Not available');
 
  return (
- <Popover
- title={t('console-app~See breakdown')}
- nodeName={nodeName}
- nodeIp={nodeIp}
- current={currentError ? t('console-app~Not available') : current.string}
- total={totalError ? t('console-app~Not available') : total.string}
- limit={limitError ? t('console-app~Not available') : limit.string}
- requested={requestedError ? t('console-app~Not available') : requested.string}
- available={available}
- limitState={limitState}
- requestedState={requestedState}
- position={PopoverPosition.right}
- />
+ <NodeUtilizationContext.Provider value={{ nodeName, nodeIP }}>
+ <Popover
+  title={t('console-app~See breakdown')}
+  current={currentError ? t('console-app~Not available') : current.string}
+  total={totalError ? t('console-app~Not available') : total.string}
+  limit={limitError ? t('console-app~Not available') : limit.string}
+  requested={requestedError ? t('console-app~Not available') : requested.string}
+  available={available}
+  limitState={limitState}
+  requestedState={requestedState}
+  position={PopoverPosition.right}
+ />
+ </NodeUtilizationContext.Provider>
  );
 };