Merge pull request #2319 from avivtur/tree-view-6

CNV-53212: Tree-view alignments
kubevirt-ui · Dec 16, 2024 · e718135 · e718135
2 parents a86c91d + 560fdff
commit e718135
Show file tree

Hide file tree

Showing 17 changed files with 82 additions and 67 deletions.
diff --git a/locales/en/plugin__kubevirt-plugin.json b/locales/en/plugin__kubevirt-plugin.json
@@ -489,15 +489,15 @@
   "Enable automatic images download and update": "Enable automatic images download and update",
   "Enable automatic subscription for Red Hat Enterprise Linux VirtualMachines.\n": "Enable automatic subscription for Red Hat Enterprise Linux VirtualMachines.\n",
   "Enable Descheduler": "Enable Descheduler",
-  "Enable folders to VirtualMachine tree-view": "Enable folders to VirtualMachine tree-view",
+  "Enable folders in Virtual Machines tree view": "Enable folders in Virtual Machines tree view",
   "Enable guest system log access": "Enable guest system log access",
   "Enable headless mode": "Enable headless mode",
   "Enable memory density": "Enable memory density",
   "Enable persistent reservation": "Enable persistent reservation",
   "Enable preallocation": "Enable preallocation",
   "Enable predictive analytics": "Enable predictive analytics",
   "Enable the creation of LoadBalancer services for SSH connections to VirtualMachines. A load balancer must be configured": "Enable the creation of LoadBalancer services for SSH connections to VirtualMachines. A load balancer must be configured",
-  "Enable VirtualMachine tree-view": "Enable VirtualMachine tree-view",
+  "Enable Virtual Machines tree view": "Enable Virtual Machines tree view",
   "Enabled": "Enabled",
   "Enables access to the VirtualMachine guest system log. Wait a few seconds for logging to start before viewing the log.": "Enables access to the VirtualMachine guest system log. Wait a few seconds for logging to start before viewing the log.",
   "Enables access to the VirtualMachine's guest system log. Wait a few seconds for logging to start before viewing the log.": "Enables access to the VirtualMachine's guest system log. Wait a few seconds for logging to start before viewing the log.",
@@ -1135,7 +1135,7 @@
   "Show all": "Show all",
   "Show all alerts": "Show all alerts",
   "Show less": "Show less",
-  "Show projects with VirtualMachines": "Show projects with VirtualMachines",
+  "Show only projects with VirtualMachines": "Show only projects with VirtualMachines",
   "Show top 10": "Show top 10",
   "Show top 5": "Show top 5",
   "Show uncategorized VirtualMachines": "Show uncategorized VirtualMachines",

diff --git a/src/views/clusteroverview/SettingsTab/PreviewFeaturesTab/hooks/usePreviewFeaturesData.ts b/src/views/clusteroverview/SettingsTab/PreviewFeaturesTab/hooks/usePreviewFeaturesData.ts
@@ -31,14 +31,14 @@ const usePreviewFeaturesData: UsePreviewFeaturesData = () => {
   const features = [
     {
       externalLink: null,
-      id: TREE_VIEW_FOLDERS,
-      label: t('Enable VirtualMachine tree-view'),
+      id: TREE_VIEW,
+      label: t('Enable Virtual Machines tree view'),
       ...treeViewFeature,
     },
     {
       externalLink: null,
       id: TREE_VIEW_FOLDERS,
-      label: t('Enable folders to VirtualMachine tree-view'),
+      label: t('Enable folders in Virtual Machines tree view'),
       ...treeViewFoldersFeature,
     },
   ];

diff --git a/src/views/virtualmachines/actions/tests/useVirtualMachineActionsProvider.test.tsx b/src/views/virtualmachines/actions/tests/useVirtualMachineActionsProvider.test.tsx
@@ -9,8 +9,6 @@ import { exampleRunningVirtualMachine } from './mocks';
 jest.mock('@openshift-console/dynamic-plugin-sdk', () => ({
   getGroupVersionKindForModel: jest.fn(() => ({})),
   k8sPatch: jest.fn(() => ({})),
-  // useFeatures: jest.fn(() => ({ featureEnabled: true })),
-  // useFeaturesConfigMap: jest.fn(() => ({ featuresConfigMapData: [[], true, null], isAdmin: true })),
   useFlag: jest.fn(() => true),
   useK8sModel: jest.fn(() => [[], true]),
   useK8sWatchResource: jest.fn(() => [[], true]),

diff --git a/src/views/virtualmachines/details/VirtualMachineNavPageTitle.tsx b/src/views/virtualmachines/details/VirtualMachineNavPageTitle.tsx
@@ -60,8 +60,8 @@ const VirtualMachineNavPageTitle: FC<VirtualMachineNavPageTitleProps> = ({ name,
                   {vm?.status?.printableStatus}
                 </Label>
               )}
+              <VMNotMigratableLabel vm={vm} />
             </SplitItem>
-            <VMNotMigratableLabel vm={vm} />
           </Split>
         </h1>
         <Split hasGutter>

diff --git a/src/views/virtualmachines/details/virtual-machine-page.scss b/src/views/virtualmachines/details/virtual-machine-page.scss
@@ -1,5 +1,6 @@
 .vm-resource-label {
   vertical-align: middle;
+  margin-right: var(--pf-global--spacer--xs);
 }
 
 .VirtualMachineNavPage--tabs__main {

diff --git a/src/views/virtualmachines/list/components/VMNotMigratableLabel/VMNotMigratableLabel.scss b/src/views/virtualmachines/list/components/VMNotMigratableLabel/VMNotMigratableLabel.scss
@@ -1,5 +1,6 @@
 .migratable-label {
   vertical-align: middle;
+  width: fit-content;
   .pf-c-label__content {
     color: var(--pf-global--palette--blue-400);
   }

diff --git a/src/views/virtualmachines/list/components/VMNotMigratableLabel/VMNotMigratableLabel.tsx b/src/views/virtualmachines/list/components/VMNotMigratableLabel/VMNotMigratableLabel.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
+import React, { FC } from 'react';
 
 import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import useSingleNodeCluster from '@kubevirt-utils/hooks/useSingleNodeCluster';
-import { Label, SplitItem } from '@patternfly/react-core';
+import { Label } from '@patternfly/react-core';
 import { isLiveMigratable, printableVMStatus } from '@virtualmachines/utils';
 
 import './VMNotMigratableLabel.scss';
@@ -12,25 +12,25 @@ type VMNotMigratableLabelProps = {
   vm: V1VirtualMachine;
 };
 
-const VMNotMigratableLabel: React.FC<VMNotMigratableLabelProps> = ({ vm }) => {
+const VMNotMigratableLabel: FC<VMNotMigratableLabelProps> = ({ vm }) => {
   const { t } = useKubevirtTranslation();
   const [isSingleNodeCluster] = useSingleNodeCluster();
   const isMigratable = isLiveMigratable(vm, isSingleNodeCluster);
-  const isVMrunning = vm?.status?.printableStatus === printableVMStatus.Running;
+  const isRunning = vm?.status?.printableStatus === printableVMStatus.Running;
 
-  return isVMrunning && !isMigratable ? (
-    <SplitItem>
-      <Label
-        className="migratable-label"
-        color="blue"
-        isCompact
-        key="not-migratable"
-        variant="outline"
-      >
-        {t('Not migratable')}
-      </Label>
-    </SplitItem>
-  ) : null;
+  if (!isRunning || isMigratable) return null;
+
+  return (
+    <Label
+      className="migratable-label"
+      color="blue"
+      isCompact
+      key="not-migratable"
+      variant="outline"
+    >
+      {t('Not migratable')}
+    </Label>
+  );
 };
 
 export default VMNotMigratableLabel;
diff --git a/src/views/virtualmachines/list/components/VMStatusConditionLabel/VMStatusConditionLabel.tsx b/src/views/virtualmachines/list/components/VMStatusConditionLabel/VMStatusConditionLabel.tsx
@@ -15,6 +15,7 @@ export const VMStatusConditionLabel: FC<V1VirtualMachineCondition> = memo((condi
           e.preventDefault();
         }}
         color="grey"
+        textMaxWidth="6ch"
       >
         {condition?.type}={condition?.status}
       </Label>

diff --git a/src/views/virtualmachines/list/components/VirtualMachineStatus/VirtualMachineStatus.tsx b/src/views/virtualmachines/list/components/VirtualMachineStatus/VirtualMachineStatus.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
+import React, { FC } from 'react';
 
 import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
-import { HelperText, HelperTextItem, Split, SplitItem, Truncate } from '@patternfly/react-core';
+import { HelperText, HelperTextItem, Stack, StackItem } from '@patternfly/react-core';
 
 import { getVMStatusIcon } from '../../../utils';
 import VMNotMigratableLabel from '../VMNotMigratableLabel/VMNotMigratableLabel';
@@ -10,21 +10,19 @@ type VirtualMachinesPageStatusProps = {
   vm: V1VirtualMachine;
 };
 
-const VirtualMachineStatus: React.FC<VirtualMachinesPageStatusProps> = ({ vm }) => {
+const VirtualMachineStatus: FC<VirtualMachinesPageStatusProps> = ({ vm }) => {
   const printableStatus = vm?.status?.printableStatus;
   const Icon = getVMStatusIcon(printableStatus);
 
   return (
-    <Split hasGutter>
-      <SplitItem>
+    <Stack>
+      <StackItem className="pf-u-mb-xs">
         <HelperText>
-          <HelperTextItem icon={<Icon />}>
-            <Truncate content={printableStatus} />
-          </HelperTextItem>
+          <HelperTextItem icon={<Icon />}>{printableStatus}</HelperTextItem>
         </HelperText>
-      </SplitItem>
+      </StackItem>
       <VMNotMigratableLabel vm={vm} />
-    </Split>
+    </Stack>
   );
 };
 

diff --git a/src/views/virtualmachines/tree/components/CreateProject.tsx b/src/views/virtualmachines/tree/components/CreateProject.tsx
@@ -8,9 +8,6 @@ import { useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
 import { Button, ButtonVariant } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons';
 
-import { PROJECT_SELECTOR_PREFIX } from '../utils/constants';
-import { setSelectedTreeItem } from '../utils/utils';
-
 const CreateProject: FC = () => {
   const { t } = useKubevirtTranslation();
   const [_, setActiveNamespace] = useActiveNamespace();
@@ -23,12 +20,6 @@ const CreateProject: FC = () => {
             {...props}
             createdProject={(namespace) => {
               const nsName = getName(namespace);
-              setSelectedTreeItem({
-                customBadgeContent: 0,
-                defaultExpanded: true,
-                id: `${PROJECT_SELECTOR_PREFIX}/${nsName}`,
-                name: nsName,
-              });
               setActiveNamespace(nsName);
             }}
           />

diff --git a/src/views/virtualmachines/tree/components/TreeViewToolbar.tsx b/src/views/virtualmachines/tree/components/TreeViewToolbar.tsx
@@ -47,14 +47,14 @@ const TreeViewToolbar: FC<TreeViewToolbarProps> = ({ closeComponent, onSearch })
           <StackItem>
             <Split>
               <SplitItem className="pf-u-ml-md">
-                <Text>{t('Show projects with VirtualMachines')}</Text>
+                <Text>{t('Show only projects with VirtualMachines')}</Text>
               </SplitItem>
               <SplitItem isFilled />
               <Switch
-                checked={showEmptyProjects === SHOW}
+                checked={showEmptyProjects === HIDE}
                 className="vms-tree-view__toolbar-switch"
                 isReversed
-                onChange={(_, checked) => setShowEmptyProjects(checked ? SHOW : HIDE)}
+                onChange={(_, checked) => setShowEmptyProjects(checked ? HIDE : SHOW)}
               />
             </Split>
           </StackItem>

diff --git a/src/views/virtualmachines/tree/hooks/useSyncClicksEffects.ts b/src/views/virtualmachines/tree/hooks/useSyncClicksEffects.ts
@@ -12,28 +12,28 @@ export const useSyncClicksEffects = (activeNamespace: string, loaded: boolean) =
   useEffect(() => {
     const pathname = location.pathname;
     if (loaded) {
-      const dataMap = treeDataMap.value;
+      const treeData = treeDataMap.value;
       if (pathname.startsWith(`/k8s/${ALL_NAMESPACES}`)) {
-        setSelectedTreeItem(dataMap[ALL_NAMESPACES_SESSION_KEY]);
+        setSelectedTreeItem(treeData[ALL_NAMESPACES_SESSION_KEY]);
         return;
       }
 
       const vmName = pathname.split('/')[5];
       if (vmName) {
-        setSelectedTreeItem(dataMap[`${activeNamespace}/${vmName}`]);
+        setSelectedTreeItem(treeData[`${activeNamespace}/${vmName}`]);
         return;
       }
 
       const queryParams = new URLSearchParams(location.search);
       const folderFilterName = queryParams.get('labels')?.split('=')?.[1];
       if (folderFilterName) {
         setSelectedTreeItem(
-          dataMap[`${FOLDER_SELECTOR_PREFIX}/${activeNamespace}/${folderFilterName}`],
+          treeData[`${FOLDER_SELECTOR_PREFIX}/${activeNamespace}/${folderFilterName}`],
         );
         return;
       }
 
-      setSelectedTreeItem(dataMap[`${PROJECT_SELECTOR_PREFIX}/${activeNamespace}`]);
+      setSelectedTreeItem(treeData[`${PROJECT_SELECTOR_PREFIX}/${activeNamespace}`]);
     }
   }, [activeNamespace, loaded, location.search, location.pathname]);
 };
diff --git a/src/views/virtualmachines/tree/icons/CollapseAllIcon.tsx b/src/views/virtualmachines/tree/icons/CollapseAllIcon.tsx
@@ -4,28 +4,28 @@ const CollapseAllIcon: FC = () => (
   <svg
     className="pf-v5-svg"
     fill="none"
-    height="16"
-    viewBox="0 0 13 16"
+    height="18"
+    viewBox="0 0 13 18"
     width="13"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g clipPath="url(#clip0_422_15200)">
+    <g clipPath="url(#clip0_450_17575)">
       <path
         clipRule="evenodd"
-        d="M6.8065 6.90192L11.0309 2.65193C11.3229 2.36132 11.3229 1.88631 11.0309 1.59258L10.3289 0.886314C10.04 0.592583 9.5679 0.592583 9.27591 0.886314L6.28158 3.89882L3.28721 0.886314C2.99835 0.592583 2.5262 0.592583 2.23421 0.886314L1.53223 1.59258C1.24023 1.8832 1.24023 2.3582 1.53223 2.65193L5.75662 6.90192C6.04861 7.19569 6.52073 7.19569 6.8065 6.90192Z"
+        d="M6.8065 7.10114L11.0309 2.85115C11.3229 2.56054 11.3229 2.08553 11.0309 1.7918L10.3289 1.08553C10.04 0.791802 9.5679 0.791802 9.27591 1.08553L6.28158 4.09804L3.28721 1.08553C2.99835 0.791802 2.5262 0.791802 2.23421 1.08553L1.53223 1.7918C1.24023 2.08242 1.24023 2.55742 1.53223 2.85115L5.75662 7.10114C6.04861 7.39491 6.52073 7.39491 6.8065 7.10114Z"
         fill="#6A6E73"
         fillRule="evenodd"
       />
       <path
         clipRule="evenodd"
-        d="M3.22415 14.9047L6.21851 11.8922L9.21596 14.9016C9.50483 15.1953 9.97698 15.1953 10.269 14.9016L10.971 14.1953C11.2629 13.9047 11.2629 13.4297 10.971 13.1359L6.74656 8.88595C6.45456 8.59219 5.98245 8.59219 5.69046 8.88906L1.46606 13.1391C1.17407 13.4297 1.17407 13.9047 1.46606 14.1984L2.17117 14.9047C2.46004 15.1984 2.93218 15.1984 3.22415 14.9047Z"
+        d="M3.37771 16.9047L6.37207 13.8922L9.36953 16.9016C9.6584 17.1953 10.1305 17.1953 10.4225 16.9016L11.1245 16.1953C11.4165 15.9047 11.4165 15.4297 11.1245 15.1359L6.90012 10.8859C6.60813 10.5922 6.13602 10.5922 5.84402 10.8891L1.61963 15.1391C1.32764 15.4297 1.32764 15.9047 1.61963 16.1984L2.32474 16.9047C2.6136 17.1984 3.08575 17.1984 3.37771 16.9047Z"
         fill="#6A6E73"
         fillRule="evenodd"
       />
     </g>
     <defs>
-      <clipPath id="clip0_422_15200">
-        <rect fill="white" height="16" width="13" />
+      <clipPath id="clip0_450_17575">
+        <rect fill="white" height="18" width="13" />
       </clipPath>
     </defs>
   </svg>

diff --git a/src/views/virtualmachines/tree/icons/ExpandAllIcon.tsx b/src/views/virtualmachines/tree/icons/ExpandAllIcon.tsx
@@ -4,15 +4,15 @@ const ExpandAllIcon: FC = () => (
   <svg
     className="pf-v5-svg"
     fill="none"
-    height="16"
-    viewBox="0 0 13 16"
+    height="18"
+    viewBox="0 0 13 18"
     width="13"
     xmlns="http://www.w3.org/2000/svg"
   >
     <g clipPath="url(#clip0_422_15225)">
       <path
         clipRule="evenodd"
-        d="M6.8065 15.1011L11.0309 10.8512C11.3229 10.5605 11.3229 10.0855 11.0309 9.7918L10.3289 9.08553C10.04 8.7918 9.5679 8.7918 9.27591 9.08553L6.28158 12.098L3.28721 9.08553C2.99835 8.7918 2.5262 8.7918 2.23421 9.08553L1.53223 9.7918C1.24023 10.0824 1.24023 10.5574 1.53223 10.8512L5.75662 15.1011C6.04861 15.3949 6.52073 15.3949 6.8065 15.1011Z"
+        d="M6.8065 17.1011L11.0309 12.8512C11.3229 12.5605 11.3229 12.0855 11.0309 11.7918L10.3289 11.0855C10.04 10.7918 9.5679 10.7918 9.27591 11.0855L6.28158 14.098L3.28721 11.0855C2.99835 10.7918 2.5262 10.7918 2.23421 11.0855L1.53223 11.7918C1.24023 12.0824 1.24023 12.5574 1.53223 12.8512L5.75662 17.1011C6.04861 17.3949 6.52073 17.3949 6.8065 17.1011Z"
         fill="#6A6E73"
         fillRule="evenodd"
       />
@@ -25,7 +25,7 @@ const ExpandAllIcon: FC = () => (
     </g>
     <defs>
       <clipPath id="clip0_422_15225">
-        <rect fill="white" height="16" width="13" />
+        <rect fill="white" height="18" width="13" />
       </clipPath>
     </defs>
   </svg>

diff --git a/src/views/virtualmachines/tree/icons/TreeViewVirtualMachineIcon.tsx b/src/views/virtualmachines/tree/icons/TreeViewVirtualMachineIcon.tsx
@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+
+const TreeViewVirtualMachineIcon: FC = () => (
+  <svg
+    fill="none"
+    height="1.5em"
+    viewBox="0 0 35 34"
+    width="1.5em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect fill="transparent" height="34" width="35" />
+    <path
+      clipRule="evenodd"
+      d="M28 26.3333V13H21.3333V11.6667H20V13H8V19.6667H6.66667V21H8V26.3333H16V27.5833H12V29H24V27.5833H20V26.3333H28ZM10.6667 23.6667V15.6667H25.3333V23.6667H10.6667ZM20 10.3333H21.3333V9H20V10.3333ZM17.3333 10.3333H18.6667V9H17.3333V10.3333ZM14.6667 10.3333H16V9H14.6667V10.3333ZM12 10.3333H13.3333V9H12V10.3333ZM9.33333 10.3333H10.6667V9H9.33333V10.3333ZM6.66667 10.3333H8V9H6.66667V10.3333ZM4 10.3333H5.33333V9H4V10.3333ZM4 13H5.33333V11.6667H4V13ZM4 15.6667H5.33333V14.3333H4V15.6667ZM20 18.3333H21.3333V17H20V18.3333ZM4 18.3333H5.33333V17H4V18.3333ZM20 21H21.3333V19.6667H20V21ZM17.3333 21H18.6667V19.6667H17.3333V21ZM14.6667 21H16V19.6667H14.6667V21ZM12 21H13.3333V19.6667H12V21ZM4 21H5.33333V19.6667H4V21Z"
+      fill="#6A6E73"
+      fillRule="evenodd"
+    />
+    <defs>
+      <clipPath id="clip0_360_10401">
+        <rect fill="white" height="6" transform="translate(24 5)" width="6" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default TreeViewVirtualMachineIcon;
diff --git a/src/views/virtualmachines/tree/icons/utils.ts b/src/views/virtualmachines/tree/icons/utils.ts
@@ -1,9 +1,9 @@
-import { VirtualMachineIcon } from '@patternfly/react-icons';
 import { printableVMStatus } from '@virtualmachines/utils';
 
 import PausedVirtualMachineIcon from './PausedVirtualMachineIcon';
 import RunningVirtualMachineIcon from './RunningVirtualMachineIcon';
 import StoppedVirtualMachineIcon from './StoppedVirtualMachineIcon';
+import TreeViewVirtualMachineIcon from './TreeViewVirtualMachineIcon';
 
 const statusIconMapper = {
   [printableVMStatus.Paused]: PausedVirtualMachineIcon,
@@ -13,6 +13,6 @@ const statusIconMapper = {
 
 export const statusIcon = new Proxy(statusIconMapper, {
   get(target, prop: string) {
-    return target[prop] ?? VirtualMachineIcon;
+    return target[prop] ?? TreeViewVirtualMachineIcon;
   },
 });
diff --git a/src/views/virtualmachines/tree/utils/utils.tsx b/src/views/virtualmachines/tree/utils/utils.tsx
@@ -17,7 +17,6 @@ import {
   VM_FOLDER_LABEL,
 } from './constants';
 
-export const vmsPerNamespaceMap = signal<{ [ns: string]: number }>(null);
 export const treeDataMap = signal<Record<string, TreeViewDataItem>>(null);
 export const selectedTreeItem = signal<TreeViewDataItem[]>(null);
 export const setSelectedTreeItem = (selected: TreeViewDataItem) =>