✨ Implemented overview of app, and improved logs of app.

lib/app-setup/root.tsx

@@ -29,6 +29,7 @@ import { TopBar } from '~/components/organisms/top-bar';
 import styleZenerSelect from '@oshq/react-select/index.css';
 import stylesUrl from '~/design-system/index.css';
 import rcss from 'react-highlightjs-logs/dist/index.css';
+import tailwindBase from '~/design-system/tailwind-base.js';
 import { isDev } from '../client/helpers/log';
 import { getClientEnv, getServerEnv } from '../configs/base-url.cjs';
 
@@ -171,15 +172,20 @@ const Root = ({
         <div
           id="loadOverlay"
           style={{
-            backgroundColor: '#777',
+            backgroundColor: tailwindBase.theme.colors.surface.basic.default,
             position: 'absolute',
             top: '0px',
             left: '0px',
             width: '100vw',
             height: '100vh',
             zIndex: '2000',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
-        />
+        >
+          Loading...
+        </div>
 
         {/* <Loading progress={transition} /> */}
         <script

src/apps/console/components/charts/charts-client.tsx

@@ -1,19 +1,23 @@
 import React, { Suspense } from 'react';
 import { cn } from '~/components/utils';
-import { ChartProps } from './charts';
+import { type ApexOptions } from 'apexcharts';
 import { LoadingPlaceHolder } from '../loading';
+import { Box } from '../common-console-components';
 
 // @ts-ignore
 const ChartsMain = React.lazy(() => import('./charts'));
 
 const Chart = (
-  props: ChartProps & {
+  props: {
+    options: ApexOptions;
+  } & {
+    title?: string;
     height?: string;
     width?: string;
     className?: string;
   }
 ) => {
-  const { height, width, className } = props;
+  const { height, width, className, title } = props;
   return (
     <Suspense
       fallback={
@@ -22,23 +26,26 @@ const Chart = (
             width: width || '100%',
             height: height || '100%',
           }}
-          className={cn(
-            'flex justify-center items-center bg-text-primary-100',
-            className
-          )}
+          className={cn(className, 'flex flex-col')}
         >
-          <LoadingPlaceHolder />
+          <Box title={title} className="h-full">
+            <div className="flex flex-col justify-center h-full">
+              <LoadingPlaceHolder />
+            </div>
+          </Box>
         </div>
       }
     >
       <div
-        className={cn(className)}
+        className={cn(className, 'flex flex-col')}
         style={{
           height: height || '100%',
           width: width || '100%',
         }}
       >
-        <ChartsMain {...props} />
+        <Box title={title}>
+          <ChartsMain {...props} />
+        </Box>
       </div>
     </Suspense>
   );

src/apps/console/components/charts/charts.tsx

@@ -1,38 +1,9 @@
 /* eslint-disable react/no-unused-prop-types */
 import ApexCharts from 'apexcharts';
+import { type ApexOptions } from 'apexcharts';
 import { useEffect, useRef } from 'react';
 
-export interface ChartProps {
-  height?: string;
-  width?: string;
-  options: {
-    chart: {
-      height: number;
-      type: string;
-    };
-    series: {
-      name: string;
-      data: number[];
-    }[];
-    dataLabels: {
-      enabled: boolean;
-    };
-    stroke: {
-      curve: string;
-    };
-    tooltip: {
-      x: {
-        format: string;
-      };
-    };
-    xaxis: {
-      type: 'category' | 'numeric' | 'logarithmic' | 'datetime';
-      categories: (number | string)[];
-    };
-  };
-}
-
-const ChartServer = ({ options }: ChartProps) => {
+const ChartServer = ({ options }: { options: ApexOptions }) => {
   const ref = useRef(null);
 
   useEffect(() => {

src/apps/console/components/common-console-components.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { Button } from '~/components/atoms/button';
+import { cn } from '~/components/utils';
 
 interface IDeleteContainer {
   title: ReactNode;
@@ -34,13 +35,19 @@ export const BoxPrimitive = ({ children }: IBoxPrimitive) => {
 
 interface IBox extends IBoxPrimitive {
   title: ReactNode;
+  className?: string;
 }
 
-export const Box = ({ children, title }: IBox) => {
+export const Box = ({ children, title, className }: IBox) => {
   return (
-    <div className="rounded border border-border-default bg-surface-basic-default shadow-button p-3xl flex flex-col gap-3xl ">
+    <div
+      className={cn(
+        'rounded border border-border-default bg-surface-basic-default shadow-button p-3xl flex flex-col gap-3xl ',
+        className
+      )}
+    >
       <div className="text-text-strong headingLg">{title}</div>
-      <div className="flex flex-col gap-3xl">{children}</div>
+      <div className="flex flex-col gap-3xl flex-1">{children}</div>
     </div>
   );
 };

src/apps/console/components/logger.tsx

@@ -15,6 +15,7 @@ import {
 } from '~/root/lib/client/helpers/search-filter';
 import useClass from '~/root/lib/client/hooks/use-class';
 import { socketUrl } from '~/root/lib/configs/base-url.cjs';
+import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import { generatePlainColor } from './color-generator';
 import Pulsable from './pulsable';
 import { logsMockData } from '../dummy/data';
@@ -404,13 +405,15 @@ const LogBlock = ({
   const [showAll, setShowAll] = useState(true);
 
   const ref = useRef(null);
-  // const listRef = useRef(null);
 
   useEffect(() => {
-    console.log('data', ref.current);
-
     (async () => {
-      if (follow && ref.current) {
+      if (
+        follow &&
+        ref.current &&
+        // @ts-ignore
+        typeof ref.current.scrollToIndex === 'function'
+      ) {
         // @ts-ignore
         ref.current.scrollToIndex({
           index: data.length - 1,
@@ -550,10 +553,12 @@ const useSocketLogs = ({ url, account, cluster, trackingId }: IuseLog) => {
   let wsclient: Promise<sock.w3cwebsocket>;
 
   const [socState, setSocState] = useState<sock.w3cwebsocket | null>(null);
+  const [subscribed, setSubscribed] = useState(false);
 
   if (typeof window !== 'undefined') {
     try {
       wsclient = new Promise<sock.w3cwebsocket>((res, rej) => {
+        let rejected = false;
         try {
           // eslint-disable-next-line new-cap
           const w = new sock.w3cwebsocket(
@@ -582,6 +587,9 @@ const useSocketLogs = ({ url, account, cluster, trackingId }: IuseLog) => {
               }
 
               if (m.type === 'info') {
+                if (m.message === 'subscribed to logs') {
+                  setSubscribed(true);
+                }
                 console.log(m.message);
                 return;
               }
@@ -611,19 +619,18 @@ const useSocketLogs = ({ url, account, cluster, trackingId }: IuseLog) => {
           };
 
           w.onopen = () => {
-            // console.log('socket connected');
             res(w);
           };
 
           w.onerror = (e) => {
             console.error(e);
-            rej(e);
+            if (!rejected) {
+              rejected = true;
+              rej(e);
+            }
           };
 
-          w.onclose = () => {
-            // wsclient.send(newMessage({ event: 'unsubscribe', data: 'test' }));
-            // logger.log('socket disconnected');
-          };
+          w.onclose = () => {};
         } catch (e) {
           rej(e);
         }
@@ -633,69 +640,70 @@ const useSocketLogs = ({ url, account, cluster, trackingId }: IuseLog) => {
     }
   }
 
-  useEffect(() => {
-    (async () => {
-      try {
-        // const client = await wsclient.;
-        // 'wss://auth-vision.devc.kloudlite.io/logs'
-
-        if (account === '' || cluster === '' || trackingId === '') {
-          return () => {};
-        }
-
-        if (logs.length) {
-          setLogs([]);
-        }
-        setIsLoading(true);
-
-        const client = await wsclient;
-        console.log('client', client);
+  useDebounce(
+    () => {
+      (async () => {
+        try {
+          if (account === '' || cluster === '' || trackingId === '') {
+            return () => {};
+          }
 
-        setSocState(client);
+          if (logs.length) {
+            setLogs([]);
+          }
+          setIsLoading(true);
 
-        client.send(
-          JSON.stringify({
-            event: 'subscribe',
-            data: {
-              account,
-              cluster,
-              trackingId,
-            },
-          })
-        );
-      } catch (e) {
-        console.error(e);
-        setLogs([]);
-        setError((e as Error).message);
-      }
+          const client = await wsclient;
 
-      return () => {
-        (async () => {
-          if (!socState) return;
+          setSocState(client);
 
-          socState.send(
+          client.send(
             JSON.stringify({
-              event: 'unsubscribe',
+              event: 'subscribe',
               data: {
                 account,
                 cluster,
                 trackingId,
               },
             })
           );
-
-          // client.close();
-
+        } catch (e) {
+          console.error(e);
           setLogs([]);
-        })();
-      };
-    })();
-  }, [account, cluster, trackingId, url]);
+          setError((e as Error).message);
+        }
+
+        return () => {
+          (async () => {
+            if (!socState) return;
+
+            socState.send(
+              JSON.stringify({
+                event: 'unsubscribe',
+                data: {
+                  account,
+                  cluster,
+                  trackingId,
+                },
+              })
+            );
+
+            // client.close();
+
+            setLogs([]);
+          })();
+        };
+      })();
+    },
+    1000,
+    [account, cluster, trackingId, url]
+  );
 
   return {
     logs,
     error,
     isLoading,
+    subscribed,
   };
 };
 
@@ -744,7 +752,7 @@ const LogComp = ({
     }
   }, [fullScreen]);
 
-  const { logs, error, isLoading } = useSocketLogs(websocket);
+  const { logs, error, isLoading, subscribed } = useSocketLogs(websocket);
 
   const [isClientSide, setIsClientSide] = useState(false);
 
@@ -759,12 +767,22 @@ const LogComp = ({
       <div
         className={classNames(className, {
           'fixed w-full h-full left-0 top-0 z-[999] bg-black': fullScreen,
+          relative: !fullScreen,
         })}
         style={{
           width: fullScreen ? '100%' : width,
           height: fullScreen ? '100vh' : height,
         }}
       >
+        {subscribed && logs.length === 0 && (
+          <div className="hljs bg-opacity-50 w-full h-full absolute z-10 flex justify-center items-center inset-0 rounded-md">
+            <div className="text-text-on-primary bodyXl-medium">
+              Connected to logs stream, and waiting for the logs to be
+              generated.
+            </div>
+          </div>
+        )}
+
         {error ? (
           <pre>{error}</pre>
         ) : (