CNV-44838: Use VirtualMachine dynamic extension pages

src/utils/components/HorizontalNavbar/HorizontalNavbar.tsx

@@ -1,10 +1,13 @@
-import React, { FC, useState } from 'react';
-import { NavLink, Route, Routes, useLocation } from 'react-router-dom-v5-compat';
+import React, { FC, useEffect, useMemo, useState } from 'react';
+import { NavLink, Route, Routes, useLocation, useParams } from 'react-router-dom-v5-compat';
 import classNames from 'classnames';
+import { VirtualMachineModel } from 'src/views/dashboard-extensions/utils';
 
 import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
+import { isEmpty } from '@kubevirt-utils/utils/utils';
 import { Nav, NavList } from '@patternfly/react-core';
 
+import useDynamicPages from './utils/useDynamicPages';
 import { NavPageKubevirt, trimLastHistoryPath } from './utils/utils';
 
 import './horizontal-nav-bar.scss';
@@ -18,20 +21,33 @@ type HorizontalNavbarProps = {
 const HorizontalNavbar: FC<HorizontalNavbarProps> = ({ instanceTypeExpandedSpec, pages, vm }) => {
   const location = useLocation();
 
-  const initialActiveTab =
-    pages.find(({ name = '' }) => location?.pathname.includes('/' + name.toLowerCase())) ||
-    pages?.[0];
+  const params = useParams();
 
-  const [activeItem, setActiveItem] = useState<number | string>(
-    initialActiveTab?.name?.toLowerCase(),
+  const dynamicPluginPages = useDynamicPages(VirtualMachineModel);
+
+  const allPages = useMemo(
+    () => [...pages, ...(dynamicPluginPages || [])] as NavPageKubevirt[],
+    [pages, dynamicPluginPages],
   );
-  const paths = pages.map((page) => page.href);
 
+  const paths = allPages.map((page) => page.href);
+
+  useEffect(() => {
+    const defaultPage = allPages.find(({ href }) => isEmpty(href));
+
+    const initialActiveTab =
+      allPages.find(({ href }) => !isEmpty(href) && location?.pathname.includes('/' + href)) ||
+      defaultPage;
+
+    setActiveItem(initialActiveTab?.name?.toLowerCase());
+  }, [allPages, location?.pathname]);
+
+  const [activeItem, setActiveItem] = useState<number | string>();
   return (
     <>
       <Nav variant="horizontal">
         <NavList className="co-m-horizontal-nav__menu horizontal-nav-bar__list">
-          {pages.map((item) => {
+          {allPages.map((item) => {
             if (item?.isHidden) return null;
 
             return (
@@ -52,12 +68,17 @@ const HorizontalNavbar: FC<HorizontalNavbarProps> = ({ instanceTypeExpandedSpec,
         </NavList>
       </Nav>
       <Routes>
-        {pages.map((page) => {
+        {allPages.map((page) => {
           const Component = page.component;
           return (
             <Route
               Component={(props) => (
-                <Component instanceTypeExpandedSpec={instanceTypeExpandedSpec} vm={vm} {...props} />
+                <Component
+                  instanceTypeExpandedSpec={instanceTypeExpandedSpec}
+                  obj={vm}
+                  params={params}
+                  {...props}
+                />
               )}
               key={page.href}
               path={page.href}

src/utils/components/HorizontalNavbar/utils/useDynamicPages.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+
+import {
+  HorizontalNavTab,
+  isHorizontalNavTab,
+  K8sModel,
+  useResolvedExtensions,
+} from '@openshift-console/dynamic-plugin-sdk';
+
+const useDynamicPages = (model: K8sModel) => {
+  const [dynamicNavTabExtensions, navTabExtentionsResolved] =
+    useResolvedExtensions<HorizontalNavTab>(isHorizontalNavTab);
+
+  return useMemo(
+    () =>
+      navTabExtentionsResolved
+        ? dynamicNavTabExtensions
+            .filter(
+              (tab) =>
+                tab.properties.model.group === model.apiGroup &&
+                tab.properties.model.version === model.apiVersion &&
+                tab.properties.model.kind === model.kind,
+            )
+            .map((tab) => ({
+              ...tab.properties.page,
+              component: tab.properties.component,
+            }))
+        : [],
+    [dynamicNavTabExtensions, model, navTabExtentionsResolved],
+  );
+};
+
+export default useDynamicPages;

src/views/virtualmachines/details/tabs/configuration/VirtualMachineConfigurationTab.tsx

@@ -21,7 +21,7 @@ import { getInnerTabFromPath, includesConfigurationPath, tabs } from './utils/ut
 
 import './virtual-machine-configuration-tab.scss';
 
-const VirtualMachineConfigurationTab: FC<NavPageComponentProps> = ({ vm: obj }) => {
+const VirtualMachineConfigurationTab: FC<NavPageComponentProps> = ({ obj }) => {
   const navigate = useNavigate();
   const location = useLocation();
 

src/views/virtualmachines/details/tabs/console/VirtualMachineConsolePage.tsx

@@ -19,7 +19,7 @@ import { printableVMStatus } from '../../../utils';
 
 import VirtualMachineConsolePageTitle from './components/VirtualMachineConsolePageTitle';
 
-const VirtualMachineConsolePage: FC<NavPageComponentProps> = ({ vm }) => {
+const VirtualMachineConsolePage: FC<NavPageComponentProps> = ({ obj: vm }) => {
   const { t } = useKubevirtTranslation();
   const [vmi, vmiLoaded] = useK8sWatchResource<V1VirtualMachineInstance>({
     groupVersionKind: VirtualMachineInstanceModelGroupVersionKind,

src/views/virtualmachines/details/tabs/diagnostic/VirtualMachineDiagnosticTab.tsx

@@ -16,7 +16,7 @@ import VirtualMachineLogViewer from './VirtualMachineLogViewer/VirtualMachineLog
 
 import './virtual-machine-diagnostic-tab.scss';
 
-const VirtualMachineDiagnosticTab: FC<NavPageComponentProps> = ({ vm }) => {
+const VirtualMachineDiagnosticTab: FC<NavPageComponentProps> = ({ obj: vm }) => {
   const navigate = useNavigate();
   const location = useLocation();
   const { t } = useKubevirtTranslation();

src/views/virtualmachines/details/tabs/events/VirtualMachinePageEvents.tsx

@@ -8,7 +8,7 @@ import { NavPageComponentProps } from '@virtualmachines/details/utils/types';
 
 import './VirtualMachinePageEventsTab.scss';
 
-const VirtualMachinePageEventsTab: FC<NavPageComponentProps> = ({ vm }) => {
+const VirtualMachinePageEventsTab: FC<NavPageComponentProps> = ({ obj: vm }) => {
   const { t } = useKubevirtTranslation();
 
   return (

src/views/virtualmachines/details/tabs/metrics/VirtualMachineMetricsTab.tsx

@@ -17,7 +17,7 @@ import { MetricsTabExpendedSections } from './utils/utils';
 
 import './virtual-machine-metrics-tab.scss';
 
-const VirtualMachineMetricsTab: FC<NavPageComponentProps> = ({ vm }) => {
+const VirtualMachineMetricsTab: FC<NavPageComponentProps> = ({ obj: vm }) => {
   const { t } = useKubevirtTranslation();
   const location = useLocation();
   const { loaded, pods, vmi } = useVMIAndPodsForVM(vm?.metadata?.name, vm?.metadata?.namespace);

src/views/virtualmachines/details/tabs/overview/VirtualMachinesOverviewTab.tsx

@@ -20,7 +20,7 @@ import useVMAlerts from './utils/hook/useVMAlerts';
 
 const VirtualMachinesOverviewTab: FC<NavPageComponentProps> = ({
   instanceTypeExpandedSpec,
-  vm,
+  obj: vm,
 }) => {
   const vmAlerts = useVMAlerts(vm);
   const { error, loaded, pods, vmi } = useVMIAndPodsForVM(

src/views/virtualmachines/details/tabs/snapshots/SnapshotListPage.tsx

@@ -14,7 +14,7 @@ import useSnapshotData from './hooks/useSnapshotData';
 
 import './SnapshotListPage.scss';
 
-const SnapshotListPage: FC<NavPageComponentProps> = ({ vm }) => {
+const SnapshotListPage: FC<NavPageComponentProps> = ({ obj: vm }) => {
   const { t } = useKubevirtTranslation();
   const { createModal } = useModal();
   const { error, loaded, restoresMap, snapshots } = useSnapshotData(

src/views/virtualmachines/details/tabs/yaml/VirtualMachineYAMLPage.tsx

@@ -7,7 +7,9 @@ import { NavPageComponentProps } from '@virtualmachines/details/utils/types';
 
 import './virtual-machine-yaml-page.scss';
 
-const VirtualMachineYAMLPage: FC<NavPageComponentProps> = ({ vm }) => {
+const VirtualMachineYAMLPage: FC<NavPageComponentProps> = (props) => {
+  const { obj: vm } = props;
+
   const loading = (
     <Bullseye>
       <Loading />

src/views/virtualmachines/details/utils/types.ts

@@ -1,6 +1,9 @@
+import { Params } from 'react-router-dom-v5-compat';
+
 import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
 
 export type NavPageComponentProps = {
   instanceTypeExpandedSpec?: V1VirtualMachine;
-  vm: V1VirtualMachine;
+  obj: V1VirtualMachine;
+  params: Params<string>;
 };