From b5635288e3575d3101c3cd83f705ca28bbe635a1 Mon Sep 17 00:00:00 2001 From: Wilbur Zhang Date: Sun, 19 Feb 2023 22:29:13 -0500 Subject: [PATCH 1/4] hotfix for home until full design --- src/components/DashboardCard.tsx | 2 +- src/pages/home.tsx | 24 ++++++++++++++++++------ 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/components/DashboardCard.tsx b/src/components/DashboardCard.tsx index 5135edc09..2b099b2a0 100644 --- a/src/components/DashboardCard.tsx +++ b/src/components/DashboardCard.tsx @@ -9,7 +9,7 @@ export default function DashboardCard({ }) { return (
{children}
diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 1852a9c01..1c1de53f9 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -3,6 +3,9 @@ import DashboardCard from 'components/DashboardCard'; import PerformanceGraph from 'components/Graphs/PerformanceGraph'; import { useDocumentTitle } from 'usehooks-ts'; import { round } from 'utils/util'; +import { useUserInfo } from 'data/UserInfo'; +import { LodestoneContext } from 'data/LodestoneContext'; +import { useContext } from 'react'; type CpuUsageReply = { cpu_speed: number; @@ -32,6 +35,9 @@ const getRamUsage = async (): Promise<[number, number]> => { }; const Home = () => { + const { token } = useContext(LodestoneContext); + const { isLoading, isError, data: user } = useUserInfo(); + useDocumentTitle('Home - Lodestone'); return ( // used to possibly center the content @@ -39,15 +45,21 @@ const Home = () => { {/* main content container */}

- Home + {`Welcome, ${ + token && !isLoading && !isError && user + ? `${user.username}` + : 'Guest' + }!`}

-

Display some general information here maybe

+

+ {' '} + Select or create an instance to continue. +

-

Performance

-
+
{
Date: Mon, 20 Feb 2023 01:34:29 -0500 Subject: [PATCH 2/4] added spinner component to give time for user info to load --- src/components/DashboardLayout/Spinner.tsx | 18 ++++++++++++++++++ src/pages/InstanceTabs/InstanceTabs.tsx | 14 ++------------ src/pages/home.tsx | 16 ++++++++++++++++ 3 files changed, 36 insertions(+), 12 deletions(-) create mode 100644 src/components/DashboardLayout/Spinner.tsx diff --git a/src/components/DashboardLayout/Spinner.tsx b/src/components/DashboardLayout/Spinner.tsx new file mode 100644 index 000000000..288374f80 --- /dev/null +++ b/src/components/DashboardLayout/Spinner.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +const Spinner = () => { + return ( +
+
+
+
+
+ ); +}; + +export default Spinner; diff --git a/src/pages/InstanceTabs/InstanceTabs.tsx b/src/pages/InstanceTabs/InstanceTabs.tsx index 9e49ded66..bef58d9bd 100644 --- a/src/pages/InstanceTabs/InstanceTabs.tsx +++ b/src/pages/InstanceTabs/InstanceTabs.tsx @@ -5,6 +5,7 @@ import { useLocation } from 'react-router-dom'; import InstanceTabListMap from '../../data/InstanceTabListMap'; import Label from 'components/Atoms/Label'; import { stateToLabelColor } from 'utils/util'; +import Spinner from 'components/DashboardLayout/Spinner'; const InstanceTabs = () => { useDocumentTitle('Dashboard - Lodestone'); const location = useLocation(); @@ -25,18 +26,7 @@ const InstanceTabs = () => { if (!instance || !uuid) { if (loading) { - return ( -
-
-
-
-
- ); + return ; } else { return (
{ const { isLoading, isError, data: user } = useUserInfo(); useDocumentTitle('Home - Lodestone'); + + const [loading, setLoading] = useState(true); + + useEffect(() => { + //give time for user to load + setTimeout(() => { + setLoading(false); + }, 1000); + }, []); + + if (loading && isLoading) { + return ; + } + return ( // used to possibly center the content
From 345cd4c7be6455fe9185ec99fe56022094f4d3b0 Mon Sep 17 00:00:00 2001 From: NicholasLin718 Date: Mon, 20 Feb 2023 01:38:18 -0500 Subject: [PATCH 3/4] temporary: changed console to default tab --- src/components/DashboardLayout/InstanceViewLayout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DashboardLayout/InstanceViewLayout.tsx b/src/components/DashboardLayout/InstanceViewLayout.tsx index 2468b91c7..dc88e6a3f 100644 --- a/src/components/DashboardLayout/InstanceViewLayout.tsx +++ b/src/components/DashboardLayout/InstanceViewLayout.tsx @@ -28,7 +28,7 @@ export const InstanceViewLayout = () => { if (queryInstanceId && instances && queryInstanceId in instances) { setInstanceState(instances[queryInstanceId]); if (!location.pathname.startsWith('/dashboard')) - setPathname('/dashboard/overview'); + setPathname('/dashboard/console'); } else { setInstanceState(undefined); if (location.pathname.startsWith('/dashboard')) setPathname('/'); @@ -44,7 +44,7 @@ export const InstanceViewLayout = () => { } else { setInstanceState(instance); setQueryInstanceId(instance.uuid); - setPathname('/dashboard/overview'); + setPathname('/dashboard/console'); } } /* End Instances */ From fd0fe3110248f9249288ecac2716b79cfd430182 Mon Sep 17 00:00:00 2001 From: NicholasLin718 Date: Mon, 20 Feb 2023 17:15:43 -0500 Subject: [PATCH 4/4] made home the same width as an instance's overview page --- src/pages/InstanceTabs/InstanceTabs.tsx | 2 +- src/pages/home.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/InstanceTabs/InstanceTabs.tsx b/src/pages/InstanceTabs/InstanceTabs.tsx index bef58d9bd..319662c1c 100644 --- a/src/pages/InstanceTabs/InstanceTabs.tsx +++ b/src/pages/InstanceTabs/InstanceTabs.tsx @@ -53,7 +53,7 @@ const InstanceTabs = () => { (tab) => tab.path === path && (
diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 4dd0fbf26..450f350de 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -57,7 +57,7 @@ const Home = () => { return ( // used to possibly center the content -
+
{/* main content container */}