kloudlite · abdheshnayak · Mar 11, 2024 · Mar 11, 2024 · Mar 11, 2024 · Mar 11, 2024
@@ -8,7 +8,7 @@ tasks:
     interactive: true
     cmds:
       - |
-        BASE_URL=gcp-production.kloudlite.io
+        BASE_URL=dev.kloudlite.io
         COOKIE_DOMAIN=".kloudlite.io"
         GATEWAY_URL="http://gateway.kloudlite.svc.cluster.local"
         case {{.app}} in
@@ -159,7 +159,7 @@ tasks:
         msg: "var tag must have a value"
     silent: true
     vars:
-      IMAGE: ghcr.io/kloudlite/platform/web/{{.app}}-web:{{.tag}}
+      IMAGE: ghcr.io/kloudlite/kloudlite/web/{{.app}}:{{.tag}}
     cmds:
       - docker build --build-arg APP={{.app}} . -t {{.IMAGE}}
       - docker push {{.IMAGE}}

@@ -255,6 +255,7 @@ query consoleListClusters($search: SearchCluster, $pagination: CursorPaginationI
     edges {
       cursor
       node {
+        id
         displayName
         markedForDeletion
         metadata {
@@ -2006,6 +2007,10 @@ mutation consoleDeleteBuild($crDeleteBuildId: ID!) {
   cr_deleteBuild(id: $crDeleteBuildId)
 }
 
+mutation consoleTriggerBuild($crTriggerBuildId: ID!) {
+  cr_triggerBuild(id: $crTriggerBuildId)
+}
+
 query consoleListBuildCaches($pq: CursorPaginationIn, $search: SearchBuildCacheKeys) {
   cr_listBuildCacheKeys(pq: $pq, search: $search) {
     edges {

@@ -1,4 +1,4 @@
-import { HeadersFunction } from '@remix-run/node';
+import { HeadersFunction, LinksFunction } from '@remix-run/node';
 import {
   Link,
   Links,
@@ -21,7 +21,6 @@ import Container from '~/components/atoms/container';
 import ProgressContainer, {
   useProgress,
 } from '~/components/atoms/progress-bar';
-// import { SelectPortalContainer } from '~/components/atoms/select';
 import Tooltip from '~/components/atoms/tooltip';
 import { BrandLogo } from '~/components/branding/brand-logo';
 import { ToastContainer } from '~/components/molecule/toast';
@@ -30,17 +29,24 @@ 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 { ReloadIndicator } from '~/lib/client/components/reload-indicator';
+import { isDev } from '~/lib/client/helpers/log';
 import { getClientEnv, getServerEnv } from '../configs/base-url.cjs';
+import { useDataFromMatches } from '../client/hooks/use-custom-matches';
 
-export const links = () => [
+export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: stylesUrl },
   { rel: 'stylesheet', href: reactToast },
   { rel: 'stylesheet', href: skeletonCSS },
   { rel: 'stylesheet', href: rcSlide },
   { rel: 'stylesheet', href: styleReactPulsable },
   { rel: 'stylesheet', href: styleZenerSelect },
   { rel: 'stylesheet', href: rcss },
+  {
+    rel: 'stylesheet',
+    href: 'https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap',
+  },
+  { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
 ];
 
 export const ErrorWrapper = ({ children, message }: any) => {
@@ -160,6 +166,8 @@ const Root = ({
 }) => {
   const env = useLoaderData();
 
+  const error = useDataFromMatches('error', '');
+
   return (
     <html lang="en" className="bg-surface-basic-subdued text-text-default">
       <head>
@@ -197,11 +205,16 @@ const Root = ({
         <LiveReload port={443} />
         <Tooltip.Provider>
           <ProgressContainer>
+            <ReloadIndicator />
             <NonIdleProgressBar />
             <ToastContainer position="bottom-left" />
-            <Wrapper>
-              <Outlet />
-            </Wrapper>
+            {error ? (
+              <div>{JSON.stringify(error)}</div>
+            ) : (
+              <Wrapper>
+                <Outlet />
+              </Wrapper>
+            )}
           </ProgressContainer>
         </Tooltip.Provider>
         <Scripts />

@@ -15,7 +15,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { ViewportList } from 'react-viewport-list';
+import { ViewportList, ViewportListRef } from 'react-viewport-list';
 import { dayjs } from '~/components/molecule/dayjs';
 import {
   ISearchInfProps,
@@ -28,6 +28,7 @@ import { generatePlainColor } from '~/root/lib/utils/color-generator';
 import ReactPulsable from 'react-pulsable';
 import { ChildrenProps } from '~/components/types';
 import { logsMockData } from './dummy';
+import { LoadingIndicator } from '../reload-indicator';
 
 const pulsableContext = createContext(false);
 
@@ -94,7 +95,7 @@ interface IHighlightIt {
 
 const LoadingComp = memo(() => (
   <Pulsable isLoading>
-    <div className="hljs bg-opacity-50 w-full h-full absolute z-10 flex inset-0 rounded-md">
+    <div className="hljs bg-opacity-50 w-full h-full absolute z-10 flex inset-0 rounded-md overflow-hidden">
       <div className="flex flex-col w-full">
         <div className="flex justify-between items-center border-b border-border-tertiary p-lg">
           <div>Logs</div>
@@ -123,7 +124,7 @@ const LoadingComp = memo(() => (
             const log = logsMockData[Math.floor(Math.random() * 10)];
             return (
               <div className="flex gap-3xl" key={`${i + log}`}>
-                <div className="w-xl pulsable" />
+                <div className="min-w-xl pulsable" />
                 <div className="pulsable">{log}</div>
               </div>
             );
@@ -499,22 +500,14 @@ const LogBlock = ({
 
   const [showAll, setShowAll] = useState(true);
 
-  const ref = useRef(null);
+  const ref = useRef<ViewportListRef>(null);
 
   useEffect(() => {
-    (async () => {
-      if (
-        follow &&
-        ref.current &&
-        // @ts-ignore
-        typeof ref.current.scrollToIndex === 'function'
-      ) {
-        // @ts-ignore
-        ref.current.scrollToIndex({
-          index: data.length - 1,
-        });
-      }
-    })();
+    if (follow && ref.current) {
+      ref.current.scrollToIndex({
+        index: data.length - 1,
+      });
+    }
   }, [data, maxLines]);
 
   return (
@@ -575,13 +568,8 @@ const LogBlock = ({
           <div
             className="flex-1 flex flex-col pb-8 scroll-container"
             style={{ lineHeight: `${fontSize * 1.5}px` }}
-            ref={ref}
           >
-            <ViewportList
-              items={showAll ? data : searchResult}
-              ref={ref}
-              // viewportRef={listRef}
-            >
+            <ViewportList items={showAll ? data : searchResult} ref={ref}>
               {(log, index) => {
                 return (
                   <LogLine
@@ -681,7 +669,7 @@ const LogComp = ({
     }
   }, [fullScreen]);
 
-  const { logs, subscribed, errors } = useSocketLogs(websocket);
+  const { logs, subscribed, errors, isLoading } = useSocketLogs(websocket);
 
   const [isClientSide, setIsClientSide] = useState(false);
 
@@ -691,14 +679,28 @@ const LogComp = ({
     }
   }, []);
 
+  const wRef = useRef<HTMLDivElement>(null);
+
+  const getFullWidthInPx = () => {
+    if (wRef.current) {
+      return wRef.current.clientWidth;
+    }
+    return '100%';
+  };
+
   return isClientSide ? (
     <div
+      ref={wRef}
       className={classNames(className, {
         'fixed w-full h-full left-0 top-0 z-[999] bg-black': fullScreen,
         'relative hljs rounded-md': !fullScreen,
       })}
       style={{
-        width: fullScreen ? '100%' : width,
+        width: fullScreen
+          ? '100%'
+          : width === '100%'
+          ? getFullWidthInPx()
+          : width,
         height: fullScreen ? '100vh' : height,
       }}
     >
@@ -736,11 +738,13 @@ const LogComp = ({
                 </div>
               </div>
             </div>
+
+            <LoadingIndicator className="absolute z-20 bottom-lg right-lg" />
           </div>
         </Pulsable>
       )}
 
-      {!subscribed && logs.length === 0 && <LoadingComp />}
+      {isLoading && <LoadingComp />}
 
       {errors.length ? (
         <pre>{JSON.stringify(errors)}</pre>

@@ -0,0 +1,37 @@
+import { CircleFill, CircleNotch } from '@jengaicons/react';
+import { useRevalidator } from '@remix-run/react';
+import { cn } from '~/components/utils';
+
+export const LoadingIndicator = ({
+  className,
+  size = 1,
+}: {
+  className?: string;
+  size?: number;
+}) => {
+  return (
+    <div
+      className={cn(
+        'text-text-warning animate-spin flex items-center justify-center aspect-square',
+        className
+      )}
+    >
+      <CircleNotch size={16 * size} className="relative" />
+      <CircleFill size={8 * size} className="absolute" />
+    </div>
+  );
+};
+
+export const ReloadIndicator = () => {
+  const { state } = useRevalidator();
+
+  if (state === 'loading') {
+    return (
+      <div className="fixed z-20 bottom-lg right-lg">
+        <LoadingIndicator className="" size={1} />
+      </div>
+    );
+  }
+
+  return null;
+};
@@ -1,15 +1,12 @@
-// import axios from 'axios';
-// import { consoleBaseUrl } from '../../configs/base-url.cjs';
 import { serverError } from '../../server/helpers/server-error';
-// import { parseError } from '../../utils/common';
 
 const getNodeEnv = () => {
   const env = (() => {
     if (typeof window !== 'undefined') {
       // @ts-ignore
-      return window.ENV;
+      return window.NODE_ENV;
     }
-    return process.env.ENV;
+    return process.env.NODE_ENV;
   })();
 
   if (env) {
@@ -19,52 +16,13 @@ const getNodeEnv = () => {
   return 'development';
 };
 
-/* eslint-disable no-unused-vars */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-export const PostErr = async (message: string, source: string) => {
-  // try {
-  //   await axios.post(
-  //     'https://hooks.slack.com/services/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',
-  //     {
-  //       body: {
-  //         channel: source === 'server' ? '#bugs' : '#web-errors',
-  //         username:
-  //           typeof window === 'undefined' ? 'server-error' : 'web-error',
-  //         text: message,
-  //         icon_emoji: ':ghost:',
-  //       },
-  //     }
-  //   );
-  // } catch (err) {
-  //   console.log(parseError(err).message);
-  // }
-  return {};
-};
-
-const PostToHook = (message: string) => {
-  // if (typeof window === 'undefined') {
-  //   return PostErr(message, 'server');
-  // }
-  //
-  // try {
-  //   axios.post(`${consoleBaseUrl}/api/error`, {
-  //     body: { error: message },
-  //   });
-  // } catch (err) {
-  //   console.log(err);
-  // }
-  return {};
-};
-
 export const isDev = getNodeEnv() === 'development';
 
 const logger = {
   time: isDev ? console.time : () => {},
   timeEnd: isDev ? console.timeEnd : () => {},
   log: isDev ? console.log : () => {},
 
-  // log: console.log,
-
   warn: console.warn,
   trace: (...args: any[]) => {
     let err;
@@ -90,14 +48,16 @@ const logger = {
     }
 
     if (err) {
-      console.trace(err);
       if (!isDev) {
-        PostToHook(`\`\`\`${err}\`\`\``);
+        console.trace(`\n\n${args}\n\n`);
+        return;
       }
-    } else {
-      console.trace(args);
+      console.error(`\n\n${err}\n\n`);
+      return;
     }
 
+    console.trace(`\n\n${args}\n\n`);
+
     if (isDev && typeof window === 'undefined') {
       serverError(args);
     }

@@ -1,9 +1,9 @@
-import { useLocation, useNavigate } from '@remix-run/react';
+import { useRevalidator } from '@remix-run/react';
 
 export const useReload = () => {
-  const location = useLocation();
-  const navigate = useNavigate();
+  const revalidator = useRevalidator();
+
   return () => {
-    navigate(location.pathname + location.search, { replace: true });
+    revalidator.revalidate();
   };
 };