OU-1004: List perses dashbaords

.gitignore

@@ -1,5 +1,6 @@
 .devcontainer/dev.env
 .DS_Store
+.vscode
 web/cypress/screenshots/
 web/cypress/export-env.sh
 web/screenshots/

config/perses-dashboards.patch.json

@@ -8,7 +8,7 @@
         "exact": false,
         "path": ["/multicloud/monitoring/v2/dashboards"],
         "component": {
-          "$codeRef": "DashboardsPage"
+          "$codeRef": "DashboardListPage"
         }
       }
     }
@@ -36,7 +36,7 @@
       "properties": {
         "exact": false,
         "path": ["/monitoring/v2/dashboards"],
-        "component": { "$codeRef": "DashboardsPage" }
+        "component": { "$codeRef": "DashboardListPage" }
       }
     }
   },
@@ -64,7 +64,7 @@
       "properties": {
         "exact": false,
         "path": ["/virt-monitoring/v2/dashboards"],
-        "component": { "$codeRef": "DashboardsPage" }
+        "component": { "$codeRef": "DashboardListPage" }
       }
     }
   },
@@ -83,5 +83,41 @@
         "insertAfter": "dashboards-virt"
       }
     }
+  },
+  {
+    "op": "add",
+    "path": "/extensions/1",
+    "value": {
+      "type": "console.page/route",
+      "properties": {
+        "exact": false,
+        "path": ["/monitoring/v2/dashboards/view"],
+        "component": { "$codeRef": "DashboardPage" }
+      }
+    }
+  },
+  {
+    "op": "add",
+    "path": "/extensions/1",
+    "value": {
+      "type": "console.page/route",
+      "properties": {
+        "exact": false,
+        "path": ["/virt-monitoring/v2/dashboards/view"],
+        "component": { "$codeRef": "DashboardPage" }
+      }
+    }
+  },
+  {
+    "op": "add",
+    "path": "/extensions/1",
+    "value": {
+      "type": "console.page/route",
+      "properties": {
+        "exact": false,
+        "path": ["/multicloud/monitoring/v2/dashboards/view"],
+        "component": { "$codeRef": "DashboardPage" }
+      }
+    }
   }
 ]

web/package.json

@@ -153,7 +153,8 @@
     "displayName": "OpenShift console monitoring plugin",
     "description": "This plugin adds the monitoring UI to the OpenShift web console",
     "exposedModules": {
-      "DashboardsPage": "./components/dashboards/perses/dashboard-page",
+      "DashboardListPage": "./components/dashboards/perses/dashboard-list-page",
+      "DashboardPage": "./components/dashboards/perses/dashboard-page",
       "LegacyDashboardsPage": "./components/dashboards/legacy/legacy-dashboard-page",
       "SilencesPage": "./components/alerting/SilencesPage",
       "SilencesDetailsPage": "./components/alerting/SilencesDetailsPage",

web/src/components/dashboards/perses/dashboard-layout.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from 'react';
+import { DashboardEmptyState } from './emptystates/DashboardEmptyState';
+import { DashboardSkeleton } from './dashboard-skeleton';
+import { CombinedDashboardMetadata } from './hooks/useDashboardsData';
+import { ProjectBar } from './project/ProjectBar';
+import { PersesWrapper } from './PersesWrapper';
+import { Overview } from '@openshift-console/dynamic-plugin-sdk';
+
+export interface DashboardLayoutProps {
+  activeProject: string | null;
+  setActiveProject: (project: string | null) => void;
+  activeProjectDashboardsMetadata: CombinedDashboardMetadata[];
+  changeBoard: (boardName: string) => void;
+  dashboardName: string;
+  children: ReactNode;
+}
+
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
+  activeProject,
+  setActiveProject,
+  activeProjectDashboardsMetadata,
+  changeBoard,
+  dashboardName,
+  children,
+}) => {
+  return (
+    <>
+      <ProjectBar activeProject={activeProject} setActiveProject={setActiveProject} />
+      <PersesWrapper project={activeProject}>
+        {activeProjectDashboardsMetadata?.length === 0 ? (
+          <DashboardEmptyState />
+        ) : (
+          <DashboardSkeleton
+            boardItems={activeProjectDashboardsMetadata}
+            changeBoard={changeBoard}
+            dashboardName={dashboardName}
+            activeProject={activeProject}
+          >
+            <Overview>{children}</Overview>
+          </DashboardSkeleton>
+        )}
+      </PersesWrapper>
+    </>
+  );
+};

web/src/components/dashboards/perses/dashboard-list-page.tsx

@@ -0,0 +1,26 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { type FC } from 'react';
+import { QueryParamProvider } from 'use-query-params';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+import { DashboardList } from './dashboard-list';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 0,
+    },
+  },
+});
+
+const DashboardListPage: FC = () => {
+  return (
+    <QueryParamProvider adapter={ReactRouter5Adapter}>
+      <QueryClientProvider client={queryClient}>
+        <DashboardList />
+      </QueryClientProvider>
+    </QueryParamProvider>
+  );
+};
+
+export default DashboardListPage;