Merge pull request #166 from Lodestone-Team/homeHotfix

Author: Ynng

src/components/DashboardCard.tsx

@@ -9,7 +9,7 @@ export default function DashboardCard({
 }) {
   return (
     <div
-      className={`flex h-fit w-full flex-col justify-evenly gap-8 rounded-2xl bg-gray-800 px-10 pt-8 pb-10 ${className} border-gray-faded/30 border`}
+      className={`flex h-fit w-full flex-col justify-evenly gap-8 rounded-2xl bg-gray-850 p-4 ${className} border border-gray-faded/30`}
     >
       {children}
     </div>

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 */

src/components/DashboardLayout/Spinner.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Spinner = () => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75">
+      <div className="relative h-24 w-24">
+        <div
+          className="absolute top-0 left-0 h-full w-full animate-spin rounded-full border-4 border-t-4 border-blue-400"
+          style={{
+            borderBottomColor: 'transparent',
+          }}
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+export default Spinner;

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 (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75">
-          <div className="relative h-24 w-24">
-            <div
-              className="absolute top-0 left-0 h-full w-full animate-spin rounded-full border-4 border-t-4 border-blue-400"
-              style={{
-                borderBottomColor: 'transparent',
-              }}
-            ></div>
-          </div>
-        </div>
-      );
+      return <Spinner />;
     } else {
       return (
         <div
@@ -63,7 +53,7 @@ const InstanceTabs = () => {
         (tab) =>
           tab.path === path && (
             <div
-              className="gutter-stable -mx-4 flex grow flex-row items-stretch overflow-y-auto pl-4 pr-2"
+              className="gutter-stable -mx-3 flex grow flex-row items-stretch overflow-y-auto pl-4 pr-2"
               key={`${instance.name}-${tab.title}`}
             >
               <div className="flex h-fit min-h-full w-full flex-col gap-16 pt-6 pb-10 focus:outline-none">

src/pages/home.tsx

@@ -1,8 +1,13 @@
 import axios from 'axios';
+import { useEffect, useState } from 'react';
 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';
+import Spinner from 'components/DashboardLayout/Spinner';
 
 type CpuUsageReply = {
   cpu_speed: number;
@@ -32,22 +37,45 @@ const getRamUsage = async (): Promise<[number, number]> => {
 };
 
 const Home = () => {
+  const { token } = useContext(LodestoneContext);
+  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 <Spinner />;
+  }
+
   return (
     // used to possibly center the content
-    <div className="relative flex h-full w-full flex-row justify-center overflow-y-scroll px-4 pt-8 pb-10 @container">
+    <div className="relative mx-auto flex h-full w-full max-w-4xl flex-row justify-center overflow-y-scroll pt-8 pb-10 @container">
       {/* main content container */}
       <div className="flex h-fit min-h-full w-full grow flex-col items-start gap-2">
         <h1 className="font-title text-2xlarge font-bold tracking-tight text-gray-300">
-          Home
+          {`Welcome, ${
+            token && !isLoading && !isError && user
+              ? `${user.username}`
+              : 'Guest'
+          }!`}
         </h1>
-        <p>Display some general information here maybe</p>
+        <h3 className="mb-4 text-h3 font-medium italic tracking-medium text-white/50">
+          {' '}
+          Select or create an instance to continue.
+        </h3>
         <DashboardCard>
-          <h1 className="text-h3 font-bold"> Performance </h1>
-          <div className="mb-10 grid grid-cols-2 gap-10">
+          <div className="my-8 grid grid-cols-2 gap-10">
             <div>
               <PerformanceGraph
-                title="CPU Usage"
+                title="CPU load"
                 color="#62DD76"
                 backgroundColor="#61AE3240"
                 getter={getCpuUsage}
@@ -56,7 +84,7 @@ const Home = () => {
             </div>
             <div>
               <PerformanceGraph
-                title="Memory Usage"
+                title="Memory load"
                 color="#62DD76"
                 backgroundColor="#61AE3240"
                 getter={getRamUsage}