Merge pull request openshift#11563 from sg00dwin/node-label-edit-bug

Bug 2085407: Update Node details page to include inline edit labels button
gkarat · Jun 7, 2022 · b26e094 · b26e094
2 parents 4ed47fa + 50d500f
commit b26e094
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/frontend/packages/console-app/locales/en/console-app.json b/frontend/packages/console-app/locales/en/console-app.json
@@ -311,7 +311,7 @@
  "Changed": "Changed",
  "Node details": "Node details",
  "External ID": "External ID",
- "Node labels": "Node labels",
+ "Labels": "Labels",
  "Taints": "Taints",
  "Taint": "Taint",
  "Taint_plural": "Taints",
@@ -330,7 +330,6 @@
  "Container runtime": "Container runtime",
  "Kubelet version": "Kubelet version",
  "Kube-Proxy version": "Kube-Proxy version",
- "Labels": "Labels",
  "{{formattedCores}} cores / {{totalCores}} cores": "{{formattedCores}} cores / {{totalCores}} cores",
  "Ready": "Ready",
  "Not Ready": "Not Ready",

diff --git a/frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx b/frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx
@@ -13,6 +13,8 @@ import {
  cloudProviderID,
  Timestamp,
 } from '@console/internal/components/utils';
+import { DetailsItem } from '@console/internal/components/utils/details-item';
+import { editLabelsModal } from '@console/internal/components/utils/details-page';
 import { NodeModel, MachineModel } from '@console/internal/models';
 import { NodeKind, referenceForModel } from '@console/internal/module/k8s';
 import { getNodeMachineNameAndNamespace, getNodeAddresses } from '@console/shared';
@@ -57,10 +59,17 @@ const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
  <dd>
  <NodeIPList ips={getNodeAddresses(node)} expand />
  </dd>
- <dt>{t('console-app~Node labels')}</dt>
- <dd>
+ <DetailsItem
+ label={t('console-app~Labels')}
+ obj={node}
+ path="metadata.labels"
+ valueClassName="details-item__value--labels"
+ onEdit={(e) => editLabelsModal(e, { resource: node, kind: NodeModel })}
+ canEdit={canUpdate}
+ editAsGroup
+ >
  <LabelList kind="Node" labels={node.metadata.labels} />
- </dd>
+ </DetailsItem>
  <dt>{t('console-app~Taints')}</dt>
  <dd>
  {canUpdate ? (

diff --git a/frontend/public/components/utils/details-page.tsx b/frontend/public/components/utils/details-page.tsx
@@ -23,7 +23,7 @@ import {
 } from '../../module/k8s';
 import { configureClusterUpstreamModal, labelsModal } from '../modals';
 
-const editLabelsModal = (e, props) => {
+export const editLabelsModal = (e, props) => {
  e.preventDefault();
  labelsModal(props);
 };