CONSOLE-3899: Add Node CSR handling (#13493)

* CONSOLE-3899: Add Node CSR handling

* fixup! CONSOLE-3899: Add Node CSR handling

* fixup! fixup! CONSOLE-3899: Add Node CSR handling

* fixup! fixup! fixup! CONSOLE-3899: Add Node CSR handling

Author: rawagner

frontend/packages/console-app/console-extensions.json

@@ -1794,5 +1794,31 @@
         }
       }
     }
+  },
+  {
+    "type": "console.node/status",
+    "properties": {
+      "title": "%console-app~Scheduling disabled%",
+      "PopoverContent": { "$codeRef": "nodeStatus.MarkAsSchedulablePopover" },
+      "isActive": { "$codeRef": "nodeStatus.isUnschedulableActive" }
+    }
+  },
+  {
+    "type": "console.node/status",
+    "properties": {
+      "title": "%console-app~Approval required%",
+      "PopoverContent": { "$codeRef": "nodeStatus.ServerCSRPopoverContent" },
+      "isActive": { "$codeRef": "nodeStatus.isCSRActive" },
+      "resources": {
+        "csrs": {
+          "groupVersionKind": {
+            "group": "certificates.k8s.io",
+            "kind": "CertificateSigningRequest",
+            "version": "v1"
+          },
+          "isList": true
+        }
+      }
+    }
   }
 ]

frontend/packages/console-app/locales/en/console-app.json

@@ -165,6 +165,8 @@
   "Default filesystem type to request": "Default filesystem type to request",
   "Name of the secret to use for obtaining the StorageOS API credentials": "Name of the secret to use for obtaining the StorageOS API credentials",
   "Namespace where the API configuration secret is located": "Namespace where the API configuration secret is located",
+  "Scheduling disabled": "Scheduling disabled",
+  "Approval required": "Approval required",
   "Delete {{kind}}": "Delete {{kind}}",
   "Edit {{kind}}": "Edit {{kind}}",
   "Edit labels": "Edit labels",
@@ -422,13 +424,20 @@
   "{{formattedCores}} cores / {{totalCores}} cores": "{{formattedCores}} cores / {{totalCores}} cores",
   "Ready": "Ready",
   "Not Ready": "Not Ready",
+  "Discovered": "Discovered",
   "control-plane": "control-plane",
   "worker": "worker",
+  "Node status": "Node status",
   "This node's {{conditionDescription}}. Performance may be degraded.": "This node's {{conditionDescription}}. Performance may be degraded.",
   "<0>To use host binaries, run <1>chroot /host</1></0>": "<0>To use host binaries, run <1>chroot /host</1></0>",
   "The debug pod failed. ": "The debug pod failed. ",
+  "This node has requested to join the cluster. After approving its certificate signing request the node will begin running workloads.": "This node has requested to join the cluster. After approving its certificate signing request the node will begin running workloads.",
+  "This node has a pending server certificate signing request. Approve the request to enable all networking functionality on this node.": "This node has a pending server certificate signing request. Approve the request to enable all networking functionality on this node.",
+  "Request": "Request",
+  "Approve": "Approve",
+  "Deny": "Deny",
+  "Certificate approval required": "Certificate approval required",
   "An error occurred. Please try again": "An error occurred. Please try again",
-  "Scheduling disabled": "Scheduling disabled",
   "No new Pods or workloads will be placed on this Node until it's marked as schedulable.": "No new Pods or workloads will be placed on this Node until it's marked as schedulable.",
   "Mark as schedulable": "Mark as schedulable",
   "Min available {{minAvailable}} of {{count}} pod_one": "Min available {{minAvailable}} of {{count}} pod",

frontend/packages/console-app/package.json

@@ -46,7 +46,8 @@
       "perspectiveConfiguration": "src/components/detect-perspective/PerspectiveConfiguration.tsx",
       "dynamicPluginsHealthResource": "src/components/dashboards-page/dynamic-plugins-health-resource",
       "storageProvisioners": "src/components/storage/StorageClassProviders",
-      "storageProvisionerDocs": "src/components/storage/Documentation"
+      "storageProvisionerDocs": "src/components/storage/Documentation",
+      "nodeStatus": "src/components/nodes/status"
     }
   }
 }

frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx

@@ -24,7 +24,6 @@ import {
 import NodeUptime from './node-dashboard/NodeUptime';
 import NodeIPList from './NodeIPList';
 import NodeStatus from './NodeStatus';
-import MarkAsSchedulablePopover from './popovers/MarkAsSchedulablePopover';
 
 type NodeDetailsOverviewProps = {
   node: NodeKind;
@@ -52,11 +51,7 @@ const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
             <dd>{node.metadata.name || '-'}</dd>
             <dt>{t('console-app~Status')}</dt>
             <dd>
-              {!node.spec.unschedulable ? (
-                <NodeStatus node={node} showPopovers />
-              ) : (
-                <MarkAsSchedulablePopover node={node} />
-              )}
+              <NodeStatus node={node} />
             </dd>
             <dt>{t('console-app~External ID')}</dt>
             <dd>{_.get(node, 'spec.externalID', '-')}</dd>

frontend/packages/console-app/src/components/nodes/NodeStatus.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
+import { PopoverStatus, NodeStatus } from '@console/dynamic-plugin-sdk';
 import { humanizeBinaryBytes, humanizeNumber } from '@console/internal/components/utils';
 import { NodeKind } from '@console/internal/module/k8s';
-import {
-  getNodeSecondaryStatus,
-  NodeUnschedulableStatus,
-  Status,
-  SecondaryStatus,
-} from '@console/shared';
+import { Status, SecondaryStatus } from '@console/shared';
 import ConsumerPopover from '@console/shared/src/components/dashboard/utilization-card/TopConsumerPopover';
+import { ErrorBoundary } from '@console/shared/src/components/error';
 import { PressureQueries, Condition } from '../../queries';
 import { nodeStatus } from '../../status/node';
+import { GetNodeStatusExtensions, useNodeStatusExtensions } from './useNodeStatusExtensions';
 
 const conditionDescriptionMap = Object.freeze({
   [Condition.DISK_PRESSURE]: 'available disk capacity is low',
@@ -34,40 +33,75 @@ const getDegradedStates = (node: NodeKind): Condition[] => {
     .map(({ type }) => type as Condition);
 };
 
-const NodeStatus: React.FC<NodeStatusProps> = ({ node, showPopovers = false, className }) => {
-  const status = showPopovers ? getDegradedStates(node) : [];
+type NodeStatusWithExtensionsProps = {
+  node: NodeKind;
+  statusExtensions: GetNodeStatusExtensions;
+  className?: string;
+};
+
+export const NodeStatusWithExtensions: React.FC<NodeStatusWithExtensionsProps> = ({
+  node,
+  className,
+  statusExtensions,
+}) => {
   const { t } = useTranslation();
+
+  const { popoverContent, secondaryStatuses } = React.useMemo(() => statusExtensions(node), [
+    statusExtensions,
+    node,
+  ]);
+
+  const mainStatus = <Status status={nodeStatus(node)} className={className} />;
+
   return (
     <>
-      {!node.spec.unschedulable ? (
-        <Status status={nodeStatus(node)} className={className} />
+      {popoverContent.length ? (
+        <PopoverStatus title={t('console-app~Node status')} statusBody={mainStatus}>
+          <Stack>
+            {popoverContent.map(({ content, uid }) => (
+              <ErrorBoundary key={uid}>
+                <StackItem>{content}</StackItem>
+              </ErrorBoundary>
+            ))}
+          </Stack>
+        </PopoverStatus>
       ) : (
-        <NodeUnschedulableStatus status={nodeStatus(node)} className={className} />
+        mainStatus
       )}
-      <SecondaryStatus status={getNodeSecondaryStatus(node)} />
-      {status.length > 0 &&
-        status.map((item) => (
-          <div key={item}>
-            <ConsumerPopover
-              title={_.startCase(item)}
-              current={_.startCase(item)}
-              consumers={PressureQueries[item](node.metadata.name)}
-              humanize={humanizeMap[item]}
-              description={t(
-                "console-app~This node's {{conditionDescription}}. Performance may be degraded.",
-                { conditionDescription: conditionDescriptionMap[item] },
-              )}
-            />
-          </div>
-        ))}
+      <SecondaryStatus status={secondaryStatuses} />
+      {getDegradedStates(node)?.map((item) => (
+        <div key={item}>
+          <ConsumerPopover
+            title={_.startCase(item)}
+            current={_.startCase(item)}
+            consumers={PressureQueries[item](node.metadata.name)}
+            humanize={humanizeMap[item]}
+            description={t(
+              "console-app~This node's {{conditionDescription}}. Performance may be degraded.",
+              { conditionDescription: conditionDescriptionMap[item] },
+            )}
+          />
+        </div>
+      ))}
     </>
   );
 };
 
 type NodeStatusProps = {
   node: NodeKind;
-  showPopovers?: boolean;
   className?: string;
 };
 
+const NodeStatus: React.FC<NodeStatusProps> = ({ node, className }) => {
+  const statusExtensions = useNodeStatusExtensions();
+
+  return (
+    <NodeStatusWithExtensions
+      node={node}
+      className={className}
+      statusExtensions={statusExtensions}
+    />
+  );
+};
+
 export default NodeStatus;