CNV-45822: Vm tree view 2

locales/en/plugin__kubevirt-plugin.json

@@ -1386,6 +1386,8 @@
   "VirtIO": "VirtIO",
   "Virtual machine is not running": "Virtual machine is not running",
   "Virtual Machines": "Virtual Machines",
+  "Virtual Machines ({{count}})_one": "Virtual Machines ({{count}})",
+  "Virtual Machines ({{count}})_other": "Virtual Machines ({{count}})",
   "Virtualization": "Virtualization",
   "Virtualization Alerts": "Virtualization Alerts",
   "Virtualization Alerts donut chart": "Virtualization Alerts donut chart",

src/views/clusteroverview/OverviewTab/vm-statuses-card/VMStatusItem.tsx

@@ -13,10 +13,16 @@ import './VMStatusesCard.scss';
 type VMStatusItemProps = {
   count: number;
   namespace?: string;
+  onFilterChange?: () => void;
   status: string;
 };
 
-const VMStatusItem: React.FC<VMStatusItemProps> = ({ count, namespace, status }) => {
+const VMStatusItem: React.FC<VMStatusItemProps> = ({
+  count,
+  namespace,
+  onFilterChange,
+  status,
+}) => {
   const Icon = vmStatusIcon[status];
   const path = `/k8s/${
     isAllNamespaces(namespace) ? ALL_NAMESPACES : `ns/${namespace}`
@@ -28,7 +34,14 @@ const VMStatusItem: React.FC<VMStatusItemProps> = ({ count, namespace, status })
         <div className="vm-statuses-card__status-item--count">
           <span className="vm-statuses-card__status-item--icon">{Icon && <Icon />}</span>
           <span className="vm-statuses-card__status-item--value">
-            <Link to={path}>{count.toString()}</Link>
+            <Link
+              onClick={() => {
+                onFilterChange?.();
+              }}
+              to={path}
+            >
+              {count.toString()}
+            </Link>
           </span>
         </div>
         <div className="vm-statuses-card__status-item--status">{status}</div>

src/views/clusteroverview/OverviewTab/vm-statuses-card/VMStatusesCard.tsx

@@ -58,14 +58,14 @@ const VMStatusesCard: React.FC = () => {
             status={VM_STATUS.Running}
           />
           <VMStatusItem
-            count={primaryStatuses.Paused}
+            count={primaryStatuses.Stopped}
             namespace={activeNamespace}
-            status={VM_STATUS.Paused}
+            status={VM_STATUS.Stopped}
           />
           <VMStatusItem
-            count={primaryStatuses.Migrating}
+            count={primaryStatuses.Paused}
             namespace={activeNamespace}
-            status={VM_STATUS.Migrating}
+            status={VM_STATUS.Paused}
           />
         </Grid>
       </div>

src/views/clusteroverview/OverviewTab/vm-statuses-card/utils/utils.ts

@@ -4,11 +4,11 @@ import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { getVMStatus } from '@kubevirt-utils/resources/shared';
 import { VM_STATUS } from '@kubevirt-utils/resources/vm/utils/vmStatus';
 import { RedExclamationCircleIcon } from '@openshift-console/dynamic-plugin-sdk';
-import { InProgressIcon, PausedIcon, SyncAltIcon } from '@patternfly/react-icons';
+import { InProgressIcon, OffIcon, PausedIcon, SyncAltIcon } from '@patternfly/react-icons';
 
 import { ERROR } from './constants';
 
-const PRIMARY_STATUSES = [VM_STATUS.Running, VM_STATUS.Paused, VM_STATUS.Migrating, ERROR];
+const PRIMARY_STATUSES = [VM_STATUS.Running, VM_STATUS.Stopped, VM_STATUS.Paused, ERROR];
 
 const ERROR_STATUSES = [
   VM_STATUS.CrashLoopBackOff,
@@ -30,7 +30,7 @@ export const vmStatusIcon = {
   Provisioning: Fragment,
   Running: SyncAltIcon,
   Starting: Fragment,
-  Stopped: Fragment,
+  Stopped: OffIcon,
   Stopping: Fragment,
   Terminating: Fragment,
 };

src/views/virtualmachines/list/VirtualMachinesList.scss

@@ -15,3 +15,9 @@
     max-width: 50px;
   }
 }
+
+.vm-list-page-header {
+  h1.co-m-pane__heading {
+    font-size: var(--pf-v5-global--FontSize--lg);
+  }
+}

src/views/virtualmachines/list/VirtualMachinesList.tsx

@@ -41,6 +41,7 @@ import { useVMListFilters } from '../utils';
 
 import VirtualMachineActionButton from './components/VirtualMachineActionButton';
 import VirtualMachineEmptyState from './components/VirtualMachineEmptyState/VirtualMachineEmptyState';
+import VirtualMachineListSummary from './components/VirtualMachineListSummary/VirtualMachineListSummary';
 import VirtualMachineRow from './components/VirtualMachineRow/VirtualMachineRow';
 import VirtualMachinesCreateButton from './components/VirtualMachinesCreateButton/VirtualMachinesCreateButton';
 import useSelectedFilters from './hooks/useSelectedFilters';
@@ -165,6 +166,11 @@ const VirtualMachinesList: FC<VirtualMachinesListProps> = ({ kind, namespace })
   if (loaded && noVMs) {
     return (
       <VirtualMachineTreeView>
+        <VirtualMachineListSummary
+          namespace={namespace}
+          onFilterChange={onFilterChange}
+          vms={data}
+        />
         <VirtualMachineEmptyState catalogURL={catalogURL} namespace={namespace} />
       </VirtualMachineTreeView>
     );
@@ -173,16 +179,19 @@ const VirtualMachinesList: FC<VirtualMachinesListProps> = ({ kind, namespace })
   return (
     /* All of this table and components should be replaced to our own fitted components */
     <VirtualMachineTreeView onFilterChange={onFilterChange}>
-      <ListPageHeader title={t('VirtualMachines')}>
-        <Flex>
-          <FlexItem>
-            <VirtualMachineActionButton />
-          </FlexItem>
-          <FlexItem>
-            <VirtualMachinesCreateButton namespace={namespace} />
-          </FlexItem>
-        </Flex>
-      </ListPageHeader>
+      <VirtualMachineListSummary namespace={namespace} onFilterChange={onFilterChange} vms={data} />
+      <div className="vm-list-page-header">
+        <ListPageHeader title={t('VirtualMachines')}>
+          <Flex>
+            <FlexItem>
+              <VirtualMachineActionButton />
+            </FlexItem>
+            <FlexItem>
+              <VirtualMachinesCreateButton namespace={namespace} />
+            </FlexItem>
+          </Flex>
+        </ListPageHeader>
+      </div>
       <ListPageBody>
         <div className="vm-listpagebody">
           <div className="list-managment-group">

src/views/virtualmachines/list/components/VirtualMachineListSummary/VirtualMachineListSummary.scss

@@ -0,0 +1,14 @@
+.vm-list-summary {
+  &__expand-section {
+    margin: var(--pf-global--spacer--lg);
+
+    &-toggle {
+      color: var(--pf-v5-global--Color--100);
+      margin: 0;
+
+      &-icon {
+        margin-right: var(--pf-global--spacer--sm);
+      }
+    }
+  }
+}

src/views/virtualmachines/list/components/VirtualMachineListSummary/VirtualMachineListSummary.tsx

@@ -0,0 +1,92 @@
+import React, { FC, useState } from 'react';
+
+import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
+import { ALL_PROJECTS } from '@kubevirt-utils/hooks/constants';
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { VM_STATUS } from '@kubevirt-utils/resources/vm/utils/vmStatus';
+import { FilterValue } from '@openshift-console/dynamic-plugin-sdk';
+import { ERROR } from '@overview/OverviewTab/vm-statuses-card/utils/constants';
+import { getVMStatuses } from '@overview/OverviewTab/vm-statuses-card/utils/utils';
+import VMStatusItem from '@overview/OverviewTab/vm-statuses-card/VMStatusItem';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  Divider,
+  ExpandableSection,
+  Grid,
+  Text,
+} from '@patternfly/react-core';
+import { ProjectDiagramIcon } from '@patternfly/react-icons';
+
+import './VirtualMachineListSummary.scss';
+
+type VirtualMachineListSummaryProps = {
+  namespace: string;
+  onFilterChange?: (type: string, value: FilterValue) => void;
+  vms: V1VirtualMachine[];
+};
+
+const VirtualMachineListSummary: FC<VirtualMachineListSummaryProps> = ({
+  namespace,
+  onFilterChange,
+  vms,
+}) => {
+  const { t } = useKubevirtTranslation();
+  const [isExpanded, setIsExpanded] = useState<boolean>(true);
+
+  const { primaryStatuses } = getVMStatuses(vms || []);
+
+  return (
+    <ExpandableSection
+      toggleContent={
+        <Text className="vm-list-summary__expand-section-toggle" component="h3">
+          <ProjectDiagramIcon className="vm-list-summary__expand-section-toggle-icon" />{' '}
+          {namespace ?? ALL_PROJECTS}
+        </Text>
+      }
+      className="vm-list-summary__expand-section"
+      isExpanded={isExpanded}
+      onToggle={() => setIsExpanded((prev) => !prev)}
+    >
+      <Card className="vm-list-summary__card" data-test-id="vm-list-summary">
+        <CardHeader className="vm-statuses-card__header">
+          <CardTitle component="h5">
+            {t('Virtual Machines ({{count}})', { count: vms?.length })}
+          </CardTitle>
+        </CardHeader>
+        <div className="vm-statuses-card__body">
+          <Grid hasGutter>
+            <VMStatusItem
+              count={primaryStatuses.Error}
+              namespace={namespace}
+              onFilterChange={() => onFilterChange('status', { selected: [ERROR] })}
+              status={ERROR}
+            />
+            <VMStatusItem
+              count={primaryStatuses.Running}
+              namespace={namespace}
+              onFilterChange={() => onFilterChange('status', { selected: [VM_STATUS.Running] })}
+              status={VM_STATUS.Running}
+            />
+            <VMStatusItem
+              count={primaryStatuses.Stopped}
+              namespace={namespace}
+              onFilterChange={() => onFilterChange('status', { selected: [VM_STATUS.Stopped] })}
+              status={VM_STATUS.Stopped}
+            />
+            <VMStatusItem
+              count={primaryStatuses.Paused}
+              namespace={namespace}
+              onFilterChange={() => onFilterChange('status', { selected: [VM_STATUS.Paused] })}
+              status={VM_STATUS.Paused}
+            />
+          </Grid>
+        </div>
+        <Divider />
+      </Card>
+    </ExpandableSection>
+  );
+};
+
+export default VirtualMachineListSummary;

tsconfig.json

@@ -14,6 +14,7 @@
       "@catalog/*": ["src/views/catalog/*"],
       "@kubevirt-utils": ["src/utils"],
       "@kubevirt-utils/*": ["src/utils/*"],
+      "@overview/*": ["src/views/clusteroverview/*"],
       "@virtualmachines/*": ["src/views/virtualmachines/*"],
       "react": ["./node_modules/react", "./node_modules/@types/react"]
     },