refactor(k8s): namespace core logic (#12142)

Co-authored-by: testA113 <aliharriss1995@gmail.com>
Co-authored-by: Anthony Lapenna <anthony.lapenna@portainer.io>
Co-authored-by: James Carppe <85850129+jamescarppe@users.noreply.github.com>
Co-authored-by: Ali <83188384+testA113@users.noreply.github.com>

app/react/kubernetes/dashboard/DashboardView.tsx

@@ -9,14 +9,35 @@ import { DashboardItem } from '@@/DashboardItem/DashboardItem';
 import { PageHeader } from '@@/PageHeader';
 
 import { EnvironmentInfo } from './EnvironmentInfo';
-import { useGetDashboardQuery } from './queries/getDashboardQuery';
+import { useGetApplicationsCountQuery } from './queries/getApplicationsCountQuery';
+import { useGetConfigMapsCountQuery } from './queries/getConfigMapsCountQuery';
+import { useGetIngressesCountQuery } from './queries/getIngressesCountQuery';
+import { useGetSecretsCountQuery } from './queries/getSecretsCountQuery';
+import { useGetServicesCountQuery } from './queries/getServicesCountQuery';
+import { useGetVolumesCountQuery } from './queries/getVolumesCountQuery';
+import { useGetNamespacesCountQuery } from './queries/getNamespacesCountQuery';
 
 export function DashboardView() {
   const queryClient = useQueryClient();
   const environmentId = useEnvironmentId();
-  const dashboardQuery = useGetDashboardQuery(environmentId);
 
-  const dashboard = dashboardQuery.data;
+  const applicationsCountQuery = useGetApplicationsCountQuery(environmentId);
+  const configMapsCountQuery = useGetConfigMapsCountQuery(environmentId);
+  const ingressesCountQuery = useGetIngressesCountQuery(environmentId);
+  const secretsCountQuery = useGetSecretsCountQuery(environmentId);
+  const servicesCountQuery = useGetServicesCountQuery(environmentId);
+  const volumesCountQuery = useGetVolumesCountQuery(environmentId);
+  const namespacesCountQuery = useGetNamespacesCountQuery(environmentId);
+
+  const dashboard = {
+    applicationsCount: applicationsCountQuery.data,
+    configMapsCount: configMapsCountQuery.data,
+    ingressesCount: ingressesCountQuery.data,
+    secretsCount: secretsCountQuery.data,
+    servicesCount: servicesCountQuery.data,
+    volumesCount: volumesCountQuery.data,
+    namespacesCount: namespacesCountQuery.data,
+  };
 
   return (
     <>
@@ -33,8 +54,8 @@ export function DashboardView() {
         <DashboardGrid>
           <DashboardItem
             value={dashboard?.namespacesCount}
-            isLoading={dashboardQuery.isLoading}
-            isRefetching={dashboardQuery.isRefetching}
+            isLoading={namespacesCountQuery.isInitialLoading}
+            isRefetching={namespacesCountQuery.isRefetching}
             icon={Layers}
             to="kubernetes.resourcePools"
             type="Namespace"
@@ -42,8 +63,8 @@ export function DashboardView() {
           />
           <DashboardItem
             value={dashboard?.applicationsCount}
-            isLoading={dashboardQuery.isLoading}
-            isRefetching={dashboardQuery.isLoading}
+            isLoading={applicationsCountQuery.isInitialLoading}
+            isRefetching={applicationsCountQuery.isRefetching}
             icon={Box}
             to="kubernetes.applications"
             type="Application"
@@ -51,8 +72,8 @@ export function DashboardView() {
           />
           <DashboardItem
             value={dashboard?.servicesCount}
-            isLoading={dashboardQuery.isLoading}
-            isRefetching={dashboardQuery.isLoading}
+            isLoading={servicesCountQuery.isInitialLoading}
+            isRefetching={servicesCountQuery.isRefetching}
             icon={Shuffle}
             to="kubernetes.services"
             type="Service"
@@ -60,8 +81,8 @@ export function DashboardView() {
           />
           <DashboardItem
             value={dashboard?.ingressesCount}
-            isLoading={dashboardQuery.isLoading}
-            isRefetching={dashboardQuery.isLoading}
+            isLoading={ingressesCountQuery.isInitialLoading}
+            isRefetching={ingressesCountQuery.isRefetching}
             icon={Route}
             to="kubernetes.ingresses"
             type="Ingress"
@@ -70,8 +91,8 @@ export function DashboardView() {
           />
           <DashboardItem
             value={dashboard?.configMapsCount}
-            isLoading={dashboardQuery.isLoading}
-            isRefetching={dashboardQuery.isLoading}
+            isLoading={configMapsCountQuery.isInitialLoading}
+            isRefetching={configMapsCountQuery.isRefetching}
             icon={FileCode}
             to="kubernetes.configurations"
             params={{ tab: 'configmaps' }}
@@ -80,8 +101,8 @@ export function DashboardView() {
           />
           <DashboardItem
             value={dashboard?.secretsCount}
-            isLoading={dashboardQuery.isLoading}
-            isRefetching={dashboardQuery.isLoading}
+            isLoading={secretsCountQuery.isInitialLoading}
+            isRefetching={secretsCountQuery.isRefetching}
             icon={Lock}
             to="kubernetes.configurations"
             params={{ tab: 'secrets' }}
@@ -90,8 +111,8 @@ export function DashboardView() {
           />
           <DashboardItem
             value={dashboard?.volumesCount}
-            isLoading={dashboardQuery.isLoading}
-            isRefetching={dashboardQuery.isLoading}
+            isLoading={volumesCountQuery.isInitialLoading}
+            isRefetching={volumesCountQuery.isRefetching}
             icon={Database}
             to="kubernetes.volumes"
             type="Volume"

app/react/kubernetes/dashboard/queries/getApplicationsCountQuery.ts

@@ -0,0 +1,41 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { withError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+const queryKeys = {
+  list: (environmentId: EnvironmentId) =>
+    ['environments', environmentId, 'dashboard', 'applicationsCount'] as const,
+};
+
+export function useGetApplicationsCountQuery(
+  environmentId: EnvironmentId,
+  options?: { autoRefreshRate?: number }
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    async () => getApplicationsCount(environmentId),
+    {
+      ...withError('Unable to get applications count'),
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+    }
+  );
+}
+
+async function getApplicationsCount(environmentId: EnvironmentId) {
+  try {
+    const { data: applicationsCount } = await axios.get<number>(
+      `kubernetes/${environmentId}/applications/count`
+    );
+
+    return applicationsCount;
+  } catch (e) {
+    throw parseAxiosError(
+      e,
+      'Unable to get dashboard stats. Some counts may be inaccurate.'
+    );
+  }
+}

app/react/kubernetes/dashboard/queries/getConfigMapsCountQuery.ts

@@ -0,0 +1,41 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { withError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+const queryKeys = {
+  list: (environmentId: EnvironmentId) =>
+    ['environments', environmentId, 'dashboard', 'configMapsCount'] as const,
+};
+
+export function useGetConfigMapsCountQuery(
+  environmentId: EnvironmentId,
+  options?: { autoRefreshRate?: number }
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    async () => getConfigMapsCount(environmentId),
+    {
+      ...withError('Unable to get applications count'),
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+    }
+  );
+}
+
+async function getConfigMapsCount(environmentId: EnvironmentId) {
+  try {
+    const { data: configMapsCount } = await axios.get<number>(
+      `kubernetes/${environmentId}/configmaps/count`
+    );
+
+    return configMapsCount;
+  } catch (e) {
+    throw parseAxiosError(
+      e,
+      'Unable to get dashboard stats. Some counts may be inaccurate.'
+    );
+  }
+}

app/react/kubernetes/dashboard/queries/getIngressesCountQuery.ts

@@ -4,22 +4,20 @@ import { withError } from '@/react-tools/react-query';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';
 
-import { K8sDashboard } from '../types';
-
 const queryKeys = {
   list: (environmentId: EnvironmentId) =>
-    ['environments', environmentId, 'dashboard'] as const,
+    ['environments', environmentId, 'dashboard', 'ingressesCount'] as const,
 };
 
-export function useGetDashboardQuery(
+export function useGetIngressesCountQuery(
   environmentId: EnvironmentId,
   options?: { autoRefreshRate?: number }
 ) {
   return useQuery(
     queryKeys.list(environmentId),
-    async () => getDashboard(environmentId),
+    async () => getIngressesCount(environmentId),
     {
-      ...withError('Unable to get dashboard stats'),
+      ...withError('Unable to get ingresses count'),
       refetchInterval() {
         return options?.autoRefreshRate ?? false;
       },
@@ -27,13 +25,13 @@ export function useGetDashboardQuery(
   );
 }
 
-async function getDashboard(environmentId: EnvironmentId) {
+async function getIngressesCount(environmentId: EnvironmentId) {
   try {
-    const { data: dashboard } = await axios.get<K8sDashboard>(
-      `kubernetes/${environmentId}/dashboard`
+    const { data: ingressesCount } = await axios.get<number>(
+      `kubernetes/${environmentId}/ingresses/count`
     );
 
-    return dashboard;
+    return ingressesCount;
   } catch (e) {
     throw parseAxiosError(
       e,

app/react/kubernetes/dashboard/queries/getNamespacesCountQuery.ts

@@ -0,0 +1,41 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { withError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+const queryKeys = {
+  list: (environmentId: EnvironmentId) =>
+    ['environments', environmentId, 'dashboard', 'namespacesCount'] as const,
+};
+
+export function useGetNamespacesCountQuery(
+  environmentId: EnvironmentId,
+  options?: { autoRefreshRate?: number }
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    async () => getNamespacesCount(environmentId),
+    {
+      ...withError('Unable to get namespaces count'),
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+    }
+  );
+}
+
+async function getNamespacesCount(environmentId: EnvironmentId) {
+  try {
+    const { data: namespacesCount } = await axios.get<number>(
+      `kubernetes/${environmentId}/namespaces/count`
+    );
+
+    return namespacesCount;
+  } catch (e) {
+    throw parseAxiosError(
+      e,
+      'Unable to get dashboard stats. Some counts may be inaccurate.'
+    );
+  }
+}

app/react/kubernetes/dashboard/queries/getSecretsCountQuery.ts

@@ -0,0 +1,41 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { withError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+const queryKeys = {
+  list: (environmentId: EnvironmentId) =>
+    ['environments', environmentId, 'dashboard', 'secretsCount'] as const,
+};
+
+export function useGetSecretsCountQuery(
+  environmentId: EnvironmentId,
+  options?: { autoRefreshRate?: number }
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    async () => getSecretsCount(environmentId),
+    {
+      ...withError('Unable to get secrets count'),
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+    }
+  );
+}
+
+async function getSecretsCount(environmentId: EnvironmentId) {
+  try {
+    const { data: secretsCount } = await axios.get<number>(
+      `kubernetes/${environmentId}/secrets/count`
+    );
+
+    return secretsCount;
+  } catch (e) {
+    throw parseAxiosError(
+      e,
+      'Unable to get dashboard stats. Some counts may be inaccurate.'
+    );
+  }
+}

app/react/kubernetes/dashboard/queries/getServicesCountQuery.ts

@@ -0,0 +1,41 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { withError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+const queryKeys = {
+  list: (environmentId: EnvironmentId) =>
+    ['environments', environmentId, 'dashboard', 'servicesCount'] as const,
+};
+
+export function useGetServicesCountQuery(
+  environmentId: EnvironmentId,
+  options?: { autoRefreshRate?: number }
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    async () => getServicesCount(environmentId),
+    {
+      ...withError('Unable to get services count'),
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+    }
+  );
+}
+
+async function getServicesCount(environmentId: EnvironmentId) {
+  try {
+    const { data: servicesCount } = await axios.get<number>(
+      `kubernetes/${environmentId}/services/count`
+    );
+
+    return servicesCount;
+  } catch (e) {
+    throw parseAxiosError(
+      e,
+      'Unable to get dashboard stats. Some counts may be inaccurate.'
+    );
+  }
+}

app/react/kubernetes/dashboard/queries/getVolumesCountQuery.ts

@@ -0,0 +1,41 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { withError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+const queryKeys = {
+  list: (environmentId: EnvironmentId) =>
+    ['environments', environmentId, 'dashboard', 'volumesCount'] as const,
+};
+
+export function useGetVolumesCountQuery(
+  environmentId: EnvironmentId,
+  options?: { autoRefreshRate?: number }
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    async () => getVolumesCount(environmentId),
+    {
+      ...withError('Unable to get volumes count'),
+      refetchInterval() {
+        return options?.autoRefreshRate ?? false;
+      },
+    }
+  );
+}
+
+async function getVolumesCount(environmentId: EnvironmentId) {
+  try {
+    const { data: volumesCount } = await axios.get<number>(
+      `kubernetes/${environmentId}/volumes/count`
+    );
+
+    return volumesCount;
+  } catch (e) {
+    throw parseAxiosError(
+      e,
+      'Unable to get dashboard stats. Some counts may be inaccurate.'
+    );
+  }
+}