HOSTSD-275 Fix dashboard (#91)

bcgov · Feb 13, 2024 · a83930d · a83930d
1 parent a6d7db8
commit a83930d
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 16 deletions.
diff --git a/src/dashboard/src/app/client/servers/page.tsx b/src/dashboard/src/app/client/servers/page.tsx
@@ -1,23 +1,37 @@
 'use client';
 
-import { AllocationTable } from '@/components';
+import { AllocationTable, useDashboardFilter } from '@/components';
 import { LoadingAnimation } from '@/components/loadingAnimation';
 import { useAuth } from '@/hooks';
-import { useOperatingSystemItems, useServerItems } from '@/hooks/data';
+import {
+  useOperatingSystemItems,
+  useOrganizations,
+  useServerItems,
+  useTenants,
+} from '@/hooks/data';
 import { useDashboardStore, useFilteredStore } from '@/store';
 import { redirect, useRouter } from 'next/navigation';
 
 export default function Page() {
   const router = useRouter();
   const state = useAuth();
-  const { isReady: isReadyOperatingSystemItems } = useOperatingSystemItems({ init: true });
+  const { tenants } = useTenants({ init: true });
+  const { organizations } = useOrganizations({
+    init: true,
+    includeTenants: true,
+  });
+  const { isReady: isReadyOperatingSystemItems, operatingSystemItems } = useOperatingSystemItems({
+    init: true,
+  });
   const { isReady: isReadyServerItems, serverItems } = useServerItems({
     useSimple: true,
     init: true,
   });
   const setValues = useFilteredStore((state) => state.setValues);
   const setDashboardServerItems = useDashboardStore((state) => state.setServerItems);
 
+  const updateDashboard = useDashboardFilter();
+
   // Only allow Client role to view this page.
   if (state.status === 'loading') return <LoadingAnimation />;
   if (!state.isClient) redirect('/');
@@ -27,10 +41,23 @@ export default function Page() {
       margin={-75}
       serverItems={serverItems}
       loading={!isReadyOperatingSystemItems && !isReadyServerItems}
-      onClick={(serverItem) => {
+      onClick={async (serverItem) => {
         if (serverItem) {
-          setValues((state) => ({ serverItem }));
-          setDashboardServerItems([serverItem]);
+          const tenant = tenants.find((tenant) => tenant.id === serverItem?.tenantId);
+          const organization = organizations.find(
+            (organization) => organization.id === serverItem?.organizationId,
+          );
+          const operatingSystemItem = operatingSystemItems.find(
+            (operatingSystemItem) => operatingSystemItem.id === serverItem?.operatingSystemItemId,
+          );
+          setValues((state) => ({ serverItem, tenant, organization, operatingSystemItem }));
+          await updateDashboard({
+            tenant,
+            organization,
+            operatingSystemItem,
+            serverItem,
+            applyFilter: true,
+          });
           router.push(`/client/dashboard?serverItem=${serverItem?.serviceNowKey}`);
         }
       }}

diff --git a/src/dashboard/src/app/hsb/servers/page.tsx b/src/dashboard/src/app/hsb/servers/page.tsx
@@ -1,19 +1,34 @@
 'use client';
 
-import { AllocationTable } from '@/components';
+import { AllocationTable, useDashboardFilter } from '@/components';
 import { LoadingAnimation } from '@/components/loadingAnimation';
 import { useAuth } from '@/hooks';
-import { useServerItems } from '@/hooks/data';
+import {
+  useOperatingSystemItems,
+  useOrganizations,
+  useServerItems,
+  useTenants,
+} from '@/hooks/data';
 import { useDashboardStore, useFilteredStore } from '@/store';
 import { redirect, useRouter } from 'next/navigation';
 
 export default function Page() {
   const router = useRouter();
   const state = useAuth();
+  const { tenants } = useTenants({ init: true });
+  const { organizations } = useOrganizations({
+    init: true,
+    includeTenants: true,
+  });
+  const { operatingSystemItems } = useOperatingSystemItems({
+    init: true,
+  });
   const { isReady, serverItems } = useServerItems({ useSimple: true, init: true });
   const setValues = useFilteredStore((state) => state.setValues);
   const setDashboardServerItems = useDashboardStore((state) => state.setServerItems);
 
+  const updateDashboard = useDashboardFilter();
+
   // Only allow HSB role to view this page.
   if (state.status === 'loading') return <LoadingAnimation />;
   if (!state.isHSB) redirect('/');
@@ -23,10 +38,23 @@ export default function Page() {
       margin={-75}
       serverItems={serverItems}
       loading={!isReady}
-      onClick={(serverItem) => {
+      onClick={async (serverItem) => {
         if (serverItem) {
-          setValues((state) => ({ serverItem }));
-          setDashboardServerItems([serverItem]);
+          const tenant = tenants.find((tenant) => tenant.id === serverItem?.tenantId);
+          const organization = organizations.find(
+            (organization) => organization.id === serverItem?.organizationId,
+          );
+          const operatingSystemItem = operatingSystemItems.find(
+            (operatingSystemItem) => operatingSystemItem.id === serverItem?.operatingSystemItemId,
+          );
+          setValues((state) => ({ serverItem, tenant, organization, operatingSystemItem }));
+          await updateDashboard({
+            tenant,
+            organization,
+            operatingSystemItem,
+            serverItem,
+            applyFilter: true,
+          });
           router.push(`/hsb/dashboard?serverItem=${serverItem?.serviceNowKey}`);
         }
       }}

diff --git a/src/dashboard/src/components/dashboard/Dashboard.tsx b/src/dashboard/src/components/dashboard/Dashboard.tsx
@@ -37,8 +37,8 @@ import { useDashboardFilter } from '.';
  * @returns Component
  */
 export const Dashboard = () => {
-  const { isReady: isReadyTenants } = useTenants({ init: true });
-  const { isReady: isReadyOrganizations } = useOrganizations({
+  const { isReady: isReadyTenants, tenants } = useTenants({ init: true });
+  const { isReady: isReadyOrganizations, organizations } = useOrganizations({
     init: true,
     includeTenants: true,
   });
@@ -88,7 +88,8 @@ export const Dashboard = () => {
   // A single server
   const showAllocationByVolume = !!dashboardServerItem;
   // All servers within available organizations
-  const showAllocationByStorageVolume = !dashboardOrganization && !dashboardServerItem;
+  const showAllocationByStorageVolume =
+    !dashboardOrganization && !dashboardOperatingSystemItem && !dashboardServerItem;
   // All servers with OS
   const showAllocationTable = !!dashboardOperatingSystemItem && !dashboardServerItem;
   // Show each drive over time for server
@@ -110,7 +111,13 @@ export const Dashboard = () => {
       ) {
         updateDashboard({ reset: true });
       } else if (init) {
-        updateDashboard({ applyFilter: true });
+        updateDashboard({
+          tenant: values.tenant,
+          organization: values.organization,
+          operatingSystemItem: values.operatingSystemItem,
+          serverItem: values.serverItem,
+          applyFilter: true,
+        });
       }
       setInit(false);
     }
@@ -290,7 +297,14 @@ export const Dashboard = () => {
           serverItems={dashboardServerItems}
           loading={!isReadyServerItems || !isReadyOperatingSystemItems}
           onClick={async (serverItem) => {
-            setValues((state) => ({ serverItem }));
+            const tenant = tenants.find((tenant) => tenant.id === serverItem?.tenantId);
+            const organization = organizations.find(
+              (organization) => organization.id === serverItem?.organizationId,
+            );
+            const operatingSystemItem = operatingSystemItems.find(
+              (operatingSystemItem) => operatingSystemItem.id === serverItem?.operatingSystemItemId,
+            );
+            setValues((state) => ({ serverItem, tenant, organization, operatingSystemItem }));
             await updateDashboard({ serverItem });
           }}
         />