Merge pull request #2172 from metalice/CNV-45539-fix-migration-table-…

…column-managment CNV-45539: Fix migration table column managment
kubevirt-ui · Sep 11, 2024 · cd95353 · cd95353
2 parents a667505 + 7a025ca
commit cd95353
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 68 deletions.
diff --git a/src/views/clusteroverview/MigrationsTab/components/MigrationsTable/MigrationsRow.tsx b/src/views/clusteroverview/MigrationsTab/components/MigrationsTable/MigrationsRow.tsx
@@ -1,12 +1,14 @@
-import * as React from 'react';
+import React, { FC } from 'react';
 
 import {
   modelToGroupVersionKind,
+  NamespaceModel,
   NodeModel,
   VirtualMachineInstanceMigrationModelGroupVersionKind,
   VirtualMachineModelGroupVersionKind,
 } from '@kubevirt-ui/kubevirt-api/console';
 import Timestamp from '@kubevirt-utils/components/Timestamp/Timestamp';
+import { getName, getNamespace } from '@kubevirt-utils/resources/shared';
 import { NO_DATA_DASH } from '@kubevirt-utils/resources/vm/utils/constants';
 import { vmimStatuses } from '@kubevirt-utils/resources/vmim/statuses';
 import {
@@ -22,16 +24,26 @@ import { iconMapper } from './utils/statuses';
 import { MigrationTableDataLayout } from './utils/utils';
 import MigrationActionsDropdown from './MigrationActionsDropdown';
 
-const MigrationsRow: React.FC<RowProps<MigrationTableDataLayout>> = ({ activeColumnIDs, obj }) => {
+const MigrationsRow: FC<RowProps<MigrationTableDataLayout>> = ({ activeColumnIDs, obj }) => {
   const StatusIcon = iconMapper?.[obj?.vmim?.status?.phase];
 
   return (
     <>
       <TableData activeColumnIDs={activeColumnIDs} id="vm-name">
         <ResourceLink
           groupVersionKind={VirtualMachineModelGroupVersionKind}
-          name={obj?.vmiObj?.metadata?.name}
-          namespace={obj?.vmiObj?.metadata?.namespace}
+          name={getName(obj.vmiObj)}
+          namespace={getNamespace(obj.vmiObj)}
+        />
+      </TableData>
+      <TableData
+        activeColumnIDs={activeColumnIDs}
+        className="pf-m-width-10 vm-column"
+        id="namespace"
+      >
+        <ResourceLink
+          groupVersionKind={modelToGroupVersionKind(NamespaceModel)}
+          name={getNamespace(obj.vmiObj)}
         />
       </TableData>
       <TableData activeColumnIDs={activeColumnIDs} id="status">

diff --git a/src/views/clusteroverview/MigrationsTab/components/MigrationsTable/MigrationsTable.tsx b/src/views/clusteroverview/MigrationsTab/components/MigrationsTable/MigrationsTable.tsx
@@ -1,12 +1,9 @@
-import * as React from 'react';
+import React, { FC } from 'react';
 
 import { VirtualMachineInstanceMigrationModelRef } from '@kubevirt-ui/kubevirt-api/console';
+import ListPageFilter from '@kubevirt-utils/components/ListPageFilter/ListPageFilter';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import {
-  ListPageBody,
-  ListPageFilter,
-  VirtualizedTable,
-} from '@openshift-console/dynamic-plugin-sdk';
+import { ListPageBody, VirtualizedTable } from '@openshift-console/dynamic-plugin-sdk';
 import { Bullseye } from '@patternfly/react-core';
 
 import { UseMigrationCardDataAndFiltersValues } from '../../hooks/useMigrationCardData';
@@ -19,7 +16,7 @@ type MigrationTableProps = {
   tableData: UseMigrationCardDataAndFiltersValues;
 };
 
-const MigrationTable: React.FC<MigrationTableProps> = ({ tableData }) => {
+const MigrationTable: FC<MigrationTableProps> = ({ tableData }) => {
   const { t } = useKubevirtTranslation();
 
   const {

diff --git a/...rationsTab/components/MigrationsTable/hooks/useVirtualMachineInstanceMigrationsColumns.ts b/...rationsTab/components/MigrationsTable/hooks/useVirtualMachineInstanceMigrationsColumns.ts
@@ -1,12 +1,16 @@
-import * as React from 'react';
-
 import {
   NodeModel,
   VirtualMachineInstanceMigrationModelRef,
 } from '@kubevirt-ui/kubevirt-api/console';
+import { ALL_NAMESPACES_SESSION_KEY } from '@kubevirt-utils/hooks/constants';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import useKubevirtUserSettingsTableColumns from '@kubevirt-utils/hooks/useKubevirtUserSettings/useKubevirtUserSettingsTableColumns';
-import { K8sVerb, TableColumn, useAccessReview } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  K8sVerb,
+  TableColumn,
+  useAccessReview,
+  useActiveNamespace,
+} from '@openshift-console/dynamic-plugin-sdk';
 import { sortable } from '@patternfly/react-table';
 
 import { MigrationTableDataLayout } from '../utils/utils';
@@ -16,65 +20,72 @@ const useVirtualMachineInstanceMigrationsColumns = (): [
   TableColumn<MigrationTableDataLayout>[],
 ] => {
   const { t } = useKubevirtTranslation();
-
+  const [activeNamespace] = useActiveNamespace();
   const [canGetNode] = useAccessReview({
     resource: NodeModel.plural,
     verb: 'get' as K8sVerb,
   });
 
-  const columns: TableColumn<MigrationTableDataLayout>[] = React.useMemo(
-    () => [
-      {
-        id: 'vm-name',
-        sort: 'vmim.spec.vmiName',
-        title: t('VirtualMachine name'),
-        transforms: [sortable],
-      },
-      {
-        id: 'status',
-        sort: 'vmim.status.phase',
-        title: t('Status'),
-        transforms: [sortable],
-      },
-      {
-        id: 'source',
-        sort: 'vmiObj.status.migrationState.sourceNode',
-        title: t('Source'),
-        transforms: [sortable],
-      },
-      {
-        id: 'target',
-        sort: 'vmiObj.status.migrationState.targetNode',
-        title: t('Target'),
-        transforms: [sortable],
-      },
-      {
-        id: 'migration-policy',
-        sort: 'vmiObj.status.migrationState.migrationPolicyName',
-        title: t('MigrationPolicy'),
-        transforms: [sortable],
-      },
-      {
-        id: 'vmim-name',
-        sort: 'vmim.metadata.name',
-        title: t('VirtualMachineInstanceMigration name'),
-        transforms: [sortable],
-      },
-      {
-        additional: true,
-        id: 'created',
-        sort: 'vmim.metadata.creationTimestamp',
-        title: t('Created'),
-        transforms: [sortable],
-      },
-      {
-        id: '',
-        props: { className: 'dropdown-kebab-pf pf-v5-c-table__action' },
-        title: '',
-      },
-    ],
-    [t],
-  );
+  const columns: TableColumn<MigrationTableDataLayout>[] = [
+    {
+      id: 'vm-name',
+      sort: 'vmim.spec.vmiName',
+      title: t('VirtualMachine name'),
+      transforms: [sortable],
+    },
+    ...(activeNamespace === ALL_NAMESPACES_SESSION_KEY
+      ? [
+          {
+            id: 'namespace',
+            props: { className: 'pf-m-width-10' },
+            title: t('Namespace'),
+            transforms: [sortable],
+          },
+        ]
+      : []),
+    {
+      id: 'status',
+      sort: 'vmim.status.phase',
+      title: t('Status'),
+      transforms: [sortable],
+    },
+    {
+      id: 'source',
+      sort: 'vmiObj.status.migrationState.sourceNode',
+      title: t('Source'),
+      transforms: [sortable],
+    },
+    {
+      id: 'target',
+      sort: 'vmiObj.status.migrationState.targetNode',
+      title: t('Target'),
+      transforms: [sortable],
+    },
+    {
+      id: 'migration-policy',
+      sort: 'vmiObj.status.migrationState.migrationPolicyName',
+      title: t('MigrationPolicy'),
+      transforms: [sortable],
+    },
+    {
+      id: 'vmim-name',
+      sort: 'vmim.metadata.name',
+      title: t('VirtualMachineInstanceMigration name'),
+      transforms: [sortable],
+    },
+    {
+      additional: true,
+      id: 'created',
+      sort: 'vmim.metadata.creationTimestamp',
+      title: t('Created'),
+      transforms: [sortable],
+    },
+    {
+      id: '',
+      props: { className: 'dropdown-kebab-pf pf-v5-c-table__action' },
+      title: '',
+    },
+  ];
 
   const [activeColumns] = useKubevirtUserSettingsTableColumns<MigrationTableDataLayout>({
     columnManagementID: VirtualMachineInstanceMigrationModelRef,