HOSTSD-209 Fix all servers and auth bugs (#55)

src/dashboard/src/app/client/admin/page.tsx

@@ -1,9 +1,14 @@
 'use client';
 
-import { useSecureRoute } from '@/hooks';
+import { useAuth } from '@/hooks';
+import { redirect } from 'next/navigation';
 
 export default function Page() {
-  useSecureRoute((state) => state.isOrganizationAdmin, '/');
+  const state = useAuth();
+
+  // Only allow Organization Admin role to view this page.
+  if (state.status === 'loading') return <div>Loading...</div>;
+  if (!state.isOrganizationAdmin) redirect('/');
 
   return <div>Client Admin</div>;
 }

src/dashboard/src/app/client/admin/users/[id]/page.tsx

@@ -1,12 +1,20 @@
 'use client';
 
 import { Button } from '@/components';
+import { useAuth } from '@/hooks';
+import { redirect } from 'next/navigation';
 
 interface IPageProps {
   params: { id: string; searchParams: any };
 }
 
 export default function Page({ params }: IPageProps) {
+  const state = useAuth();
+
+  // Only allow Organization Admin role to view this page.
+  if (state.status === 'loading') return <div>Loading...</div>;
+  if (!state.isOrganizationAdmin) redirect('/');
+
   return (
     <div>
       {params.id}:{params.searchParams}

src/dashboard/src/app/client/admin/users/page.tsx

@@ -1,9 +1,14 @@
 'use client';
 
-import { useSecureRoute } from '@/hooks';
+import { useAuth } from '@/hooks';
+import { redirect } from 'next/navigation';
 
 export default function Page() {
-  useSecureRoute((state) => state.isOrganizationAdmin, '/');
+  const state = useAuth();
+
+  // Only allow Organization Admin role to view this page.
+  if (state.status === 'loading') return <div>Loading...</div>;
+  if (!state.isOrganizationAdmin) redirect('/');
 
   return <div>Client User Admin</div>;
 }

src/dashboard/src/app/client/dashboard/page.tsx

@@ -1,10 +1,15 @@
 'use client';
 
 import { Dashboard } from '@/components';
-import { useSecureRoute } from '@/hooks';
+import { useAuth } from '@/hooks';
+import { redirect } from 'next/navigation';
 
 export default function Page() {
-  useSecureRoute((state) => state.isClient, '/');
+  const state = useAuth();
+
+  // Only allow Client role to view this page.
+  if (state.status === 'loading') return <div>Loading...</div>;
+  if (!state.isClient) redirect('/');
 
   return <Dashboard />;
 }

src/dashboard/src/app/client/servers/page.tsx

@@ -1,19 +1,22 @@
 'use client';
 
 import { AllocationTable, Col } from '@/components';
-import { useSecureRoute } from '@/hooks';
-import { useFilteredOrganizations, useFilteredServerItems } from '@/hooks/filter';
+import { useAuth } from '@/hooks';
+import { useServerItems } from '@/hooks/data';
+import { redirect } from 'next/navigation';
 
 export default function Page() {
-  useSecureRoute((state) => state.isClient, '/');
+  const state = useAuth();
+  const { isReady, serverItems } = useServerItems();
 
-  const { organizations } = useFilteredOrganizations();
-  const { serverItems } = useFilteredServerItems();
+  // Only allow Client role to view this page.
+  if (state.status === 'loading') return <div>Loading...</div>;
+  if (!state.isClient) redirect('/');
 
   return (
     <Col>
       <h1>All Servers</h1>
-      <AllocationTable operatingSystem={''} serverItems={serverItems} />
+      <AllocationTable serverItems={serverItems} loading={!isReady} />
     </Col>
   );
 }

src/dashboard/src/app/hsb/admin/organizations/[id]/page.tsx

@@ -1,12 +1,20 @@
 'use client';
 
 import { Button } from '@/components';
+import { useAuth } from '@/hooks';
+import { redirect } from 'next/navigation';
 
 interface IPageProps {
   params: { id: string; searchParams: any };
 }
 
 export default function Page({ params }: IPageProps) {
+  const state = useAuth();
+
+  // Only allow System Admin role to view this page.
+  if (state.status === 'loading') return <div>Loading...</div>;
+  if (!state.isSystemAdmin) redirect('/');
+
   return (
     <div>
       {params.id}:{params.searchParams}

src/dashboard/src/app/hsb/admin/organizations/page.tsx

@@ -1,9 +1,14 @@
 'use client';
 
-import { useSecureRoute } from '@/hooks';
+import { useAuth } from '@/hooks';
+import { redirect } from 'next/navigation';
 
 export default function Page() {
-  useSecureRoute((state) => state.isSystemAdmin, '/');
+  const state = useAuth();
+
+  // Only allow System Admin role to view this page.
+  if (state.status === 'loading') return <div>Loading...</div>;
+  if (!state.isSystemAdmin) redirect('/');
 
   return <div>HSB Organization Admin</div>;
 }

src/dashboard/src/app/hsb/admin/page.tsx

@@ -1,3 +1,14 @@
+'use client';
+
+import { useAuth } from '@/hooks';
+import { redirect } from 'next/navigation';
+
 export default function Page() {
+  const state = useAuth();
+
+  // Only allow System Admin role to view this page.
+  if (state.status === 'loading') return <div>Loading...</div>;
+  if (!state.isSystemAdmin) redirect('/');
+
   return <div>HSB Admin</div>;
 }

src/dashboard/src/app/hsb/admin/users/[id]/page.tsx

@@ -1,12 +1,20 @@
 'use client';
 
 import { Button } from '@/components';
+import { useAuth } from '@/hooks';
+import { redirect } from 'next/navigation';
 
 interface IPageProps {
   params: { id: string; searchParams: any };
 }
 
 export default function Page({ params }: IPageProps) {
+  const state = useAuth();
+
+  // Only allow System Admin role to view this page.
+  if (state.status === 'loading') return <div>Loading...</div>;
+  if (!state.isSystemAdmin) redirect('/');
+
   return (
     <div>
       {params.id}:{params.searchParams}

src/dashboard/src/app/hsb/admin/users/page.tsx

@@ -3,14 +3,15 @@
 import styles from './Users.module.scss';
 
 import { Button, Checkbox, Info, Overlay, Select, Sheet, Spinner, Table, Text } from '@/components';
-import { IUserModel, useSecureRoute } from '@/hooks';
+import { IUserModel, useAuth } from '@/hooks';
 import { useApiUsers } from '@/hooks/api/admin';
 import { useGroups, useUsers } from '@/hooks/data';
+import { redirect } from 'next/navigation';
 import React from 'react';
 import { IUserForm } from './IUserForm';
 
 export default function Page() {
-  useSecureRoute((state) => state.isSystemAdmin, '/');
+  const state = useAuth();
   const { isReady: isReadyUsers, users } = useUsers({ includeGroups: true });
   const { isReady: isReadyGroups, groups, options: groupOptions } = useGroups();
   const { update: updateUser } = useApiUsers();
@@ -70,6 +71,10 @@ export default function Page() {
     setRecords(results);
   }, [updateUser, records]);
 
+  // Only allow System Admin role to view this page.
+  if (state.status === 'loading') return <div>Loading...</div>;
+  if (!state.isSystemAdmin) redirect('/');
+
   return (
     <Sheet>
       <div className={styles.container}>

src/dashboard/src/app/hsb/dashboard/page.tsx

@@ -1,10 +1,15 @@
 'use client';
 
 import { Dashboard } from '@/components';
-import { useSecureRoute } from '@/hooks';
+import { useAuth } from '@/hooks';
+import { redirect } from 'next/navigation';
 
 export default function Page() {
-  useSecureRoute((state) => state.isHSB, '/');
+  const state = useAuth();
+
+  // Only allow HSB role to view this page.
+  if (state.status === 'loading') return <div>Loading...</div>;
+  if (!state.isHSB) redirect('/');
 
   return <Dashboard />;
 }

src/dashboard/src/app/hsb/servers/page.tsx

@@ -1,19 +1,22 @@
 'use client';
 
 import { AllocationTable, Col } from '@/components';
-import { useSecureRoute } from '@/hooks';
-import { useFilteredOrganizations, useFilteredServerItems } from '@/hooks/filter';
+import { useAuth } from '@/hooks';
+import { useServerItems } from '@/hooks/data';
+import { redirect } from 'next/navigation';
 
 export default function Page() {
-  useSecureRoute((state) => state.isHSB, '/');
+  const state = useAuth();
+  const { isReady, serverItems } = useServerItems();
 
-  const { organizations } = useFilteredOrganizations();
-  const { serverItems } = useFilteredServerItems();
+  // Only allow HSB role to view this page.
+  if (state.status === 'loading') return <div>Loading...</div>;
+  if (!state.isHSB) redirect('/');
 
   return (
     <Col>
       <h1>All Servers</h1>
-      <AllocationTable operatingSystem={''} serverItems={serverItems} />
+      <AllocationTable serverItems={serverItems} loading={!isReady} />
     </Col>
   );
 }

src/dashboard/src/components/charts/bar/allocationByVolume/AllocationByVolume.tsx

@@ -22,13 +22,25 @@ export const AllocationByVolume = ({
       title="Drive Space"
       data={{
         ...defaultData,
-        datasets: fileSystemItems.map<IBarChartRowData<IFileSystemItemModel>>((fsi) => ({
-          key: fsi.name,
-          label: fsi.name,
-          capacity: fsi.capacity,
-          available: fsi.availableSpace,
-          data: fsi,
-        })),
+        datasets: fileSystemItems
+          .map<IBarChartRowData<IFileSystemItemModel>>((fsi) => ({
+            key: fsi.name,
+            label: fsi.name,
+            capacity: fsi.capacity,
+            available: fsi.availableSpace,
+            data: fsi,
+          }))
+          .sort((a, b) =>
+            a.capacity < b.capacity
+              ? 1
+              : a.capacity > b.capacity
+              ? -1
+              : a.label < b.label
+              ? -1
+              : a.label > b.label
+              ? 1
+              : 0,
+          ),
       }}
       exportDisabled={true}
       onExport={() => {}}

src/dashboard/src/components/dashboard/useDashboardFilter.ts

@@ -59,28 +59,28 @@ export const useDashboardFilter = () => {
         filter?.operatingSystemItem ?? filteredOperatingSystemItem;
       const selectedServerItem = filter?.serverItem ?? filteredServerItem;
 
-      if (filter?.tenant) setFilteredTenant(filter?.tenant);
+      if (filter?.tenant) setFilteredTenant(filter.tenant);
       if (selectedTenant) setDashboardTenants([selectedTenant]);
       else setDashboardTenants(filteredTenants);
 
-      if (filter?.organization) setFilteredOrganization(filter?.organization);
+      if (filter?.organization) setFilteredOrganization(filter.organization);
       if (selectedOrganization) setDashboardOrganizations([selectedOrganization]);
       else setDashboardOrganizations(filteredOrganizations);
 
-      if (filter?.operatingSystemItem) setFilteredOperatingSystemItem(filter?.operatingSystemItem);
+      if (filter?.operatingSystemItem) setFilteredOperatingSystemItem(filter.operatingSystemItem);
       if (selectedOperatingSystemItem)
         setDashboardOperatingSystemItems([selectedOperatingSystemItem]);
       else setDashboardOperatingSystemItems(filteredOperatingSystemItems);
 
-      if (filter?.serverItem) setFilteredServerItem(filter?.serverItem);
+      if (filter?.serverItem) setFilteredServerItem(filter.serverItem);
       if (selectedServerItem) setDashboardServerItems([selectedServerItem]);
       else setDashboardServerItems(filteredServerItems);
 
       setDashboardDateRange(filteredDateRange);
 
-      if (filteredServerItem)
+      if (selectedServerItem)
         await findFileSystemItems({
-          serverItemServiceNowKey: filteredServerItem.serviceNowKey,
+          serverItemServiceNowKey: selectedServerItem.serviceNowKey,
         });
 
       await findServerHistoryItems({

src/dashboard/src/hooks/index.ts

@@ -1,4 +1,3 @@
 export * from './api';
 export * from './constants';
 export * from './useAuth';
-export * from './useSecureRoute';