From 282a62e273df128f96633136ed81bb133b704dbf Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 11 Mar 2024 11:54:15 +0530
Subject: [PATCH 01/66] :bug: Fixed issue with fetching cloudformation url

---
 lib/app-setup/root.tsx                                   | 9 +++++++--
 .../_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx  | 2 +-
 src/design-system/index.css                              | 5 ++---
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
index 29776665e..1214cd57c 100644
--- a/lib/app-setup/root.tsx
+++ b/lib/app-setup/root.tsx
@@ -1,4 +1,4 @@
-import { HeadersFunction } from '@remix-run/node';
+import { HeadersFunction, LinksFunction } from '@remix-run/node';
 import {
   Link,
   Links,
@@ -33,7 +33,7 @@ import tailwindBase from '~/design-system/tailwind-base.js';
 import { isDev } from '../client/helpers/log';
 import { getClientEnv, getServerEnv } from '../configs/base-url.cjs';
 
-export const links = () => [
+export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: stylesUrl },
   { rel: 'stylesheet', href: reactToast },
   { rel: 'stylesheet', href: skeletonCSS },
@@ -41,6 +41,11 @@ export const links = () => [
   { 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) => {
diff --git a/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx b/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx
index ba5f98eaa..195aa16d1 100644
--- a/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx
+++ b/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx
@@ -68,7 +68,7 @@ const Validator = ({ cloudProvider }: { cloudProvider: any }) => {
   const { data, isLoading: il } = useCustomSwr(
     () => parseName(cloudProvider) + isLoading,
     async () => {
-      if (!parseName(cloudProvider.metadata!.name)) {
+      if (!parseName(cloudProvider)) {
         throw new Error('Invalid cloud provider name');
       }
       return api.checkAwsAccess({
diff --git a/src/design-system/index.css b/src/design-system/index.css
index fb501bf72..4526c6ed7 100644
--- a/src/design-system/index.css
+++ b/src/design-system/index.css
@@ -1,7 +1,6 @@
-@import url('https://rsms.me/inter/inter.css');
-@import url('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');
+/* @import url('https://rsms.me/inter/inter.css'); */
+/* @import url('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'); */
 @import 'css/slider.css';
-
 html{
     font-feature-settings: "cv02", "cv03", "cv04", "cv11";
   }

From 208039f0867e860fba4dfe933f958af1bfbae842 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 11 Mar 2024 11:57:34 +0530
Subject: [PATCH 02/66] :art: Increased debounce duration to 3 sec on resource
 watch

---
 lib/client/helpers/socket/useWatch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/client/helpers/socket/useWatch.tsx b/lib/client/helpers/socket/useWatch.tsx
index 067c896dd..a47f2b5e5 100644
--- a/lib/client/helpers/socket/useWatch.tsx
+++ b/lib/client/helpers/socket/useWatch.tsx
@@ -34,7 +34,7 @@ export const useSocketWatch = (
         onUpdate(responses);
       }
     },
-    1000,
+    3000,
     [responses]
   );
 };

From 93fa63d5f7916f72bd870de3f9c5a3cbd240fe04 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 11 Mar 2024 12:35:35 +0530
Subject: [PATCH 03/66] :art: Improved Ui for cluster

---
 Taskfile.yaml                                 |   2 +-
 gql-queries-generator/doc/queries.graphql     |   1 +
 lib/client/components/logger/index.tsx        |   4 +-
 lib/client/helpers/socket/context.tsx         |   6 +-
 src/apps/console/components/commons.tsx       |  62 +++---
 .../nodepools/nodepool-resources.tsx          |   2 +-
 .../infra+/clusters/cluster-resources.tsx     | 201 +++++++++++++-----
 .../server/gql/queries/cluster-queries.ts     |   1 +
 src/generated/gql/server.ts                   |   1 +
 9 files changed, 191 insertions(+), 89 deletions(-)

diff --git a/Taskfile.yaml b/Taskfile.yaml
index bdac9c97d..cc9bb95da 100644
--- a/Taskfile.yaml
+++ b/Taskfile.yaml
@@ -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}}
diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
index 0413536dc..cde388390 100644
--- a/gql-queries-generator/doc/queries.graphql
+++ b/gql-queries-generator/doc/queries.graphql
@@ -255,6 +255,7 @@ query consoleListClusters($search: SearchCluster, $pagination: CursorPaginationI
     edges {
       cursor
       node {
+        id
         displayName
         markedForDeletion
         metadata {
diff --git a/lib/client/components/logger/index.tsx b/lib/client/components/logger/index.tsx
index f38e92fc9..55d80d131 100644
--- a/lib/client/components/logger/index.tsx
+++ b/lib/client/components/logger/index.tsx
@@ -94,7 +94,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 +123,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>
             );
diff --git a/lib/client/helpers/socket/context.tsx b/lib/client/helpers/socket/context.tsx
index 0fbbc6045..e4d3859be 100644
--- a/lib/client/helpers/socket/context.tsx
+++ b/lib/client/helpers/socket/context.tsx
@@ -110,7 +110,7 @@ export const useSubscribe = <T extends IData>(
 
   useDebounce(
     () => {
-      console.log('subscribing');
+      logger.log('subscribing');
       if (Array.isArray(msg)) {
         msg.forEach((m) => {
           sendMsg({ ...m, data: { ...m.data, event: 'subscribe' } });
@@ -120,7 +120,7 @@ export const useSubscribe = <T extends IData>(
       }
 
       return () => {
-        console.log('unsubscribing');
+        logger.log('unsubscribing');
         if (Array.isArray(msg)) {
           msg.forEach((m) => {
             clear(m);
@@ -249,7 +249,7 @@ export const SockProvider = ({ children }: ChildrenProps) => {
             }
           });
         } catch (e) {
-          console.log(e);
+          logger.error(e);
         }
       }
     },
diff --git a/src/apps/console/components/commons.tsx b/src/apps/console/components/commons.tsx
index 5dde3b8f5..30764ecd3 100644
--- a/src/apps/console/components/commons.tsx
+++ b/src/apps/console/components/commons.tsx
@@ -1,21 +1,21 @@
-import { CopySimple, Question } from "@jengaicons/react";
-import { ReactNode, useState } from "react";
-import { ProdLogo } from "~/components/branding/prod-logo";
-import { WorkspacesLogo } from "~/components/branding/workspace-logo";
-import useClipboard from "~/root/lib/client/hooks/use-clipboard";
-import { generateKey, titleCase } from "~/components/utils";
+import { CopySimple, Question } from '@jengaicons/react';
+import { ReactNode, useState } from 'react';
+import { ProdLogo } from '~/components/branding/prod-logo';
+import { WorkspacesLogo } from '~/components/branding/workspace-logo';
+import useClipboard from '~/root/lib/client/hooks/use-clipboard';
+import { generateKey, titleCase } from '~/components/utils';
 import {
   Github__Com___Kloudlite___Api___Pkg___Types__SyncState as SyncState,
   Github__Com___Kloudlite___Api___Pkg___Types__SyncAction as SyncAction,
-} from "~/root/src/generated/gql/server";
-import Tooltip from "~/components/atoms/tooltip";
-import { Link } from "@remix-run/react";
-import { Button, IButton } from "~/components/atoms/button";
-import { ListItem } from "./console-list-components";
+} from '~/root/src/generated/gql/server';
+import Tooltip from '~/components/atoms/tooltip';
+import { Link } from '@remix-run/react';
+import { Button, IButton } from '~/components/atoms/button';
+import { ListItem } from './console-list-components';
 import {
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
-} from "../server/r-utils/common";
+} from '../server/r-utils/common';
 import {
   ArrowLeft,
   ArrowRight,
@@ -23,8 +23,8 @@ import {
   GitBranchFill,
   GitlabLogoFill,
   GithubLogoFill,
-} from "./icons";
-import { IGIT_PROVIDERS } from "../hooks/use-git";
+} from './icons';
+import { IGIT_PROVIDERS } from '../hooks/use-git';
 
 export const BlackProdLogo = ({ size = 16 }) => {
   return <ProdLogo color="currentColor" size={size} />;
@@ -129,7 +129,7 @@ interface IUpdateMeta {
 }
 
 // Component for Status parsing
-export type IStatus = "deleting" | "notready" | "syncing" | "none";
+export type IStatus = 'deleting' | 'notready' | 'syncing' | 'none';
 
 interface IStatusMeta {
   markedForDeletion?: boolean;
@@ -145,17 +145,17 @@ interface IStatusMeta {
   };
 }
 
-type IResourceType = "nodepool";
+type IResourceType = 'nodepool' | 'cluster';
 
 type ICommonMeta = IUpdateMeta & IStatusMeta;
 
 const parseStatusComponent = ({ status }: { status: IStatus }) => {
   switch (status) {
-    case "deleting":
+    case 'deleting':
       return <div className="bodyMd text-text-soft pulsable">Deleting...</div>;
-    case "notready":
+    case 'notready':
       return <div className="bodyMd text-text-soft pulsable">Not Ready</div>;
-    case "syncing":
+    case 'syncing':
       return <div className="bodyMd text-text-soft pulsable">Syncing</div>;
     default:
       return null;
@@ -169,17 +169,17 @@ export const parseStatus = ({
   item: IStatusMeta;
   type?: IResourceType;
 }) => {
-  let status: IStatus = "none";
+  let status: IStatus = 'none';
 
   if (item.markedForDeletion) {
-    status = "deleting";
+    status = 'deleting';
   } else if (!item.status?.isReady) {
     switch (type) {
-      case "nodepool":
-        status = "syncing";
+      case 'nodepool':
+        status = 'syncing';
         break;
       default:
-        status = "notready";
+        status = 'notready';
     }
   }
 
@@ -200,7 +200,7 @@ export const listRender = ({
         time: parseUpdateOrCreatedOn(resource),
       };
       return {
-        key: generateKey(keyPrefix, "author"),
+        key: generateKey(keyPrefix, 'author'),
         className,
         render: () => (
           <ListItem data={updateInfo.author} subtitle={updateInfo.time} />
@@ -215,7 +215,7 @@ export const listRender = ({
       type?: IResourceType;
     }) => {
       return {
-        key: generateKey(keyPrefix, "status"),
+        key: generateKey(keyPrefix, 'status'),
         className,
         render: () => parseStatus({ item: resource, type }).component,
         status: parseStatus({ item: resource, type }).status,
@@ -249,8 +249,8 @@ export const BottomNavigation = ({
   primaryButton,
   secondaryButton,
 }: {
-  primaryButton?: Optional<IButton, "content">;
-  secondaryButton?: Optional<IButton, "content">;
+  primaryButton?: Optional<IButton, 'content'>;
+  secondaryButton?: Optional<IButton, 'content'>;
 }) => {
   return (
     <div className="flex flex-row gap-3xl items-center">
@@ -283,7 +283,7 @@ interface IReviewComponent {
   canEdit?: boolean;
 }
 export const ReviewComponent = ({
-  title = "",
+  title = '',
   children,
   onEdit,
   canEdit = true,
@@ -327,13 +327,13 @@ export const GitDetail = ({
           <div className="bodyMd-medium text-text-default">Source</div>
           <div className="flex flex-row items-center gap-3xl bodySm">
             <div className="flex flex-row items-center gap-xl">
-              {provider === "github" ? (
+              {provider === 'github' ? (
                 <GithubLogoFill size={gitIconSize} />
               ) : (
                 <GitlabLogoFill size={gitIconSize} />
               )}
               <span>
-                {repository.replace("https://", "").replace(".git", "")}
+                {repository.replace('https://', '').replace('.git', '')}
               </span>
             </div>
             <div className="flex flex-row items-center gap-xl">
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
index b63094c20..98792ed0f 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
@@ -87,6 +87,7 @@ const ExtraButton = ({
     />
   );
 };
+
 interface IResource {
   items: BaseType[];
   onDelete: (item: BaseType) => void;
@@ -369,7 +370,6 @@ const ListView = ({ items, onDelete, onEdit }: IResource) => {
       {items.map((item, index) => {
         const { name, id } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        // const lR = listRender({ keyPrefix, resource: item });
         return (
           <List.Row
             key={id}
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
index cc89e03c4..fb7c05d71 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
@@ -1,13 +1,12 @@
 import { GearSix } from '@jengaicons/react';
 import { Link, useOutletContext, useParams } from '@remix-run/react';
-import { cn, generateKey, titleCase } from '~/components/utils';
+import { generateKey, titleCase } from '~/components/utils';
 import { IStatus, listRender } from '~/console/components/commons';
 import ConsoleAvatar from '~/console/components/console-avatar';
 import {
   ListBody,
   ListItem,
   ListTitle,
-  listFlex,
 } from '~/console/components/console-list-components';
 import Grid from '~/console/components/grid';
 import List from '~/console/components/list';
@@ -25,6 +24,12 @@ import { renderCloudProvider } from '~/console/utils/commons';
 import logger from '~/root/lib/client/helpers/log';
 import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
+import { ISetState } from '~/console/page-components/app-states';
+import { useState } from 'react';
+import { dayjs } from '~/components/molecule/dayjs';
+import { Button } from '~/components/atoms/button';
+import AnimateHide from '~/components/atoms/animate-hide';
+import LogComp from '~/root/lib/client/components/logger';
 
 const RESOURCE_NAME = 'cluster';
 
@@ -143,71 +148,165 @@ const GridView = ({ items }: { items: ExtractNodeType<IClusters>[] }) => {
   );
 };
 
-const ListView = ({ items }: { items: ExtractNodeType<IClusters>[] }) => {
-  const { account } = useParams();
+type BaseType = ExtractNodeType<IClusters>;
+
+interface IResource {
+  items: BaseType[];
+  // onDelete: (item: BaseType) => void;
+  // onEdit: (item: BaseType) => void;
+}
+
+const ListDetail = (
+  props: Omit<IResource, 'items'> & {
+    open: string;
+    item: BaseType;
+    setOpen: ISetState<string>;
+  }
+) => {
+  const { item, open, setOpen } = props;
+
+  const { name, id } = parseItem(item);
+  const keyPrefix = `${RESOURCE_NAME}-${id}`;
+  const lR = listRender({ keyPrefix, resource: item });
+
+  const { account } = useOutletContext<IAccountContext>();
+
+  const isLatest = dayjs(item.updateTime).isAfter(dayjs().subtract(3, 'hour'));
+
+  const tempStatus = listStatus({
+    key: keyPrefix,
+    item,
+    className: 'basis-full text-center',
+  });
+
   return (
-    <List.Root linkComponent={Link}>
-      {items.map((item, index) => {
-        const { name, id, provider } = parseItem(item);
-        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        const lR = listRender({ keyPrefix, resource: item });
+    <div className="w-full flex flex-col">
+      <div className="flex flex-row items-center">
+        <div className="w-[220px] min-w-[220px]  mr-xl flex flex-row items-center">
+          <ListTitle
+            title={name}
+            subtitle={
+              <div className="flex flex-row items-center gap-md">{id}</div>
+            }
+            avatar={<ConsoleAvatar name={id} />}
+          />
+        </div>
 
-        const statusRender = lR.statusRender({
-          className: 'min-w-[80px] mx-[25px] basis-full text-center',
-        });
+        {isLatest && (
+          <Button
+            size="sm"
+            variant="basic"
+            content={open === item.id ? 'Hide Logs' : 'Show Logs'}
+            onClick={() =>
+              setOpen((s) => {
+                if (s === item.id) {
+                  return '';
+                }
+                return item.id;
+              })
+            }
+          />
+        )}
 
-        const tempStatus = listStatus({
-          key: keyPrefix,
-          item,
-          className: 'text-center',
-        });
+        <div className="flex items-center w-[20px] mx-xl flex-grow">
+          {tempStatus.render()}
+        </div>
+
+        <div className="pr-3xl w-[180px] min-w-[180px]">
+          {lR.authorRender({ className: '' }).render()}
+        </div>
+      </div>
 
+      <AnimateHide show={open === item.id} className="w-full pt-4xl">
+        <LogComp
+          {...{
+            dark: true,
+            width: '100%',
+            height: '40rem',
+            title: 'Logs',
+            hideLineNumber: true,
+            websocket: {
+              account: parseName(account),
+              cluster: parseName(item),
+              trackingId: item.id,
+            },
+          }}
+        />
+      </AnimateHide>
+    </div>
+  );
+};
+
+const ListView = ({ items }: IResource) => {
+  const [open, setOpen] = useState<string>('');
+
+  return (
+    <List.Root linkComponent={Link}>
+      {items.map((item, index) => {
+        const { name, id } = parseItem(item);
+        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
         return (
           <List.Row
             key={id}
-            className={cn(
-              '!p-3xl',
-              statusRender.status === 'notready' ||
-                statusRender.status === 'deleting'
-                ? '!cursor-default hover:!bg-surface-basic-default'
-                : ''
-            )}
-            // to={`/${account}/${id}/overview`}
-            {...(!(
-              statusRender.status === 'notready' ||
-              statusRender.status === 'deleting'
-            )
-              ? { to: `/${account}/infra/${id}/overview` }
-              : {})}
+            className="!p-3xl"
             columns={[
               {
+                className: 'w-full',
                 key: generateKey(keyPrefix, name + id),
-                className: 'max-w-[180px] min-w-[180px] w-[180px]',
                 render: () => (
-                  <ListTitle
-                    title={name}
-                    subtitle={id}
-                    avatar={<ConsoleAvatar name={id} />}
-                  />
-                ),
-              },
-              tempStatus,
-              listFlex({ key: 'flex-1' }),
-              {
-                key: generateKey(keyPrefix, `${provider}`),
-                className: 'min-w-[150px] text-start',
-                render: () => <ListBody data={provider} />,
-              },
-              lR.authorRender({ className: 'min-w-[180px] w-[180px]' }),
-              {
-                key: generateKey(keyPrefix, 'action'),
-                render: () => (
-                  <ExtraButton status={statusRender.status} cluster={item} />
+                  <ListDetail item={item} open={open} setOpen={setOpen} />
                 ),
               },
             ]}
           />
         );
+
+        // return (
+        //   <List.Row
+        //     key={id}
+        //     className={cn(
+        //       '!p-3xl',
+        //       statusRender.status === 'notready' ||
+        //         statusRender.status === 'deleting'
+        //         ? '!cursor-default hover:!bg-surface-basic-default'
+        //         : ''
+        //     )}
+        //     {...(!(
+        //       statusRender.status === 'notready' ||
+        //       statusRender.status === 'deleting'
+        //     )
+        //       ? { to: `/${account}/infra/${id}/overview` }
+        //       : {})}
+        //     columns={[
+        //       {
+        //         key: generateKey(keyPrefix, name + id),
+        //         className: 'max-w-[180px] min-w-[180px] w-[180px]',
+        //         render: () => (
+        //           <ListTitle
+        //             title={name}
+        //             subtitle={id}
+        //             avatar={<ConsoleAvatar name={id} />}
+        //           />
+        //         ),
+        //       },
+        //
+        //       tempStatus,
+        //       listFlex({ key: 'flex-1' }),
+        //       {
+        //         key: generateKey(keyPrefix, `${provider}`),
+        //         className: 'min-w-[150px] text-start',
+        //         render: () => <ListBody data={provider} />,
+        //       },
+        //       lR.authorRender({ className: 'min-w-[180px] w-[180px]' }),
+        //       {
+        //         key: generateKey(keyPrefix, 'action'),
+        //         render: () => (
+        //           <ExtraButton status={statusRender.status} cluster={item} />
+        //         ),
+        //       },
+        //     ]}
+        //   />
+        // );
       })}
     </List.Root>
   );
diff --git a/src/apps/console/server/gql/queries/cluster-queries.ts b/src/apps/console/server/gql/queries/cluster-queries.ts
index ef2cddc1c..82d0e9e50 100644
--- a/src/apps/console/server/gql/queries/cluster-queries.ts
+++ b/src/apps/console/server/gql/queries/cluster-queries.ts
@@ -78,6 +78,7 @@ export const clusterQueries = (executor: IExecutor) => ({
           edges {
             cursor
             node {
+              id
               displayName
               markedForDeletion
               metadata {
diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
index 7688b8ec5..387db054d 100644
--- a/src/generated/gql/server.ts
+++ b/src/generated/gql/server.ts
@@ -1805,6 +1805,7 @@ export type ConsoleListClustersQuery = {
     edges: Array<{
       cursor: string;
       node: {
+        id: string;
         displayName: string;
         markedForDeletion?: boolean;
         creationTime: any;

From 78e2e970e0f32a088dc9dde25c3c91ab939b0c37 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 11 Mar 2024 13:19:01 +0530
Subject: [PATCH 04/66] :bug: Fixed issue with logs-block width

---
 lib/client/components/logger/index.tsx        | 16 +++-
 lib/configs/base-url.cjs                      |  3 +-
 .../overview+/logs-n-metrics/route.tsx        |  2 +-
 .../infra+/clusters/cluster-resources.tsx     | 74 ++++++-------------
 4 files changed, 41 insertions(+), 54 deletions(-)

diff --git a/lib/client/components/logger/index.tsx b/lib/client/components/logger/index.tsx
index 55d80d131..6b2007f95 100644
--- a/lib/client/components/logger/index.tsx
+++ b/lib/client/components/logger/index.tsx
@@ -691,14 +691,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,
       }}
     >
diff --git a/lib/configs/base-url.cjs b/lib/configs/base-url.cjs
index d4d541d2e..96ae00947 100644
--- a/lib/configs/base-url.cjs
+++ b/lib/configs/base-url.cjs
@@ -86,7 +86,8 @@ const baseUrls = () => {
     cookieDomain,
     baseUrl: bUrl,
     githubAppName: 'kloudlite-dev',
-    socketUrl: `wss://websocket.${bUrl}`,
+    // socketUrl: `wss://websocket.${bUrl}`,
+    socketUrl: `wss://websocket.kloudlite.io`,
     observeUrl: `https://observe.${bUrl}`,
   };
 };
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
index 6f4b3e22c..7ab4a9904 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
@@ -7,8 +7,8 @@ import { parseName } from '~/console/server/r-utils/common';
 import { Clock, ListNumbers } from '@jengaicons/react';
 import { cn } from '~/components/utils';
 import { useDataState } from '~/console/page-components/common-state';
-import { IClusterContext } from '../../_layout';
 import LogComp from '~/root/lib/client/components/logger';
+import { IClusterContext } from '../../_layout';
 
 const LogsAndMetrics = () => {
   const { cluster, account } = useOutletContext<IClusterContext>();
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
index fb7c05d71..270c2e7c0 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
@@ -197,14 +197,16 @@ const ListDetail = (
             size="sm"
             variant="basic"
             content={open === item.id ? 'Hide Logs' : 'Show Logs'}
-            onClick={() =>
+            onClick={(e) => {
+              e.preventDefault();
+
               setOpen((s) => {
                 if (s === item.id) {
                   return '';
                 }
                 return item.id;
-              })
-            }
+              });
+            }}
           />
         )}
 
@@ -217,9 +219,13 @@ const ListDetail = (
         </div>
       </div>
 
-      <AnimateHide show={open === item.id} className="w-full pt-4xl">
+      <AnimateHide
+        show={open === item.id}
+        className="w-full flex pt-4xl justify-center items-center"
+      >
         <LogComp
           {...{
+            className: 'flex-1',
             dark: true,
             width: '100%',
             height: '40rem',
@@ -239,16 +245,29 @@ const ListDetail = (
 
 const ListView = ({ items }: IResource) => {
   const [open, setOpen] = useState<string>('');
+  const { account } = useParams();
 
   return (
     <List.Root linkComponent={Link}>
       {items.map((item, index) => {
         const { name, id } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
+
+        const lR = listRender({ keyPrefix, resource: item });
+        const statusRender = lR.statusRender({
+          className: 'min-w-[80px] mx-[25px] basis-full text-center',
+        });
+
         return (
           <List.Row
             key={id}
             className="!p-3xl"
+            {...(!(
+              statusRender.status === 'notready' ||
+              statusRender.status === 'deleting'
+            )
+              ? { to: `/${account}/infra/${id}/overview` }
+              : {})}
             columns={[
               {
                 className: 'w-full',
@@ -260,53 +279,6 @@ const ListView = ({ items }: IResource) => {
             ]}
           />
         );
-
-        // return (
-        //   <List.Row
-        //     key={id}
-        //     className={cn(
-        //       '!p-3xl',
-        //       statusRender.status === 'notready' ||
-        //         statusRender.status === 'deleting'
-        //         ? '!cursor-default hover:!bg-surface-basic-default'
-        //         : ''
-        //     )}
-        //     {...(!(
-        //       statusRender.status === 'notready' ||
-        //       statusRender.status === 'deleting'
-        //     )
-        //       ? { to: `/${account}/infra/${id}/overview` }
-        //       : {})}
-        //     columns={[
-        //       {
-        //         key: generateKey(keyPrefix, name + id),
-        //         className: 'max-w-[180px] min-w-[180px] w-[180px]',
-        //         render: () => (
-        //           <ListTitle
-        //             title={name}
-        //             subtitle={id}
-        //             avatar={<ConsoleAvatar name={id} />}
-        //           />
-        //         ),
-        //       },
-        //
-        //       tempStatus,
-        //       listFlex({ key: 'flex-1' }),
-        //       {
-        //         key: generateKey(keyPrefix, `${provider}`),
-        //         className: 'min-w-[150px] text-start',
-        //         render: () => <ListBody data={provider} />,
-        //       },
-        //       lR.authorRender({ className: 'min-w-[180px] w-[180px]' }),
-        //       {
-        //         key: generateKey(keyPrefix, 'action'),
-        //         render: () => (
-        //           <ExtraButton status={statusRender.status} cluster={item} />
-        //         ),
-        //       },
-        //     ]}
-        //   />
-        // );
       })}
     </List.Root>
   );

From 903d3760f448feda6d01c1781a6a97c50512c0ad Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 11 Mar 2024 13:34:47 +0530
Subject: [PATCH 05/66] :bug: Fixed issues with logs layouting

---
 lib/client/helpers/log.ts                     |  4 +-
 lib/configs/base-url.cjs                      |  4 +-
 .../console/page-components/log-action.tsx    | 48 +++++++++++++++++++
 .../app+/$app+/logs-n-metrics/route.tsx       | 43 ++---------------
 .../nodepools/nodepool-resources.tsx          | 11 ++++-
 .../infra+/clusters/cluster-resources.tsx     | 12 ++++-
 .../components/atoms/animate-hide.tsx         |  3 ++
 7 files changed, 80 insertions(+), 45 deletions(-)
 create mode 100644 src/apps/console/page-components/log-action.tsx

diff --git a/lib/client/helpers/log.ts b/lib/client/helpers/log.ts
index e3cc635c7..0f9d8781e 100644
--- a/lib/client/helpers/log.ts
+++ b/lib/client/helpers/log.ts
@@ -7,9 +7,9 @@ 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) {
diff --git a/lib/configs/base-url.cjs b/lib/configs/base-url.cjs
index 96ae00947..fdc2dd6a8 100644
--- a/lib/configs/base-url.cjs
+++ b/lib/configs/base-url.cjs
@@ -86,8 +86,8 @@ const baseUrls = () => {
     cookieDomain,
     baseUrl: bUrl,
     githubAppName: 'kloudlite-dev',
-    // socketUrl: `wss://websocket.${bUrl}`,
-    socketUrl: `wss://websocket.kloudlite.io`,
+    socketUrl: `wss://websocket.${bUrl}`,
+    // socketUrl: `wss://websocket.kloudlite.io`,
     observeUrl: `https://observe.${bUrl}`,
   };
 };
diff --git a/src/apps/console/page-components/log-action.tsx b/src/apps/console/page-components/log-action.tsx
new file mode 100644
index 000000000..57ae6e040
--- /dev/null
+++ b/src/apps/console/page-components/log-action.tsx
@@ -0,0 +1,48 @@
+import { cn } from '~/components/utils';
+import { Clock, ListNumbers } from '@jengaicons/react';
+import { useDataState } from './common-state';
+
+const LogAction = () => {
+  const { state, setState } = useDataState<{
+    linesVisible: boolean;
+    timestampVisible: boolean;
+  }>('logs');
+
+  return (
+    <div className="hljs flex items-center gap-xl px-xs">
+      <div
+        onClick={() => {
+          setState((s) => ({ ...s, linesVisible: !s.linesVisible }));
+        }}
+        className="flex items-center justify-center font-bold text-xl cursor-pointer select-none active:translate-y-[1px] transition-all"
+      >
+        <span
+          className={cn({
+            'opacity-50': !state.linesVisible,
+          })}
+        >
+          <ListNumbers color="currentColor" size={16} />
+        </span>
+      </div>
+      <div
+        onClick={() => {
+          setState((s) => ({
+            ...s,
+            timestampVisible: !s.timestampVisible,
+          }));
+        }}
+        className="flex items-center justify-center font-bold text-xl cursor-pointer select-none active:translate-y-[1px] transition-all"
+      >
+        <span
+          className={cn({
+            'opacity-50': !state.timestampVisible,
+          })}
+        >
+          <Clock color="currentColor" size={16} />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default LogAction;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
index 8ea1645d2..32248e351 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
@@ -7,12 +7,11 @@ import { dayjs } from '~/components/molecule/dayjs';
 import { parseValue } from '~/console/page-components/util';
 import { ApexOptions } from 'apexcharts';
 import { parseName } from '~/console/server/r-utils/common';
-import { Clock, ListNumbers } from '@jengaicons/react';
-import { cn } from '~/components/utils';
 import { useDataState } from '~/console/page-components/common-state';
 import { observeUrl } from '~/root/lib/configs/base-url.cjs';
-import { IAppContext } from '../_layout';
 import LogComp from '~/root/lib/client/components/logger';
+import LogAction from '~/console/page-components/log-action';
+import { IAppContext } from '../_layout';
 
 const LogsAndMetrics = () => {
   const { app, project, account } = useOutletContext<IAppContext>();
@@ -87,7 +86,7 @@ const LogsAndMetrics = () => {
     },
   };
 
-  const { state, setState } = useDataState<{
+  const { state } = useDataState<{
     linesVisible: boolean;
     timestampVisible: boolean;
   }>('logs');
@@ -239,41 +238,7 @@ const LogsAndMetrics = () => {
             width: '100%',
             height: '70vh',
             title: 'Logs',
-            actionComponent: (
-              <div className="hljs flex items-center gap-xl px-xs">
-                <div
-                  onClick={() => {
-                    setState((s) => ({ ...s, linesVisible: !s.linesVisible }));
-                  }}
-                  className="flex items-center justify-center font-bold text-xl cursor-pointer select-none active:translate-y-[1px] transition-all"
-                >
-                  <span
-                    className={cn({
-                      'opacity-50': !state.linesVisible,
-                    })}
-                  >
-                    <ListNumbers color="currentColor" size={16} />
-                  </span>
-                </div>
-                <div
-                  onClick={() => {
-                    setState((s) => ({
-                      ...s,
-                      timestampVisible: !s.timestampVisible,
-                    }));
-                  }}
-                  className="flex items-center justify-center font-bold text-xl cursor-pointer select-none active:translate-y-[1px] transition-all"
-                >
-                  <span
-                    className={cn({
-                      'opacity-50': !state.timestampVisible,
-                    })}
-                  >
-                    <Clock color="currentColor" size={16} />
-                  </span>
-                </div>
-              </div>
-            ),
+            actionComponent: <LogAction />,
             websocket: {
               account: parseName(account),
               cluster: project.clusterName || '',
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
index 98792ed0f..64727ac8a 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
@@ -35,6 +35,8 @@ import { dayjs } from '~/components/molecule/dayjs';
 import LogComp from '~/root/lib/client/components/logger';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import { IClusterContext } from '~/console/routes/_main+/$account+/infra+/$cluster+/_layout';
+import LogAction from '~/console/page-components/log-action';
+import { useDataState } from '~/console/page-components/common-state';
 import HandleNodePool from './handle-nodepool';
 import {
   findNodePlanWithCategory,
@@ -208,6 +210,11 @@ const ListDetail = (
 
   const isLatest = dayjs(item.updateTime).isAfter(dayjs().subtract(3, 'hour'));
 
+  const { state } = useDataState<{
+    linesVisible: boolean;
+    timestampVisible: boolean;
+  }>('logs');
+
   return (
     <div className="w-full flex flex-col">
       <div className="flex flex-row items-center">
@@ -278,12 +285,14 @@ const ListDetail = (
             width: '100%',
             height: '40rem',
             title: 'Logs',
-            hideLineNumber: true,
+            hideLineNumber: !state.linesVisible,
+            hideTimestamp: !state.timestampVisible,
             websocket: {
               account: parseName(account),
               cluster: item.clusterName,
               trackingId: item.id,
             },
+            actionComponent: <LogAction />,
           }}
         />
       </AnimateHide>
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
index 270c2e7c0..abfd64b98 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
@@ -30,6 +30,8 @@ import { dayjs } from '~/components/molecule/dayjs';
 import { Button } from '~/components/atoms/button';
 import AnimateHide from '~/components/atoms/animate-hide';
 import LogComp from '~/root/lib/client/components/logger';
+import LogAction from '~/console/page-components/log-action';
+import { useDataState } from '~/console/page-components/common-state';
 
 const RESOURCE_NAME = 'cluster';
 
@@ -179,6 +181,11 @@ const ListDetail = (
     className: 'basis-full text-center',
   });
 
+  const { state } = useDataState<{
+    linesVisible: boolean;
+    timestampVisible: boolean;
+  }>('logs');
+
   return (
     <div className="w-full flex flex-col">
       <div className="flex flex-row items-center">
@@ -220,22 +227,25 @@ const ListDetail = (
       </div>
 
       <AnimateHide
+        onClick={(e) => e.preventDefault()}
         show={open === item.id}
         className="w-full flex pt-4xl justify-center items-center"
       >
         <LogComp
           {...{
+            hideLineNumber: !state.linesVisible,
+            hideTimestamp: !state.timestampVisible,
             className: 'flex-1',
             dark: true,
             width: '100%',
             height: '40rem',
             title: 'Logs',
-            hideLineNumber: true,
             websocket: {
               account: parseName(account),
               cluster: parseName(item),
               trackingId: item.id,
             },
+            actionComponent: <LogAction />,
           }}
         />
       </AnimateHide>
diff --git a/src/design-system/components/atoms/animate-hide.tsx b/src/design-system/components/atoms/animate-hide.tsx
index 82fb9dcf7..6417b7feb 100644
--- a/src/design-system/components/atoms/animate-hide.tsx
+++ b/src/design-system/components/atoms/animate-hide.tsx
@@ -6,17 +6,20 @@ interface IAnimateHide {
   show: boolean;
   initial?: boolean;
   className?: string;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 const AnimateHide = ({
   children,
   show,
   initial = false,
   className,
+  onClick,
 }: IAnimateHide) => {
   return (
     <AnimatePresence initial={initial}>
       {show && (
         <motion.div
+          onClick={onClick}
           initial={{
             height: 0,
             opacity: 0,

From 9a43afdfd60ca9246ae2bc7ce8259089042b7a5b Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 11 Mar 2024 15:46:19 +0530
Subject: [PATCH 06/66] :bug: Fixed issue with steps on onboarding

---
 src/apps/console/page-components/new-cluster.tsx          | 8 ++++----
 src/apps/console/routes/_a+/new-team.tsx                  | 2 +-
 .../routes/_a+/onboarding+/$a+/new-cloud-provider.tsx     | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/apps/console/page-components/new-cluster.tsx b/src/apps/console/page-components/new-cluster.tsx
index 31a2fef63..92f1eb8f6 100644
--- a/src/apps/console/page-components/new-cluster.tsx
+++ b/src/apps/console/page-components/new-cluster.tsx
@@ -352,10 +352,10 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
                 step={2}
                 label="Add your cloud provider"
               />
-              {/* <MultiStepProgress.Step */}
-              {/*   step={3} */}
-              {/*   label="Validate cloud provider" */}
-              {/* /> */}
+              <MultiStepProgress.Step
+                step={3}
+                label="Validate cloud provider"
+              />
               <MultiStepProgress.Step step={4} label="Setup first cluster">
                 {getView()}
               </MultiStepProgress.Step>
diff --git a/src/apps/console/routes/_a+/new-team.tsx b/src/apps/console/routes/_a+/new-team.tsx
index 31dfd877f..e849a3b34 100644
--- a/src/apps/console/routes/_a+/new-team.tsx
+++ b/src/apps/console/routes/_a+/new-team.tsx
@@ -89,7 +89,7 @@ const NewAccount = () => {
             </div>
           </MultiStepProgress.Step>
           <MultiStepProgress.Step step={2} label="Add your cloud provider" />
-          {/* <MultiStepProgress.Step step={3} label="Validate cloud provider" /> */}
+          <MultiStepProgress.Step step={3} label="Validate cloud provider" />
           <MultiStepProgress.Step step={4} label="Setup first cluster" />
         </MultiStepProgress.Root>
       </MultiStepProgressWrapper>
diff --git a/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx b/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx
index 454a25db2..526177957 100644
--- a/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx
+++ b/src/apps/console/routes/_a+/onboarding+/$a+/new-cloud-provider.tsx
@@ -143,7 +143,7 @@ const NewCloudProvider = () => {
               />
             </div>
           </MultiStepProgress.Step>
-          {/* <MultiStepProgress.Step step={3} label="Validate cloud provider" /> */}
+          <MultiStepProgress.Step step={3} label="Validate cloud provider" />
           <MultiStepProgress.Step step={4} label="Setup first cluster" />
         </MultiStepProgress.Root>
       </MultiStepProgressWrapper>

From 06b8746a2a5190b422351516e46068f163af5c27 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 11 Mar 2024 18:31:15 +0530
Subject: [PATCH 07/66] :bug: Fixed issue with logger component scroll and page
 reload

---
 lib/app-setup/root.tsx                        |  5 +-
 lib/client/components/logger/index.tsx        | 32 +++----
 lib/client/components/reload-indicator.tsx    | 37 ++++++++
 lib/client/helpers/reloader.ts                |  8 +-
 lib/configs/base-url.cjs                      |  4 +-
 src/apps/console/components/listV2.tsx        | 11 ++-
 src/apps/console/components/loading.tsx       | 23 ++++-
 .../_main+/$account+/projects/route.tsx       | 92 +++++++++++--------
 .../components/atoms/animate-hide.tsx         |  3 +-
 9 files changed, 139 insertions(+), 76 deletions(-)
 create mode 100644 lib/client/components/reload-indicator.tsx

diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
index 1214cd57c..9ed4b2d9a 100644
--- a/lib/app-setup/root.tsx
+++ b/lib/app-setup/root.tsx
@@ -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,7 +29,8 @@ 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';
 
 export const links: LinksFunction = () => [
@@ -202,6 +202,7 @@ const Root = ({
         <LiveReload port={443} />
         <Tooltip.Provider>
           <ProgressContainer>
+            <ReloadIndicator />
             <NonIdleProgressBar />
             <ToastContainer position="bottom-left" />
             <Wrapper>
diff --git a/lib/client/components/logger/index.tsx b/lib/client/components/logger/index.tsx
index 6b2007f95..85bd5c3ea 100644
--- a/lib/client/components/logger/index.tsx
+++ b/lib/client/components/logger/index.tsx
@@ -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);
 
@@ -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
@@ -750,6 +738,8 @@ const LogComp = ({
                 </div>
               </div>
             </div>
+
+            <LoadingIndicator className="absolute z-20 bottom-lg right-lg" />
           </div>
         </Pulsable>
       )}
diff --git a/lib/client/components/reload-indicator.tsx b/lib/client/components/reload-indicator.tsx
new file mode 100644
index 000000000..c55a342d5
--- /dev/null
+++ b/lib/client/components/reload-indicator.tsx
@@ -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;
+};
diff --git a/lib/client/helpers/reloader.ts b/lib/client/helpers/reloader.ts
index d4ea4ea3e..5d6cac682 100644
--- a/lib/client/helpers/reloader.ts
+++ b/lib/client/helpers/reloader.ts
@@ -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();
   };
 };
diff --git a/lib/configs/base-url.cjs b/lib/configs/base-url.cjs
index fdc2dd6a8..96ae00947 100644
--- a/lib/configs/base-url.cjs
+++ b/lib/configs/base-url.cjs
@@ -86,8 +86,8 @@ const baseUrls = () => {
     cookieDomain,
     baseUrl: bUrl,
     githubAppName: 'kloudlite-dev',
-    socketUrl: `wss://websocket.${bUrl}`,
-    // socketUrl: `wss://websocket.kloudlite.io`,
+    // socketUrl: `wss://websocket.${bUrl}`,
+    socketUrl: `wss://websocket.kloudlite.io`,
     observeUrl: `https://observe.${bUrl}`,
   };
 };
diff --git a/src/apps/console/components/listV2.tsx b/src/apps/console/components/listV2.tsx
index 28bb13995..29d256311 100644
--- a/src/apps/console/components/listV2.tsx
+++ b/src/apps/console/components/listV2.tsx
@@ -1,6 +1,7 @@
 import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
 import { KeyboardEvent, ReactNode, useRef } from 'react';
 import { cn } from '~/components/utils';
+import logger from '~/root/lib/client/helpers/log';
 import { LoadingPlaceHolder } from './loading';
 
 const focusableElement = 'a[href], button, input, select, textarea';
@@ -77,7 +78,7 @@ const handleKeyNavigation = (
       }
     }
   } catch {
-    console.log('Error focusing');
+    logger.error('Error focusing');
   }
 };
 
@@ -224,7 +225,7 @@ const Root = ({
 }: IRoot) => {
   const ref = useRef<HTMLDivElement>(null);
 
-  console.log(data);
+  // logger.log(data);
   return (
     <>
       {!loading && (
@@ -250,7 +251,7 @@ const Root = ({
                 }
               }
             } catch {
-              console.log('Error Focusing');
+              logger.error('Error Focusing');
             }
           }}
           onKeyDown={(e) => {
@@ -265,7 +266,7 @@ const Root = ({
               )}
             >
               {data?.headers.map((h, index) => (
-                <div key={index} className={cn(h.className)}>
+                <div key={`${index + h.name}`} className={cn(h.className)}>
                   {h.render()}
                 </div>
               ))}
@@ -274,7 +275,7 @@ const Root = ({
               {data?.rows.map((r, index) => (
                 <RowBase
                   linkComponent={linkComponent}
-                  key={index}
+                  key={`${index + (r.to || '')}`}
                   columns={r.columns}
                   to={r.to}
                   headers={data.headers}
diff --git a/src/apps/console/components/loading.tsx b/src/apps/console/components/loading.tsx
index 9cc8b7330..95d7f89f2 100644
--- a/src/apps/console/components/loading.tsx
+++ b/src/apps/console/components/loading.tsx
@@ -1,5 +1,6 @@
-import { Spinner } from '@jengaicons/react';
+import { CircleFill, CircleNotch, Spinner } from '@jengaicons/react';
 import { ReactNode } from 'react';
+import { cn } from '~/components/utils';
 
 export const LoadingPlaceHolder = ({
   height = 100,
@@ -20,3 +21,23 @@ export const LoadingPlaceHolder = ({
     </div>
   );
 };
+
+export const LoadingIndicator = ({
+  className,
+  size = 1,
+}: {
+  className?: string;
+  size?: 1 | 2 | 3;
+}) => {
+  return (
+    <div
+      className={cn(
+        'text-text-warning animate-spin flex items-center justify-center aspect-square',
+        className
+      )}
+    >
+      <CircleNotch size={16 * size} />
+      <CircleFill size={8 * size} className="absolute" />
+    </div>
+  );
+};
diff --git a/src/apps/console/routes/_main+/$account+/projects/route.tsx b/src/apps/console/routes/_main+/$account+/projects/route.tsx
index 640dd417d..27361edb3 100644
--- a/src/apps/console/routes/_main+/$account+/projects/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/projects/route.tsx
@@ -10,6 +10,7 @@ import { IRemixCtx } from '~/root/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
+import { useReload } from '~/root/lib/client/helpers/reloader';
 import Tools from './tools';
 import ProjectResourcesV2 from './project-resources-v2';
 
@@ -153,47 +154,58 @@ const Projects = () => {
     };
   };
 
-  return (
-    <LoadingComp
-      data={promise}
-      skeletonData={{
-        projectsData: fake.ConsoleListProjectsQuery.core_listProjects as any,
-        clustersCount: 1,
-        cloudProviderSecretsCount: 1,
-      }}
-    >
-      {({ projectsData, clustersCount, cloudProviderSecretsCount }) => {
-        const projects = projectsData.edges?.map(({ node }) => node);
-        if (!projects) {
-          return null;
-        }
+  const reloadPage = useReload();
 
-        return (
-          <Wrapper
-            header={{
-              title: 'Projects',
-              action: projects.length > 0 && (
-                <Button
-                  variant="primary"
-                  content="Create Project"
-                  prefix={<PlusFill />}
-                  to={`/${account}/new-project`}
-                  LinkComponent={Link}
-                />
-              ),
-            }}
-            empty={getEmptyState({
-              projectLength: projects.length,
-              clustersLength: clustersCount,
-              secretsLength: cloudProviderSecretsCount,
-            })}
-            tools={<Tools />}
-          >
-            <ProjectResourcesV2 items={projects} />
-          </Wrapper>
-        );
-      }}
-    </LoadingComp>
+  return (
+    <div>
+      <div
+        onClick={() => {
+          reloadPage();
+        }}
+      >
+        reloadPage
+      </div>
+      <LoadingComp
+        data={promise}
+        skeletonData={{
+          projectsData: fake.ConsoleListProjectsQuery.core_listProjects as any,
+          clustersCount: 1,
+          cloudProviderSecretsCount: 1,
+        }}
+      >
+        {({ projectsData, clustersCount, cloudProviderSecretsCount }) => {
+          const projects = projectsData.edges?.map(({ node }) => node);
+          if (!projects) {
+            return null;
+          }
+
+          return (
+            <Wrapper
+              header={{
+                title: 'Projects',
+                action: projects.length > 0 && (
+                  <Button
+                    variant="primary"
+                    content="Create Project"
+                    prefix={<PlusFill />}
+                    to={`/${account}/new-project`}
+                    LinkComponent={Link}
+                  />
+                ),
+              }}
+              empty={getEmptyState({
+                projectLength: projects.length,
+                clustersLength: clustersCount,
+                secretsLength: cloudProviderSecretsCount,
+              })}
+              tools={<Tools />}
+            >
+              <ProjectResourcesV2 items={projects} />
+            </Wrapper>
+          );
+        }}
+      </LoadingComp>
+    </div>
   );
 };
 
diff --git a/src/design-system/components/atoms/animate-hide.tsx b/src/design-system/components/atoms/animate-hide.tsx
index 6417b7feb..8fc8a90cb 100644
--- a/src/design-system/components/atoms/animate-hide.tsx
+++ b/src/design-system/components/atoms/animate-hide.tsx
@@ -1,5 +1,6 @@
 import { AnimatePresence, motion } from 'framer-motion';
 import { ReactNode } from 'react';
+import { cn } from '../utils';
 
 interface IAnimateHide {
   children: ReactNode;
@@ -35,7 +36,7 @@ const AnimateHide = ({
             height: 0,
             y: -5,
           }}
-          className={className}
+          className={cn(className, 'overflow-hidden')}
         >
           {children}
         </motion.div>

From ef628c558317b227828924647918db4723b0e674 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 11 Mar 2024 18:31:54 +0530
Subject: [PATCH 08/66] :coffin: Removed dead code

---
 .../_main+/$account+/projects/route.tsx       | 92 ++++++++-----------
 1 file changed, 40 insertions(+), 52 deletions(-)

diff --git a/src/apps/console/routes/_main+/$account+/projects/route.tsx b/src/apps/console/routes/_main+/$account+/projects/route.tsx
index 27361edb3..640dd417d 100644
--- a/src/apps/console/routes/_main+/$account+/projects/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/projects/route.tsx
@@ -10,7 +10,6 @@ import { IRemixCtx } from '~/root/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
-import { useReload } from '~/root/lib/client/helpers/reloader';
 import Tools from './tools';
 import ProjectResourcesV2 from './project-resources-v2';
 
@@ -154,58 +153,47 @@ const Projects = () => {
     };
   };
 
-  const reloadPage = useReload();
-
   return (
-    <div>
-      <div
-        onClick={() => {
-          reloadPage();
-        }}
-      >
-        reloadPage
-      </div>
-      <LoadingComp
-        data={promise}
-        skeletonData={{
-          projectsData: fake.ConsoleListProjectsQuery.core_listProjects as any,
-          clustersCount: 1,
-          cloudProviderSecretsCount: 1,
-        }}
-      >
-        {({ projectsData, clustersCount, cloudProviderSecretsCount }) => {
-          const projects = projectsData.edges?.map(({ node }) => node);
-          if (!projects) {
-            return null;
-          }
-
-          return (
-            <Wrapper
-              header={{
-                title: 'Projects',
-                action: projects.length > 0 && (
-                  <Button
-                    variant="primary"
-                    content="Create Project"
-                    prefix={<PlusFill />}
-                    to={`/${account}/new-project`}
-                    LinkComponent={Link}
-                  />
-                ),
-              }}
-              empty={getEmptyState({
-                projectLength: projects.length,
-                clustersLength: clustersCount,
-                secretsLength: cloudProviderSecretsCount,
-              })}
-              tools={<Tools />}
-            >
-              <ProjectResourcesV2 items={projects} />
-            </Wrapper>
-          );
-        }}
-      </LoadingComp>
-    </div>
+    <LoadingComp
+      data={promise}
+      skeletonData={{
+        projectsData: fake.ConsoleListProjectsQuery.core_listProjects as any,
+        clustersCount: 1,
+        cloudProviderSecretsCount: 1,
+      }}
+    >
+      {({ projectsData, clustersCount, cloudProviderSecretsCount }) => {
+        const projects = projectsData.edges?.map(({ node }) => node);
+        if (!projects) {
+          return null;
+        }
+
+        return (
+          <Wrapper
+            header={{
+              title: 'Projects',
+              action: projects.length > 0 && (
+                <Button
+                  variant="primary"
+                  content="Create Project"
+                  prefix={<PlusFill />}
+                  to={`/${account}/new-project`}
+                  LinkComponent={Link}
+                />
+              ),
+            }}
+            empty={getEmptyState({
+              projectLength: projects.length,
+              clustersLength: clustersCount,
+              secretsLength: cloudProviderSecretsCount,
+            })}
+            tools={<Tools />}
+          >
+            <ProjectResourcesV2 items={projects} />
+          </Wrapper>
+        );
+      }}
+    </LoadingComp>
   );
 };
 

From 6f4b1480cd277597d48a8b34ebcd3ea7779aa6e0 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 11 Mar 2024 18:41:50 +0530
Subject: [PATCH 09/66] :coffin: Cleaning

---
 Taskfile.yaml            | 2 +-
 lib/configs/base-url.cjs | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/Taskfile.yaml b/Taskfile.yaml
index cc9bb95da..41360ec3b 100644
--- a/Taskfile.yaml
+++ b/Taskfile.yaml
@@ -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
diff --git a/lib/configs/base-url.cjs b/lib/configs/base-url.cjs
index 96ae00947..d4d541d2e 100644
--- a/lib/configs/base-url.cjs
+++ b/lib/configs/base-url.cjs
@@ -86,8 +86,7 @@ const baseUrls = () => {
     cookieDomain,
     baseUrl: bUrl,
     githubAppName: 'kloudlite-dev',
-    // socketUrl: `wss://websocket.${bUrl}`,
-    socketUrl: `wss://websocket.kloudlite.io`,
+    socketUrl: `wss://websocket.${bUrl}`,
     observeUrl: `https://observe.${bUrl}`,
   };
 };

From f08f86d03bd9841b9d685b2fa3642dc1c7578171 Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Mon, 11 Mar 2024 18:50:47 +0530
Subject: [PATCH 10/66] WIP sync status

---
 gql-queries-generator/doc/queries.graphql     |  10 +
 src/apps/console/components/commons.tsx       |  11 -
 src/apps/console/components/icons.tsx         |   8 +
 src/apps/console/components/listV2.tsx        |  14 +-
 src/apps/console/components/sync-status.tsx   | 380 +++++++++++++++++-
 .../$a+/$cloudprovider+/validate-cp.tsx       |   3 +-
 .../$environment+/apps/apps-resources-v2.tsx  | 335 +++++++++++++++
 .../$environment+/apps/apps-resources.tsx     |  20 +-
 .../$project+/$environment+/apps/route.tsx    |  10 +-
 .../$cluster+/storage/storage-resources.tsx   |   1 -
 .../infra+/clusters/cluster-resources-v2.tsx  | 246 ++++++++++++
 .../infra+/clusters/cluster-resources.tsx     |   1 -
 .../$account+/infra+/clusters/route.tsx       |   4 +-
 .../console/server/gql/queries/app-queries.ts |  24 +-
 src/generated/gql/server.ts                   |   6 +
 15 files changed, 1019 insertions(+), 54 deletions(-)
 create mode 100644 src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources-v2.tsx
 create mode 100644 src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx

diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
index cde388390..ee30bdcae 100644
--- a/gql-queries-generator/doc/queries.graphql
+++ b/gql-queries-generator/doc/queries.graphql
@@ -1028,6 +1028,11 @@ query consoleGetApp($projectName: String!, $envName: String!, $name: String!) {
       }
     }
     status {
+      checkList {
+        description
+        title
+        name
+      }
       checks
       isReady
       lastReadyGeneration
@@ -1157,6 +1162,11 @@ query consoleListApps($projectName: String!, $envName: String!, $search: SearchA
             name
             namespace
           }
+          checkList {
+            description
+            title
+            name
+          }
         }
         syncStatus {
           action
diff --git a/src/apps/console/components/commons.tsx b/src/apps/console/components/commons.tsx
index 30764ecd3..f243b659a 100644
--- a/src/apps/console/components/commons.tsx
+++ b/src/apps/console/components/commons.tsx
@@ -88,21 +88,10 @@ export const CopyButton = ({
       setTimeout(() => {
         setCopyIcon(<CopySimple />);
       }, 1000);
-      // toast.success('Copied to clipboard');
     },
   });
 
   return (
-    // <Chips.Chip
-    //   type="CLICKABLE"
-    //   item={title}
-    //   label={title}
-    //   prefix={copyIcon}
-    //   onClick={() => {
-    //     copy(value);
-    //     setCopyIcon(<Check />);
-    //   }}
-    // />
     <div
       onClick={() => {
         copy(value);
diff --git a/src/apps/console/components/icons.tsx b/src/apps/console/components/icons.tsx
index 6bd74f5c6..5e07083cd 100644
--- a/src/apps/console/components/icons.tsx
+++ b/src/apps/console/components/icons.tsx
@@ -39,4 +39,12 @@ export {
   BackingServices,
   VirtualMachine,
   Database,
+  ArrowsClockwise,
+  Info,
+  Fan,
+  WarningCircle,
+  ChecksFill as Checks,
+  CircleNotch,
+  Circle,
+  CircleFill,
 } from '@jengaicons/react';
diff --git a/src/apps/console/components/listV2.tsx b/src/apps/console/components/listV2.tsx
index 29d256311..93603fcd0 100644
--- a/src/apps/console/components/listV2.tsx
+++ b/src/apps/console/components/listV2.tsx
@@ -104,6 +104,7 @@ interface IMain {
 interface IRowBase extends IMain {
   linkComponent?: any;
   headers?: IHeader[];
+  disabled?: boolean;
 }
 
 const RowBase = ({
@@ -115,6 +116,7 @@ const RowBase = ({
   pressed = false,
   plain,
   headers,
+  disabled,
 }: IRowBase) => {
   let Component: any = linkComponent;
 
@@ -138,12 +140,13 @@ const RowBase = ({
     {
       'bg-surface-basic-default': !pressed,
       'cursor-pointer hover:bg-surface-basic-hovered':
-        (!!onClick || linkComponent !== 'div') && !pressed,
+        (!!onClick || linkComponent !== 'div') && !pressed && !disabled,
       'bg-surface-basic-active': pressed,
+      'cursor-default': !!disabled,
     }
   );
 
-  if (!!onClick || linkComponent !== 'div') {
+  if (!disabled) {
     return (
       <RovingFocusGroup.Item
         role="row"
@@ -209,7 +212,11 @@ interface IRoot {
   loading?: boolean;
   data?: {
     headers: IHeader[];
-    rows: Array<{ columns: Record<string, IColumn>; to?: string }>;
+    rows: Array<{
+      columns: Record<string, IColumn>;
+      to?: string;
+      disabled?: boolean;
+    }>;
     className?: Array<string>;
   };
   headerClassName?: string;
@@ -279,6 +286,7 @@ const Root = ({
                   columns={r.columns}
                   to={r.to}
                   headers={data.headers}
+                  disabled={r.disabled}
                 />
               ))}
             </div>
diff --git a/src/apps/console/components/sync-status.tsx b/src/apps/console/components/sync-status.tsx
index f2ac6dbdf..aefaae066 100644
--- a/src/apps/console/components/sync-status.tsx
+++ b/src/apps/console/components/sync-status.tsx
@@ -2,15 +2,23 @@ import {
   ArrowsClockwise,
   Trash,
   Info,
-  Warning,
   WarningCircle,
-} from '@jengaicons/react';
+  CheckCircleFill,
+  Checks,
+  CircleNotch,
+  XCircleFill,
+  Circle,
+  CircleFill,
+  X,
+} from '~/console/components/icons';
 import Tooltip from '~/components/atoms/tooltip';
 import { titleCase } from '~/components/utils';
 import {
-  Github__Com___Kloudlite___Api___Pkg___Types__SyncState as SyncState,
-  Github__Com___Kloudlite___Api___Pkg___Types__SyncAction as SyncAction,
+  Github__Com___Kloudlite___Api___Pkg___Types__SyncState as ISyncState,
+  Github__Com___Kloudlite___Api___Pkg___Types__SyncAction as ISyncAction,
+  Github__Com___Kloudlite___Operator___Pkg___Operator__CheckMetaIn as ICheckList,
 } from '~/root/src/generated/gql/server';
+import { Badge } from '~/components/atoms/badge';
 
 interface IStatusMeta {
   metadata?: { generation: number };
@@ -30,15 +38,369 @@ interface IStatusMeta {
     }>;
   };
   syncStatus: {
-    action: SyncAction;
+    action: ISyncAction;
     error?: string;
     lastSyncedAt?: any;
     recordVersion: number;
-    state: SyncState;
+    state: ISyncState;
     syncScheduledAt?: any;
   };
 }
 
+interface IStatusMetaV2 {
+  metadata?: { generation: number };
+  recordVersion: number;
+  markedForDeletion?: boolean;
+  status?: {
+    checks?: any;
+    isReady: boolean;
+    lastReadyGeneration?: number;
+    lastReconcileTime?: any;
+    message?: { RawMessage?: any };
+    resources?: Array<{
+      apiVersion: string;
+      kind: string;
+      name: string;
+      namespace: string;
+    }>;
+    checkList?: ICheckList[];
+  };
+  syncStatus: {
+    action: ISyncAction;
+    error?: string;
+    lastSyncedAt?: any;
+    recordVersion: number;
+    state: ISyncState;
+    syncScheduledAt?: any;
+  };
+}
+
+const Stage = {
+  Waiting: 'yet-to-be-reconciled',
+  InProgress: 'under-reconcilation',
+  Error: 'errored-during-reconcilation',
+  Completed: 'finished-reconcilation',
+};
+
+type OverallStates = 'idle' | 'in-progress' | 'error' | 'ready' | 'deleting';
+
+const State = ({ state }: { state: OverallStates }) => {
+  switch (state) {
+    case 'ready':
+      return (
+        <Badge icon={<Checks />} type="info">
+          Ready
+        </Badge>
+      );
+    case 'in-progress':
+      return (
+        <Badge
+          icon={
+            <span className="animate-spin relative flex items-center justify-center">
+              <CircleNotch size={12} />
+              <span className="absolute">
+                <CircleFill size={8} />
+              </span>
+            </span>
+          }
+          type="warning"
+        >
+          In progress
+        </Badge>
+      );
+    case 'deleting':
+      return 'Deleting';
+    case 'error':
+      return (
+        <Badge icon={<X />} type="critical">
+          Error
+        </Badge>
+      );
+    default:
+      return (
+        <Badge icon={<CircleFill />} type="warning">
+          Waiting
+        </Badge>
+      );
+  }
+};
+
+export const SyncStatusV2 = ({ item }: { item: IStatusMetaV2 }) => {
+  const { status } = item;
+
+  const parseStage = (check: OverallStates) => {
+    const iconSize = 12;
+
+    switch (check) {
+      case 'in-progress':
+        return {
+          icon: (
+            <span className="text-text-warning">
+              <CircleNotch size={iconSize} />
+            </span>
+          ),
+        };
+      case 'error':
+        return {
+          icon: (
+            <span className="text-text-critical">
+              <XCircleFill size={iconSize} />
+            </span>
+          ),
+        };
+      case 'ready':
+        return {
+          icon: (
+            <span className="text-text-success">
+              <CheckCircleFill size={iconSize} />
+            </span>
+          ),
+        };
+      case 'idle':
+      default:
+        return {
+          icon: (
+            <span className="text-text-soft">
+              <Circle size={iconSize} />
+            </span>
+          ),
+        };
+    }
+  };
+
+  const parseOverallState = (s: typeof status): OverallStates => {
+    /*
+    WaitingState   State = "yet-to-be-reconciled"
+  RunningState   State = "under-reconcilation"
+  ErroredState   State = "errored-during-reconcilation"
+  CompletedState State = "finished-reconcilation"
+    */
+
+    const checks: {
+      [key: string]: {
+        error: string;
+        generation: number;
+        message: string;
+        state:
+          | 'yet-to-be-reconciled'
+          | 'under-reconcilation'
+          | 'errored-during-reconcilation'
+          | 'finished-reconcilation';
+        status: boolean;
+      };
+    } = s?.checks;
+    if (!checks) {
+      return 'idle';
+    }
+
+    /*
+    if no one stared -> idle
+
+    if any fail all fail
+
+    if any not in progress -> in progress
+
+    if all done -> done
+    */
+
+    const mainStatus = status?.checkList?.reduce(
+      (acc, curr) => {
+        const k = checks[curr.name];
+        if (acc.progress === 'done') {
+          return acc;
+        }
+
+        if (k) {
+          if (acc.value === 'idle' && k.state === 'yet-to-be-reconciled') {
+            return {
+              value: 'idle',
+              progress: 'done',
+            };
+          }
+
+          if (k.state === 'under-reconcilation') {
+            return {
+              value: 'in-progress',
+              progress: 'done',
+            };
+          }
+
+          if (k.state === 'errored-during-reconcilation') {
+            return {
+              value: 'error',
+              progress: 'done',
+            };
+          }
+
+          if (k.state === 'finished-reconcilation') {
+            return {
+              value: 'ready',
+              progress: 'init',
+            };
+          }
+        }
+
+        return acc;
+      },
+      {
+        value: 'idle',
+        progress: 'init',
+      }
+    );
+
+    return (mainStatus?.value as OverallStates) || 'idle';
+  };
+
+  const getProgressItems = (s: typeof status) => {
+    const checks: {
+      [key: string]: {
+        error: string;
+        generation: number;
+        message: string;
+        state:
+          | 'yet-to-be-reconciled'
+          | 'under-reconcilation'
+          | 'errored-during-reconcilation'
+          | 'finished-reconcilation';
+        status: boolean;
+      };
+    } = s?.checks;
+    if (!checks) {
+      return 'idle';
+    }
+
+    /*
+    if no one stared -> idle
+
+    if any fail all fail
+
+    if any not in progress -> in progress
+
+    if all done -> done
+    */
+
+    const items = status?.checkList?.reduce(
+      (acc, curr) => {
+        const k = checks[curr.name];
+        if (acc.progress === 'done') {
+          acc.items.push({
+            ...curr,
+            result: 'idle',
+          });
+          return acc;
+        }
+
+        const res = (() => {
+          if (k) {
+            if (acc.value === 'idle' && k.state === 'yet-to-be-reconciled') {
+              return {
+                value: 'idle',
+                progress: 'done',
+              };
+            }
+
+            if (k.state === 'under-reconcilation') {
+              return {
+                value: 'in-progress',
+                progress: 'done',
+              };
+            }
+
+            if (k.state === 'errored-during-reconcilation') {
+              return {
+                value: 'error',
+                progress: 'done',
+              };
+            }
+
+            if (k.state === 'finished-reconcilation') {
+              return {
+                value: 'ready',
+                progress: 'init',
+              };
+            }
+          }
+
+          return acc;
+        })();
+
+        acc.items.push({
+          ...curr,
+          result: res?.value,
+        });
+
+        acc.value = res.value;
+        acc.progress = res.progress;
+
+        return acc;
+      },
+      {
+        value: 'idle',
+        items: [],
+        progress: 'init',
+      }
+    );
+
+    return items?.items;
+  };
+
+  const data = {
+    checks: {
+      'deployment-svc-and-hpa-created': {
+        state: 'under-reconcilation',
+        status: true,
+      },
+      'deployment-ready': {
+        state: 'finished-reconcilation',
+        status: false,
+      },
+    },
+    checkList: [
+      {
+        title: 'Scaling configured',
+        name: 'deployment-svc-and-hpa-created',
+      },
+      {
+        title: 'Deployment ready',
+        name: 'deployment-ready',
+      },
+    ],
+  };
+
+  const k = parseOverallState(data);
+
+  const ic = getProgressItems(data);
+  console.log(ic);
+  return (
+    <div>
+      <Tooltip.Root
+        align="center"
+        className="!max-w-[300px]"
+        content={
+          <div className="p-md flex flex-col gap-lg">
+            <div className="bodyMd-medium" />
+            <div className="flex flex-col gap-lg">
+              {ic.map((cl) => (
+                <div
+                  key={cl.name}
+                  className="bodySm flex flex-row gap-xl items-center"
+                >
+                  <span>{parseStage(cl.name).icon}</span>
+                  <span>{cl.title}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        }
+      >
+        <div className="cursor-pointer">
+          <State state={k} />
+        </div>
+      </Tooltip.Root>
+    </div>
+  );
+};
+
 const SyncStatus = ({ item }: { item: IStatusMeta }) => {
   const statusIconSize = 16;
 
@@ -191,19 +553,13 @@ export const parseStatus = ({
 };
 
 export const listStatus = ({
-  key,
-  className,
   item,
   type,
 }: {
-  key: string;
-  className?: string;
   item: IStatusMeta;
   type?: IResourceType;
 }) => {
   return {
-    key,
-    className,
     render: () => (
       <div className="min-w-[20px]">
         <SyncStatus item={item} />
diff --git a/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx b/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx
index 195aa16d1..ebe2614df 100644
--- a/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx
+++ b/src/apps/console/routes/_a+/onboarding+/$a+/$cloudprovider+/validate-cp.tsx
@@ -267,8 +267,9 @@ const Validator = ({ cloudProvider }: { cloudProvider: any }) => {
                   data?.result
                     ? undefined
                     : {
-                        variant: 'primary',
+                        variant: 'outline',
                         content: 'Skip',
+                        prefix: undefined,
                         onClick: () => {
                           navigate(
                             `/onboarding/${parseName(account)}/${parseName(
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources-v2.tsx
new file mode 100644
index 000000000..7d2a4524a
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources-v2.tsx
@@ -0,0 +1,335 @@
+import {
+  GearSix,
+  LinkBreak,
+  Link as LinkIcon,
+  Repeat,
+} from '@jengaicons/react';
+import { Link, useOutletContext, useParams } from '@remix-run/react';
+import { generateKey, titleCase } from '~/components/utils';
+import {
+  ListItem,
+  ListSecondary,
+  ListTitle,
+  listClass,
+  listFlex,
+} from '~/console/components/console-list-components';
+import Grid from '~/console/components/grid';
+import List from '~/console/components/list';
+import ListGridView from '~/console/components/list-grid-view';
+import ResourceExtraAction, {
+  IResourceExtraItem,
+} from '~/console/components/resource-extra-action';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { IApps } from '~/console/server/gql/queries/app-queries';
+import {
+  ExtractNodeType,
+  parseName,
+  parseName as pn,
+  parseUpdateOrCreatedBy,
+  parseUpdateOrCreatedOn,
+} from '~/console/server/r-utils/common';
+import { handleError } from '~/root/lib/utils/common';
+import { toast } from '~/components/molecule/toast';
+import { useReload } from '~/root/lib/client/helpers/reloader';
+import { SyncStatusV2, listStatus } from '~/console/components/sync-status';
+import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
+import ListV2 from '~/console/components/listV2';
+import { IEnvironmentContext } from '../_layout';
+
+const RESOURCE_NAME = 'app';
+type BaseType = ExtractNodeType<IApps>;
+
+const parseItem = (item: ExtractNodeType<IApps>) => {
+  return {
+    name: item.displayName,
+    id: pn(item),
+    intercept: item.spec.intercept,
+    updateInfo: {
+      author: `Updated by ${titleCase(parseUpdateOrCreatedBy(item))}`,
+      time: parseUpdateOrCreatedOn(item),
+    },
+  };
+};
+
+type OnAction = ({
+  action,
+  item,
+}: {
+  action: 'delete' | 'edit' | 'intercept' | 'remove_intercept' | 'restart';
+  item: BaseType;
+}) => void;
+
+type IExtraButton = {
+  onAction: OnAction;
+  item: BaseType;
+};
+
+const ExtraButton = ({ onAction, item }: IExtraButton) => {
+  const { account, project, environment } = useParams();
+  const iconSize = 16;
+  let options: IResourceExtraItem[] = [
+    {
+      label: 'Settings',
+      icon: <GearSix size={iconSize} />,
+      type: 'item',
+      to: `/${account}/${project}/${environment}/app/${parseName(
+        item
+      )}/settings/general`,
+      key: 'settings',
+    },
+  ];
+
+  if (item.spec.intercept && item.spec.intercept.enabled) {
+    options = [
+      {
+        label: 'Remove intercept',
+        icon: <LinkBreak size={iconSize} />,
+        type: 'item',
+        onClick: () => onAction({ action: 'remove_intercept', item }),
+        key: 'remove-intercept',
+      },
+      ...options,
+    ];
+  } else {
+    options = [
+      {
+        label: 'Intercept',
+        icon: <Repeat size={iconSize} />,
+        type: 'item',
+        onClick: () => onAction({ action: 'intercept', item }),
+        key: 'intercept',
+      },
+      ...options,
+    ];
+  }
+
+  options = [
+    {
+      label: 'Restart',
+      icon: <LinkIcon size={iconSize} />,
+      type: 'item',
+      onClick: () => onAction({ action: 'restart', item }),
+      key: 'restart',
+    },
+    ...options,
+  ];
+
+  return <ResourceExtraAction options={options} />;
+};
+
+interface IResource {
+  items: BaseType[];
+  onAction: OnAction;
+}
+
+const GridView = ({ items = [], onAction: _ }: IResource) => {
+  const { account, project, environment } = useParams();
+
+  return (
+    <Grid.Root className="!grid-cols-1 md:!grid-cols-3" linkComponent={Link}>
+      {items.map((item, index) => {
+        const { name, id, updateInfo } = parseItem(item);
+        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
+        return (
+          <Grid.Column
+            key={id}
+            to={`/${account}/${project}/${environment}/app/${id}`}
+            rows={[
+              {
+                key: generateKey(keyPrefix, name + id),
+                render: () => (
+                  <ListTitle
+                    title={name}
+                    subtitle={id}
+                    action={
+                      <ResourceExtraAction
+                        options={[
+                          {
+                            key: 'apps-resource-extra-action-1',
+                            to: `/${account}/${project}/${environment}/app/${id}/settings/general`,
+                            icon: <GearSix size={16} />,
+                            label: 'Settings',
+                            type: 'item',
+                          },
+                        ]}
+                      />
+                    }
+                  />
+                ),
+              },
+              {
+                key: generateKey(keyPrefix, updateInfo.author),
+                render: () => (
+                  <ListItem
+                    data={updateInfo.author}
+                    subtitle={updateInfo.time}
+                  />
+                ),
+              },
+            ]}
+          />
+        );
+      })}
+    </Grid.Root>
+  );
+};
+
+const ListView = ({ items = [], onAction }: IResource) => {
+  const { account, project, environment } = useParams();
+  return (
+    <ListV2.Root
+      linkComponent={Link}
+      data={{
+        headers: [
+          {
+            render: () => 'Name',
+            name: 'name',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => 'Status',
+            name: 'status',
+            className: 'flex-1 min-w-[30px] flex items-center justify-center',
+          },
+          {
+            render: () => 'Updated',
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'action',
+            className: 'w-[24px]',
+          },
+        ],
+        rows: items.map((i) => {
+          const { name, id, updateInfo } = parseItem(i);
+          return {
+            columns: {
+              name: {
+                render: () => <ListTitle title={name} subtitle={id} />,
+              },
+              status: {
+                render: () => (
+                  <div className="inline-block">
+                    <SyncStatusV2 item={i} />
+                  </div>
+                ),
+              },
+              // provider: { render: () => <ListItem data={provider} /> },
+              updated: {
+                render: () => (
+                  <ListItem
+                    data={`${updateInfo.author}`}
+                    subtitle={updateInfo.time}
+                  />
+                ),
+              },
+              action: {
+                render: () => <ExtraButton onAction={onAction} item={i} />,
+              },
+            },
+            to: `/${account}/infra/${id}/overview`,
+            disabled: true,
+          };
+        }),
+      }}
+    />
+  );
+};
+
+const AppsResourcesV2 = ({ items = [] }: Omit<IResource, 'onAction'>) => {
+  const api = useConsoleApi();
+  const { environment, project, account } = useParams();
+  const { devicesForUser } = useOutletContext<IEnvironmentContext>();
+  const reload = useReload();
+
+  useWatchReload(
+    items.map((i) => {
+      return `account:${account}.project:${project}.environment:${environment}.app:${parseName(
+        i
+      )}`;
+    })
+  );
+
+  // useWatchItems(items, (item) => ({
+  //   account,
+  //   project,
+  //   environment,
+  //   app: pn(item),
+  // }));
+
+  const interceptApp = async (item: BaseType, intercept: boolean) => {
+    if (!environment || !project) {
+      throw new Error('Environment is required!.');
+    }
+    if (devicesForUser && devicesForUser.length > 0) {
+      const device = devicesForUser[0];
+      try {
+        const { errors } = await api.interceptApp({
+          appname: pn(item),
+          deviceName: pn(device),
+          envName: environment,
+          intercept,
+          projectName: project,
+        });
+
+        if (errors) {
+          throw errors[0];
+        }
+        toast.success('App intercepted successfully');
+        reload();
+      } catch (error) {
+        handleError(error);
+      }
+    }
+  };
+
+  const restartApp = async (item: BaseType) => {
+    if (!environment || !project) {
+      throw new Error('Environment is required!.');
+    }
+
+    try {
+      const { errors } = await api.restartApp({
+        appName: pn(item),
+        envName: environment,
+        projectName: project,
+      });
+
+      if (errors) {
+        throw errors[0];
+      }
+      toast.success('App restarted successfully');
+      // reload();
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  const props: IResource = {
+    items,
+    onAction: ({ action, item }) => {
+      switch (action) {
+        case 'intercept':
+          interceptApp(item, true);
+          break;
+        case 'restart':
+          restartApp(item);
+          break;
+        case 'remove_intercept':
+          interceptApp(item, false);
+          break;
+        default:
+      }
+    },
+  };
+  return (
+    <ListGridView
+      listView={<ListView {...props} />}
+      gridView={<GridView {...props} />}
+    />
+  );
+};
+
+export default AppsResourcesV2;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
index 53dd6ade7..12bbdcf4a 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
@@ -32,8 +32,6 @@ import { handleError } from '~/root/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { listStatus } from '~/console/components/sync-status';
-import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
-import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import { IEnvironmentContext } from '../_layout';
 
@@ -199,15 +197,15 @@ const ListView = ({ items = [], onAction }: IResource) => {
               ...[
                 intercept && !!intercept.enabled
                   ? {
-                      key: generateKey(keyPrefix, `${name + id}intercept`),
-                      className: listClass.title,
-                      render: () => (
-                        <ListSecondary
-                          title="intercepted toDevice"
-                          subtitle={intercept?.toDevice}
-                        />
-                      ),
-                    }
+                    key: generateKey(keyPrefix, `${name + id}intercept`),
+                    className: listClass.title,
+                    render: () => (
+                      <ListSecondary
+                        title="intercepted toDevice"
+                        subtitle={intercept?.toDevice}
+                      />
+                    ),
+                  }
                   : [],
               ],
               listFlex({ key: 'flex-1' }),
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/route.tsx
index a62eb7f54..d9679b792 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/route.tsx
@@ -12,8 +12,8 @@ import { IRemixCtx } from '~/root/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
 import { clearAppState } from '~/console/page-components/app-states';
 import { useEffect } from 'react';
-import AppsResources from './apps-resources';
 import Tools from './tools';
+import AppsResourcesV2 from './apps-resources-v2';
 
 export const loader = async (ctx: IRemixCtx) => {
   ensureAccountSet(ctx);
@@ -47,9 +47,9 @@ const Apps = () => {
   return (
     <LoadingComp
       data={promise}
-      skeletonData={{
-        appsData: fake.ConsoleListAppsQuery.core_listApps as any,
-      }}
+    // skeletonData={{
+    //   appsData: fake.ConsoleListAppsQuery.core_listApps as any,
+    // }}
     >
       {({ appsData }) => {
         const apps = parseNodes(appsData);
@@ -87,7 +87,7 @@ const Apps = () => {
               }}
               tools={<Tools />}
             >
-              <AppsResources items={apps} />
+              <AppsResourcesV2 items={apps} />
             </Wrapper>
           </div>
         );
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx
index b9203062e..078d120d0 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx
@@ -23,7 +23,6 @@ import { toast } from '~/components/molecule/toast';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { handleError } from '~/root/lib/utils/common';
 import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
-import { IClusterContext } from '~/console/routes/_main+/$account+/infra+/$cluster+/_layout';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 
 const RESOURCE_NAME = 'storage';
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
new file mode 100644
index 000000000..7ce59610e
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
@@ -0,0 +1,246 @@
+import { GearSix } from '@jengaicons/react';
+import { Link, useOutletContext, useParams } from '@remix-run/react';
+import { cn, generateKey, titleCase } from '~/components/utils';
+import { listRender } from '~/console/components/commons';
+import ConsoleAvatar from '~/console/components/console-avatar';
+import {
+  ListBody,
+  ListItem,
+  ListTitle,
+} from '~/console/components/console-list-components';
+import Grid from '~/console/components/grid';
+import ListGridView from '~/console/components/list-grid-view';
+import ResourceExtraAction from '~/console/components/resource-extra-action';
+import { IStatus, listStatus } from '~/console/components/sync-status';
+import { IClusters } from '~/console/server/gql/queries/cluster-queries';
+import {
+  ExtractNodeType,
+  parseName,
+  parseUpdateOrCreatedBy,
+  parseUpdateOrCreatedOn,
+} from '~/console/server/r-utils/common';
+import { renderCloudProvider } from '~/console/utils/commons';
+import logger from '~/root/lib/client/helpers/log';
+import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
+import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
+import ListV2 from '~/console/components/listV2';
+
+type BaseType = ExtractNodeType<IClusters>;
+const RESOURCE_NAME = 'cluster';
+
+const getProvider = (item: BaseType) => {
+  if (!item.spec) {
+    return '';
+  }
+  switch (item.spec.cloudProvider) {
+    case 'aws':
+      return (
+        <div className="flex flex-row items-center gap-lg">
+          {renderCloudProvider({ cloudprovider: item.spec.cloudProvider })}
+          <span>({item.spec.aws?.region})</span>
+        </div>
+      );
+    case 'gcp':
+    case 'azure':
+      return (
+        <div className="flex flex-row items-center gap-lg">
+          <span>{item.spec.cloudProvider}</span>
+        </div>
+      );
+
+    default:
+      logger.error('unknown provider', item.spec.cloudProvider);
+      return '';
+  }
+};
+
+const parseItem = (item: BaseType) => {
+  return {
+    name: item.displayName,
+    id: parseName(item),
+    provider: getProvider(item),
+    updateInfo: {
+      author: `Updated by ${titleCase(parseUpdateOrCreatedBy(item))}`,
+      time: parseUpdateOrCreatedOn(item),
+    },
+  };
+};
+
+const ExtraButton = ({
+  cluster,
+  status,
+}: {
+  cluster: BaseType;
+  status: IStatus;
+}) => {
+  const { account } = useParams();
+  return (
+    <ResourceExtraAction
+      disabled={status === 'deleting' || status === 'syncing'}
+      options={[
+        {
+          label: 'Settings',
+          icon: <GearSix size={16} />,
+          type: 'item',
+          to: `/${account}/infra/${cluster.metadata.name}/settings`,
+          key: 'settings',
+        },
+      ]}
+    />
+  );
+};
+
+const GridView = ({ items }: { items: BaseType[] }) => {
+  const { account } = useParams();
+  return (
+    <Grid.Root className="!grid-cols-1 md:!grid-cols-3" linkComponent={Link}>
+      {items.map((item, index) => {
+        const { name, id, provider, updateInfo } = parseItem(item);
+        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
+        const lR = listRender({ keyPrefix, resource: item });
+        const status = lR.statusRender({ className: '' });
+        return (
+          <Grid.Column
+            key={id}
+            to={`/${account}/infra/${id}/overview`}
+            rows={[
+              {
+                key: generateKey(keyPrefix, name + id),
+                render: () => (
+                  <ListTitle
+                    title={name}
+                    subtitle={id}
+                    action={
+                      // <ExtraButton status={status.status} cluster={item} />
+                      <span />
+                    }
+                  />
+                ),
+              },
+              {
+                key: generateKey(keyPrefix, id + name + provider),
+                render: () => (
+                  <div className="flex flex-col gap-md">
+                    {/* <ListItem data={path} /> */}
+                    <ListBody data={provider} />
+                  </div>
+                ),
+              },
+              status,
+              {
+                key: generateKey(keyPrefix, updateInfo.author),
+                render: () => (
+                  <ListItem
+                    data={updateInfo.author}
+                    subtitle={updateInfo.time}
+                  />
+                ),
+              },
+            ]}
+          />
+        );
+      })}
+    </Grid.Root>
+  );
+};
+const ListView = ({ items }: { items: BaseType[] }) => {
+  const { account } = useParams();
+  return (
+    <ListV2.Root
+      linkComponent={Link}
+      data={{
+        headers: [
+          {
+            render: () => (
+              <div className="flex flex-row">
+                <span className="w-[48px]" />
+                Name
+              </div>
+            ),
+            name: 'name',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'status',
+            className: 'flex-1 min-w-[30px] flex items-center justify-center',
+          },
+          {
+            render: () => 'Provider (Region)',
+            name: 'provider',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => 'Updated',
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'action',
+            className: 'w-[24px]',
+          },
+        ],
+        rows: items.map((i) => {
+          const { name, id, updateInfo, provider } = parseItem(i);
+
+          const tempStatus = listStatus({
+            item: i,
+          });
+          return {
+            columns: {
+              name: {
+                render: () => (
+                  <ListTitle
+                    title={name}
+                    subtitle={id}
+                    avatar={<ConsoleAvatar name={id} />}
+                  />
+                ),
+              },
+              status: {
+                render: () => (
+                  <div className="inline-block">{tempStatus.render()}</div>
+                ),
+              },
+              provider: { render: () => <ListItem data={provider} /> },
+              updated: {
+                render: () => (
+                  <ListItem
+                    data={`${updateInfo.author}`}
+                    subtitle={updateInfo.time}
+                  />
+                ),
+              },
+              action: {
+                render: () => (
+                  <ExtraButton status={tempStatus.status} cluster={i} />
+                ),
+              },
+            },
+            to: `/${account}/infra/${id}/overview`,
+            disabled: true,
+          };
+        }),
+      }}
+    />
+  );
+};
+
+const ClusterResourcesV2 = ({ items = [] }: { items: BaseType[] }) => {
+  const { account } = useOutletContext<IAccountContext>();
+  useWatchReload(
+    items.map((i) => {
+      return `account:${parseName(account)}.cluster:${parseName(i)}`;
+    })
+  );
+
+  return (
+    <ListGridView
+      gridView={<GridView {...{ items }} />}
+      listView={<ListView {...{ items }} />}
+    />
+  );
+};
+
+export default ClusterResourcesV2;
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
index abfd64b98..2aad085ef 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
@@ -267,7 +267,6 @@ const ListView = ({ items }: IResource) => {
         const statusRender = lR.statusRender({
           className: 'min-w-[80px] mx-[25px] basis-full text-center',
         });
-
         return (
           <List.Row
             key={id}
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
index 47f838606..ca81ffe46 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
@@ -11,7 +11,7 @@ import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import Tools from './tools';
-import ClusterResources from './cluster-resources';
+import ClusterResourcesV2 from './cluster-resources-v2';
 
 export const loader = async (ctx: IRemixCtx) => {
   const promise = pWrapper(async () => {
@@ -152,7 +152,7 @@ const Clusters = () => {
             }}
             tools={<Tools />}
           >
-            <ClusterResources items={clusters} />
+            <ClusterResourcesV2 items={clusters} />
           </Wrapper>
         );
       }}
diff --git a/src/apps/console/server/gql/queries/app-queries.ts b/src/apps/console/server/gql/queries/app-queries.ts
index 0bcc2c5c5..9d33b4f52 100644
--- a/src/apps/console/server/gql/queries/app-queries.ts
+++ b/src/apps/console/server/gql/queries/app-queries.ts
@@ -34,7 +34,7 @@ export const appQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleRestartAppQuery) => data.core_restartApp,
-      vars: (_: ConsoleRestartAppQueryVariables) => {},
+      vars: (_: ConsoleRestartAppQueryVariables) => { },
     }
   ),
   createApp: executor(
@@ -55,7 +55,7 @@ export const appQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleCreateAppMutation) => data.core_createApp,
-      vars(_: ConsoleCreateAppMutationVariables) {},
+      vars(_: ConsoleCreateAppMutationVariables) { },
     }
   ),
 
@@ -79,7 +79,7 @@ export const appQueries = (executor: IExecutor) => ({
       transformer: (data: ConsoleUpdateAppMutation) => {
         return data.core_updateApp;
       },
-      vars(_: ConsoleUpdateAppMutationVariables) {},
+      vars(_: ConsoleUpdateAppMutationVariables) { },
     }
   ),
   interceptApp: executor(
@@ -103,7 +103,7 @@ export const appQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleInterceptAppMutation) =>
         data.core_interceptApp,
-      vars(_: ConsoleInterceptAppMutationVariables) {},
+      vars(_: ConsoleInterceptAppMutationVariables) { },
     }
   ),
   deleteApp: executor(
@@ -122,7 +122,7 @@ export const appQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleDeleteAppMutation) => data.core_deleteApp,
-      vars(_: ConsoleDeleteAppMutationVariables) {},
+      vars(_: ConsoleDeleteAppMutationVariables) { },
     }
   ),
   getApp: executor(
@@ -247,6 +247,11 @@ export const appQueries = (executor: IExecutor) => ({
             }
           }
           status {
+            checkList {
+              description
+              title
+              name
+            }
             checks
             isReady
             lastReadyGeneration
@@ -269,7 +274,7 @@ export const appQueries = (executor: IExecutor) => ({
       transformer(data: ConsoleGetAppQuery) {
         return data.core_getApp;
       },
-      vars(_: ConsoleGetAppQueryVariables) {},
+      vars(_: ConsoleGetAppQueryVariables) { },
     }
   ),
   listApps: executor(
@@ -390,6 +395,11 @@ export const appQueries = (executor: IExecutor) => ({
                   name
                   namespace
                 }
+                checkList {
+                  description
+                  title
+                  name
+                }
               }
               syncStatus {
                 action
@@ -414,7 +424,7 @@ export const appQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleListAppsQuery) => data.core_listApps,
-      vars(_: ConsoleListAppsQueryVariables) {},
+      vars(_: ConsoleListAppsQueryVariables) { },
     }
   ),
 });
diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
index 387db054d..2114b22cd 100644
--- a/src/generated/gql/server.ts
+++ b/src/generated/gql/server.ts
@@ -2506,6 +2506,7 @@ export type ConsoleGetAppQuery = {
       isReady: boolean;
       lastReadyGeneration?: number;
       lastReconcileTime?: any;
+      checkList?: Array<{ description?: string; title: string; name: string }>;
       message?: { RawMessage?: any };
       resources?: Array<{
         apiVersion: string;
@@ -2609,6 +2610,11 @@ export type ConsoleListAppsQuery = {
             name: string;
             namespace: string;
           }>;
+          checkList?: Array<{
+            description?: string;
+            title: string;
+            name: string;
+          }>;
         };
         syncStatus: {
           action: Github__Com___Kloudlite___Api___Pkg___Types__SyncAction;

From 37634ba990baef28f4a8ceba27afee025451666d Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Tue, 12 Mar 2024 13:42:38 +0530
Subject: [PATCH 11/66] Added analytics for console

---
 lib/app-setup/root.tsx                 | 36 +++++++++++++++--
 lib/utils/tags.client.ts               | 55 ++++++++++++++++++++++++++
 src/apps/console/root.tsx              |  4 +-
 src/apps/console/utils/gtags.client.ts | 48 ++++++++++++++++++++++
 4 files changed, 139 insertions(+), 4 deletions(-)
 create mode 100644 lib/utils/tags.client.ts
 create mode 100644 src/apps/console/utils/gtags.client.ts

diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
index 9ed4b2d9a..a3dd4da08 100644
--- a/lib/app-setup/root.tsx
+++ b/lib/app-setup/root.tsx
@@ -112,8 +112,8 @@ export function ErrorBoundary() {
               ? error.stack
               : JSON.stringify(error.stack, null, 2)
             : typeof error.stack === 'string'
-            ? error.stack
-            : JSON.stringify(error.stack, null, 2)}
+              ? error.stack
+              : JSON.stringify(error.stack, null, 2)}
         </code>
       </ErrorWrapper>
     );
@@ -160,8 +160,10 @@ const NonIdleProgressBar = () => {
 
 const Root = ({
   Wrapper = ({ children }: { children: any }) => children,
+  tagId
 }: {
-  Wrapper: (prop: { children: ReactNode }) => JSX.Element;
+  Wrapper: (prop: { children: ReactNode }) => JSX.Element;,
+  tagId?: string
 }) => {
   const env = useLoaderData();
 
@@ -172,6 +174,34 @@ const Root = ({
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Links />
         <Meta />
+        {/* <script */}
+        {/*   async */}
+        {/*   src="https://www.googletagmanager.com/gtag/js?id=G-9GFNBFM718" */}
+        {/* /> */}
+        {/* <script> */}
+        {/*   window.dataLayer = window.dataLayer || []; */}
+        {/*   function gtag(){dataLayer.push(arguments);} */}
+        {/*   gtag('js', new Date()); */}
+
+        {/*   gtag('config', 'G-9GFNBFM718'); */}
+        {/* </script> */}
+        <script
+          async
+          src={`https://www.googletagmanager.com/gtag/js?id=${tagId}`}
+        />
+        <script
+          async
+          id="gtag-init"
+          dangerouslySetInnerHTML={{
+            __html: `
+                window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', ${tagId});
+              `,
+          }}
+        />
       </head>
       <body className="antialiased">
         <div
diff --git a/lib/utils/tags.client.ts b/lib/utils/tags.client.ts
new file mode 100644
index 000000000..6f51d406c
--- /dev/null
+++ b/lib/utils/tags.client.ts
@@ -0,0 +1,55 @@
+declare global {
+  interface Window {
+    gtag: (
+      option: string,
+      gaTrackingId: string,
+      options: Record<string, unknown>
+    ) => void;
+  }
+}
+
+/**
+ * @example
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+ */
+export const pageview = (url: string, trackingId: string) => {
+  if (!window.gtag) {
+    console.warn(
+      'window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.'
+    );
+    return;
+  }
+  window.gtag('config', trackingId, {
+    page_path: url,
+  });
+};
+
+/**
+ * @example
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/events
+ */
+export const event = ({
+  action,
+  category,
+  label,
+  value,
+}: Record<string, string>) => {
+  if (!window.gtag) {
+    console.warn(
+      'window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.'
+    );
+    return;
+  }
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value,
+  });
+};
+
+const tag = {
+  pageview,
+  event,
+};
+
+export default tag;
diff --git a/src/apps/console/root.tsx b/src/apps/console/root.tsx
index 966c169c6..dee3a9cd2 100644
--- a/src/apps/console/root.tsx
+++ b/src/apps/console/root.tsx
@@ -9,6 +9,8 @@ import { DataContextProvider } from './page-components/common-state';
 export { loader } from '~/lib/app-setup/root.jsx';
 export { shouldRevalidate } from '~/lib/app-setup/root.jsx';
 
+const tagId = 'G-HCK0NJNTJ6';
+
 export const links = () => {
   return [
     ...baseLinks(),
@@ -27,7 +29,7 @@ const _Root = ({ ...props }) => {
   return (
     <SockProvider>
       <DataContextProvider>
-        <Root {...props} Wrapper={Layout} />
+        <Root {...props} Wrapper={Layout} tagId={tagId} />
       </DataContextProvider>
     </SockProvider>
   );
diff --git a/src/apps/console/utils/gtags.client.ts b/src/apps/console/utils/gtags.client.ts
new file mode 100644
index 000000000..969de2e6c
--- /dev/null
+++ b/src/apps/console/utils/gtags.client.ts
@@ -0,0 +1,48 @@
+declare global {
+  interface Window {
+    gtag: (
+      option: string,
+      gaTrackingId: string,
+      options: Record<string, unknown>
+    ) => void;
+  }
+}
+
+/**
+ * @example
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+ */
+export const pageview = (url: string, trackingId: string) => {
+  if (!window.gtag) {
+    console.warn(
+      'window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.'
+    );
+    return;
+  }
+  window.gtag('config', trackingId, {
+    page_path: url,
+  });
+};
+
+/**
+ * @example
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/events
+ */
+export const event = ({
+  action,
+  category,
+  label,
+  value,
+}: Record<string, string>) => {
+  if (!window.gtag) {
+    console.warn(
+      'window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.'
+    );
+    return;
+  }
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value,
+  });
+};

From 81cb74c1577bb9843a8ede24fd1c77d961cddc87 Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Tue, 12 Mar 2024 13:44:36 +0530
Subject: [PATCH 12/66] wip toast

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  13 +
 .../book/molecules/Toast.stories.tsx          |  29 ++
 .../components/molecule/toast.tsx             |  61 +--
 src/design-system/package.json                |  14 +-
 src/design-system/pnpm-lock.yaml              | 418 +++++++++---------
 6 files changed, 272 insertions(+), 264 deletions(-)
 create mode 100644 src/design-system/book/molecules/Toast.stories.tsx

diff --git a/package.json b/package.json
index 6b73673b7..21deaed89 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
 		"react-viewport-list": "^7.1.2",
 		"remix": "^1.19.3",
 		"search-in-json": "^1.0.67",
+		"sonner": "^1.4.3",
 		"swr": "^2.2.4",
 		"use-immer": "^0.9.0",
 		"uuid": "^9.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cde05dbba..e711b1a68 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -224,6 +224,9 @@ dependencies:
   search-in-json:
     specifier: ^1.0.67
     version: 1.0.67
+  sonner:
+    specifier: ^1.4.3
+    version: 1.4.3(react-dom@18.2.0)(react@18.2.0)
   swr:
     specifier: ^2.2.4
     version: 2.2.4(react@18.2.0)
@@ -9954,6 +9957,16 @@ packages:
       atomic-sleep: 1.0.0
     dev: false
 
+  /sonner@1.4.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-SArYlHbkjqRuLiR0iGY2ZSr09oOrxw081ZZkQPfXrs8aZQLIBOLOdzTYxGJB5yIZ7qL56UEPmrX1YqbODwG0Lw==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /sort-object-keys@1.1.3:
     resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==}
     dev: true
diff --git a/src/design-system/book/molecules/Toast.stories.tsx b/src/design-system/book/molecules/Toast.stories.tsx
new file mode 100644
index 000000000..eea4af1fb
--- /dev/null
+++ b/src/design-system/book/molecules/Toast.stories.tsx
@@ -0,0 +1,29 @@
+import { Button } from '../../components/atoms/button';
+
+import { ToastContainer, toast } from '../../components/molecule/toast';
+
+export default {
+  title: 'Molecules/Toast',
+  component: ToastContainer,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+const ToastHook = () => {
+  return (
+    <>
+      <ToastContainer />
+      <Button
+        content="toast"
+        onClick={() => {
+          toast.info('hello world');
+        }}
+      />
+    </>
+  );
+};
+
+export const DefaultToast = {
+  args: {},
+  render: () => <ToastHook />,
+};
diff --git a/src/design-system/components/molecule/toast.tsx b/src/design-system/components/molecule/toast.tsx
index db0980e2e..26222cbe7 100644
--- a/src/design-system/components/molecule/toast.tsx
+++ b/src/design-system/components/molecule/toast.tsx
@@ -1,29 +1,12 @@
-import {
-  CheckCircle,
-  Info,
-  Warning,
-  WarningCircle,
-  X,
-} from '@jengaicons/react';
-import {
-  ToastContainer as Container,
-  ToastPosition,
-  toast as t,
-} from 'react-toastify';
+import { CheckCircle, Info, Warning, WarningCircle } from '@jengaicons/react';
+
+import { Toaster as Container, toast as t, ToastT } from 'sonner';
 
 export const toast = {
   info: t.info,
   success: t.success,
   error: t.error,
-  warn: t.warn,
-};
-
-const classes = {
-  info: 'bg-surface-tertiary-default border-border-tertiary',
-  error: 'bg-surface-critical-default border-border-critical',
-  success: 'bg-surface-success-default border-border-success',
-  warning: 'bg-surface-warning-default border-border-warning',
-  default: 'bg-surface-tertiary-default border-border-tertiary',
+  warn: t.warning,
 };
 
 const icons = {
@@ -31,35 +14,25 @@ const icons = {
   error: <WarningCircle size={14} />,
   success: <CheckCircle size={14} />,
   warning: <Warning size={14} />,
-  default: null,
 };
 
-const CloseButton = () => (
-  <span className="text-text-on-primary hover:text-text-on-primary/50 h-[24px] flex items-center">
-    <X color="currentColor" size={12} />
-  </span>
-);
-
 interface IToastContainer {
-  autoClose?: number | false | undefined;
-  position?: ToastPosition;
+  position?: ToastT['position'];
 }
-export const ToastContainer = ({ autoClose, position }: IToastContainer) => {
+
+export const ToastContainer = ({ position }: IToastContainer) => {
   return (
     <Container
-      toastClassName={({ type }: any) =>
-        `z-[9999999999] shadow-popover relative flex items-start gap-xl p-xl mb-xl rounded-md justify-between overflow-hidden cursor-pointer border ${
-          classes[(type || 'default') as keyof typeof classes]
-        }`
-      }
-      bodyClassName={() =>
-        'text-text-on-primary py-sm bodyMd-medium flex flex-row items-center [&>*]:!w-auto [&>*]:break-all [&>*]:whitespace-break-spaces'
-      }
-      hideProgressBar
-      icon={({ type }) => icons[type]}
-      closeButton={<CloseButton />}
-      position={position || 'top-right'}
-      autoClose={autoClose}
+      toastOptions={{
+        // unstyled: true,
+        classNames: {
+          toast: 'bg-surface-basic-default',
+          title: 'text-text-default bodyMd-medium',
+          description: 'text-text-default bodyMd',
+        },
+      }}
+      icons={icons}
+      position={position || 'bottom-right'}
     />
   );
 };
diff --git a/src/design-system/package.json b/src/design-system/package.json
index b147691da..bc50e7abf 100644
--- a/src/design-system/package.json
+++ b/src/design-system/package.json
@@ -22,12 +22,12 @@
     "framer-motion": "^4.1.17"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/blocks": "^7.6.7",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-vite": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
     "@types/uuid": "^9.0.7",
     "@vitejs/plugin-react": "^4.2.1",
@@ -37,7 +37,7 @@
     "postcss": "^8.4.32",
     "prop-types": "^15.8.1",
     "rimraf": "^5.0.5",
-    "storybook": "^7.6.7",
+    "storybook": "^7.6.17",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.3.3",
     "vite": "^4.5.2"
diff --git a/src/design-system/pnpm-lock.yaml b/src/design-system/pnpm-lock.yaml
index a24b174f0..558909fd9 100644
--- a/src/design-system/pnpm-lock.yaml
+++ b/src/design-system/pnpm-lock.yaml
@@ -6,23 +6,23 @@ settings:
 
 devDependencies:
   '@storybook/addon-essentials':
-    specifier: ^7.6.7
-    version: 7.6.7(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.6.17
+    version: 7.6.17(react-dom@18.2.0)(react@18.2.0)
   '@storybook/addon-interactions':
-    specifier: ^7.6.7
-    version: 7.6.7
+    specifier: ^7.6.17
+    version: 7.6.17
   '@storybook/addon-links':
-    specifier: ^7.6.7
-    version: 7.6.7(react@18.2.0)
+    specifier: ^7.6.17
+    version: 7.6.17(react@18.2.0)
   '@storybook/blocks':
-    specifier: ^7.6.7
-    version: 7.6.7(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^7.6.17
+    version: 7.6.17(react-dom@18.2.0)(react@18.2.0)
   '@storybook/react':
-    specifier: ^7.6.7
-    version: 7.6.7(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)
+    specifier: ^7.6.17
+    version: 7.6.17(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)
   '@storybook/react-vite':
-    specifier: ^7.6.7
-    version: 7.6.7(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@4.5.2)
+    specifier: ^7.6.17
+    version: 7.6.17(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@4.5.2)
   '@storybook/testing-library':
     specifier: ^0.2.2
     version: 0.2.2
@@ -51,8 +51,8 @@ devDependencies:
     specifier: ^5.0.5
     version: 5.0.5
   storybook:
-    specifier: ^7.6.7
-    version: 7.6.7
+    specifier: ^7.6.17
+    version: 7.6.17
   tailwindcss:
     specifier: ^3.4.0
     version: 3.4.0
@@ -2541,10 +2541,10 @@ packages:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
 
-  /@storybook/addon-actions@7.6.7:
-    resolution: {integrity: sha512-+6EZvhIeKEqG/RNsU3R5DxOrd60BL5GEvmzE2w60s2eKaNNxtyilDjiO1g4z2s2zDNyr7JL/Ft03pJ0Jgo0lew==}
+  /@storybook/addon-actions@7.6.17:
+    resolution: {integrity: sha512-TBphs4v6LRfyTpFo/WINF0TkMaE3rrNog7wW5mbz6n0j8o53kDN4o9ZEcygSL5zQX43CAaghQTeDCss7ueG7ZQ==}
     dependencies:
-      '@storybook/core-events': 7.6.7
+      '@storybook/core-events': 7.6.17
       '@storybook/global': 5.0.0
       '@types/uuid': 9.0.7
       dequal: 2.0.3
@@ -2552,18 +2552,18 @@ packages:
       uuid: 9.0.1
     dev: true
 
-  /@storybook/addon-backgrounds@7.6.7:
-    resolution: {integrity: sha512-55sBy1YUqponAVe+qL16qtWxdf63vHEnIoqFyHEwGpk7K9IhFA1BmdSpFr5VnWEwXeJXKj30db78frh2LUdk3Q==}
+  /@storybook/addon-backgrounds@7.6.17:
+    resolution: {integrity: sha512-7dize7x8+37PH77kmt69b0xSaeDqOcZ4fpzW6+hk53hIaCVU26eGs4+j+743Xva31eOgZWNLupUhOpUDc6SqZw==}
     dependencies:
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/addon-controls@7.6.7(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-DJ3gfvcdCgqi7AQxu83vx0AEUKiuJrNcSATfWV3Jqi8dH6fYO2yqpemHEeWOEy+DAHxIOaqLKwb1QjIBj+vSRQ==}
+  /@storybook/addon-controls@7.6.17(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-zR0aLaUF7FtV/nMRyfniFbCls/e0DAAoXACuOAUAwNAv0lbIS8AyZZiHSmKucCvziUQ6WceeCC7+du3C+9y0rQ==}
     dependencies:
-      '@storybook/blocks': 7.6.7(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/blocks': 7.6.17(react-dom@18.2.0)(react@18.2.0)
       lodash: 4.17.21
       ts-dedent: 2.2.0
     transitivePeerDependencies:
@@ -2575,27 +2575,27 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/addon-docs@7.6.7(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-2dfajNhweofJ3LxjGO83UE5sBMvKtJB0Agj7q8mMtK/9PUCUcbvsFSyZnO/s6X1zAjSn5ZrirbSoTXU4IqxwSA==}
+  /@storybook/addon-docs@7.6.17(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-FKa4Mdy7nhgvEVZJHpMkHriDzpVHbohn87zv9NCL+Ctjs1iAmzGwxEm0culszyDS1HN2ToVoY0h8CSi2RSSZqA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
       '@jest/transform': 29.7.0
       '@mdx-js/react': 2.3.0(react@18.2.0)
-      '@storybook/blocks': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/client-logger': 7.6.7
-      '@storybook/components': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/csf-plugin': 7.6.7
-      '@storybook/csf-tools': 7.6.7
+      '@storybook/blocks': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/client-logger': 7.6.17
+      '@storybook/components': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/csf-plugin': 7.6.17
+      '@storybook/csf-tools': 7.6.17
       '@storybook/global': 5.0.0
       '@storybook/mdx2-csf': 1.1.0
-      '@storybook/node-logger': 7.6.7
-      '@storybook/postinstall': 7.6.7
-      '@storybook/preview-api': 7.6.7
-      '@storybook/react-dom-shim': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.6.7
+      '@storybook/node-logger': 7.6.17
+      '@storybook/postinstall': 7.6.17
+      '@storybook/preview-api': 7.6.17
+      '@storybook/react-dom-shim': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/theming': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/types': 7.6.17
       fs-extra: 11.2.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -2609,25 +2609,25 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/addon-essentials@7.6.7(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-nNLMrpIvc04z4XCA+kval/44eKAFJlUJeeL2pxwP7F/PSzjWe5BXv1bQHOiw8inRO5II0PzqwWnVCI9jsj7K5A==}
+  /@storybook/addon-essentials@7.6.17(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-qlSpamxuYfT2taF953nC9QijGF2pSbg1ewMNpdwLTj16PTZvR/d8NCDMTJujI1bDwM2m18u8Yc43ibh5LEmxCw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@storybook/addon-actions': 7.6.7
-      '@storybook/addon-backgrounds': 7.6.7
-      '@storybook/addon-controls': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-docs': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-highlight': 7.6.7
-      '@storybook/addon-measure': 7.6.7
-      '@storybook/addon-outline': 7.6.7
-      '@storybook/addon-toolbars': 7.6.7
-      '@storybook/addon-viewport': 7.6.7
-      '@storybook/core-common': 7.6.7
-      '@storybook/manager-api': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/node-logger': 7.6.7
-      '@storybook/preview-api': 7.6.7
+      '@storybook/addon-actions': 7.6.17
+      '@storybook/addon-backgrounds': 7.6.17
+      '@storybook/addon-controls': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/addon-docs': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/addon-highlight': 7.6.17
+      '@storybook/addon-measure': 7.6.17
+      '@storybook/addon-outline': 7.6.17
+      '@storybook/addon-toolbars': 7.6.17
+      '@storybook/addon-viewport': 7.6.17
+      '@storybook/core-common': 7.6.17
+      '@storybook/manager-api': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/node-logger': 7.6.17
+      '@storybook/preview-api': 7.6.17
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       ts-dedent: 2.2.0
@@ -2638,24 +2638,24 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/addon-highlight@7.6.7:
-    resolution: {integrity: sha512-2F/tJdn45d4zrvf/cmE1vsczl99wK8+I+kkj0G7jLsrJR0w1zTgbgjy6T9j86HBTBvWcnysNFNIRWPAOh5Wdbw==}
+  /@storybook/addon-highlight@7.6.17:
+    resolution: {integrity: sha512-R1yBPUUqGn+60aJakn8q+5Zt34E/gU3n3VmgPdryP0LJUdZ5q1/RZShoVDV+yYQ40htMH6oaCv3OyyPzFAGJ6A==}
     dependencies:
       '@storybook/global': 5.0.0
     dev: true
 
-  /@storybook/addon-interactions@7.6.7:
-    resolution: {integrity: sha512-iXE2m9i/1D2baYkRgoYe9zwcAjtBOxBfW4o2AS0pzBNPN7elpP9C6mIa0ScpSltawBfIjfe6iQRXAMXOsIIh3Q==}
+  /@storybook/addon-interactions@7.6.17:
+    resolution: {integrity: sha512-6zlX+RDQ1PlA6fp7C+hun8t7h2RXfCGs5dGrhEenp2lqnR/rYuUJRC0tmKpkZBb8kZVcbSChzkB/JYkBjBCzpQ==}
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/types': 7.6.7
+      '@storybook/types': 7.6.17
       jest-mock: 27.5.1
       polished: 4.2.2
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/addon-links@7.6.7(react@18.2.0):
-    resolution: {integrity: sha512-O5LekPslkAIDtXC/TCIyg/3c0htBxDYwb/s+NrZUPTNWJsngxvTAwp6aIk6aVSeSCFUMWvBFcVsuV3hv+ndK6w==}
+  /@storybook/addon-links@7.6.17(react@18.2.0):
+    resolution: {integrity: sha512-iFUwKObRn0EKI0zMETsil2p9a/81rCuSMEWECsi+khkCAs1FUnD2cT6Ag5ydcNcBXsdtdfDJdtXQrkw+TSoStQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
@@ -2668,47 +2668,47 @@ packages:
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/addon-measure@7.6.7:
-    resolution: {integrity: sha512-t1RnnNO4Xzgnsxu63FlZwsCTF0+9jKxr44NiJAUOxW9ppbCvs/JfSDOOvcDRtPWyjgnyzexNUUctMfxvLrU01A==}
+  /@storybook/addon-measure@7.6.17:
+    resolution: {integrity: sha512-O5vnHZNkduvZ95jf1UssbOl6ivIxzl5tv+4EpScPYId7w700bxWsJH+QX7ip6KlrCf2o3iUhmPe8bm05ghG2KA==}
     dependencies:
       '@storybook/global': 5.0.0
       tiny-invariant: 1.3.1
     dev: true
 
-  /@storybook/addon-outline@7.6.7:
-    resolution: {integrity: sha512-gu2y46ijjMkXlxy1f8Cctgjw5b5y8vSIqNAYlrs5/Qy+hJAWyU6lj2PFGOCCUG4L+F45fAjwWAin6qz43+WnRQ==}
+  /@storybook/addon-outline@7.6.17:
+    resolution: {integrity: sha512-9o9JXDsYjNaDgz/cY5+jv694+aik/1aiRGGvsCv68e1p/ob0glkGKav4lnJe2VJqD+gCmaARoD8GOJlhoQl8JQ==}
     dependencies:
       '@storybook/global': 5.0.0
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/addon-toolbars@7.6.7:
-    resolution: {integrity: sha512-vT+YMzw8yVwndhJglI0XtELfXWq1M0HEy5ST3XPzbjmsJ54LgTf1b29UMkh0E/05qBQNFCcbT9B/tLxqWezxlg==}
+  /@storybook/addon-toolbars@7.6.17:
+    resolution: {integrity: sha512-UMrchbUHiyWrh6WuGnpy34Jqzkx/63B+MSgb3CW7YsQaXz64kE0Rol0TNSznnB+mYXplcqH+ndI4r4kFsmgwDg==}
     dev: true
 
-  /@storybook/addon-viewport@7.6.7:
-    resolution: {integrity: sha512-Q/BKjJaKzl4RWxH45K2iIXwkicj4ReVAUIpIyd7dPBb/Bx+hEDYZxR5dDg82AMkZdA71x5ttMnuDSuVpmWAE6g==}
+  /@storybook/addon-viewport@7.6.17:
+    resolution: {integrity: sha512-sA0QCcf4QAMixWvn8uvRYPfkKCSl6JajJaAspoPqXSxHEpK7uwOlpg3kqFU5XJJPXD0X957M+ONgNvBzYqSpEw==}
     dependencies:
       memoizerific: 1.11.3
     dev: true
 
-  /@storybook/blocks@7.6.7(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-+QEvGQ0he/YvFS3lsZORJWxhQIyqcCDWsxbJxJiByePd+Z4my3q8xwtPhHW0TKRL0xUgNE/GnTfMMqJfevTuSw==}
+  /@storybook/blocks@7.6.17(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-PsNVoe0bX1mMn4Kk3nbKZ0ItDZZ0YJnYAFJ6toAbsyBAbgzg1sce88sQinzvbn58/RT9MPKeWMPB45ZS7ggiNg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@storybook/channels': 7.6.7
-      '@storybook/client-logger': 7.6.7
-      '@storybook/components': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-events': 7.6.7
+      '@storybook/channels': 7.6.17
+      '@storybook/client-logger': 7.6.17
+      '@storybook/components': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/core-events': 7.6.17
       '@storybook/csf': 0.1.2
-      '@storybook/docs-tools': 7.6.7
+      '@storybook/docs-tools': 7.6.17
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.6.7
-      '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.6.7
+      '@storybook/manager-api': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/preview-api': 7.6.17
+      '@storybook/theming': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/types': 7.6.17
       '@types/lodash': 4.14.202
       color-convert: 2.0.1
       dequal: 2.0.3
@@ -2730,13 +2730,13 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/builder-manager@7.6.7:
-    resolution: {integrity: sha512-6HYpj6+g/qbDMvImVz/G/aANbkhppyBa1ozfHxLK7tRD79YvozCWmj2Z9umRekPv9VIeMxnI5EEzJXOsoMX5DQ==}
+  /@storybook/builder-manager@7.6.17:
+    resolution: {integrity: sha512-Sj8hcDYiPCCMfeLzus37czl0zdrAxAz4IyYam2jBjVymrIrcDAFyL1OCZvnq33ft179QYQWhUs9qwzVmlR/ZWg==}
     dependencies:
       '@fal-works/esbuild-plugin-global-externals': 2.1.2
-      '@storybook/core-common': 7.6.7
-      '@storybook/manager': 7.6.7
-      '@storybook/node-logger': 7.6.7
+      '@storybook/core-common': 7.6.17
+      '@storybook/manager': 7.6.17
+      '@storybook/node-logger': 7.6.17
       '@types/ejs': 3.1.5
       '@types/find-cache-dir': 3.2.1
       '@yarnpkg/esbuild-plugin-pnp': 3.0.0-rc.15(esbuild@0.18.20)
@@ -2754,8 +2754,8 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/builder-vite@7.6.7(typescript@5.3.3)(vite@4.5.2):
-    resolution: {integrity: sha512-Sv+0ROFU9k+mkvIPsPHC0lkKDzBeMpvfO9uFRl1RDSsXBfcPPZKNo5YK7U7fOhesH0BILzurGA+U/aaITMSZ9g==}
+  /@storybook/builder-vite@7.6.17(typescript@5.3.3)(vite@4.5.2):
+    resolution: {integrity: sha512-2Q32qalI401EsKKr9Hkk8TAOcHEerqwsjCpQgTNJnCu6GgCVKoVUcb99oRbR9Vyg0xh+jb19XiWqqQujFtLYlQ==}
     peerDependencies:
       '@preact/preset-vite': '*'
       typescript: '>= 4.3.x'
@@ -2769,14 +2769,14 @@ packages:
       vite-plugin-glimmerx:
         optional: true
     dependencies:
-      '@storybook/channels': 7.6.7
-      '@storybook/client-logger': 7.6.7
-      '@storybook/core-common': 7.6.7
-      '@storybook/csf-plugin': 7.6.7
-      '@storybook/node-logger': 7.6.7
-      '@storybook/preview': 7.6.7
-      '@storybook/preview-api': 7.6.7
-      '@storybook/types': 7.6.7
+      '@storybook/channels': 7.6.17
+      '@storybook/client-logger': 7.6.17
+      '@storybook/core-common': 7.6.17
+      '@storybook/csf-plugin': 7.6.17
+      '@storybook/node-logger': 7.6.17
+      '@storybook/preview': 7.6.17
+      '@storybook/preview-api': 7.6.17
+      '@storybook/types': 7.6.17
       '@types/find-cache-dir': 3.2.1
       browser-assert: 1.2.1
       es-module-lexer: 0.9.3
@@ -2792,33 +2792,33 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/channels@7.6.7:
-    resolution: {integrity: sha512-u1hURhfQHHtZyRIDUENRCp+CRRm7IQfcjQaoWI06XCevQPuhVEtFUfXHjG+J74aA/JuuTLFUtqwNm1zGqbXTAQ==}
+  /@storybook/channels@7.6.17:
+    resolution: {integrity: sha512-GFG40pzaSxk1hUr/J/TMqW5AFDDPUSu+HkeE/oqSWJbOodBOLJzHN6CReJS6y1DjYSZLNFt1jftPWZZInG/XUA==}
     dependencies:
-      '@storybook/client-logger': 7.6.7
-      '@storybook/core-events': 7.6.7
+      '@storybook/client-logger': 7.6.17
+      '@storybook/core-events': 7.6.17
       '@storybook/global': 5.0.0
       qs: 6.11.2
       telejson: 7.2.0
       tiny-invariant: 1.3.1
     dev: true
 
-  /@storybook/cli@7.6.7:
-    resolution: {integrity: sha512-DwDWzkifBH17ry+n+d+u52Sv69dZQ+04ETJdDDzghcyAcKnFzrRNukj4tJ21cm+ZAU/r0fKR9d4Qpbogca9fAg==}
+  /@storybook/cli@7.6.17:
+    resolution: {integrity: sha512-1sCo+nCqyR+nKfTcEidVu8XzNoECC7Y1l+uW38/r7s2f/TdDorXaIGAVrpjbSaXSoQpx5DxYJVaKCcQuOgqwcA==}
     hasBin: true
     dependencies:
       '@babel/core': 7.23.7
       '@babel/preset-env': 7.23.7(@babel/core@7.23.7)
       '@babel/types': 7.23.6
       '@ndelangen/get-tarball': 3.0.9
-      '@storybook/codemod': 7.6.7
-      '@storybook/core-common': 7.6.7
-      '@storybook/core-events': 7.6.7
-      '@storybook/core-server': 7.6.7
-      '@storybook/csf-tools': 7.6.7
-      '@storybook/node-logger': 7.6.7
-      '@storybook/telemetry': 7.6.7
-      '@storybook/types': 7.6.7
+      '@storybook/codemod': 7.6.17
+      '@storybook/core-common': 7.6.17
+      '@storybook/core-events': 7.6.17
+      '@storybook/core-server': 7.6.17
+      '@storybook/csf-tools': 7.6.17
+      '@storybook/node-logger': 7.6.17
+      '@storybook/telemetry': 7.6.17
+      '@storybook/types': 7.6.17
       '@types/semver': 7.5.6
       '@yarnpkg/fslib': 2.10.3
       '@yarnpkg/libzip': 2.3.0
@@ -2843,7 +2843,6 @@ packages:
       puppeteer-core: 2.1.1
       read-pkg-up: 7.0.1
       semver: 7.5.4
-      simple-update-notifier: 2.0.0
       strip-json-comments: 3.1.1
       tempy: 1.0.1
       ts-dedent: 2.2.0
@@ -2855,22 +2854,22 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@storybook/client-logger@7.6.7:
-    resolution: {integrity: sha512-A16zpWgsa0gSdXMR9P3bWVdC9u/1B1oG4H7Z1+JhNzgnL3CdyOYO0qFSiAtNBso4nOjIAJVb6/AoBzdRhmSVQg==}
+  /@storybook/client-logger@7.6.17:
+    resolution: {integrity: sha512-6WBYqixAXNAXlSaBWwgljWpAu10tPRBJrcFvx2gPUne58EeMM20Gi/iHYBz2kMCY+JLAgeIH7ZxInqwO8vDwiQ==}
     dependencies:
       '@storybook/global': 5.0.0
     dev: true
 
-  /@storybook/codemod@7.6.7:
-    resolution: {integrity: sha512-an2pD5OHqO7CE8Wb7JxjrDnpQgeoxB22MyOs8PPJ9Rvclhpjg+Ku9RogoObYm//zR4g406l7Ec8mTltUkVCEOA==}
+  /@storybook/codemod@7.6.17:
+    resolution: {integrity: sha512-JuTmf2u3C4fCnjO7o3dqRgrq3ozNYfWlrRP8xuIdvT7niMap7a396hJtSKqS10FxCgKFcMAOsRgrCalH1dWxUg==}
     dependencies:
       '@babel/core': 7.23.7
       '@babel/preset-env': 7.23.7(@babel/core@7.23.7)
       '@babel/types': 7.23.6
       '@storybook/csf': 0.1.2
-      '@storybook/csf-tools': 7.6.7
-      '@storybook/node-logger': 7.6.7
-      '@storybook/types': 7.6.7
+      '@storybook/csf-tools': 7.6.17
+      '@storybook/node-logger': 7.6.17
+      '@storybook/types': 7.6.17
       '@types/cross-spawn': 6.0.6
       cross-spawn: 7.0.3
       globby: 11.1.0
@@ -2882,19 +2881,19 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/components@7.6.7(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-1HN4p+MCI4Tx9VGZayZyqbW7SB7mXQLnS5fUbTE1gXaMYHpzFvcrRNROeV1LZPClJX6qx1jgE5ngZojhxGuxMA==}
+  /@storybook/components@7.6.17(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-lbh7GynMidA+CZcJnstVku6Nhs+YkqjYaZ+mKPugvlVhGVWv0DaaeQFVuZ8cJtUGJ/5FFU4Y+n+gylYUHkGBMA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
       '@radix-ui/react-select': 1.2.2(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-toolbar': 1.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/client-logger': 7.6.7
+      '@storybook/client-logger': 7.6.17
       '@storybook/csf': 0.1.2
       '@storybook/global': 5.0.0
-      '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.6.7
+      '@storybook/theming': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/types': 7.6.17
       memoizerific: 1.11.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -2905,19 +2904,19 @@ packages:
       - '@types/react-dom'
     dev: true
 
-  /@storybook/core-client@7.6.7:
-    resolution: {integrity: sha512-ZQivyEzYsZok8vRj5Qan7LbiMUnO89rueWzTnZs4IS6JIaQtjoPI1rGVq+h6qOCM6tki478hic8FS+zwGQ6q+w==}
+  /@storybook/core-client@7.6.17:
+    resolution: {integrity: sha512-LuDbADK+DPNAOOCXOlvY09hdGVueXlDetsdOJ/DgYnSa9QSWv9Uv+F8QcEgR3QckZJbPlztKJIVLgP2n/Xkijw==}
     dependencies:
-      '@storybook/client-logger': 7.6.7
-      '@storybook/preview-api': 7.6.7
+      '@storybook/client-logger': 7.6.17
+      '@storybook/preview-api': 7.6.17
     dev: true
 
-  /@storybook/core-common@7.6.7:
-    resolution: {integrity: sha512-F1fJnauVSPQtAlpicbN/O4XW38Ai8kf/IoU0Hgm9gEwurIk6MF5hiVLsaTI/5GUbrepMl9d9J+iIL4lHAT8IyA==}
+  /@storybook/core-common@7.6.17:
+    resolution: {integrity: sha512-me2TP3Q9/qzqCLoDHUSsUF+VS1MHxfHbTVF6vAz0D/COTxzsxLpu9TxTbzJoBCxse6XRb6wWI1RgF1mIcjic7g==}
     dependencies:
-      '@storybook/core-events': 7.6.7
-      '@storybook/node-logger': 7.6.7
-      '@storybook/types': 7.6.7
+      '@storybook/core-events': 7.6.17
+      '@storybook/node-logger': 7.6.17
+      '@storybook/types': 7.6.17
       '@types/find-cache-dir': 3.2.1
       '@types/node': 18.19.4
       '@types/node-fetch': 2.6.10
@@ -2943,30 +2942,30 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/core-events@7.6.7:
-    resolution: {integrity: sha512-KZ5d03c47pnr5/kY26pJtWq7WpmCPXLbgyjJZDSc+TTY153BdZksvlBXRHtqM1yj2UM6QsSyIuiJaADJNAbP2w==}
+  /@storybook/core-events@7.6.17:
+    resolution: {integrity: sha512-AriWMCm/k1cxlv10f+jZ1wavThTRpLaN3kY019kHWbYT9XgaSuLU67G7GPr3cGnJ6HuA6uhbzu8qtqVCd6OfXA==}
     dependencies:
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/core-server@7.6.7:
-    resolution: {integrity: sha512-elKRv/DNahNNkGcQY/FdOBrLPmZF0T0fwmAmbc4qqeAisjl+to9TO77zdo2ieaEHKyRwE3B3dOB4EXomdF4N/g==}
+  /@storybook/core-server@7.6.17:
+    resolution: {integrity: sha512-KWGhTTaL1Q14FolcoKKZgytlPJUbH6sbJ1Ptj/84EYWFewcnEgVs0Zlnh1VStRZg+Rd1WC1V4yVd/bbDzxrvQA==}
     dependencies:
       '@aw-web-design/x-default-browser': 1.4.126
       '@discoveryjs/json-ext': 0.5.7
-      '@storybook/builder-manager': 7.6.7
-      '@storybook/channels': 7.6.7
-      '@storybook/core-common': 7.6.7
-      '@storybook/core-events': 7.6.7
+      '@storybook/builder-manager': 7.6.17
+      '@storybook/channels': 7.6.17
+      '@storybook/core-common': 7.6.17
+      '@storybook/core-events': 7.6.17
       '@storybook/csf': 0.1.2
-      '@storybook/csf-tools': 7.6.7
+      '@storybook/csf-tools': 7.6.17
       '@storybook/docs-mdx': 0.1.0
       '@storybook/global': 5.0.0
-      '@storybook/manager': 7.6.7
-      '@storybook/node-logger': 7.6.7
-      '@storybook/preview-api': 7.6.7
-      '@storybook/telemetry': 7.6.7
-      '@storybook/types': 7.6.7
+      '@storybook/manager': 7.6.17
+      '@storybook/node-logger': 7.6.17
+      '@storybook/preview-api': 7.6.17
+      '@storybook/telemetry': 7.6.17
+      '@storybook/types': 7.6.17
       '@types/detect-port': 1.3.5
       '@types/node': 18.19.4
       '@types/pretty-hrtime': 1.0.3
@@ -3000,24 +2999,24 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@storybook/csf-plugin@7.6.7:
-    resolution: {integrity: sha512-YL7e6H4iVcsDI0UpgpdQX2IiGDrlbgaQMHQgDLWXmZyKxBcy0ONROAX5zoT1ml44EHkL60TMaG4f7SinviJCog==}
+  /@storybook/csf-plugin@7.6.17:
+    resolution: {integrity: sha512-xTHv9BUh3bkDVCvcbmdfVF0/e96BdrEgqPJ3G3RmKbSzWLOkQ2U9yiPfHzT0KJWPhVwj12fjfZp0zunu+pcS6Q==}
     dependencies:
-      '@storybook/csf-tools': 7.6.7
+      '@storybook/csf-tools': 7.6.17
       unplugin: 1.6.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@storybook/csf-tools@7.6.7:
-    resolution: {integrity: sha512-hyRbUGa2Uxvz3U09BjcOfMNf/5IYgRum1L6XszqK2O8tK9DGte1r6hArCIAcqiEmFMC40d0kalPzqu6WMNn7sg==}
+  /@storybook/csf-tools@7.6.17:
+    resolution: {integrity: sha512-dAQtam0EBPeTJYcQPLxXgz4L9JFqD+HWbLFG9CmNIhMMjticrB0mpk1EFIS6vPXk/VsVWpBgMLD7dZlD6YMKcQ==}
     dependencies:
       '@babel/generator': 7.23.6
       '@babel/parser': 7.23.6
       '@babel/traverse': 7.23.7
       '@babel/types': 7.23.6
       '@storybook/csf': 0.1.2
-      '@storybook/types': 7.6.7
+      '@storybook/types': 7.6.17
       fs-extra: 11.2.0
       recast: 0.23.4
       ts-dedent: 2.2.0
@@ -3035,12 +3034,12 @@ packages:
     resolution: {integrity: sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==}
     dev: true
 
-  /@storybook/docs-tools@7.6.7:
-    resolution: {integrity: sha512-enTO/xVjBqwUraGCYTwdyjMvug3OSAM7TPPUEJ3KPieJNwAzcYkww/qNDMIAR4S39zPMrkAmtS3STvVadlJz7g==}
+  /@storybook/docs-tools@7.6.17:
+    resolution: {integrity: sha512-bYrLoj06adqklyLkEwD32C0Ww6t+9ZVvrJHiVT42bIhTRpFiFPAetl1a9KPHtFLnfduh4n2IxIr1jv32ThPDTA==}
     dependencies:
-      '@storybook/core-common': 7.6.7
-      '@storybook/preview-api': 7.6.7
-      '@storybook/types': 7.6.7
+      '@storybook/core-common': 7.6.17
+      '@storybook/preview-api': 7.6.17
+      '@storybook/types': 7.6.17
       '@types/doctrine': 0.0.3
       assert: 2.1.0
       doctrine: 3.0.0
@@ -3054,17 +3053,17 @@ packages:
     resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
     dev: true
 
-  /@storybook/manager-api@7.6.7(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-3Wk/BvuGUlw/X05s57zZO7gJbzfUeE9Xe+CSIvuH7RY5jx9PYnNwqNlTXPXhJ5LPvwMthae7WJVn3SuBpbptoQ==}
+  /@storybook/manager-api@7.6.17(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-IJIV1Yc6yw1dhCY4tReHCfBnUKDqEBnMyHp3mbXpsaHxnxJZrXO45WjRAZIKlQKhl/Ge1CrnznmHRCmYgqmrWg==}
     dependencies:
-      '@storybook/channels': 7.6.7
-      '@storybook/client-logger': 7.6.7
-      '@storybook/core-events': 7.6.7
+      '@storybook/channels': 7.6.17
+      '@storybook/client-logger': 7.6.17
+      '@storybook/core-events': 7.6.17
       '@storybook/csf': 0.1.2
       '@storybook/global': 5.0.0
-      '@storybook/router': 7.6.7
-      '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.6.7
+      '@storybook/router': 7.6.17
+      '@storybook/theming': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/types': 7.6.17
       dequal: 2.0.3
       lodash: 4.17.21
       memoizerific: 1.11.3
@@ -3076,31 +3075,31 @@ packages:
       - react-dom
     dev: true
 
-  /@storybook/manager@7.6.7:
-    resolution: {integrity: sha512-ZCrkB2zEXogzdOcVzD242ZVm4tlHqrayotnI6iOn9uiun0Pgny0m2d7s9Zge6K2dTOO1vZiOHuA/Mr6nnIDjsA==}
+  /@storybook/manager@7.6.17:
+    resolution: {integrity: sha512-A1LDDIqMpwRzq/dqkbbiza0QI04o4ZHCl2a3UMDZUV/+QLc2nsr2DAaLk4CVL4/cIc5zGqmIcaOTvprx2YKVBw==}
     dev: true
 
   /@storybook/mdx2-csf@1.1.0:
     resolution: {integrity: sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==}
     dev: true
 
-  /@storybook/node-logger@7.6.7:
-    resolution: {integrity: sha512-XLih8MxylkpZG9+8tgp8sPGc2tldlWF+DpuAkUv6J3Mc81mPyc3cQKQWZ7Hb+m1LpRGqKV4wyOQj1rC+leVMoQ==}
+  /@storybook/node-logger@7.6.17:
+    resolution: {integrity: sha512-w59MQuXhhUNrUVmVkXhMwIg2nvFWjdDczLTwYLorhfsE36CWeUOY5QCZWQy0Qf/h+jz8Uo7Evy64qn18v9C4wA==}
     dev: true
 
-  /@storybook/postinstall@7.6.7:
-    resolution: {integrity: sha512-mrpRmcwFd9FcvtHPXA9x6vOrHLVCKScZX/Xx2QPWgAvB3W6uzP8G+8QNb1u834iToxrWeuszUMB9UXZK4Qj5yg==}
+  /@storybook/postinstall@7.6.17:
+    resolution: {integrity: sha512-WaWqB8o9vUc9aaVls+povQSVirf1Xd1LZcVhUKfAocAF3mzYUsnJsVqvnbjRj/F96UFVihOyDt9Zjl/9OvrCvQ==}
     dev: true
 
-  /@storybook/preview-api@7.6.7:
-    resolution: {integrity: sha512-ja85ItrT6q2TeBQ6n0CNoRi1R6L8yF2kkis9hVeTQHpwLdZyHUTRqqR5WmhtLqqQXcofyasBPOeJV06wuOhgRQ==}
+  /@storybook/preview-api@7.6.17:
+    resolution: {integrity: sha512-wLfDdI9RWo1f2zzFe54yRhg+2YWyxLZvqdZnSQ45mTs4/7xXV5Wfbv3QNTtcdw8tT3U5KRTrN1mTfTCiRJc0Kw==}
     dependencies:
-      '@storybook/channels': 7.6.7
-      '@storybook/client-logger': 7.6.7
-      '@storybook/core-events': 7.6.7
+      '@storybook/channels': 7.6.17
+      '@storybook/client-logger': 7.6.17
+      '@storybook/core-events': 7.6.17
       '@storybook/csf': 0.1.2
       '@storybook/global': 5.0.0
-      '@storybook/types': 7.6.7
+      '@storybook/types': 7.6.17
       '@types/qs': 6.9.11
       dequal: 2.0.3
       lodash: 4.17.21
@@ -3111,12 +3110,12 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
-  /@storybook/preview@7.6.7:
-    resolution: {integrity: sha512-/ddKIyT+6b8CKGJAma1wood4nwCAoi/E1olCqgpCmviMeUtAiMzgK0xzPwvq5Mxkz/cPeXVi8CQgaQZCa4yvNA==}
+  /@storybook/preview@7.6.17:
+    resolution: {integrity: sha512-LvkMYK/y6alGjwRVNDIKL1lFlbyZ0H0c8iAbcQkiMoaFiujMQyVswMDKlWcj42Upfr/B1igydiruomc+eUt0mw==}
     dev: true
 
-  /@storybook/react-dom-shim@7.6.7(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-b/rmy/YzVrwP+ifyZG4yXVIdeFVdTbmziodHUlbrWiUNsqtTZZur9kqkKRUH/7ofji9MFe81nd0MRlcTNFomqg==}
+  /@storybook/react-dom-shim@7.6.17(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-32Sa/G+WnvaPiQ1Wvjjw5UM9rr2c4GDohwCcWVv3/LJuiFPqNS6zglAtmnsrlIBnUwRBMLMh/ekCTdqMiUmfDw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -3125,8 +3124,8 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@storybook/react-vite@7.6.7(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@4.5.2):
-    resolution: {integrity: sha512-1cBpxVZ4vLO5rGbhTBNR2SjL+ZePCUAEY+I31tbORYFAoOKmlsNef4fRLnXJ9NYUAyjwZpUmbW0cIxxOFk7nGA==}
+  /@storybook/react-vite@7.6.17(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@4.5.2):
+    resolution: {integrity: sha512-4dIm3CuRl44X1TLzN3WoZh/bChzJF7Ud28li9atj9C8db0bb/y0zl8cahrsRFoR7/LyfqdOVLqaztrnA5SsWfg==}
     engines: {node: '>=16'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -3135,8 +3134,8 @@ packages:
     dependencies:
       '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.3.3)(vite@4.5.2)
       '@rollup/pluginutils': 5.1.0
-      '@storybook/builder-vite': 7.6.7(typescript@5.3.3)(vite@4.5.2)
-      '@storybook/react': 7.6.7(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)
+      '@storybook/builder-vite': 7.6.17(typescript@5.3.3)(vite@4.5.2)
+      '@storybook/react': 7.6.17(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)
       '@vitejs/plugin-react': 3.1.0(vite@4.5.2)
       magic-string: 0.30.5
       react: 18.2.0
@@ -3152,8 +3151,8 @@ packages:
       - vite-plugin-glimmerx
     dev: true
 
-  /@storybook/react@7.6.7(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-uT9IBPDM1SQg6FglWqb7IemOJ1Z8kYB5rehIDEDToi0u5INihSY8rHd003TxG4Wx4REp6J+rfbDJO2aVui/gxA==}
+  /@storybook/react@7.6.17(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-lVqzQSU03rRJWYW+gK2gq6mSo3/qtnVICY8B8oP7gc36jVu4ksDIu45bTfukM618ODkUZy0vZe6T4engK3azjA==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -3163,13 +3162,13 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@storybook/client-logger': 7.6.7
-      '@storybook/core-client': 7.6.7
-      '@storybook/docs-tools': 7.6.7
+      '@storybook/client-logger': 7.6.17
+      '@storybook/core-client': 7.6.17
+      '@storybook/docs-tools': 7.6.17
       '@storybook/global': 5.0.0
-      '@storybook/preview-api': 7.6.7
-      '@storybook/react-dom-shim': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.6.7
+      '@storybook/preview-api': 7.6.17
+      '@storybook/react-dom-shim': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/types': 7.6.17
       '@types/escodegen': 0.0.6
       '@types/estree': 0.0.51
       '@types/node': 18.19.4
@@ -3192,20 +3191,20 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/router@7.6.7:
-    resolution: {integrity: sha512-kkhNSdC3fXaQxILg8a26RKk4/ZbF/AUVrepUEyO8lwvbJ6LItTyWSE/4I9Ih4qV2Mjx33ncc8vLqM9p8r5qnMA==}
+  /@storybook/router@7.6.17:
+    resolution: {integrity: sha512-GnyC0j6Wi5hT4qRhSyT8NPtJfGmf82uZw97LQRWeyYu5gWEshUdM7aj40XlNiScd5cZDp0owO1idduVF2k2l2A==}
     dependencies:
-      '@storybook/client-logger': 7.6.7
+      '@storybook/client-logger': 7.6.17
       memoizerific: 1.11.3
       qs: 6.11.2
     dev: true
 
-  /@storybook/telemetry@7.6.7:
-    resolution: {integrity: sha512-NHGzC/LGLXpK4AFbVj8ln5ab86ZiiNFvORQMn3+LNGwUt3ZdsHBzExN+WPZdw7OPtfk4ubUY89FXH2GedhTALw==}
+  /@storybook/telemetry@7.6.17:
+    resolution: {integrity: sha512-WOcOAmmengYnGInH98Px44F47DSpLyk20BM+Z/IIQDzfttGOLlxNqBBG1XTEhNRn+AYuk4aZ2JEed2lCjVIxcA==}
     dependencies:
-      '@storybook/client-logger': 7.6.7
-      '@storybook/core-common': 7.6.7
-      '@storybook/csf-tools': 7.6.7
+      '@storybook/client-logger': 7.6.17
+      '@storybook/core-common': 7.6.17
+      '@storybook/csf-tools': 7.6.17
       chalk: 4.1.2
       detect-package-manager: 2.0.1
       fetch-retry: 5.0.6
@@ -3224,24 +3223,24 @@ packages:
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/theming@7.6.7(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==}
+  /@storybook/theming@7.6.17(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-ZbaBt3KAbmBtfjNqgMY7wPMBshhSJlhodyMNQypv+95xLD/R+Az6aBYbpVAOygLaUQaQk4ar7H/Ww6lFIoiFbA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@storybook/client-logger': 7.6.7
+      '@storybook/client-logger': 7.6.17
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@storybook/types@7.6.7:
-    resolution: {integrity: sha512-VcGwrI4AkBENxkoAUJ+Z7SyMK73hpoY0TTtw2J7tc05/xdiXhkQTX15Qa12IBWIkoXCyNrtaU+q7KR8Tjzi+uw==}
+  /@storybook/types@7.6.17:
+    resolution: {integrity: sha512-GRY0xEJQ0PrL7DY2qCNUdIfUOE0Gsue6N+GBJw9ku1IUDFLJRDOF+4Dx2BvYcVCPI5XPqdWKlEyZdMdKjiQN7Q==}
     dependencies:
-      '@storybook/channels': 7.6.7
+      '@storybook/channels': 7.6.17
       '@types/babel__core': 7.20.5
       '@types/express': 4.17.21
       file-system-cache: 2.3.0
@@ -3436,7 +3435,7 @@ packages:
   /@types/node-fetch@2.6.10:
     resolution: {integrity: sha512-PPpPK6F9ALFTn59Ka3BaL+qGuipRfxNE8qVgkp0bVixeiR2c2/L+IVOiBdu9JhhT22sWnQEp6YyHGI2b2+CMcA==}
     dependencies:
-      '@types/node': 18.19.4
+      '@types/node': 20.10.6
       form-data: 4.0.0
     dev: true
 
@@ -7016,13 +7015,6 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
-  /simple-update-notifier@2.0.0:
-    resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
-    engines: {node: '>=10'}
-    dependencies:
-      semver: 7.5.4
-    dev: true
-
   /sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
     dev: true
@@ -7095,11 +7087,11 @@ packages:
     resolution: {integrity: sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==}
     dev: true
 
-  /storybook@7.6.7:
-    resolution: {integrity: sha512-1Cd895dqYIT5MOUOCDlD73OTWoJubLq/sWC7AMzkMrLu76yD4Cu6f+wv1HDrRAheRaCaeT3yhYEhsMB6qHIcaA==}
+  /storybook@7.6.17:
+    resolution: {integrity: sha512-8+EIo91bwmeFWPg1eysrxXlhIYv3OsXrznTr4+4Eq0NikqAoq6oBhtlN5K2RGS2lBVF537eN+9jTCNbR+WrzDA==}
     hasBin: true
     dependencies:
-      '@storybook/cli': 7.6.7
+      '@storybook/cli': 7.6.17
     transitivePeerDependencies:
       - bufferutil
       - encoding

From 600baac7570f2106f486a56df500da97394cf119 Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Tue, 12 Mar 2024 13:47:34 +0530
Subject: [PATCH 13/66] Fixed syntax typo erro

---
 lib/app-setup/root.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
index a3dd4da08..696bf1f5f 100644
--- a/lib/app-setup/root.tsx
+++ b/lib/app-setup/root.tsx
@@ -112,8 +112,8 @@ export function ErrorBoundary() {
               ? error.stack
               : JSON.stringify(error.stack, null, 2)
             : typeof error.stack === 'string'
-              ? error.stack
-              : JSON.stringify(error.stack, null, 2)}
+            ? error.stack
+            : JSON.stringify(error.stack, null, 2)}
         </code>
       </ErrorWrapper>
     );
@@ -160,10 +160,10 @@ const NonIdleProgressBar = () => {
 
 const Root = ({
   Wrapper = ({ children }: { children: any }) => children,
-  tagId
+  tagId,
 }: {
-  Wrapper: (prop: { children: ReactNode }) => JSX.Element;,
-  tagId?: string
+  Wrapper: (prop: { children: ReactNode }) => JSX.Element;
+  tagId?: string;
 }) => {
   const env = useLoaderData();
 

From a569208b9f2b14a59e8acdf52501fe7092eb8268 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Tue, 12 Mar 2024 16:04:27 +0530
Subject: [PATCH 14/66] Fix/repo name (#136)

* :bug: Fixed issue with repoName
---
 Taskfile.yaml                                 |  2 +-
 lib/client/helpers/log.ts                     |  2 +-
 src/apps/console/components/git.tsx           |  9 ++--
 .../_main+/$account+/repo+/$repo+/_layout.tsx | 53 +++++++++++--------
 .../$repo+/buildruns/buildruns-resources.tsx  |  2 +-
 .../repo+/$repo+/buildruns/route.tsx          |  2 +-
 .../$account+/repo+/$repo+/builds/_index.tsx  | 12 ++---
 .../repo+/$repo+/builds/handle-builds.tsx     |  5 +-
 .../$account+/repo+/$repo+/images/route.tsx   | 13 ++---
 .../repo+/$repo+/images/sha-dialog.tsx        | 11 +++-
 .../repo+/$repo+/images/tags-resources.tsx    |  2 +-
 .../$repo+/new-build/configure-git-repo.tsx   |  2 -
 .../repo+/$repo+/new-build/route.tsx          | 38 +++++++------
 .../$repo+/settings/buildcaches/route.tsx     |  2 -
 .../repo+/$repo+/settings/general/route.tsx   | 20 +++----
 15 files changed, 99 insertions(+), 76 deletions(-)

diff --git a/Taskfile.yaml b/Taskfile.yaml
index 41360ec3b..cc9bb95da 100644
--- a/Taskfile.yaml
+++ b/Taskfile.yaml
@@ -8,7 +8,7 @@ tasks:
     interactive: true
     cmds:
       - |
-        BASE_URL=dev.kloudlite.io
+        BASE_URL=gcp-production.kloudlite.io
         COOKIE_DOMAIN=".kloudlite.io"
         GATEWAY_URL="http://gateway.kloudlite.svc.cluster.local"
         case {{.app}} in
diff --git a/lib/client/helpers/log.ts b/lib/client/helpers/log.ts
index 0f9d8781e..0e18c6651 100644
--- a/lib/client/helpers/log.ts
+++ b/lib/client/helpers/log.ts
@@ -90,7 +90,7 @@ const logger = {
     }
 
     if (err) {
-      console.trace(err);
+      console.log(err);
       if (!isDev) {
         PostToHook(`\`\`\`${err}\`\`\``);
       }
diff --git a/src/apps/console/components/git.tsx b/src/apps/console/components/git.tsx
index 649e9332b..07591ddd2 100644
--- a/src/apps/console/components/git.tsx
+++ b/src/apps/console/components/git.tsx
@@ -63,7 +63,7 @@ const githubInstallUrl = `https://github.com/apps/${githubAppName}/installations
 
 const popupWindow = ({
   url = '',
-  onClose = () => { },
+  onClose = () => {},
   width = 800,
   height = 500,
   title = 'kloudlite',
@@ -71,7 +71,8 @@ const popupWindow = ({
   const frame = window.open(
     url,
     title,
-    `toolbar=no,scrollbars=yes,resizable=no,top=${window.screen.height / 2 - height / 2
+    `toolbar=no,scrollbars=yes,resizable=no,top=${
+      window.screen.height / 2 - height / 2
     },left=${window.screen.width / 2 - width / 2},width=800,height=600`
   );
   const interval = setInterval(() => {
@@ -90,8 +91,8 @@ interface IBranch {
 
 interface IListRenderer {
   data:
-  | { name: string; updatedAt: any; private: true; url: string }[]
-  | undefined;
+    | { name: string; updatedAt: any; private: true; url: string }[]
+    | undefined;
   onChange: (value: string) => void;
   value: string;
   isLoading?: boolean;
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
index 3d19bb7b3..caf263886 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
@@ -15,19 +15,13 @@ import {
 import Breadcrum from '~/console/components/breadcrum';
 import { CommonTabs } from '~/console/components/common-navbar-tabs';
 
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx, LoaderResult } from '~/root/lib/types/common';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import logger from '~/root/lib/client/helpers/log';
-import { ILoginUrls, ILogins } from '~/console/server/gql/queries/git-queries';
 import { IPackageContext } from '~/console/routes/_main+/$account+/packages+/_layout';
 
-export interface IRepoContext extends IPackageContext {
-  logins: ILogins;
-  loginUrls: ILoginUrls;
-}
 const LocalBreadcrum = () => {
-  const { repo, account } = useParams();
-  const repoName = atob(repo || '');
+  const { account, repo } = useParams();
   return (
     <div className="flex flex-row items-center">
       <Breadcrum.Button
@@ -44,16 +38,18 @@ const LocalBreadcrum = () => {
         }
       />
       <Breadcrum.Button
-        to={`/${account}/repo/${repoName}`}
+        to={`/${account}/repo/${repo}`}
         LinkComponent={Link}
-        content={<span>{repoName}</span>}
+        content={<span>{atob(repo || '')}</span>}
       />
     </div>
   );
 };
 
 const Tabs = () => {
-  const { repo, account } = useParams();
+  const { account } = useParams();
+
+  const { repo } = useParams();
   const iconSize = 16;
   return (
     <CommonTabs
@@ -103,14 +99,12 @@ const Tabs = () => {
     />
   );
 };
-export const handle = () => {
-  return {
-    navbar: <Tabs />,
-    breadcrum: () => <LocalBreadcrum />,
-  };
-};
 
 export const loader = async (ctx: IRemixCtx) => {
+  const { repo } = ctx.params;
+
+  const repoName = atob(repo || '');
+
   try {
     const { data, errors } = await GQLServerHandler(ctx.request).getLogins({});
 
@@ -129,21 +123,38 @@ export const loader = async (ctx: IRemixCtx) => {
     return {
       loginUrls: e,
       logins: data,
+      repoName,
     };
   } catch (err) {
     logger.error(err);
   }
 
+  const k: any = {};
+
+  return {
+    logins: k,
+    loginUrls: k,
+    repoName,
+  };
+};
+
+export const handle = () => {
   return {
-    logins: {},
-    loginUrls: {},
+    navbar: <Tabs />,
+    breadcrum: () => <LocalBreadcrum />,
   };
 };
 
+export interface IRepoContext extends IPackageContext {
+  logins: LoaderResult<typeof loader>['logins'];
+  loginUrls: LoaderResult<typeof loader>['loginUrls'];
+  repoName: LoaderResult<typeof loader>['repoName'];
+}
+
 const Repo = () => {
   const rootContext = useOutletContext<IPackageContext>();
-  const { logins, loginUrls } = useLoaderData<typeof loader>();
-  return <Outlet context={{ ...rootContext, logins, loginUrls }} />;
+  const ctx = useLoaderData<typeof loader>();
+  return <Outlet context={{ ...rootContext, ...ctx }} />;
 };
 
 export default Repo;
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
index ea949e042..392cfde55 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
@@ -25,8 +25,8 @@ import {
   XCircleFill,
 } from '@jengaicons/react';
 import dayjs from 'dayjs';
-import { IAccountContext } from '../../../_layout';
 import LogComp from '~/root/lib/client/components/logger';
+import { IAccountContext } from '../../../_layout';
 
 const RESOURCE_NAME = 'build run';
 type BaseType = ExtractNodeType<IBuildRuns>;
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/route.tsx
index c66b84aa8..3f153897d 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/route.tsx
@@ -16,7 +16,7 @@ export const loader = async (ctx: IRemixCtx) => {
 
   const promise = pWrapper(async () => {
     const { data, errors } = await GQLServerHandler(ctx.request).listBuildRuns({
-      repoName: repo,
+      repoName: atob(repo),
       pq: getPagination(ctx),
       search: getSearch(ctx),
     });
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/_index.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/_index.tsx
index c544f5407..579eb8370 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/_index.tsx
@@ -10,17 +10,17 @@ import logger from '~/root/lib/client/helpers/log';
 import { IRemixCtx } from '~/root/lib/types/common';
 import { Plus } from '@jengaicons/react';
 import { Button } from '~/components/atoms/button';
+import fake from '~/root/fake-data-generator/fake';
 import BuildResources from './build-resources';
 import HandleBuild from './handle-builds';
 import Tools from './tools';
-import fake from "~/root/fake-data-generator/fake";
 
 export const loader = async (ctx: IRemixCtx) => {
   const { repo } = ctx.params;
   const promise = pWrapper(async () => {
     ensureAccountSet(ctx);
     const { data, errors } = await GQLServerHandler(ctx.request).listBuilds({
-      repoName: repo,
+      repoName: atob(repo),
       pagination: getPagination(ctx),
       search: getSearch(ctx),
     });
@@ -44,10 +44,10 @@ const Builds = () => {
   return (
     <>
       <LoadingComp
-          data={promise}
-          skeletonData={{
-            buildData: fake.ConsoleListBuildsQuery.cr_listBuilds as any,
-          }}
+        data={promise}
+        skeletonData={{
+          buildData: fake.ConsoleListBuildsQuery.cr_listBuilds as any,
+        }}
       >
         {({ buildData }) => {
           const builds = buildData.edges?.map(({ node }) => node);
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds.tsx
index 53d6abf67..1fd57ab56 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
 import { IDialogBase } from '~/console/components/types.d';
-import { useOutletContext, useParams } from '@remix-run/react';
+import { useOutletContext } from '@remix-run/react';
 import { Checkbox } from '~/components/atoms/checkbox';
 import Select from '~/components/atoms/select';
 import { toast } from '~/components/molecule/toast';
@@ -119,8 +119,6 @@ const Root = (props: IDialog) => {
     totalSteps: 2,
   });
 
-  const { repo } = useParams();
-
   const isAdvanceOptions = (data: any) => {
     if (!data) {
       return false;
@@ -306,6 +304,7 @@ const Root = (props: IDialog) => {
                     }}
                     error={!!errors.buildClusterName || !!errorCluster}
                     message={
+                      // eslint-disable-next-line no-nested-ternary
                       errors.buildClusterName
                         ? errors.buildClusterName
                         : errorCluster
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/route.tsx
index 485930746..0ed934e27 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/route.tsx
@@ -7,13 +7,13 @@ import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { getPagination, getSearch } from '~/console/server/utils/common';
 import logger from '~/root/lib/client/helpers/log';
 import { IRemixCtx } from '~/root/lib/types/common';
-import SecondarySubHeader from '~/console/components/secondary-sub-header';
+import fake from '~/root/fake-data-generator/fake';
 import TagsResources from './tags-resources';
 import Tools from './tools';
-import fake from "~/root/fake-data-generator/fake";
 
 export const loader = async (ctx: IRemixCtx) => {
   const { repo } = ctx.params;
+
   const promise = pWrapper(async () => {
     ensureAccountSet(ctx);
     const { data, errors } = await GQLServerHandler(ctx.request).listDigest({
@@ -21,6 +21,7 @@ export const loader = async (ctx: IRemixCtx) => {
       pagination: getPagination(ctx),
       search: getSearch(ctx),
     });
+
     if (errors) {
       logger.error(errors[0]);
       throw errors[0];
@@ -38,10 +39,10 @@ const Images = () => {
   const { promise } = useLoaderData<typeof loader>();
   return (
     <LoadingComp
-        data={promise}
-        skeletonData={{
-          tagsData: fake.ConsoleListDigestQuery.cr_listDigests as any,
-        }}
+      data={promise}
+      skeletonData={{
+        tagsData: fake.ConsoleListDigestQuery.cr_listDigests as any,
+      }}
     >
       {({ tagsData }) => {
         const tags = tagsData.edges?.map(({ node }) => node);
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/sha-dialog.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/sha-dialog.tsx
index 6e8af2dec..04e878537 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/sha-dialog.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/sha-dialog.tsx
@@ -4,11 +4,18 @@ import Popup from '~/components/molecule/popup';
 import CodeView from '~/console/components/code-view';
 import { IDialog } from '~/console/components/types.d';
 import { registryHost } from '~/root/lib/configs/base-url.cjs';
+import { useOutletContext } from 'react-router-dom';
 import { ISHADialogData } from './tags-resources';
+import { IRepoContext } from '../_layout';
 
 const SHADialog = ({ show, setShow }: IDialog<ISHADialogData>) => {
-  const { account, repo } = useParams();
-  const url = `${registryHost}/${account}/${repo}:${
+  const { account } = useParams();
+
+  const { repoName } = useOutletContext<IRepoContext>();
+
+  return null;
+
+  const url = `${registryHost}/${account}/${repoName}:${
     show?.data?.tag ? show?.data?.tag : `@${show?.data?.sha}`
   }`;
   return (
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/tags-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/tags-resources.tsx
index 48193e5c7..f6a3137a0 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/tags-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/images/tags-resources.tsx
@@ -244,7 +244,7 @@ const TagsResources = ({ items = [] }: { items: BaseType[] }) => {
           }
         }}
       />
-      <SHADialog show={showSHADialog} setShow={setShowSHADialog} />
+      {/* <SHADialog show={showSHADialog} setShow={setShowSHADialog} /> */}
     </>
   );
 };
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/configure-git-repo.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/configure-git-repo.tsx
index b1c6e42ac..4e224ef29 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/configure-git-repo.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/configure-git-repo.tsx
@@ -3,8 +3,6 @@ import ExtendedFilledTab from '~/console/components/extended-filled-tab';
 import { AnimatePresence, motion } from 'framer-motion';
 import { FadeIn } from '~/console/page-components/util';
 
-
-
 const ConfigureRepo = () => {
   const [setting, setSetting] = useState('general');
   return (
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
index 82b74fe0d..cd18a3b20 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
@@ -10,12 +10,13 @@ import { useConsoleApi } from '~/console/server/gql/api-provider';
 import Git from '~/console/components/git';
 import { IGIT_PROVIDERS } from '~/console/hooks/use-git';
 import { BottomNavigation } from '~/console/components/commons';
+import { toast } from '~/components/molecule/toast';
 import ReviewBuild from './review-build';
 import BuildDetails from './build-details';
 import { IRepoContext } from '../_layout';
 
 const NewBuild = () => {
-  const { loginUrls, logins } = useOutletContext<IRepoContext>();
+  const { loginUrls, logins, repoName } = useOutletContext<IRepoContext>();
 
   const navigate = useNavigate();
 
@@ -27,7 +28,6 @@ const NewBuild = () => {
   });
 
   const api = useConsoleApi();
-  const { repo } = useParams();
 
   const { values, errors, handleSubmit, handleChange, isLoading } = useForm({
     initialValues: {
@@ -40,7 +40,7 @@ const NewBuild = () => {
       tags: [],
       buildClusterName: '',
       advanceOptions: false,
-      repository: repo || '',
+      repository: repoName || '',
       buildArgs: {},
       buildContexts: {},
       contextDir: '',
@@ -69,8 +69,9 @@ const NewBuild = () => {
       }),
     }),
     onSubmit: async (val) => {
-      if (!repo) {
-        throw new Error('Repository is required!.');
+      if (!repoName) {
+        toast.error('Repository is required!.');
+        return;
       }
       const submit = async () => {
         try {
@@ -115,21 +116,26 @@ const NewBuild = () => {
           if (e) {
             throw e[0];
           }
-          navigate(`/${account}/repo/${repo}/builds`);
+          navigate(`/${account}/repo/${repoName}/builds`);
         } catch (err) {
           handleError(err);
         }
       };
-      switch (currentStep) {
-        case 1:
-          nextStep();
-          break;
-        case 2:
-          nextStep();
-          break;
-        default:
-          await submit();
-          break;
+
+      try {
+        switch (currentStep) {
+          case 1:
+            nextStep();
+            break;
+          case 2:
+            nextStep();
+            break;
+          default:
+            await submit();
+            break;
+        }
+      } catch (err) {
+        handleError(err);
       }
     },
   });
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/buildcaches/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/buildcaches/route.tsx
index 08cda8462..678b11fd0 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/buildcaches/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/buildcaches/route.tsx
@@ -2,9 +2,7 @@ import { defer } from '@remix-run/node';
 import { Link, useLoaderData, useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { Button } from '~/components/atoms/button';
-import { CommonTabs } from '~/console/components/common-navbar-tabs';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
-import SubNavAction from '~/console/components/sub-nav-action';
 import Wrapper from '~/console/components/wrapper';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/general/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/general/route.tsx
index 7cc4ed6a2..c2060a8cd 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/general/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/general/route.tsx
@@ -1,5 +1,5 @@
 import { CopySimple } from '@jengaicons/react';
-import { useNavigate, useParams } from '@remix-run/react';
+import { useNavigate, useOutletContext, useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { TextInput } from '~/components/atoms/input';
 import { toast } from '~/components/molecule/toast';
@@ -12,9 +12,11 @@ import { useConsoleApi } from '~/console/server/gql/api-provider';
 import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 import { consoleBaseUrl } from '~/root/lib/configs/base-url.cjs';
 import { handleError } from '~/root/lib/utils/common';
+import { IRepoContext } from '../../_layout';
 
 const ProjectSettingGeneral = () => {
-  const { repo = '', account } = useParams();
+  const { account } = useParams();
+  const { repoName } = useOutletContext<IRepoContext>();
   const api = useConsoleApi();
   const navigate = useNavigate();
   const [deleteRepo, setDeleteRepo] = useState(false);
@@ -30,14 +32,14 @@ const ProjectSettingGeneral = () => {
       <Box title="General">
         <TextInput
           label="Repo name"
-          value={repo}
+          value={repoName}
           // onChange={handleChange('displayName')}
         />
         <div className="flex flex-row items-center gap-3xl">
           <div className="flex-1">
             <TextInput
               label="Repo URL"
-              value={`${consoleBaseUrl}/${account}/repo/${repo}`}
+              value={`${consoleBaseUrl}/${account}/repo/${repoName}`}
               message="This is your URL namespace within Kloudlite"
               disabled
               suffix={
@@ -45,7 +47,7 @@ const ProjectSettingGeneral = () => {
                   <button
                     aria-label="copy"
                     onClick={() =>
-                      copy(`${consoleBaseUrl}/${account}/repo/${repo}}`)
+                      copy(`${consoleBaseUrl}/${account}/repo/${repoName}}`)
                     }
                     className="outline-none hover:bg-surface-basic-hovered active:bg-surface-basic-active rounded text-text-default"
                     tabIndex={-1}
@@ -58,14 +60,14 @@ const ProjectSettingGeneral = () => {
           </div>
           <div className="flex-1">
             <TextInput
-              value={repo}
+              value={repoName}
               label="Repo ID"
               message="Used when interacting with the Kloudlite API"
               suffix={
                 <div className="flex justify-center items-center" title="Copy">
                   <button
                     aria-label="copy"
-                    onClick={() => copy(repo)}
+                    onClick={() => copy(repoName)}
                     className="outline-none hover:bg-surface-basic-hovered active:bg-surface-basic-active rounded text-text-default"
                     tabIndex={-1}
                   >
@@ -88,14 +90,14 @@ const ProjectSettingGeneral = () => {
         platform. This action is not reversible — please continue with caution.
       </DeleteContainer>
       <DeleteDialog
-        resourceName={repo}
+        resourceName={repoName}
         resourceType="repo"
         show={deleteRepo}
         setShow={setDeleteRepo}
         onSubmit={async () => {
           try {
             const { errors } = await api.deleteRepo({
-              name: repo,
+              name: repoName,
             });
 
             if (errors) {

From 65d99a5ac88fb7584a48a6766f4add4a849a93ca Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Tue, 12 Mar 2024 20:15:09 +0530
Subject: [PATCH 15/66] :art: Added image pull policy and reduced cluster
 instance size

---
 src/apps/console/page-components/new-cluster.tsx                | 2 +-
 .../$environment+/app+/$app+/settings+/compute/route.tsx        | 1 +
 .../$account+/$project+/$environment+/new-app/app-compute.tsx   | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/apps/console/page-components/new-cluster.tsx b/src/apps/console/page-components/new-cluster.tsx
index 92f1eb8f6..bc59a4116 100644
--- a/src/apps/console/page-components/new-cluster.tsx
+++ b/src/apps/console/page-components/new-cluster.tsx
@@ -135,7 +135,7 @@ export const NewCluster = ({ providerSecrets, cloudProvider }: props) => {
                   region: selectedRegion.Name,
                   k3sMasters: {
                     nvidiaGpuEnabled: true,
-                    instanceType: 'c6a.xlarge',
+                    instanceType: 'c6a.large',
                   },
                 },
                 availabilityMode: validateAvailabilityMode(
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
index 5aa6e4605..b83dee86b 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
@@ -131,6 +131,7 @@ const SettingCompute = () => {
                   ? `${values.repoName}:${values.repoImageTag}`
                   : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`,
               name: 'container-0',
+              imagePullPolicy: 'Always',
               resourceCpu:
                 val.selectionMode === 'quick'
                   ? {
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
index fe88d98d0..7b5617d05 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
@@ -159,6 +159,7 @@ const AppCompute = () => {
                   ? `${values.repoName}:${values.repoImageTag}`
                   : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`,
               name: 'container-0',
+              imagePullPolicy: 'Always',
               resourceCpu:
                 val.selectionMode === 'quick'
                   ? {

From 47fb81df0537947df2cba81e7b850dfeeb652f6d Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Wed, 13 Mar 2024 11:11:30 +0530
Subject: [PATCH 16/66] WIP sync status and new list view implementaton

---
 gql-queries-generator/doc/queries.graphql     |  49 +-
 src/apps/console/components/listV2.tsx        |  62 +-
 src/apps/console/components/sync-status.tsx   | 535 +++++++-----------
 .../console/page-components/new-project.tsx   |  29 +-
 .../$environment+/apps/apps-resources-v2.tsx  |  29 +-
 .../$environment+/apps/apps-resources.tsx     |  21 +-
 .../managed-resources-resource.tsx            |  23 +-
 .../$environment+/routers/_index.tsx          |  16 +-
 .../routers/router-resources-V2.tsx           | 373 ++++++++++++
 .../routers/router-resources.tsx              |   5 +-
 .../image-pull-secrets-resources.tsx          |   3 -
 .../environments/environment-resources-v2.tsx | 235 ++++++++
 .../$project+/environments/resources.tsx      |   3 -
 .../$project+/environments/route.tsx          |   4 +-
 .../backend-services-resources-V2.tsx         | 292 ++++++++++
 .../backend-services-resources.tsx            |   3 -
 .../$project+/managed-services/route.tsx      |   4 +-
 .../helm-charts/helm-chart-resources.tsx      |   6 -
 .../nodepools/nodepool-resources.tsx          |   9 +-
 .../infra+/clusters/cluster-resources-v2.tsx  |  92 ++-
 .../infra+/clusters/cluster-resources.tsx     |   9 +-
 .../projects/project-resources-v2.tsx         |  13 +-
 .../$account+/projects/project-resources.tsx  | 176 ------
 .../server/gql/queries/cluster-queries.ts     |  10 +
 .../server/gql/queries/environment-queries.ts |  10 +
 .../project-managed-services-queries.ts       |  10 +-
 .../server/gql/queries/project-queries.ts     |  20 +-
 .../server/gql/queries/router-queries.ts      |  29 +-
 src/generated/gql/server.ts                   |  33 +-
 29 files changed, 1385 insertions(+), 718 deletions(-)
 create mode 100644 src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx
 create mode 100644 src/apps/console/routes/_main+/$account+/$project+/environments/environment-resources-v2.tsx
 create mode 100644 src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx
 delete mode 100644 src/apps/console/routes/_main+/$account+/projects/project-resources.tsx

diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
index ee30bdcae..4071a9baa 100644
--- a/gql-queries-generator/doc/queries.graphql
+++ b/gql-queries-generator/doc/queries.graphql
@@ -134,6 +134,11 @@ query consoleGetProject($name: String!) {
     recordVersion
     status {
       checks
+      checkList {
+        description
+        name
+        title
+      }
       isReady
       lastReadyGeneration
       lastReconcileTime
@@ -193,6 +198,11 @@ query consoleListProjects($search: SearchProjects, $pq: CursorPaginationIn) {
         }
         status {
           checks
+          checkList {
+            description
+            name
+            title
+          }
           isReady
           lastReadyGeneration
           lastReconcileTime
@@ -277,6 +287,11 @@ query consoleListClusters($search: SearchCluster, $pagination: CursorPaginationI
         updateTime
         status {
           checks
+          checkList {
+            description
+            name
+            title
+          }
           isReady
           lastReadyGeneration
           lastReconcileTime
@@ -409,6 +424,11 @@ query consoleGetCluster($name: String!) {
     }
     status {
       checks
+      checkList {
+        description
+        name
+        title
+      }
       isReady
       lastReadyGeneration
       lastReconcileTime
@@ -767,6 +787,11 @@ query consoleGetEnvironment($projectName: String!, $name: String!) {
     }
     status {
       checks
+      checkList {
+        description
+        name
+        title
+      }
       isReady
       lastReadyGeneration
       lastReconcileTime
@@ -836,6 +861,11 @@ query consoleListEnvironments($projectName: String!, $search: SearchEnvironments
         }
         status {
           checks
+          checkList {
+            description
+            name
+            title
+          }
           isReady
           lastReadyGeneration
           lastReconcileTime
@@ -1277,6 +1307,11 @@ query consoleListRouters($projectName: String!, $envName: String!, $search: Sear
         }
         status {
           checks
+          checkList {
+            description
+            name
+            title
+          }
           isReady
           lastReadyGeneration
           lastReconcileTime
@@ -1369,18 +1404,12 @@ query consoleGetRouter($projectName: String!, $envName: String!, $name: String!)
     }
     status {
       checks
-      isReady
-      lastReadyGeneration
-      lastReconcileTime
-      message {
-        RawMessage
-      }
-      resources {
-        apiVersion
-        kind
+      checkList {
+        description
         name
-        namespace
+        title
       }
+      isReady
     }
     updateTime
   }
diff --git a/src/apps/console/components/listV2.tsx b/src/apps/console/components/listV2.tsx
index 93603fcd0..64e56b58e 100644
--- a/src/apps/console/components/listV2.tsx
+++ b/src/apps/console/components/listV2.tsx
@@ -105,6 +105,8 @@ interface IRowBase extends IMain {
   linkComponent?: any;
   headers?: IHeader[];
   disabled?: boolean;
+  detail?: ReactNode;
+  hideDetailSeperator?: boolean;
 }
 
 const RowBase = ({
@@ -114,9 +116,10 @@ const RowBase = ({
   className = '',
   onClick = null,
   pressed = false,
-  plain,
   headers,
   disabled,
+  detail,
+  hideDetailSeperator,
 }: IRowBase) => {
   let Component: any = linkComponent;
 
@@ -130,20 +133,23 @@ const RowBase = ({
     Component = 'div';
   }
 
-  const css = cn(
-    'w-full overflow-hidden resource-list-item focus-visible:ring-2 focus:ring-border-focus focus:z-10 outline-none ring-offset-1 relative flex flex-row items-center gap-3xl',
-    {
-      '[&:not(:last-child)]:border-b border-border-default first:rounded-t last:rounded-b p-2xl':
-        !plain,
-    },
-    className,
+  const commonCss = cn(
     {
       'bg-surface-basic-default': !pressed,
       'cursor-pointer hover:bg-surface-basic-hovered':
         (!!onClick || linkComponent !== 'div') && !pressed && !disabled,
       'bg-surface-basic-active': pressed,
       'cursor-default': !!disabled,
-    }
+    },
+    hideDetailSeperator
+      ? ''
+      : '[&:not(:last-child)]:border-b border-border-default'
+  );
+
+  const css = cn(
+    'w-full overflow-hidden resource-list-item focus-visible:ring-2 focus:ring-border-focus focus:z-10 outline-none ring-offset-1 relative flex flex-row items-center gap-3xl',
+    ' first:rounded-t last:rounded-b p-2xl',
+    className
   );
 
   if (!disabled) {
@@ -151,7 +157,6 @@ const RowBase = ({
       <RovingFocusGroup.Item
         role="row"
         asChild
-        className={css}
         onClick={() => {
           if (onClick) onClick(columns);
         }}
@@ -161,24 +166,33 @@ const RowBase = ({
           }
         }}
       >
-        <Component {...(Component === 'a' ? { href: to } : { to })}>
-          {headers?.map((item) => (
-            <div key={item.name} className={cn(item.className)}>
-              {columns?.[item.name]?.render()}
-            </div>
-          ))}
+        <Component
+          {...(Component === 'a' ? { href: to } : { to })}
+          className={cn('flex flex-col', commonCss)}
+        >
+          <div className={css}>
+            {headers?.map((item) => (
+              <div key={item.name} className={cn(item.className)}>
+                {columns?.[item.name]?.render()}
+              </div>
+            ))}
+          </div>
+          <div className={cn('px-2xl')}>{detail}</div>
         </Component>
       </RovingFocusGroup.Item>
     );
   }
 
   return (
-    <div className={css} role="row">
-      {headers?.map((item) => (
-        <div key={item.name} className={cn(item.className)}>
-          {columns?.[item.name]?.render()}
-        </div>
-      ))}
+    <div className="flex flex-col">
+      <div className={css} role="row">
+        {headers?.map((item) => (
+          <div key={item.name} className={cn(item.className)}>
+            {columns?.[item.name]?.render()}
+          </div>
+        ))}
+      </div>
+      {detail}
     </div>
   );
 };
@@ -216,6 +230,8 @@ interface IRoot {
       columns: Record<string, IColumn>;
       to?: string;
       disabled?: boolean;
+      detail?: ReactNode;
+      hideDetailSeperator?: boolean;
     }>;
     className?: Array<string>;
   };
@@ -287,6 +303,8 @@ const Root = ({
                   to={r.to}
                   headers={data.headers}
                   disabled={r.disabled}
+                  detail={r.detail}
+                  hideDetailSeperator={r.hideDetailSeperator}
                 />
               ))}
             </div>
diff --git a/src/apps/console/components/sync-status.tsx b/src/apps/console/components/sync-status.tsx
index aefaae066..c6579680a 100644
--- a/src/apps/console/components/sync-status.tsx
+++ b/src/apps/console/components/sync-status.tsx
@@ -1,8 +1,5 @@
 import {
-  ArrowsClockwise,
   Trash,
-  Info,
-  WarningCircle,
   CheckCircleFill,
   Checks,
   CircleNotch,
@@ -12,7 +9,6 @@ import {
   X,
 } from '~/console/components/icons';
 import Tooltip from '~/components/atoms/tooltip';
-import { titleCase } from '~/components/utils';
 import {
   Github__Com___Kloudlite___Api___Pkg___Types__SyncState as ISyncState,
   Github__Com___Kloudlite___Api___Pkg___Types__SyncAction as ISyncAction,
@@ -20,33 +16,6 @@ import {
 } from '~/root/src/generated/gql/server';
 import { Badge } from '~/components/atoms/badge';
 
-interface IStatusMeta {
-  metadata?: { generation: number };
-  recordVersion: number;
-  markedForDeletion?: boolean;
-  status?: {
-    checks?: any;
-    isReady: boolean;
-    lastReadyGeneration?: number;
-    lastReconcileTime?: any;
-    message?: { RawMessage?: any };
-    resources?: Array<{
-      apiVersion: string;
-      kind: string;
-      name: string;
-      namespace: string;
-    }>;
-  };
-  syncStatus: {
-    action: ISyncAction;
-    error?: string;
-    lastSyncedAt?: any;
-    recordVersion: number;
-    state: ISyncState;
-    syncScheduledAt?: any;
-  };
-}
-
 interface IStatusMetaV2 {
   metadata?: { generation: number };
   recordVersion: number;
@@ -75,57 +44,186 @@ interface IStatusMetaV2 {
   };
 }
 
-const Stage = {
-  Waiting: 'yet-to-be-reconciled',
-  InProgress: 'under-reconcilation',
-  Error: 'errored-during-reconcilation',
-  Completed: 'finished-reconcilation',
-};
+type IStatusViewType = 'full' | 'minimal';
 
 type OverallStates = 'idle' | 'in-progress' | 'error' | 'ready' | 'deleting';
 
-const State = ({ state }: { state: OverallStates }) => {
+const state = ({
+  state,
+  type,
+}: {
+  state: OverallStates;
+  type: IStatusViewType;
+}) => {
+  const iconSize = 16;
+  const textData = () => {
+    switch (state) {
+      case 'in-progress':
+        return 'In progress';
+      case 'error':
+        return 'Error';
+      case 'ready':
+        return 'Ready';
+      case 'deleting':
+        return 'Deleting';
+      case 'idle':
+      default:
+        return 'Waiting';
+    }
+  };
   switch (state) {
     case 'ready':
-      return (
-        <Badge icon={<Checks />} type="info">
-          Ready
-        </Badge>
-      );
-    case 'in-progress':
-      return (
-        <Badge
-          icon={
-            <span className="animate-spin relative flex items-center justify-center">
-              <CircleNotch size={12} />
-              <span className="absolute">
-                <CircleFill size={8} />
-              </span>
+      return {
+        component:
+          type === 'minimal' ? (
+            <span className="text-text-primary">
+              <Checks size={16} />
             </span>
-          }
-          type="warning"
-        >
-          In progress
-        </Badge>
+          ) : (
+            <Badge icon={<Checks />} type="info">
+              {textData()}
+            </Badge>
+          ),
+        text: textData(),
+      };
+    case 'in-progress':
+      const progressComponent = (
+        <span className="animate-spin relative flex items-center justify-center text-text-warning">
+          <CircleNotch size={type === 'minimal' ? iconSize : 12} />
+          <span className="absolute">
+            <CircleFill size={8} />
+          </span>
+        </span>
       );
+      return {
+        component:
+          type === 'minimal' ? (
+            progressComponent
+          ) : (
+            <Badge icon={progressComponent} type="warning">
+              {textData()}
+            </Badge>
+          ),
+        text: textData(),
+      };
     case 'deleting':
-      return 'Deleting';
+      return {
+        component:
+          type === 'minimal' ? (
+            <span className="text-text-critical">
+              <Trash size={iconSize} />
+            </span>
+          ) : (
+            <Badge icon={<Trash />} type="critical">
+              {textData()}
+            </Badge>
+          ),
+        text: textData(),
+      };
     case 'error':
-      return (
-        <Badge icon={<X />} type="critical">
-          Error
-        </Badge>
-      );
+      return {
+        component:
+          type === 'minimal' ? (
+            <span className="text-text-critical">
+              <X size={iconSize} />
+            </span>
+          ) : (
+            <Badge icon={<X />} type="critical">
+              {textData()}
+            </Badge>
+          ),
+        text: textData(),
+      };
     default:
-      return (
-        <Badge icon={<CircleFill />} type="warning">
-          Waiting
-        </Badge>
-      );
+      return {
+        component:
+          type === 'minimal' ? (
+            <span className="text-text-warning">
+              <CircleFill size={iconSize} />
+            </span>
+          ) : (
+            <Badge icon={<CircleFill />} type="warning">
+              {textData()}
+            </Badge>
+          ),
+        text: textData(),
+      };
+  }
+};
+
+const parseOverallState = (s: IStatusMetaV2['status']): OverallStates => {
+  const checks: {
+    [key: string]: {
+      error: string;
+      generation: number;
+      message: string;
+      state:
+        | 'yet-to-be-reconciled'
+        | 'under-reconcilation'
+        | 'errored-during-reconcilation'
+        | 'finished-reconcilation';
+      status: boolean;
+    };
+  } = s?.checks;
+  if (!checks) {
+    return 'idle';
   }
+
+  const mainStatus = s?.checkList?.reduce(
+    (acc, curr) => {
+      const k = checks[curr.name];
+      if (acc.progress === 'done') {
+        return acc;
+      }
+
+      if (k) {
+        if (acc.value === 'idle' && k.state === 'yet-to-be-reconciled') {
+          return {
+            value: 'idle',
+            progress: 'done',
+          };
+        }
+
+        if (k.state === 'under-reconcilation') {
+          return {
+            value: 'in-progress',
+            progress: 'done',
+          };
+        }
+
+        if (k.state === 'errored-during-reconcilation') {
+          return {
+            value: 'error',
+            progress: 'done',
+          };
+        }
+
+        if (k.state === 'finished-reconcilation') {
+          return {
+            value: 'ready',
+            progress: 'init',
+          };
+        }
+      }
+
+      return acc;
+    },
+    {
+      value: 'idle',
+      progress: 'init',
+    }
+  );
+
+  return (mainStatus?.value as OverallStates) || 'idle';
 };
 
-export const SyncStatusV2 = ({ item }: { item: IStatusMetaV2 }) => {
+export const SyncStatusV2 = ({
+  item,
+  type,
+}: {
+  item: IStatusMetaV2;
+  type?: IStatusViewType;
+}) => {
   const { status } = item;
 
   const parseStage = (check: OverallStates) => {
@@ -135,8 +233,10 @@ export const SyncStatusV2 = ({ item }: { item: IStatusMetaV2 }) => {
       case 'in-progress':
         return {
           icon: (
-            <span className="text-text-warning">
-              <CircleNotch size={iconSize} />
+            <span className="flex items-center justify-center text-text-warning">
+              <span className="animate-spin">
+                <CircleNotch size={iconSize} />
+              </span>
             </span>
           ),
         };
@@ -168,89 +268,6 @@ export const SyncStatusV2 = ({ item }: { item: IStatusMetaV2 }) => {
     }
   };
 
-  const parseOverallState = (s: typeof status): OverallStates => {
-    /*
-    WaitingState   State = "yet-to-be-reconciled"
-  RunningState   State = "under-reconcilation"
-  ErroredState   State = "errored-during-reconcilation"
-  CompletedState State = "finished-reconcilation"
-    */
-
-    const checks: {
-      [key: string]: {
-        error: string;
-        generation: number;
-        message: string;
-        state:
-          | 'yet-to-be-reconciled'
-          | 'under-reconcilation'
-          | 'errored-during-reconcilation'
-          | 'finished-reconcilation';
-        status: boolean;
-      };
-    } = s?.checks;
-    if (!checks) {
-      return 'idle';
-    }
-
-    /*
-    if no one stared -> idle
-
-    if any fail all fail
-
-    if any not in progress -> in progress
-
-    if all done -> done
-    */
-
-    const mainStatus = status?.checkList?.reduce(
-      (acc, curr) => {
-        const k = checks[curr.name];
-        if (acc.progress === 'done') {
-          return acc;
-        }
-
-        if (k) {
-          if (acc.value === 'idle' && k.state === 'yet-to-be-reconciled') {
-            return {
-              value: 'idle',
-              progress: 'done',
-            };
-          }
-
-          if (k.state === 'under-reconcilation') {
-            return {
-              value: 'in-progress',
-              progress: 'done',
-            };
-          }
-
-          if (k.state === 'errored-during-reconcilation') {
-            return {
-              value: 'error',
-              progress: 'done',
-            };
-          }
-
-          if (k.state === 'finished-reconcilation') {
-            return {
-              value: 'ready',
-              progress: 'init',
-            };
-          }
-        }
-
-        return acc;
-      },
-      {
-        value: 'idle',
-        progress: 'init',
-      }
-    );
-
-    return (mainStatus?.value as OverallStates) || 'idle';
-  };
-
   const getProgressItems = (s: typeof status) => {
     const checks: {
       [key: string]: {
@@ -266,19 +283,9 @@ export const SyncStatusV2 = ({ item }: { item: IStatusMetaV2 }) => {
       };
     } = s?.checks;
     if (!checks) {
-      return 'idle';
+      return [];
     }
 
-    /*
-    if no one stared -> idle
-
-    if any fail all fail
-
-    if any not in progress -> in progress
-
-    if all done -> done
-    */
-
     const items = status?.checkList?.reduce(
       (acc, curr) => {
         const k = checks[curr.name];
@@ -290,7 +297,7 @@ export const SyncStatusV2 = ({ item }: { item: IStatusMetaV2 }) => {
           return acc;
         }
 
-        const res = (() => {
+        const res = ((): { value: OverallStates; progress: string } => {
           if (k) {
             if (acc.value === 'idle' && k.state === 'yet-to-be-reconciled') {
               return {
@@ -335,8 +342,8 @@ export const SyncStatusV2 = ({ item }: { item: IStatusMetaV2 }) => {
         return acc;
       },
       {
-        value: 'idle',
-        items: [],
+        value: 'idle' as OverallStates,
+        items: [] as ({ result: OverallStates } & ICheckList)[],
         progress: 'init',
       }
     );
@@ -344,7 +351,7 @@ export const SyncStatusV2 = ({ item }: { item: IStatusMetaV2 }) => {
     return items?.items;
   };
 
-  const data = {
+  const _data = {
     checks: {
       'deployment-svc-and-hpa-created': {
         state: 'under-reconcilation',
@@ -367,10 +374,9 @@ export const SyncStatusV2 = ({ item }: { item: IStatusMetaV2 }) => {
     ],
   };
 
-  const k = parseOverallState(data);
+  const k = parseOverallState(status);
+  const ic = getProgressItems(status);
 
-  const ic = getProgressItems(data);
-  console.log(ic);
   return (
     <div>
       <Tooltip.Root
@@ -378,14 +384,16 @@ export const SyncStatusV2 = ({ item }: { item: IStatusMetaV2 }) => {
         className="!max-w-[300px]"
         content={
           <div className="p-md flex flex-col gap-lg">
-            <div className="bodyMd-medium" />
+            <div className="bodyMd-medium">
+              {state({ state: k, type: type || 'full' }).text}
+            </div>
             <div className="flex flex-col gap-lg">
-              {ic.map((cl) => (
+              {ic?.map((cl) => (
                 <div
                   key={cl.name}
                   className="bodySm flex flex-row gap-xl items-center"
                 >
-                  <span>{parseStage(cl.name).icon}</span>
+                  <span>{parseStage(cl.result).icon}</span>
                   <span>{cl.title}</span>
                 </div>
               ))}
@@ -394,179 +402,18 @@ export const SyncStatusV2 = ({ item }: { item: IStatusMetaV2 }) => {
         }
       >
         <div className="cursor-pointer">
-          <State state={k} />
+          {
+            state({
+              state: k,
+              type: type || 'full',
+            }).component
+          }
         </div>
       </Tooltip.Root>
     </div>
   );
 };
 
-const SyncStatus = ({ item }: { item: IStatusMeta }) => {
-  const statusIconSize = 16;
-
-  const getMessages = () => {
-    let errors: Array<string> = [];
-    if (item.status?.checks) {
-      try {
-        const err = Object.entries(item.status?.checks)
-          .map(([_key, values]) => {
-            const val = values as unknown as Record<string, any>;
-            if (val.generation === item.metadata?.generation && !val.status) {
-              return val.message;
-            }
-            return null;
-          })
-          .filter((er) => !!er);
-        errors = [...err];
-      } catch {
-        //
-      }
-    }
-
-    if (errors.length > 0) {
-      return {
-        errors,
-        render: (
-          <div className="pulsable text-text-strong">
-            <Tooltip.Root
-              content={
-                <div className="flex flex-col gap-lg text-text-strong text-xs">
-                  {errors.map((err) => (
-                    <span key={err}>{err}</span>
-                  ))}
-                </div>
-              }
-            >
-              <span className="animate-pulse">
-                <Info size={statusIconSize} />
-              </span>
-            </Tooltip.Root>
-          </div>
-        ),
-      };
-    }
-
-    return null;
-  };
-
-  if (item.markedForDeletion) {
-    return (
-      <div className="pulsable text-text-critical">
-        <Tooltip.Root
-          content={
-            <div className="flex flex-col gap-lg overflow-hidden">
-              <span className="bodySm-semibold">Deleting</span>
-              {getMessages()?.errors.map((error) => (
-                <span
-                  key={error}
-                  className="bodySm overflow-hidden break-words"
-                >
-                  {titleCase(error)}
-                </span>
-              ))}
-            </div>
-          }
-        >
-          <span className="animate-pulse">
-            <Trash size={statusIconSize} />
-          </span>
-        </Tooltip.Root>
-      </div>
-    );
-  }
-
-  if (item.syncStatus.error) {
-    return (
-      <div className="pulsable text-text-critical">
-        <Tooltip.Root
-          content={
-            <div className="flex flex-col gap-md">
-              <span className="bodySm-semibold">Error</span>
-              <span className="bodySm">{titleCase(item.syncStatus.error)}</span>
-            </div>
-          }
-        >
-          <span className="animate-pulse">
-            <WarningCircle size={statusIconSize} />
-          </span>
-        </Tooltip.Root>
-      </div>
-    );
-  }
-
-  if (
-    item.recordVersion !== item.syncStatus.recordVersion ||
-    !item.status?.isReady
-  ) {
-    return (
-      <div className="pulsable flex flex-row items-center gap-lg">
-        <Tooltip.Root
-          content={
-            <div className="flex flex-col gap-lg">
-              <span className="bodySm-semibold">Not ready</span>
-              {getMessages()?.errors.map((error) => (
-                <span key={error} className="bodySm">
-                  {titleCase(error)}
-                </span>
-              ))}
-            </div>
-          }
-        >
-          <span className="animate-spin delay-300 text-text-disabled">
-            <ArrowsClockwise size={statusIconSize} />
-          </span>
-        </Tooltip.Root>
-
-        {/* {getError()} */}
-      </div>
-    );
-  }
-
-  return null;
-};
-
-export type IStatus = 'deleting' | 'notready' | 'syncing' | 'ready';
-type IResourceType = 'nodepool';
-
-export const parseStatus = ({
-  item,
-  type,
-}: {
-  item: IStatusMeta;
-  type?: IResourceType;
-}) => {
-  let status: IStatus = 'ready';
-
-  if (item.markedForDeletion) {
-    status = 'deleting';
-  } else if (!item.status?.isReady) {
-    switch (type) {
-      case 'nodepool':
-        status = 'syncing';
-        break;
-      default:
-        status = 'notready';
-    }
-  }
-
-  return status;
-};
-
-export const listStatus = ({
-  item,
-  type,
-}: {
-  item: IStatusMeta;
-  type?: IResourceType;
-}) => {
-  return {
-    render: () => (
-      <div className="min-w-[20px]">
-        <SyncStatus item={item} />
-      </div>
-    ),
-    status: parseStatus({ item, type }),
-  };
+export const status = ({ item }: { item: IStatusMetaV2 }) => {
+  return parseOverallState(item.status);
 };
-
-export default SyncStatus;
diff --git a/src/apps/console/page-components/new-project.tsx b/src/apps/console/page-components/new-project.tsx
index 6a95dee33..df6f54e03 100644
--- a/src/apps/console/page-components/new-project.tsx
+++ b/src/apps/console/page-components/new-project.tsx
@@ -5,13 +5,7 @@ import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
 import Select from '~/components/atoms/select';
-import { listStatus, parseStatus } from '~/console/components/sync-status';
-import { IClusters } from '~/console/server/gql/queries/cluster-queries';
-import {
-  ExtractNodeType,
-  parseName,
-  parseNodes,
-} from '../server/r-utils/common';
+import { parseName, parseNodes } from '../server/r-utils/common';
 import { ensureAccountClientSide } from '../server/utils/auth-utils';
 import { INewProjectFromAccountLoader } from '../routes/_a+/$a+/new-project';
 import { useConsoleApi } from '../server/gql/api-provider';
@@ -23,14 +17,7 @@ import MultiStepProgressWrapper from '../components/multi-step-progress-wrapper'
 import { TitleBox } from '../components/raw-wrapper';
 import { BottomNavigation, ReviewComponent } from '../components/commons';
 import FillerProject from '../assets/filler-project';
-
-const statusRender = (item: ExtractNodeType<IClusters>) => {
-  return listStatus({
-    key: parseName(item),
-    item,
-    className: 'text-center',
-  });
-};
+import { SyncStatusV2, status } from '../components/sync-status';
 
 const NewProject = () => {
   const { clustersData } = useLoaderData<INewProjectFromAccountLoader>();
@@ -140,16 +127,14 @@ const NewProject = () => {
                 value={values.clusterName}
                 options={async () => [
                   ...clusters
-                    .filter(
-                      (clster) => parseStatus({ item: clster }) !== 'deleting'
-                    )
+                    .filter((clster) => status({ item: clster }) !== 'deleting')
                     .map((clster) => ({
                       label: clster.displayName,
                       value: parseName(clster),
                       cluster: clster,
                       render: () => (
                         <div>
-                          {parseStatus({ item: clster }) === 'ready' ? (
+                          {status({ item: clster }) === 'ready' ? (
                             <div className="flex flex-col">
                               <div>{clster.displayName}</div>
                               <div className="bodySm text-text-soft">
@@ -167,9 +152,7 @@ const NewProject = () => {
                                 </div>
                               </div>
                               <div className="flex flex-grow-0 items-center">
-                                {statusRender(
-                                  clster as ExtractNodeType<IClusters>
-                                ).render()}
+                                <SyncStatusV2 item={clster} type="full" />
                               </div>
                             </div>
                           )}
@@ -178,7 +161,7 @@ const NewProject = () => {
                     })),
                 ]}
                 onChange={(v) => {
-                  if (parseStatus({ item: v.cluster }) === 'ready')
+                  if (status({ item: v.cluster }) === 'ready')
                     handleChange('clusterName')(dummyEvent(v.value));
                 }}
               />
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources-v2.tsx
index 7d2a4524a..ea0dc8476 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources-v2.tsx
@@ -8,13 +8,9 @@ import { Link, useOutletContext, useParams } from '@remix-run/react';
 import { generateKey, titleCase } from '~/components/utils';
 import {
   ListItem,
-  ListSecondary,
   ListTitle,
-  listClass,
-  listFlex,
 } from '~/console/components/console-list-components';
 import Grid from '~/console/components/grid';
-import List from '~/console/components/list';
 import ListGridView from '~/console/components/list-grid-view';
 import ResourceExtraAction, {
   IResourceExtraItem,
@@ -31,7 +27,7 @@ import {
 import { handleError } from '~/root/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
 import { useReload } from '~/root/lib/client/helpers/reloader';
-import { SyncStatusV2, listStatus } from '~/console/components/sync-status';
+import { SyncStatusV2 } from '~/console/components/sync-status';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import ListV2 from '~/console/components/listV2';
 import { IEnvironmentContext } from '../_layout';
@@ -186,6 +182,11 @@ const ListView = ({ items = [], onAction }: IResource) => {
             name: 'name',
             className: 'w-[180px]',
           },
+          {
+            render: () => '',
+            name: 'intercept',
+            className: 'w-[250px]',
+          },
           {
             render: () => 'Status',
             name: 'status',
@@ -209,6 +210,21 @@ const ListView = ({ items = [], onAction }: IResource) => {
               name: {
                 render: () => <ListTitle title={name} subtitle={id} />,
               },
+              intercept: {
+                render: () =>
+                  i.spec.intercept?.enabled && (
+                    <ListItem
+                      subtitle={
+                        <div>
+                          Intercepted to{' '}
+                          <span className="bodyMd-medium text-text-strong">
+                            {i.spec.intercept.toDevice}
+                          </span>
+                        </div>
+                      }
+                    />
+                  ),
+              },
               status: {
                 render: () => (
                   <div className="inline-block">
@@ -229,8 +245,7 @@ const ListView = ({ items = [], onAction }: IResource) => {
                 render: () => <ExtraButton onAction={onAction} item={i} />,
               },
             },
-            to: `/${account}/infra/${id}/overview`,
-            disabled: true,
+            to: `/${account}/${project}/${environment}/app/${id}`,
           };
         }),
       }}
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
index 12bbdcf4a..543c4da5f 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
@@ -31,7 +31,6 @@ import {
 import { handleError } from '~/root/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
 import { useReload } from '~/root/lib/client/helpers/reloader';
-import { listStatus } from '~/console/components/sync-status';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import { IEnvironmentContext } from '../_layout';
 
@@ -180,7 +179,6 @@ const ListView = ({ items = [], onAction }: IResource) => {
       {items.map((item, index) => {
         const { name, id, updateInfo, intercept } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        const status = listStatus({ key: `${keyPrefix}status`, item });
         return (
           <List.Row
             to={`/${account}/${project}/${environment}/app/${id}`}
@@ -192,20 +190,19 @@ const ListView = ({ items = [], onAction }: IResource) => {
                 className: listClass.title,
                 render: () => <ListTitle title={name} subtitle={id} />,
               },
-              status,
               // @ts-ignore
               ...[
                 intercept && !!intercept.enabled
                   ? {
-                    key: generateKey(keyPrefix, `${name + id}intercept`),
-                    className: listClass.title,
-                    render: () => (
-                      <ListSecondary
-                        title="intercepted toDevice"
-                        subtitle={intercept?.toDevice}
-                      />
-                    ),
-                  }
+                      key: generateKey(keyPrefix, `${name + id}intercept`),
+                      className: listClass.title,
+                      render: () => (
+                        <ListSecondary
+                          title="intercepted toDevice"
+                          subtitle={intercept?.toDevice}
+                        />
+                      ),
+                    }
                   : [],
               ],
               listFlex({ key: 'flex-1' }),
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource.tsx
index bd6631ce3..1adc7f224 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource.tsx
@@ -25,7 +25,6 @@ import { handleError } from '~/root/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
 import { Link, useParams } from '@remix-run/react';
 import { IManagedResources } from '~/console/server/gql/queries/managed-resources-queries';
-import { listStatus } from '~/console/components/sync-status';
 import { Button } from '~/components/atoms/button';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import HandleManagedResources from './handle-managed-resource';
@@ -131,7 +130,6 @@ const ListView = ({ items = [], onAction }: IResource) => {
       {items.map((item, index) => {
         const { name, id, updateInfo } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        const status = listStatus({ key: `${keyPrefix}status`, item });
         return (
           <List.Row
             key={id}
@@ -142,19 +140,18 @@ const ListView = ({ items = [], onAction }: IResource) => {
                 className: listClass.title,
                 render: () => <ListTitle title={name} subtitle={id} />,
               },
-              status,
               item.syncedOutputSecretRef
                 ? {
-                    key: generateKey(keyPrefix, 'secret'),
-                    render: () => (
-                      <Button
-                        content="View secrets"
-                        variant="plain"
-                        LinkComponent={Link}
-                        to={`${preUrl}${item.syncedOutputSecretRef?.metadata?.name}`}
-                      />
-                    ),
-                  }
+                  key: generateKey(keyPrefix, 'secret'),
+                  render: () => (
+                    <Button
+                      content="View secrets"
+                      variant="plain"
+                      LinkComponent={Link}
+                      to={`${preUrl}${item.syncedOutputSecretRef?.metadata?.name}`}
+                    />
+                  ),
+                }
                 : {},
               listFlex({ key: 'flex-1' }),
               {
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/_index.tsx
index 8008a5e53..1d3938d9d 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/_index.tsx
@@ -1,6 +1,6 @@
 import { Plus, PlusFill } from '@jengaicons/react';
 import { defer } from '@remix-run/node';
-import { Link, useLoaderData } from '@remix-run/react';
+import { useLoaderData } from '@remix-run/react';
 import { Button } from '~/components/atoms/button.jsx';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import Wrapper from '~/console/components/wrapper';
@@ -13,10 +13,10 @@ import {
 import { getPagination, getSearch } from '~/console/server/utils/common';
 import { IRemixCtx } from '~/root/lib/types/common';
 import { useState } from 'react';
+import fake from '~/root/fake-data-generator/fake';
 import Tools from './tools';
 import HandleRouter from './handle-router';
-import RouterResources from './router-resources';
-import fake from "~/root/fake-data-generator/fake";
+import RouterResourcesV2 from './router-resources-V2';
 
 export const loader = async (ctx: IRemixCtx) => {
   ensureAccountSet(ctx);
@@ -46,10 +46,10 @@ const Routers = () => {
   return (
     <>
       <LoadingComp
-          data={promise}
-          skeletonData={{
-            routersData: fake.ConsoleListRoutersQuery.core_listRouters as any,
-          }}
+        data={promise}
+        skeletonData={{
+          routersData: fake.ConsoleListRoutersQuery.core_listRouters as any,
+        }}
       >
         {({ routersData }) => {
           const routers = parseNodes(routersData);
@@ -89,7 +89,7 @@ const Routers = () => {
               }}
               tools={<Tools />}
             >
-              <RouterResources items={routers} />
+              <RouterResourcesV2 items={routers} />
             </Wrapper>
           );
         }}
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx
new file mode 100644
index 000000000..3d24981d2
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx
@@ -0,0 +1,373 @@
+import { Trash, PencilLine } from '@jengaicons/react';
+import { useState } from 'react';
+import { generateKey, titleCase } from '~/components/utils';
+import {
+  ListItem,
+  ListTitle,
+} from '~/console/components/console-list-components';
+import DeleteDialog from '~/console/components/delete-dialog';
+import Grid from '~/console/components/grid';
+import ListGridView from '~/console/components/list-grid-view';
+import ResourceExtraAction from '~/console/components/resource-extra-action';
+import {
+  ExtractNodeType,
+  parseName,
+  parseUpdateOrCreatedBy,
+  parseUpdateOrCreatedOn,
+} from '~/console/server/r-utils/common';
+import { handleError } from '~/root/lib/utils/common';
+import { IRouters } from '~/console/server/gql/queries/router-queries';
+import { Link, useParams } from '@remix-run/react';
+import { SyncStatusV2 } from '~/console/components/sync-status';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { useReload } from '~/root/lib/client/helpers/reloader';
+import { toast } from '~/components/molecule/toast';
+import { Button } from '~/components/atoms/button';
+import Tooltip from '~/components/atoms/tooltip';
+import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
+import ListV2 from '~/console/components/listV2';
+import HandleRouter from './handle-router';
+
+const RESOURCE_NAME = 'domain';
+type BaseType = ExtractNodeType<IRouters>;
+
+const parseItem = (item: BaseType) => {
+  return {
+    name: item.displayName,
+    id: parseName(item),
+    updateInfo: {
+      author: `Updated by ${parseUpdateOrCreatedBy(item)}`,
+      time: parseUpdateOrCreatedOn(item),
+    },
+  };
+};
+
+type OnAction = ({
+  action,
+  item,
+}: {
+  action: 'edit' | 'delete' | 'detail';
+  item: BaseType;
+}) => void;
+
+type IExtraButton = {
+  onAction: OnAction;
+  item: BaseType;
+};
+
+const formatDomain = (domain: string) => {
+  const d = domain.startsWith('https://') ? domain : `https://${domain}`;
+  return { full: d, short: d.replace('https://', '') };
+};
+
+const ExtraButton = ({ onAction, item }: IExtraButton) => {
+  return (
+    <ResourceExtraAction
+      options={[
+        {
+          label: 'Edit',
+          icon: <PencilLine size={16} />,
+          type: 'item',
+          onClick: () => onAction({ action: 'edit', item }),
+          key: 'edit',
+        },
+        {
+          label: 'Delete',
+          icon: <Trash size={16} />,
+          type: 'item',
+          onClick: () => onAction({ action: 'delete', item }),
+          key: 'delete',
+          className: '!text-text-critical',
+        },
+      ]}
+    />
+  );
+};
+
+interface IResource {
+  items: BaseType[];
+  onAction: OnAction;
+}
+
+const GridView = ({ items, onAction }: IResource) => {
+  const { account, project, environment } = useParams();
+  return (
+    <Grid.Root className="!grid-cols-1 md:!grid-cols-3" linkComponent={Link}>
+      {items.map((item, index) => {
+        const { name, id, updateInfo } = parseItem(item);
+        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
+        const firstDomain = item.spec.domains?.[0];
+        return (
+          <Grid.Column
+            key={id}
+            to={`/${account}/${project}/${environment}/router/${id}/routes`}
+            rows={[
+              {
+                key: generateKey(keyPrefix, name + id),
+                render: () => (
+                  <ListTitle
+                    title={name}
+                    action={<ExtraButton onAction={onAction} item={item} />}
+                  />
+                ),
+              },
+              {
+                key: generateKey(keyPrefix, 'extra_domain'),
+                render: () => (
+                  <ListItem
+                    data={
+                      <div className="flex flex-row items-center gap-md">
+                        <Button
+                          LinkComponent={Link}
+                          target="_blank"
+                          size="sm"
+                          content={formatDomain(firstDomain).short}
+                          variant="primary-plain"
+                          to={formatDomain(firstDomain).full}
+                        />
+
+                        {item.spec.domains.length > 1 && (
+                          <Tooltip.Root
+                            content={
+                              <div className="flex flex-col gap-md">
+                                {item.spec.domains
+                                  .filter((d) => d !== firstDomain)
+                                  .map((d) => (
+                                    <Button
+                                      key={d}
+                                      LinkComponent={Link}
+                                      target="_blank"
+                                      size="sm"
+                                      content={formatDomain(d).short}
+                                      variant="primary-plain"
+                                      to={formatDomain(d).full}
+                                    />
+                                  ))}
+                              </div>
+                            }
+                          >
+                            <Button
+                              content={`+${item.spec.domains.length - 1} more`}
+                              variant="plain"
+                              size="sm"
+                            />
+                          </Tooltip.Root>
+                        )}
+                      </div>
+                    }
+                  />
+                ),
+              },
+              {
+                key: generateKey(keyPrefix, updateInfo.author),
+                render: () => (
+                  <ListItem
+                    data={updateInfo.author}
+                    subtitle={updateInfo.time}
+                  />
+                ),
+              },
+            ]}
+          />
+        );
+      })}
+    </Grid.Root>
+  );
+};
+
+const ListView = ({ items, onAction }: IResource) => {
+  return (
+    <ListV2.Root
+      data={{
+        headers: [
+          {
+            render: () => 'Name',
+            name: 'name',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => 'Status',
+            name: 'status',
+            className: 'flex-1 min-w-[30px] flex items-center justify-center',
+          },
+
+          {
+            render: () => 'Domains',
+            name: 'domains',
+            className: 'w-[250px]',
+          },
+          {
+            render: () => 'Updated',
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'action',
+            className: 'w-[24px]',
+          },
+        ],
+        rows: items.map((i) => {
+          const { name, updateInfo } = parseItem(i);
+          const firstDomain = i.spec.domains?.[0];
+          return {
+            columns: {
+              name: {
+                render: () => <ListTitle title={name} />,
+              },
+              status: {
+                render: () => <SyncStatusV2 item={i} />,
+              },
+              domains: {
+                render: () => (
+                  <ListItem
+                    data={
+                      <div className="flex flex-row items-center gap-md">
+                        <Button
+                          size="sm"
+                          content={formatDomain(firstDomain).short}
+                          variant="primary-plain"
+                          className="!pl-0"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            window.open(
+                              formatDomain(firstDomain).full,
+                              '_blank',
+                              'noopener,noreferrer'
+                            );
+                          }}
+                        />
+
+                        {i.spec.domains.length > 1 && (
+                          <Tooltip.Root
+                            content={
+                              <div className="flex flex-col gap-md">
+                                {i.spec.domains
+                                  .filter((d) => d !== firstDomain)
+                                  .map((d) => (
+                                    <Button
+                                      key={d}
+                                      size="sm"
+                                      content={formatDomain(d).short}
+                                      variant="primary-plain"
+                                      onClick={(e) => {
+                                        e.preventDefault();
+                                        window.open(
+                                          formatDomain(d).full,
+                                          '_blank',
+                                          'noopener,noreferrer'
+                                        );
+                                      }}
+                                    />
+                                  ))}
+                              </div>
+                            }
+                          >
+                            <Button
+                              content={`+${i.spec.domains.length - 1} more`}
+                              variant="plain"
+                              size="sm"
+                            />
+                          </Tooltip.Root>
+                        )}
+                      </div>
+                    }
+                  />
+                ),
+              },
+              updated: {
+                render: () => (
+                  <ListItem
+                    data={`${updateInfo.author}`}
+                    subtitle={updateInfo.time}
+                  />
+                ),
+              },
+              action: {
+                render: () => <ExtraButton item={i} onAction={onAction} />,
+              },
+            },
+          };
+        }),
+      }}
+    />
+  );
+};
+
+const RouterResourcesV2 = ({ items = [] }: { items: BaseType[] }) => {
+  const [showDeleteDialog, setShowDeleteDialog] = useState<BaseType | null>(
+    null
+  );
+  const [visible, setVisible] = useState<BaseType | null>(null);
+  const api = useConsoleApi();
+  const reloadPage = useReload();
+  const { environment, project, account } = useParams();
+
+  useWatchReload(
+    items.map((i) => {
+      return `account:${account}.project:${project}.environment:${environment}.router:${parseName(
+        i
+      )}`;
+    })
+  );
+
+  const props: IResource = {
+    items,
+    onAction: ({ action, item }) => {
+      switch (action) {
+        case 'edit':
+          setVisible(item);
+          break;
+        case 'delete':
+          setShowDeleteDialog(item);
+          break;
+        default:
+      }
+    },
+  };
+  return (
+    <>
+      <ListGridView
+        listView={<ListView {...props} />}
+        gridView={<GridView {...props} />}
+      />
+      <DeleteDialog
+        resourceName={showDeleteDialog?.displayName}
+        resourceType={RESOURCE_NAME}
+        show={showDeleteDialog}
+        setShow={setShowDeleteDialog}
+        onSubmit={async () => {
+          if (!environment || !project) {
+            throw new Error('Project and Environment is required!.');
+          }
+          try {
+            const { errors } = await api.deleteRouter({
+              envName: environment,
+              projectName: project,
+              routerName: parseName(showDeleteDialog),
+            });
+
+            if (errors) {
+              throw errors[0];
+            }
+            reloadPage();
+            toast.success(`${titleCase(RESOURCE_NAME)} deleted successfully`);
+            setShowDeleteDialog(null);
+          } catch (err) {
+            handleError(err);
+          }
+        }}
+      />
+      <HandleRouter
+        {...{
+          isUpdate: true,
+          data: visible!,
+          visible: !!visible,
+          setVisible: () => setVisible(null),
+        }}
+      />
+    </>
+  );
+};
+
+export default RouterResourcesV2;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx
index e0d39d0b8..458dd87f8 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx
@@ -21,7 +21,6 @@ import {
 import { handleError } from '~/root/lib/utils/common';
 import { IRouters } from '~/console/server/gql/queries/router-queries';
 import { Link, useParams } from '@remix-run/react';
-import { listStatus } from '~/console/components/sync-status';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { toast } from '~/components/molecule/toast';
@@ -30,7 +29,7 @@ import Tooltip from '~/components/atoms/tooltip';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import HandleRouter from './handle-router';
 
-const RESOURCE_NAME = 'domain';
+const RESOURCE_NAME = 'router';
 type BaseType = ExtractNodeType<IRouters>;
 
 const parseItem = (item: BaseType) => {
@@ -184,7 +183,6 @@ const ListView = ({ items, onAction }: IResource) => {
       {items.map((item, index) => {
         const { name, id, updateInfo } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        const status = listStatus({ key: `${keyPrefix}status`, item });
         const firstDomain = item.spec.domains?.[0];
         return (
           <List.Row
@@ -197,7 +195,6 @@ const ListView = ({ items, onAction }: IResource) => {
                 className: listClass.title,
                 render: () => <ListTitle title={name} />,
               },
-              status,
               {
                 key: generateKey(keyPrefix, 'extra_domain'),
                 render: () => (
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/image-pull-secrets-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/image-pull-secrets-resources.tsx
index b34115be2..a70c1e27a 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/image-pull-secrets-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/image-pull-secrets-resources.tsx
@@ -22,7 +22,6 @@ import {
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { handleError } from '~/root/lib/utils/common';
 import { Link, useParams } from '@remix-run/react';
-import { listStatus } from '~/console/components/sync-status';
 import { IImagePullSecrets } from '~/console/server/gql/queries/image-pull-secrets-queries';
 import HandleImagePullSecret from './handle-image-pull-secret';
 
@@ -127,7 +126,6 @@ const ListView = ({ items, onAction }: IResource) => {
       {items.map((item, index) => {
         const { name, id, updateInfo } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        const status = listStatus({ key: `${keyPrefix}status`, item });
         return (
           <List.Row
             key={id}
@@ -139,7 +137,6 @@ const ListView = ({ items, onAction }: IResource) => {
                 className: listClass.title,
                 render: () => <ListTitle title={name} />,
               },
-              status,
               listFlex({ key: 'flex-1' }),
               {
                 key: generateKey(keyPrefix, updateInfo.author),
diff --git a/src/apps/console/routes/_main+/$account+/$project+/environments/environment-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/$project+/environments/environment-resources-v2.tsx
new file mode 100644
index 000000000..9202e56ed
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/$project+/environments/environment-resources-v2.tsx
@@ -0,0 +1,235 @@
+import { Copy, GearSix } from '@jengaicons/react';
+import { Link, useOutletContext, useParams } from '@remix-run/react';
+import { useState } from 'react';
+import { generateKey, titleCase } from '~/components/utils';
+import ConsoleAvatar from '~/console/components/console-avatar';
+import {
+  ListItem,
+  ListTitle,
+  listClass,
+} from '~/console/components/console-list-components';
+import Grid from '~/console/components/grid';
+import ListGridView from '~/console/components/list-grid-view';
+import ResourceExtraAction from '~/console/components/resource-extra-action';
+import { IEnvironments } from '~/console/server/gql/queries/environment-queries';
+import {
+  ExtractNodeType,
+  parseName,
+  parseUpdateOrCreatedBy,
+  parseUpdateOrCreatedOn,
+} from '~/console/server/r-utils/common';
+import { SyncStatusV2 } from '~/console/components/sync-status';
+import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
+import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
+import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
+import ListV2 from '~/console/components/listV2';
+import CloneEnvironment from './clone-environment';
+
+const RESOURCE_NAME = 'environment';
+type BaseType = ExtractNodeType<IEnvironments>;
+
+const parseItem = (item: BaseType) => {
+  return {
+    name: item.displayName,
+    id: parseName(item),
+    updateInfo: {
+      author: `Updated by ${titleCase(parseUpdateOrCreatedBy(item))}`,
+      time: parseUpdateOrCreatedOn(item),
+    },
+  };
+};
+
+type OnAction = ({ action, item }: { action: 'clone'; item: BaseType }) => void;
+
+type IExtraButton = {
+  onAction: OnAction;
+  item: BaseType;
+};
+
+const ExtraButton = ({ item, onAction }: IExtraButton) => {
+  const { account, project } = useParams();
+  return (
+    <ResourceExtraAction
+      options={[
+        {
+          label: 'Clone',
+          icon: <Copy size={16} />,
+          type: 'item',
+          key: 'clone',
+          onClick: () => onAction({ action: 'clone', item }),
+        },
+        {
+          label: 'Settings',
+          icon: <GearSix size={16} />,
+          type: 'item',
+          to: `/${account}/${project}/${parseName(item)}/settings/general`,
+          key: 'settings',
+        },
+      ]}
+    />
+  );
+};
+
+interface IResource {
+  items: BaseType[];
+  onAction: OnAction;
+}
+
+const GridView = ({ items = [], onAction }: IResource) => {
+  const { account, project } = useParams();
+  return (
+    <Grid.Root className="!grid-cols-1 md:!grid-cols-3" linkComponent={Link}>
+      {items.map((item, index) => {
+        const { name, id, updateInfo } = parseItem(item);
+        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
+        return (
+          <Grid.Column
+            key={id}
+            to={`/${account}/${project}/${id}`}
+            rows={[
+              {
+                key: generateKey(keyPrefix, name + id),
+                className: listClass.title,
+                render: () => (
+                  <ListTitle
+                    title={name}
+                    subtitle={id}
+                    action={<ExtraButton item={item} onAction={onAction} />}
+                    avatar={<ConsoleAvatar name={id} />}
+                  />
+                ),
+              },
+              {
+                key: generateKey(keyPrefix, updateInfo.author),
+                className: listClass.author,
+                render: () => (
+                  <ListItem
+                    data={updateInfo.author}
+                    subtitle={updateInfo.time}
+                  />
+                ),
+              },
+            ]}
+          />
+        );
+      })}
+    </Grid.Root>
+  );
+};
+
+const ListView = ({ items, onAction }: IResource) => {
+  const { account, project } = useParams();
+
+  return (
+    <ListV2.Root
+      linkComponent={Link}
+      data={{
+        headers: [
+          {
+            render: () => (
+              <div className="flex flex-row">
+                <span className="w-[48px]" />
+                Name
+              </div>
+            ),
+            name: 'name',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => 'Status',
+            name: 'status',
+            className: 'flex-1 min-w-[30px] flex items-center justify-center',
+          },
+          {
+            render: () => 'Updated',
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'action',
+            className: 'w-[24px]',
+          },
+        ],
+        rows: items.map((i) => {
+          const { name, id, updateInfo } = parseItem(i);
+          return {
+            columns: {
+              name: {
+                render: () => (
+                  <ListTitle
+                    title={name}
+                    subtitle={id}
+                    avatar={<ConsoleAvatar name={id} />}
+                  />
+                ),
+              },
+              status: {
+                render: () => <SyncStatusV2 item={i} />,
+              },
+              updated: {
+                render: () => (
+                  <ListItem
+                    data={`${updateInfo.author}`}
+                    subtitle={updateInfo.time}
+                  />
+                ),
+              },
+              action: {
+                render: () => <ExtraButton item={i} onAction={onAction} />,
+              },
+            },
+            to: `/${account}/${project}/${id}`,
+          };
+        }),
+      }}
+    />
+  );
+};
+
+const EnvironmentResourcesV2 = ({ items = [] }: { items: BaseType[] }) => {
+  const { account } = useOutletContext<IAccountContext>();
+  const { project } = useOutletContext<IProjectContext>();
+  useWatchReload(
+    items.map((i) => {
+      return `account:${parseName(account)}.project:${parseName(
+        project
+      )}.environment:${parseName(i)}`;
+    })
+  );
+
+  const [visible, setVisible] = useState<BaseType | null>(null);
+  const props: IResource = {
+    items,
+    onAction: ({ action, item }) => {
+      switch (action) {
+        case 'clone':
+          setVisible(item);
+          break;
+        default:
+          break;
+      }
+    },
+  };
+
+  return (
+    <>
+      <ListGridView
+        listView={<ListView {...props} />}
+        gridView={<GridView {...props} />}
+      />
+      <CloneEnvironment
+        {...{
+          isUpdate: true,
+          visible: !!visible,
+          setVisible: () => {
+            setVisible(null);
+          },
+          data: visible!,
+        }}
+      />
+    </>
+  );
+};
+
+export default EnvironmentResourcesV2;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/environments/resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/environments/resources.tsx
index 45d791ef5..a0d606c33 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/environments/resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/environments/resources.tsx
@@ -20,7 +20,6 @@ import {
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
-import { listStatus } from '~/console/components/sync-status';
 import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
@@ -126,7 +125,6 @@ const ListView = ({ items, onAction }: IResource) => {
       {items.map((item, index) => {
         const { name, id, updateInfo } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        const status = listStatus({ key: `${keyPrefix}status`, item });
         return (
           <List.Row
             key={id}
@@ -144,7 +142,6 @@ const ListView = ({ items, onAction }: IResource) => {
                   />
                 ),
               },
-              status,
               listFlex({ key: `${keyPrefix}flex-1` }),
               {
                 key: generateKey(keyPrefix, updateInfo.author),
diff --git a/src/apps/console/routes/_main+/$account+/$project+/environments/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/environments/route.tsx
index 2859256fc..8d045b18b 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/environments/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/environments/route.tsx
@@ -15,8 +15,8 @@ import fake from '~/root/fake-data-generator/fake';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { IEnvironment } from '~/console/server/gql/queries/environment-queries';
-import Resources from './resources';
 import Tools from './tools';
+import EnvironmentResourcesV2 from './environment-resources-v2';
 
 export const loader = async (ctx: IRemixCtx) => {
   ensureAccountSet(ctx);
@@ -100,7 +100,7 @@ const Workspaces = () => {
               }}
               tools={<Tools />}
             >
-              <Resources items={environments || []} />
+              <EnvironmentResourcesV2 items={environments || []} />
             </Wrapper>
           );
         }}
diff --git a/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx b/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx
new file mode 100644
index 000000000..556c07bfa
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx
@@ -0,0 +1,292 @@
+import { PencilSimple, Trash } from '@jengaicons/react';
+import { generateKey, titleCase } from '~/components/utils';
+import {
+  ListItem,
+  ListTitle,
+} from '~/console/components/console-list-components';
+import Grid from '~/console/components/grid';
+import ListGridView from '~/console/components/list-grid-view';
+import {
+  ExtractNodeType,
+  parseName,
+  parseUpdateOrCreatedBy,
+  parseUpdateOrCreatedOn,
+} from '~/console/server/r-utils/common';
+import { IMSvTemplates } from '~/console/server/gql/queries/managed-templates-queries';
+import { getManagedTemplate } from '~/console/utils/commons';
+import DeleteDialog from '~/console/components/delete-dialog';
+import ResourceExtraAction from '~/console/components/resource-extra-action';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { useReload } from '~/root/lib/client/helpers/reloader';
+import { useState } from 'react';
+import { handleError } from '~/root/lib/utils/common';
+import { toast } from '~/components/molecule/toast';
+import { useOutletContext, useParams } from '@remix-run/react';
+import { IProjectMSvs } from '~/console/server/gql/queries/project-managed-services-queries';
+import { SyncStatusV2 } from '~/console/components/sync-status';
+import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
+import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
+import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
+import ListV2 from '~/console/components/listV2';
+import HandleBackendService from './handle-backend-service';
+
+const RESOURCE_NAME = 'managed service';
+type BaseType = ExtractNodeType<IProjectMSvs>;
+
+const parseItem = (item: BaseType, templates: IMSvTemplates) => {
+  const template = getManagedTemplate({
+    templates,
+    kind: item.spec?.msvcSpec?.serviceTemplate.kind || '',
+    apiVersion: item.spec?.msvcSpec?.serviceTemplate.apiVersion || '',
+  });
+  return {
+    name: item?.displayName,
+    id: parseName(item),
+    updateInfo: {
+      author: `Updated by ${titleCase(parseUpdateOrCreatedBy(item))}`,
+      time: parseUpdateOrCreatedOn(item),
+    },
+    logo: template?.logoUrl,
+  };
+};
+
+type OnAction = ({
+  action,
+  item,
+}: {
+  action: 'delete' | 'edit';
+  item: BaseType;
+}) => void;
+
+type IExtraButton = {
+  onAction: OnAction;
+  item: BaseType;
+};
+
+const ExtraButton = ({ onAction, item }: IExtraButton) => {
+  return (
+    <ResourceExtraAction
+      options={[
+        {
+          label: 'Edit',
+          icon: <PencilSimple size={16} />,
+          type: 'item',
+          onClick: () => onAction({ action: 'edit', item }),
+          key: 'edit',
+        },
+        {
+          label: 'Delete',
+          icon: <Trash size={16} />,
+          type: 'item',
+          onClick: () => onAction({ action: 'delete', item }),
+          key: 'delete',
+          className: '!text-text-critical',
+        },
+      ]}
+    />
+  );
+};
+
+interface IResource {
+  items: BaseType[];
+  templates: IMSvTemplates;
+  onAction: OnAction;
+}
+
+const GridView = ({ items = [], templates = [], onAction }: IResource) => {
+  return (
+    <Grid.Root className="!grid-cols-1 md:!grid-cols-3">
+      {items.map((item, index) => {
+        const { name, id, logo, updateInfo } = parseItem(item, templates);
+        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
+        return (
+          <Grid.Column
+            key={id}
+            rows={[
+              {
+                key: generateKey(keyPrefix, name),
+                render: () => (
+                  <ListTitle
+                    title={name}
+                    subtitle={id}
+                    action={<ExtraButton onAction={onAction} item={item} />}
+                    avatar={
+                      <img src={logo} alt={name} className="w-4xl h-4xl" />
+                    }
+                  />
+                ),
+              },
+              {
+                key: generateKey(keyPrefix, 'author'),
+                render: () => (
+                  <ListItem
+                    data={updateInfo.author}
+                    subtitle={updateInfo.time}
+                  />
+                ),
+              },
+            ]}
+          />
+        );
+      })}
+    </Grid.Root>
+  );
+};
+
+const ListView = ({ items = [], templates = [], onAction }: IResource) => {
+  return (
+    <ListV2.Root
+      data={{
+        headers: [
+          {
+            render: () => (
+              <div className="flex flex-row">
+                <span className="w-[48px]" />
+                Name
+              </div>
+            ),
+            name: 'name',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'status',
+            className: 'flex-1 min-w-[30px] flex items-center justify-center',
+          },
+          {
+            render: () => 'Updated',
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'action',
+            className: 'w-[24px]',
+          },
+        ],
+        rows: items.map((i) => {
+          const { name, id, logo, updateInfo } = parseItem(i, templates);
+          return {
+            columns: {
+              name: {
+                render: () => (
+                  <ListTitle
+                    title={name}
+                    subtitle={id}
+                    avatar={
+                      <div className="pulsable pulsable-circle aspect-square">
+                        <img src={logo} alt={name} className="w-4xl h-4xl" />
+                      </div>
+                    }
+                  />
+                ),
+              },
+              status: {
+                render: () => <SyncStatusV2 item={i} />,
+              },
+              updated: {
+                render: () => (
+                  <ListItem
+                    data={`${updateInfo.author}`}
+                    subtitle={updateInfo.time}
+                  />
+                ),
+              },
+              action: {
+                render: () => <ExtraButton item={i} onAction={onAction} />,
+              },
+            },
+          };
+        }),
+      }}
+    />
+  );
+};
+
+const BackendServicesResourcesV2 = ({
+  items = [],
+  templates = [],
+}: {
+  items: BaseType[];
+  templates: IMSvTemplates;
+}) => {
+  const [showDeleteDialog, setShowDeleteDialog] = useState<BaseType | null>(
+    null
+  );
+  const [visible, setVisible] = useState<BaseType | null>(null);
+  const api = useConsoleApi();
+  const reloadPage = useReload();
+  const params = useParams();
+
+  const { account } = useOutletContext<IAccountContext>();
+  const { project } = useOutletContext<IProjectContext>();
+  useWatchReload(
+    items.map((i) => {
+      return `account:${parseName(account)}.project:${parseName(
+        project
+      )}.project_managed_service:${parseName(i)}`;
+    })
+  );
+
+  const props: IResource = {
+    items,
+    templates,
+    onAction: ({ action, item }) => {
+      switch (action) {
+        case 'delete':
+          setShowDeleteDialog(item);
+          break;
+        case 'edit':
+          setVisible(item);
+          break;
+        default:
+          break;
+      }
+    },
+  };
+  return (
+    <>
+      <ListGridView
+        listView={<ListView {...props} />}
+        gridView={<GridView {...props} />}
+      />
+      <DeleteDialog
+        resourceName={parseName(showDeleteDialog)}
+        resourceType={RESOURCE_NAME}
+        show={showDeleteDialog}
+        setShow={setShowDeleteDialog}
+        onSubmit={async () => {
+          if (!params.project) {
+            throw new Error('Project is required!.');
+          }
+          try {
+            const { errors } = await api.deleteProjectMSv({
+              pmsvcName: parseName(showDeleteDialog),
+              projectName: params.project,
+            });
+
+            if (errors) {
+              throw errors[0];
+            }
+            reloadPage();
+            toast.success(`${titleCase(RESOURCE_NAME)} deleted successfully`);
+            setShowDeleteDialog(null);
+          } catch (err) {
+            handleError(err);
+          }
+        }}
+      />
+      <HandleBackendService
+        {...{
+          isUpdate: true,
+          visible: !!visible,
+          setVisible: () => setVisible(null),
+          data: visible!,
+          templates: templates || [],
+        }}
+      />
+    </>
+  );
+};
+
+export default BackendServicesResourcesV2;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources.tsx
index 3f5ab607e..e82ce0fd5 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources.tsx
@@ -26,7 +26,6 @@ import { handleError } from '~/root/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
 import { useOutletContext, useParams } from '@remix-run/react';
 import { IProjectMSvs } from '~/console/server/gql/queries/project-managed-services-queries';
-import { listStatus } from '~/console/components/sync-status';
 import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
 import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
@@ -141,7 +140,6 @@ const ListView = ({ items = [], templates = [], onAction }: IResource) => {
       {items.map((item, index) => {
         const { name, id, logo, updateInfo } = parseItem(item, templates);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        const status = listStatus({ key: `${keyPrefix}status`, item });
         return (
           <List.Row
             key={id}
@@ -162,7 +160,6 @@ const ListView = ({ items = [], templates = [], onAction }: IResource) => {
                   />
                 ),
               },
-              status,
               listFlex({ key: `${keyPrefix}flex-1` }),
               {
                 key: generateKey(keyPrefix, 'author'),
diff --git a/src/apps/console/routes/_main+/$account+/$project+/managed-services/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/managed-services/route.tsx
index 3b34f024c..ebf50082c 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/managed-services/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/managed-services/route.tsx
@@ -9,7 +9,7 @@ import { parseNodes } from '~/console/server/r-utils/common';
 import { IRemixCtx } from '~/root/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
 import Tools from './tools';
-import BackendServicesResources from './backend-services-resources';
+import BackendServicesResourcesV2 from './backend-services-resources-V2';
 
 export const loader = (ctx: IRemixCtx) => {
   const { project } = ctx.params;
@@ -85,7 +85,7 @@ const KlOperatorServices = () => {
             }}
             tools={<Tools />}
           >
-            <BackendServicesResources
+            <BackendServicesResourcesV2
               items={backendServices}
               templates={templatesData}
             />
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources.tsx
index 34a8e0fff..1cf9d6515 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources.tsx
@@ -23,7 +23,6 @@ import { handleError } from '~/root/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
 import { useOutletContext, useParams } from '@remix-run/react';
 import { IHelmCharts } from '~/console/server/gql/queries/helm-chart-queries';
-import { listStatus } from '~/console/components/sync-status';
 import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
 import { IClusterContext } from '~/console/routes/_main+/$account+/infra+/$cluster+/_layout';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
@@ -129,10 +128,6 @@ const ListView = ({ items = [], onAction }: IResource) => {
       {items.map((item, index) => {
         const { name, id, updateInfo } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        const statusRender = listStatus({
-          key: `${keyPrefix}status`,
-          item,
-        });
         return (
           <List.Row
             key={id}
@@ -143,7 +138,6 @@ const ListView = ({ items = [], onAction }: IResource) => {
                 className: 'min-w-[180px] max-w-[180px] w-[180px]',
                 render: () => <ListTitle title={name} subtitle={id} />,
               },
-              statusRender,
               listFlex({ key: 'flex-1' }),
               {
                 key: generateKey(keyPrefix, 'author'),
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
index 64727ac8a..36d4e7f1f 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
@@ -27,7 +27,6 @@ import { useReload } from '~/root/lib/client/helpers/reloader';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { Link, useOutletContext } from '@remix-run/react';
 import { IStatus, listRender } from '~/console/components/commons';
-import { listStatus } from '~/console/components/sync-status';
 import AnimateHide from '~/components/atoms/animate-hide';
 import { ISetState } from '~/console/page-components/app-states';
 import { Button } from '~/components/atoms/button';
@@ -202,12 +201,6 @@ const ListDetail = (
     type: 'nodepool',
   });
 
-  const tempStatus = listStatus({
-    key: keyPrefix,
-    item,
-    className: 'basis-full text-center',
-  });
-
   const isLatest = dayjs(item.updateTime).isAfter(dayjs().subtract(3, 'hour'));
 
   const { state } = useDataState<{
@@ -249,7 +242,7 @@ const ListDetail = (
         )}
 
         <div className="flex items-center w-[20px] mx-xl flex-grow">
-          {tempStatus.render()}
+          {/* {tempStatus.render()} */}
         </div>
         <div className="flex flex-col gap-sm w-[150px] min-w-[150px] border-border-disabled border-x pl-xl mr-xl pr-xl truncate">
           <span className="bodySm text-text-soft pulsable">Size</span>
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
index 7ce59610e..b05cc60f6 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
@@ -1,6 +1,6 @@
 import { GearSix } from '@jengaicons/react';
 import { Link, useOutletContext, useParams } from '@remix-run/react';
-import { cn, generateKey, titleCase } from '~/components/utils';
+import { generateKey, titleCase } from '~/components/utils';
 import { listRender } from '~/console/components/commons';
 import ConsoleAvatar from '~/console/components/console-avatar';
 import {
@@ -11,7 +11,7 @@ import {
 import Grid from '~/console/components/grid';
 import ListGridView from '~/console/components/list-grid-view';
 import ResourceExtraAction from '~/console/components/resource-extra-action';
-import { IStatus, listStatus } from '~/console/components/sync-status';
+import { SyncStatusV2 } from '~/console/components/sync-status';
 import { IClusters } from '~/console/server/gql/queries/cluster-queries';
 import {
   ExtractNodeType,
@@ -24,6 +24,13 @@ import logger from '~/root/lib/client/helpers/log';
 import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import ListV2 from '~/console/components/listV2';
+import AnimateHide from '~/components/atoms/animate-hide';
+import LogComp from '~/root/lib/client/components/logger';
+import LogAction from '~/console/page-components/log-action';
+import { Button } from '~/components/atoms/button';
+import { useDataState } from '~/console/page-components/common-state';
+import { useState } from 'react';
+import { dayjs } from '~/components/molecule/dayjs';
 
 type BaseType = ExtractNodeType<IClusters>;
 const RESOURCE_NAME = 'cluster';
@@ -66,17 +73,10 @@ const parseItem = (item: BaseType) => {
   };
 };
 
-const ExtraButton = ({
-  cluster,
-  status,
-}: {
-  cluster: BaseType;
-  status: IStatus;
-}) => {
+const ExtraButton = ({ cluster }: { cluster: BaseType }) => {
   const { account } = useParams();
   return (
     <ResourceExtraAction
-      disabled={status === 'deleting' || status === 'syncing'}
       options={[
         {
           label: 'Settings',
@@ -144,6 +144,12 @@ const GridView = ({ items }: { items: BaseType[] }) => {
   );
 };
 const ListView = ({ items }: { items: BaseType[] }) => {
+  const [open, setOpen] = useState<string>('');
+  const { state } = useDataState<{
+    linesVisible: boolean;
+    timestampVisible: boolean;
+  }>('logs');
+
   const { account } = useParams();
   return (
     <ListV2.Root
@@ -160,6 +166,11 @@ const ListView = ({ items }: { items: BaseType[] }) => {
             name: 'name',
             className: 'w-[180px]',
           },
+          // {
+          //   render: () => '',
+          //   name: 'logs',
+          //   className: 'w-[180px]',
+          // },
           {
             render: () => '',
             name: 'status',
@@ -184,9 +195,10 @@ const ListView = ({ items }: { items: BaseType[] }) => {
         rows: items.map((i) => {
           const { name, id, updateInfo, provider } = parseItem(i);
 
-          const tempStatus = listStatus({
-            item: i,
-          });
+          // const isLatest = dayjs(i.updateTime).isAfter(
+          //   dayjs().subtract(3, 'hour')
+          // );
+
           return {
             columns: {
               name: {
@@ -198,10 +210,27 @@ const ListView = ({ items }: { items: BaseType[] }) => {
                   />
                 ),
               },
+              // logs: {
+              //   render: () => (
+              //     <Button
+              //       size="sm"
+              //       variant="basic"
+              //       content={open === i.id ? 'Hide Logs' : 'Show Logs'}
+              //       onClick={(e) => {
+              //         e.preventDefault();
+
+              //         setOpen((s) => {
+              //           if (s === i.id) {
+              //             return '';
+              //           }
+              //           return i.id;
+              //         });
+              //       }}
+              //     />
+              //   ),
+              // },
               status: {
-                render: () => (
-                  <div className="inline-block">{tempStatus.render()}</div>
-                ),
+                render: () => null,
               },
               provider: { render: () => <ListItem data={provider} /> },
               updated: {
@@ -213,13 +242,36 @@ const ListView = ({ items }: { items: BaseType[] }) => {
                 ),
               },
               action: {
-                render: () => (
-                  <ExtraButton status={tempStatus.status} cluster={i} />
-                ),
+                render: () => <ExtraButton cluster={i} />,
               },
             },
             to: `/${account}/infra/${id}/overview`,
-            disabled: true,
+            detail: (
+              <AnimateHide
+                onClick={(e) => e.preventDefault()}
+                show={open === i.id}
+                className="w-full flex pt-4xl pb-2xl justify-center items-center"
+              >
+                <LogComp
+                  {...{
+                    hideLineNumber: !state.linesVisible,
+                    hideTimestamp: !state.timestampVisible,
+                    className: 'flex-1',
+                    dark: true,
+                    width: '100%',
+                    height: '40rem',
+                    title: 'Logs',
+                    websocket: {
+                      account: account || '',
+                      cluster: parseName(i),
+                      trackingId: i.id,
+                    },
+                    actionComponent: <LogAction />,
+                  }}
+                />
+              </AnimateHide>
+            ),
+            hideDetailSeperator: true,
           };
         }),
       }}
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
index 2aad085ef..e4aba61e4 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources.tsx
@@ -12,7 +12,6 @@ import Grid from '~/console/components/grid';
 import List from '~/console/components/list';
 import ListGridView from '~/console/components/list-grid-view';
 import ResourceExtraAction from '~/console/components/resource-extra-action';
-import { listStatus } from '~/console/components/sync-status';
 import { IClusters } from '~/console/server/gql/queries/cluster-queries';
 import {
   ExtractNodeType,
@@ -175,12 +174,6 @@ const ListDetail = (
 
   const isLatest = dayjs(item.updateTime).isAfter(dayjs().subtract(3, 'hour'));
 
-  const tempStatus = listStatus({
-    key: keyPrefix,
-    item,
-    className: 'basis-full text-center',
-  });
-
   const { state } = useDataState<{
     linesVisible: boolean;
     timestampVisible: boolean;
@@ -218,7 +211,7 @@ const ListDetail = (
         )}
 
         <div className="flex items-center w-[20px] mx-xl flex-grow">
-          {tempStatus.render()}
+          {/* {tempStatus.render()} */}
         </div>
 
         <div className="pr-3xl w-[180px] min-w-[180px]">
diff --git a/src/apps/console/routes/_main+/$account+/projects/project-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/projects/project-resources-v2.tsx
index 7f89efb27..b70a3bca2 100644
--- a/src/apps/console/routes/_main+/$account+/projects/project-resources-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/projects/project-resources-v2.tsx
@@ -9,7 +9,7 @@ import {
 import Grid from '~/console/components/grid';
 import ListGridView from '~/console/components/list-grid-view';
 import ResourceExtraAction from '~/console/components/resource-extra-action';
-import { listStatus } from '~/console/components/sync-status';
+import { SyncStatusV2 } from '~/console/components/sync-status';
 import { IProjects } from '~/console/server/gql/queries/project-queries';
 import {
   ExtractNodeType,
@@ -112,7 +112,7 @@ const ListView = ({ items }: { items: BaseType[] }) => {
             className: 'w-[180px]',
           },
           {
-            render: () => '',
+            render: () => 'Status',
             name: 'status',
             className: 'flex-1 min-w-[30px] flex items-center justify-center',
           },
@@ -134,11 +134,6 @@ const ListView = ({ items }: { items: BaseType[] }) => {
         ],
         rows: items.map((i) => {
           const { name, id, updateInfo } = parseItem(i);
-          const tempStatus = listStatus({
-            key: '',
-            item: i,
-            className: 'text-center',
-          });
           return {
             columns: {
               name: {
@@ -151,9 +146,7 @@ const ListView = ({ items }: { items: BaseType[] }) => {
                 ),
               },
               status: {
-                render: () => (
-                  <div className="inline-block">{tempStatus.render()}</div>
-                ),
+                render: () => <SyncStatusV2 item={i} />,
               },
               cluster: { render: () => <ListItem data={i.clusterName} /> },
               updated: {
diff --git a/src/apps/console/routes/_main+/$account+/projects/project-resources.tsx b/src/apps/console/routes/_main+/$account+/projects/project-resources.tsx
deleted file mode 100644
index 0b02ec4e4..000000000
--- a/src/apps/console/routes/_main+/$account+/projects/project-resources.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { GearSix } from '@jengaicons/react';
-import { Link, useOutletContext, useParams } from '@remix-run/react';
-import { generateKey, titleCase } from '~/components/utils';
-import ConsoleAvatar from '~/console/components/console-avatar';
-import {
-  ListItem,
-  ListTitle,
-  listClass,
-  listFlex,
-} from '~/console/components/console-list-components';
-import Grid from '~/console/components/grid';
-import List from '~/console/components/list';
-import ListGridView from '~/console/components/list-grid-view';
-import ResourceExtraAction from '~/console/components/resource-extra-action';
-import { listStatus } from '~/console/components/sync-status';
-import { IProjects } from '~/console/server/gql/queries/project-queries';
-import {
-  ExtractNodeType,
-  parseName,
-  parseUpdateOrCreatedBy,
-  parseUpdateOrCreatedOn,
-} from '~/console/server/r-utils/common';
-import { useWatchReload } from '~/root/lib/client/helpers/socket/useWatch';
-import { IAccountContext } from '../_layout';
-
-type BaseType = ExtractNodeType<IProjects>;
-const RESOURCE_NAME = 'project';
-
-const parseItem = (item: ExtractNodeType<IProjects>) => {
-  return {
-    name: item.displayName,
-    id: parseName(item),
-    path: `/projects/${parseName(item)}`,
-    updateInfo: {
-      author: `Updated by ${titleCase(parseUpdateOrCreatedBy(item))}`,
-      time: parseUpdateOrCreatedOn(item),
-    },
-  };
-};
-
-const ExtraButton = ({ project }: { project: BaseType }) => {
-  const { account } = useParams();
-  return (
-    <ResourceExtraAction
-      options={[
-        {
-          label: 'Settings',
-          icon: <GearSix size={16} />,
-          type: 'item',
-
-          to: `/${account}/${parseName(project)}/settings`,
-          key: 'settings',
-        },
-      ]}
-    />
-  );
-};
-
-const GridView = ({ items = [] }: { items: BaseType[] }) => {
-  const { account } = useParams();
-  return (
-    <Grid.Root className="!grid-cols-1 md:!grid-cols-3" linkComponent={Link}>
-      {items.map((item, index) => {
-        const { name, id, updateInfo } = parseItem(item);
-        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        return (
-          <Grid.Column
-            key={id}
-            to={`/${account}/${id}/environments`}
-            rows={[
-              {
-                key: generateKey(keyPrefix, name + id),
-                render: () => (
-                  <ListTitle
-                    title={name}
-                    subtitle={id}
-                    action={<ExtraButton project={item} />}
-                    avatar={<ConsoleAvatar name={id} />}
-                  />
-                ),
-              },
-              {
-                key: generateKey(keyPrefix, updateInfo.author),
-                render: () => (
-                  <ListItem
-                    data={updateInfo.author}
-                    subtitle={updateInfo.time}
-                  />
-                ),
-              },
-            ]}
-          />
-        );
-      })}
-    </Grid.Root>
-  );
-};
-
-const ListView = ({ items }: { items: BaseType[] }) => {
-  const { account } = useParams();
-  return (
-    <List.Root linkComponent={Link}>
-      {items.map((item, index) => {
-        const { name, id, updateInfo } = parseItem(item);
-        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        const status = listStatus({ item, key: `${keyPrefix}status` });
-        return (
-          <List.Row
-            key={id}
-            className="!p-3xl"
-            to={`/${account}/${id}/environments`}
-            columns={[
-              {
-                key: generateKey(keyPrefix, 0),
-                className: listClass.title,
-                render: () => (
-                  <ListTitle
-                    title={name}
-                    subtitle={id}
-                    avatar={<ConsoleAvatar name={id} />}
-                  />
-                ),
-              },
-              status,
-              listFlex({ key: `${keyPrefix}flex` }),
-              {
-                key: generateKey(keyPrefix, item.clusterName || ''),
-                className: '',
-                render: () => (
-                  <div className="flex whitespace-pre items-center gap-md">
-                    <span className="bodyMd-semibold">cluster:</span>{' '}
-                    <span className="bodyMd-medium text-text-soft">
-                      {item.clusterName}
-                    </span>
-                  </div>
-                ),
-              },
-              {
-                key: generateKey(keyPrefix, updateInfo.author),
-                className: listClass.author,
-                render: () => (
-                  <ListItem
-                    data={`${updateInfo.author}`}
-                    subtitle={updateInfo.time}
-                  />
-                ),
-              },
-              {
-                key: generateKey(keyPrefix, 'action'),
-                render: () => <ExtraButton project={item} />,
-              },
-            ]}
-          />
-        );
-      })}
-    </List.Root>
-  );
-};
-
-const ProjectResources = ({ items = [] }: { items: BaseType[] }) => {
-  const { account } = useOutletContext<IAccountContext>();
-  useWatchReload(
-    items.map((i) => {
-      return `account:${parseName(account)}.project:${parseName(i)}`;
-    })
-  );
-  // n account:acc1.project:pro1.environment:env1.
-  return (
-    <ListGridView
-      listView={<ListView items={items} />}
-      gridView={<GridView items={items} />}
-    />
-  );
-};
-
-export default ProjectResources;
diff --git a/src/apps/console/server/gql/queries/cluster-queries.ts b/src/apps/console/server/gql/queries/cluster-queries.ts
index 82d0e9e50..1f109bdfb 100644
--- a/src/apps/console/server/gql/queries/cluster-queries.ts
+++ b/src/apps/console/server/gql/queries/cluster-queries.ts
@@ -100,6 +100,11 @@ export const clusterQueries = (executor: IExecutor) => ({
               updateTime
               status {
                 checks
+                checkList {
+                  description
+                  name
+                  title
+                }
                 isReady
                 lastReadyGeneration
                 lastReconcileTime
@@ -241,6 +246,11 @@ export const clusterQueries = (executor: IExecutor) => ({
           }
           status {
             checks
+            checkList {
+              description
+              name
+              title
+            }
             isReady
             lastReadyGeneration
             lastReconcileTime
diff --git a/src/apps/console/server/gql/queries/environment-queries.ts b/src/apps/console/server/gql/queries/environment-queries.ts
index 91d0a1e80..2e6a8cd72 100644
--- a/src/apps/console/server/gql/queries/environment-queries.ts
+++ b/src/apps/console/server/gql/queries/environment-queries.ts
@@ -63,6 +63,11 @@ export const environmentQueries = (executor: IExecutor) => ({
           }
           status {
             checks
+            checkList {
+              description
+              name
+              title
+            }
             isReady
             lastReadyGeneration
             lastReconcileTime
@@ -183,6 +188,11 @@ export const environmentQueries = (executor: IExecutor) => ({
               }
               status {
                 checks
+                checkList {
+                  description
+                  name
+                  title
+                }
                 isReady
                 lastReadyGeneration
                 lastReconcileTime
diff --git a/src/apps/console/server/gql/queries/project-managed-services-queries.ts b/src/apps/console/server/gql/queries/project-managed-services-queries.ts
index 1d1698e2c..4a6e93a21 100644
--- a/src/apps/console/server/gql/queries/project-managed-services-queries.ts
+++ b/src/apps/console/server/gql/queries/project-managed-services-queries.ts
@@ -84,7 +84,7 @@ export const projectManagedServicesQueries = (executor: IExecutor) => ({
       transformer(data: ConsoleGetProjectMSvQuery) {
         return data.core_getProjectManagedService;
       },
-      vars(_: ConsoleGetProjectMSvQueryVariables) { },
+      vars(_: ConsoleGetProjectMSvQueryVariables) {},
     }
   ),
   createProjectMSv: executor(
@@ -104,7 +104,7 @@ export const projectManagedServicesQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleCreateProjectMSvMutation) =>
         data.core_createProjectManagedService,
-      vars(_: ConsoleCreateProjectMSvMutationVariables) { },
+      vars(_: ConsoleCreateProjectMSvMutationVariables) {},
     }
   ),
   updateProjectMSv: executor(
@@ -124,7 +124,7 @@ export const projectManagedServicesQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleUpdateProjectMSvMutation) =>
         data.core_updateProjectManagedService,
-      vars(_: ConsoleUpdateProjectMSvMutationVariables) { },
+      vars(_: ConsoleUpdateProjectMSvMutationVariables) {},
     }
   ),
   listProjectMSvs: executor(
@@ -215,7 +215,7 @@ export const projectManagedServicesQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleListProjectMSvsQuery) =>
         data.core_listProjectManagedServices,
-      vars(_: ConsoleListProjectMSvsQueryVariables) { },
+      vars(_: ConsoleListProjectMSvsQueryVariables) {},
     }
   ),
   deleteProjectMSv: executor(
@@ -233,7 +233,7 @@ export const projectManagedServicesQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleDeleteProjectMSvMutation) =>
         data.core_deleteProjectManagedService,
-      vars(_: ConsoleDeleteProjectMSvMutationVariables) { },
+      vars(_: ConsoleDeleteProjectMSvMutationVariables) {},
     }
   ),
 });
diff --git a/src/apps/console/server/gql/queries/project-queries.ts b/src/apps/console/server/gql/queries/project-queries.ts
index 0ae6b91c0..5745d8909 100644
--- a/src/apps/console/server/gql/queries/project-queries.ts
+++ b/src/apps/console/server/gql/queries/project-queries.ts
@@ -27,7 +27,7 @@ export const projectQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleDeleteProjectMutation) =>
         data.core_deleteProject,
-      vars(_: ConsoleDeleteProjectMutationVariables) { },
+      vars(_: ConsoleDeleteProjectMutationVariables) {},
     }
   ),
   createProject: executor(
@@ -41,7 +41,7 @@ export const projectQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleCreateProjectMutation) =>
         data.core_createProject,
-      vars(_: ConsoleCreateProjectMutationVariables) { },
+      vars(_: ConsoleCreateProjectMutationVariables) {},
     }
   ),
   updateProject: executor(
@@ -55,7 +55,7 @@ export const projectQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleUpdateProjectMutation) =>
         data.core_updateProject,
-      vars(_: ConsoleUpdateProjectMutationVariables) { },
+      vars(_: ConsoleUpdateProjectMutationVariables) {},
     }
   ),
   getProject: executor(
@@ -90,6 +90,11 @@ export const projectQueries = (executor: IExecutor) => ({
           recordVersion
           status {
             checks
+            checkList {
+              description
+              name
+              title
+            }
             isReady
             lastReadyGeneration
             lastReconcileTime
@@ -117,7 +122,7 @@ export const projectQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleGetProjectQuery) => data.core_getProject,
-      vars(_: ConsoleGetProjectQueryVariables) { },
+      vars(_: ConsoleGetProjectQueryVariables) {},
     }
   ),
   listProjects: executor(
@@ -159,6 +164,11 @@ export const projectQueries = (executor: IExecutor) => ({
               }
               status {
                 checks
+                checkList {
+                  description
+                  name
+                  title
+                }
                 isReady
                 lastReadyGeneration
                 lastReconcileTime
@@ -195,7 +205,7 @@ export const projectQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleListProjectsQuery) => data.core_listProjects,
-      vars(_: ConsoleListProjectsQueryVariables) { },
+      vars(_: ConsoleListProjectsQueryVariables) {},
     }
   ),
 });
diff --git a/src/apps/console/server/gql/queries/router-queries.ts b/src/apps/console/server/gql/queries/router-queries.ts
index 3edccef7a..b94229ec2 100644
--- a/src/apps/console/server/gql/queries/router-queries.ts
+++ b/src/apps/console/server/gql/queries/router-queries.ts
@@ -37,7 +37,7 @@ export const routerQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleCreateRouterMutation) =>
         data.core_createRouter,
-      vars(_: ConsoleCreateRouterMutationVariables) { },
+      vars(_: ConsoleCreateRouterMutationVariables) {},
     }
   ),
   updateRouter: executor(
@@ -59,7 +59,7 @@ export const routerQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleUpdateRouterMutation) =>
         data.core_updateRouter,
-      vars(_: ConsoleUpdateRouterMutationVariables) { },
+      vars(_: ConsoleUpdateRouterMutationVariables) {},
     }
   ),
   deleteRouter: executor(
@@ -79,7 +79,7 @@ export const routerQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleDeleteRouterMutation) =>
         data.core_deleteRouter,
-      vars(_: ConsoleDeleteRouterMutationVariables) { },
+      vars(_: ConsoleDeleteRouterMutationVariables) {},
     }
   ),
   listRouters: executor(
@@ -157,6 +157,11 @@ export const routerQueries = (executor: IExecutor) => ({
               }
               status {
                 checks
+                checkList {
+                  description
+                  name
+                  title
+                }
                 isReady
                 lastReadyGeneration
                 lastReconcileTime
@@ -193,7 +198,7 @@ export const routerQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleListRoutersQuery) => data.core_listRouters,
-      vars(_: ConsoleListRoutersQueryVariables) { },
+      vars(_: ConsoleListRoutersQueryVariables) {},
     }
   ),
   getRouter: executor(
@@ -264,18 +269,12 @@ export const routerQueries = (executor: IExecutor) => ({
           }
           status {
             checks
-            isReady
-            lastReadyGeneration
-            lastReconcileTime
-            message {
-              RawMessage
-            }
-            resources {
-              apiVersion
-              kind
+            checkList {
+              description
               name
-              namespace
+              title
             }
+            isReady
           }
           updateTime
         }
@@ -283,7 +282,7 @@ export const routerQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleGetRouterQuery) => data.core_getRouter,
-      vars(_: ConsoleGetRouterQueryVariables) { },
+      vars(_: ConsoleGetRouterQueryVariables) {},
     }
   ),
 });
diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
index 2114b22cd..e32d8d893 100644
--- a/src/generated/gql/server.ts
+++ b/src/generated/gql/server.ts
@@ -1686,6 +1686,7 @@ export type ConsoleGetProjectQuery = {
       isReady: boolean;
       lastReadyGeneration?: number;
       lastReconcileTime?: any;
+      checkList?: Array<{ description?: string; name: string; title: string }>;
       message?: { RawMessage?: any };
       resources?: Array<{
         apiVersion: string;
@@ -1739,6 +1740,11 @@ export type ConsoleListProjectsQuery = {
           isReady: boolean;
           lastReadyGeneration?: number;
           lastReconcileTime?: any;
+          checkList?: Array<{
+            description?: string;
+            name: string;
+            title: string;
+          }>;
           message?: { RawMessage?: any };
           resources?: Array<{
             apiVersion: string;
@@ -1819,6 +1825,11 @@ export type ConsoleListClustersQuery = {
           isReady: boolean;
           lastReadyGeneration?: number;
           lastReconcileTime?: any;
+          checkList?: Array<{
+            description?: string;
+            name: string;
+            title: string;
+          }>;
           message?: { RawMessage?: any };
           resources?: Array<{
             apiVersion: string;
@@ -1937,6 +1948,7 @@ export type ConsoleGetClusterQuery = {
       isReady: boolean;
       lastReadyGeneration?: number;
       lastReconcileTime?: any;
+      checkList?: Array<{ description?: string; name: string; title: string }>;
       message?: { RawMessage?: any };
       resources?: Array<{
         apiVersion: string;
@@ -2257,6 +2269,7 @@ export type ConsoleGetEnvironmentQuery = {
       isReady: boolean;
       lastReadyGeneration?: number;
       lastReconcileTime?: any;
+      checkList?: Array<{ description?: string; name: string; title: string }>;
       message?: { RawMessage?: any };
       resources?: Array<{
         apiVersion: string;
@@ -2330,6 +2343,11 @@ export type ConsoleListEnvironmentsQuery = {
           isReady: boolean;
           lastReadyGeneration?: number;
           lastReconcileTime?: any;
+          checkList?: Array<{
+            description?: string;
+            name: string;
+            title: string;
+          }>;
           message?: { RawMessage?: any };
           resources?: Array<{
             apiVersion: string;
@@ -2726,6 +2744,11 @@ export type ConsoleListRoutersQuery = {
           isReady: boolean;
           lastReadyGeneration?: number;
           lastReconcileTime?: any;
+          checkList?: Array<{
+            description?: string;
+            name: string;
+            title: string;
+          }>;
           message?: { RawMessage?: any };
           resources?: Array<{
             apiVersion: string;
@@ -2804,15 +2827,7 @@ export type ConsoleGetRouterQuery = {
     status?: {
       checks?: any;
       isReady: boolean;
-      lastReadyGeneration?: number;
-      lastReconcileTime?: any;
-      message?: { RawMessage?: any };
-      resources?: Array<{
-        apiVersion: string;
-        kind: string;
-        name: string;
-        namespace: string;
-      }>;
+      checkList?: Array<{ description?: string; name: string; title: string }>;
     };
   };
 };

From 3e87aaa17af0315be2a66fd636a49c12ca48a887 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Wed, 13 Mar 2024 11:28:54 +0530
Subject: [PATCH 17/66] fix(user-management): update role to displayName

---
 .../user-management/user-access-resource.tsx      | 15 ++++++++++++++-
 .../console/server/gql/queries/router-queries.ts  | 10 +++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/apps/console/routes/_main+/$account+/settings+/user-management/user-access-resource.tsx b/src/apps/console/routes/_main+/$account+/settings+/user-management/user-access-resource.tsx
index 22a64d7af..653030b45 100644
--- a/src/apps/console/routes/_main+/$account+/settings+/user-management/user-access-resource.tsx
+++ b/src/apps/console/routes/_main+/$account+/settings+/user-management/user-access-resource.tsx
@@ -32,6 +32,19 @@ interface IResource {
   onDelete: (item: BaseType) => void;
 }
 
+const mapRoleToDisplayName = (role: string): string => {
+  switch (role) {
+    case 'account_owner':
+      return 'owner';
+    case 'account_member':
+      return 'member';
+    case 'account_admin':
+      return 'admin';
+    default:
+      return role;
+  }
+};
+
 const ExtraButton = ({ onDelete }: { onDelete: () => void }) => {
   return (
     <ResourceExtraAction
@@ -70,7 +83,7 @@ const ListView = ({ items = [], onDelete }: IResource) => {
             },
             {
               key: 2,
-              render: () => <ListBody data={item.role} />,
+              render: () => <ListBody data={mapRoleToDisplayName(item.role)} />,
             },
             {
               key: 3,
diff --git a/src/apps/console/server/gql/queries/router-queries.ts b/src/apps/console/server/gql/queries/router-queries.ts
index 3edccef7a..45fac68a3 100644
--- a/src/apps/console/server/gql/queries/router-queries.ts
+++ b/src/apps/console/server/gql/queries/router-queries.ts
@@ -37,7 +37,7 @@ export const routerQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleCreateRouterMutation) =>
         data.core_createRouter,
-      vars(_: ConsoleCreateRouterMutationVariables) { },
+      vars(_: ConsoleCreateRouterMutationVariables) {},
     }
   ),
   updateRouter: executor(
@@ -59,7 +59,7 @@ export const routerQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleUpdateRouterMutation) =>
         data.core_updateRouter,
-      vars(_: ConsoleUpdateRouterMutationVariables) { },
+      vars(_: ConsoleUpdateRouterMutationVariables) {},
     }
   ),
   deleteRouter: executor(
@@ -79,7 +79,7 @@ export const routerQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleDeleteRouterMutation) =>
         data.core_deleteRouter,
-      vars(_: ConsoleDeleteRouterMutationVariables) { },
+      vars(_: ConsoleDeleteRouterMutationVariables) {},
     }
   ),
   listRouters: executor(
@@ -193,7 +193,7 @@ export const routerQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleListRoutersQuery) => data.core_listRouters,
-      vars(_: ConsoleListRoutersQueryVariables) { },
+      vars(_: ConsoleListRoutersQueryVariables) {},
     }
   ),
   getRouter: executor(
@@ -283,7 +283,7 @@ export const routerQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleGetRouterQuery) => data.core_getRouter,
-      vars(_: ConsoleGetRouterQueryVariables) { },
+      vars(_: ConsoleGetRouterQueryVariables) {},
     }
   ),
 });

From 6ba4fb88b0b58656a13abcd9da5644f0791ba262 Mon Sep 17 00:00:00 2001
From: Mohit Kumar <48203820+nxtcoder36@users.noreply.github.com>
Date: Wed, 13 Mar 2024 13:04:52 +0530
Subject: [PATCH 18/66] KLO-215: Impl/tigger build integration (#138)

* trigger build integration implemented

* minor change
---
 gql-queries-generator/doc/queries.graphql     |  4 ++
 src/apps/console/components/icons.tsx         |  2 +
 .../repo+/$repo+/builds/build-resources.tsx   | 50 +++++++++++++++++--
 .../server/gql/queries/build-queries.ts       | 21 ++++++--
 src/generated/gql/server.ts                   |  6 +++
 5 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
index cde388390..786184517 100644
--- a/gql-queries-generator/doc/queries.graphql
+++ b/gql-queries-generator/doc/queries.graphql
@@ -2007,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 {
diff --git a/src/apps/console/components/icons.tsx b/src/apps/console/components/icons.tsx
index 6bd74f5c6..cfc21e06a 100644
--- a/src/apps/console/components/icons.tsx
+++ b/src/apps/console/components/icons.tsx
@@ -4,6 +4,7 @@ export {
   Plus,
   Trash,
   PencilLine as Pencil,
+  PencilSimple,
   GithubLogoFill,
   GitlabLogoFill,
   GitBranchFill,
@@ -23,6 +24,7 @@ export {
   MinusCircle,
   Search,
   ArrowsCounterClockwise,
+  ArrowClockwise,
   Copy,
   GearSix,
   QrCode,
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/build-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/build-resources.tsx
index f537ff3e2..b61ec068e 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/build-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/build-resources.tsx
@@ -1,4 +1,8 @@
-import { Trash, PencilSimple } from '@jengaicons/react';
+import {
+  Trash,
+  PencilSimple,
+  ArrowClockwise,
+} from '~/console/components/icons';
 import { useState } from 'react';
 import { Badge } from '~/components/atoms/badge';
 import { toast } from '~/components/molecule/toast';
@@ -47,9 +51,10 @@ const parseItem = (item: BaseType) => {
 interface IExtraButton {
   onDelete: () => void;
   onEdit: () => void;
+  onTrigger: () => void;
 }
 
-const ExtraButton = ({ onDelete, onEdit }: IExtraButton) => {
+const ExtraButton = ({ onDelete, onEdit, onTrigger }: IExtraButton) => {
   return (
     <ResourceExtraAction
       options={[
@@ -60,6 +65,17 @@ const ExtraButton = ({ onDelete, onEdit }: IExtraButton) => {
           onClick: onEdit,
           key: 'edit',
         },
+        {
+          label: 'Trigger',
+          icon: <ArrowClockwise size={16} />,
+          type: 'item',
+          onClick: onTrigger,
+          key: 'trigger',
+        },
+        {
+          type: 'separator',
+          key: 'separator1',
+        },
         {
           label: 'Delete',
           icon: <Trash size={16} />,
@@ -77,9 +93,10 @@ interface IResource {
   items: BaseType[];
   onDelete: (item: BaseType) => void;
   onEdit: (item: BaseType) => void;
+  onTrigger: (item: BaseType) => void;
 }
 
-const GridView = ({ items, onDelete, onEdit }: IResource) => {
+const GridView = ({ items, onDelete, onEdit, onTrigger }: IResource) => {
   return (
     <Grid.Root className="!grid-cols-1 md:!grid-cols-3">
       {items.map((item, index) => {
@@ -102,6 +119,9 @@ const GridView = ({ items, onDelete, onEdit }: IResource) => {
                         onEdit={() => {
                           onEdit(item);
                         }}
+                        onTrigger={() => {
+                          onTrigger(item);
+                        }}
                       />
                     }
                   />
@@ -124,7 +144,7 @@ const GridView = ({ items, onDelete, onEdit }: IResource) => {
   );
 };
 
-const ListView = ({ items, onDelete, onEdit }: IResource) => {
+const ListView = ({ items, onDelete, onEdit, onTrigger }: IResource) => {
   return (
     <List.Root>
       {items.map((item, index) => {
@@ -170,6 +190,9 @@ const ListView = ({ items, onDelete, onEdit }: IResource) => {
                     onEdit={() => {
                       onEdit(item);
                     }}
+                    onTrigger={() => {
+                      onTrigger(item);
+                    }}
                   />
                 ),
               },
@@ -197,6 +220,22 @@ const BuildResources = ({ items = [] }: { items: BaseType[] }) => {
     })
   );
 
+  const triggerBuild = async (id: string) => {
+    try {
+      const { errors } = await api.triggerBuild({
+        crTriggerBuildId: id,
+      });
+
+      if (errors) {
+        throw errors[0];
+      }
+      reloadPage();
+      toast.success(`${titleCase(RESOURCE_NAME)} triggered successfully`);
+    } catch (err) {
+      handleError(err);
+    }
+  };
+
   const props: IResource = {
     items,
     onDelete: (item) => {
@@ -205,6 +244,9 @@ const BuildResources = ({ items = [] }: { items: BaseType[] }) => {
     onEdit: (item) => {
       setHandleBuild(item);
     },
+    onTrigger: async (item) => {
+      await triggerBuild(item.id);
+    },
   };
 
   return (
diff --git a/src/apps/console/server/gql/queries/build-queries.ts b/src/apps/console/server/gql/queries/build-queries.ts
index 33e7c8dd7..fe04641dd 100644
--- a/src/apps/console/server/gql/queries/build-queries.ts
+++ b/src/apps/console/server/gql/queries/build-queries.ts
@@ -8,6 +8,8 @@ import {
   ConsoleDeleteBuildMutationVariables,
   ConsoleListBuildsQuery,
   ConsoleListBuildsQueryVariables,
+  ConsoleTriggerBuildMutation,
+  ConsoleTriggerBuildMutationVariables,
   ConsoleUpdateBuildMutation,
   ConsoleUpdateBuildMutationVariables,
 } from '~/root/src/generated/gql/server';
@@ -95,7 +97,7 @@ export const buildQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleListBuildsQuery) => data.cr_listBuilds,
-      vars(_: ConsoleListBuildsQueryVariables) { },
+      vars(_: ConsoleListBuildsQueryVariables) {},
     }
   ),
   createBuild: executor(
@@ -108,7 +110,7 @@ export const buildQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleCreateBuildMutation) => data.cr_addBuild,
-      vars(_: ConsoleCreateBuildMutationVariables) { },
+      vars(_: ConsoleCreateBuildMutationVariables) {},
     }
   ),
   updateBuild: executor(
@@ -121,7 +123,7 @@ export const buildQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleUpdateBuildMutation) => data.cr_updateBuild,
-      vars(_: ConsoleUpdateBuildMutationVariables) { },
+      vars(_: ConsoleUpdateBuildMutationVariables) {},
     }
   ),
   deleteBuild: executor(
@@ -132,7 +134,18 @@ export const buildQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleDeleteBuildMutation) => data.cr_deleteBuild,
-      vars(_: ConsoleDeleteBuildMutationVariables) { },
+      vars(_: ConsoleDeleteBuildMutationVariables) {},
+    }
+  ),
+  triggerBuild: executor(
+    gql`
+      mutation Cr_triggerBuild($crTriggerBuildId: ID!) {
+        cr_triggerBuild(id: $crTriggerBuildId)
+      }
+    `,
+    {
+      transformer: (data: ConsoleTriggerBuildMutation) => data.cr_triggerBuild,
+      vars(_: ConsoleTriggerBuildMutationVariables) {},
     }
   ),
 });
diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
index 387db054d..a2f0026b1 100644
--- a/src/generated/gql/server.ts
+++ b/src/generated/gql/server.ts
@@ -3500,6 +3500,12 @@ export type ConsoleDeleteBuildMutationVariables = Exact<{
 
 export type ConsoleDeleteBuildMutation = { cr_deleteBuild: boolean };
 
+export type ConsoleTriggerBuildMutationVariables = Exact<{
+  crTriggerBuildId: Scalars['ID']['input'];
+}>;
+
+export type ConsoleTriggerBuildMutation = { cr_triggerBuild: boolean };
+
 export type ConsoleListBuildCachesQueryVariables = Exact<{
   pq?: InputMaybe<CursorPaginationIn>;
   search?: InputMaybe<SearchBuildCacheKeys>;

From bbc9d562684f85e943e2b4d31ebf125e2684ce7a Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Wed, 13 Mar 2024 16:35:46 +0530
Subject: [PATCH 19/66] WIP new list and sync status implementation

---
 src/apps/console/components/icons.tsx         |   1 +
 src/apps/console/components/listV2.tsx        |   2 +
 .../console/page-components/new-project.tsx   |   6 +-
 .../managed-resources-resource-v2.tsx}        | 207 ++++++++++--------
 .../$environment+/managed-resources/route.tsx |   7 +-
 .../routers/router-resources-V2.tsx           | 115 ++++++----
 .../infra+/$cluster+/helm-charts/_index.tsx   |  15 +-
 .../helm-charts/handle-helm-chart.tsx         |  48 ++--
 ...ources.tsx => helm-chart-resources-v2.tsx} |  78 ++++---
 .../settings+/domain/domain-resources-v2.tsx  | 171 +++++++++++++++
 .../$cluster+/settings+/domain/route.tsx      |   4 +-
 .../infra+/$cluster+/storage/route.tsx        |   4 +-
 ...resources.tsx => storage-resources-v2.tsx} | 112 ++++++----
 .../infra+/clusters/cluster-resources-v2.tsx  |   5 +-
 14 files changed, 527 insertions(+), 248 deletions(-)
 rename src/apps/console/routes/_main+/$account+/{infra+/$cluster+/settings+/domain/domain-resources.tsx => $project+/$environment+/managed-resources/managed-resources-resource-v2.tsx} (50%)
 rename src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/{helm-chart-resources.tsx => helm-chart-resources-v2.tsx} (80%)
 create mode 100644 src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/domain-resources-v2.tsx
 rename src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/{storage-resources.tsx => storage-resources-v2.tsx} (73%)

diff --git a/src/apps/console/components/icons.tsx b/src/apps/console/components/icons.tsx
index 5e07083cd..5641464d4 100644
--- a/src/apps/console/components/icons.tsx
+++ b/src/apps/console/components/icons.tsx
@@ -1,4 +1,5 @@
 export {
+  Domain,
   ArrowLeftFill as ArrowLeft,
   ArrowRightFill as ArrowRight,
   Plus,
diff --git a/src/apps/console/components/listV2.tsx b/src/apps/console/components/listV2.tsx
index 64e56b58e..69a573279 100644
--- a/src/apps/console/components/listV2.tsx
+++ b/src/apps/console/components/listV2.tsx
@@ -232,6 +232,7 @@ interface IRoot {
       disabled?: boolean;
       detail?: ReactNode;
       hideDetailSeperator?: boolean;
+      onClick?: ((item?: Record<string, IColumn>) => void) | null;
     }>;
     className?: Array<string>;
   };
@@ -305,6 +306,7 @@ const Root = ({
                   disabled={r.disabled}
                   detail={r.detail}
                   hideDetailSeperator={r.hideDetailSeperator}
+                  onClick={r.onClick}
                 />
               ))}
             </div>
diff --git a/src/apps/console/page-components/new-project.tsx b/src/apps/console/page-components/new-project.tsx
index df6f54e03..f79a6ce5e 100644
--- a/src/apps/console/page-components/new-project.tsx
+++ b/src/apps/console/page-components/new-project.tsx
@@ -134,7 +134,7 @@ const NewProject = () => {
                       cluster: clster,
                       render: () => (
                         <div>
-                          {status({ item: clster }) === 'ready' ? (
+                          {true ? (
                             <div className="flex flex-col">
                               <div>{clster.displayName}</div>
                               <div className="bodySm text-text-soft">
@@ -161,8 +161,8 @@ const NewProject = () => {
                     })),
                 ]}
                 onChange={(v) => {
-                  if (status({ item: v.cluster }) === 'ready')
-                    handleChange('clusterName')(dummyEvent(v.value));
+                  // if (status({ item: v.cluster }) === 'ready')
+                  handleChange('clusterName')(dummyEvent(v.value));
                 }}
               />
               <BottomNavigation
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/domain-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource-v2.tsx
similarity index 50%
rename from src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/domain-resources.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource-v2.tsx
index ece1a1a5b..fae6e55c9 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/domain-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource-v2.tsx
@@ -1,44 +1,42 @@
-import { Trash, PencilLine } from '@jengaicons/react';
-import { useState } from 'react';
-import { toast } from '~/components/molecule/toast';
+import { PencilSimple, Trash } from '@jengaicons/react';
 import { generateKey, titleCase } from '~/components/utils';
 import {
-  ListBody,
   ListItem,
   ListTitle,
 } from '~/console/components/console-list-components';
-import DeleteDialog from '~/console/components/delete-dialog';
 import Grid from '~/console/components/grid';
-import List from '~/console/components/list';
 import ListGridView from '~/console/components/list-grid-view';
-import ResourceExtraAction from '~/console/components/resource-extra-action';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { IDomains } from '~/console/server/gql/queries/domain-queries';
 import {
   ExtractNodeType,
   parseName,
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
+import { IMSvTemplates } from '~/console/server/gql/queries/managed-templates-queries';
+import DeleteDialog from '~/console/components/delete-dialog';
+import ResourceExtraAction from '~/console/components/resource-extra-action';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useReload } from '~/root/lib/client/helpers/reloader';
+import { useState } from 'react';
 import { handleError } from '~/root/lib/utils/common';
-import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
+import { toast } from '~/components/molecule/toast';
+import { Link, useParams } from '@remix-run/react';
+import { IManagedResources } from '~/console/server/gql/queries/managed-resources-queries';
+import { Button } from '~/components/atoms/button';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
-import { useOutletContext } from '@remix-run/react';
-import { IClusterContext } from '~/console/routes/_main+/$account+/infra+/$cluster+/_layout';
-import HandleDomain from './handle-domain';
-import DomainDetailPopup from './domain-detail';
+import ListV2 from '~/console/components/listV2';
+import { SyncStatusV2 } from '~/console/components/sync-status';
+import HandleManagedResources from './handle-managed-resource';
 
-const RESOURCE_NAME = 'domain';
-type BaseType = ExtractNodeType<IDomains>;
+const RESOURCE_NAME = 'managed resource';
+type BaseType = ExtractNodeType<IManagedResources>;
 
 const parseItem = (item: BaseType) => {
   return {
-    name: item.displayName,
-    id: item.id,
-    domainName: item.domainName,
+    name: item?.displayName,
+    id: parseName(item),
     updateInfo: {
-      author: `Updated by ${parseUpdateOrCreatedBy(item)}`,
+      author: `Updated by ${titleCase(parseUpdateOrCreatedBy(item))}`,
       time: parseUpdateOrCreatedOn(item),
     },
   };
@@ -48,7 +46,7 @@ type OnAction = ({
   action,
   item,
 }: {
-  action: 'edit' | 'delete' | 'detail';
+  action: 'delete' | 'edit';
   item: BaseType;
 }) => void;
 
@@ -63,7 +61,7 @@ const ExtraButton = ({ onAction, item }: IExtraButton) => {
       options={[
         {
           label: 'Edit',
-          icon: <PencilLine size={16} />,
+          icon: <PencilSimple size={16} />,
           type: 'item',
           onClick: () => onAction({ action: 'edit', item }),
           key: 'edit',
@@ -86,27 +84,28 @@ interface IResource {
   onAction: OnAction;
 }
 
-const GridView = ({ items, onAction }: IResource) => {
+const GridView = ({ items = [], onAction }: IResource) => {
   return (
     <Grid.Root className="!grid-cols-1 md:!grid-cols-3">
       {items.map((item, index) => {
-        const { name, domainName, id, updateInfo } = parseItem(item);
+        const { name, id, updateInfo } = parseItem(item);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
         return (
           <Grid.Column
-            onClick={() => onAction({ action: 'detail', item })}
             key={id}
             rows={[
               {
-                key: generateKey(keyPrefix, name + id),
-                render: () => <ListTitle title={name} />,
-              },
-              {
-                key: generateKey(keyPrefix, domainName),
-                render: () => <ListBody data={domainName} />,
+                key: generateKey(keyPrefix, name),
+                render: () => (
+                  <ListTitle
+                    title={name}
+                    subtitle={id}
+                    action={<ExtraButton onAction={onAction} item={item} />}
+                  />
+                ),
               },
               {
-                key: generateKey(keyPrefix, updateInfo.author),
+                key: generateKey(keyPrefix, 'author'),
                 render: () => (
                   <ListItem
                     data={updateInfo.author}
@@ -122,66 +121,101 @@ const GridView = ({ items, onAction }: IResource) => {
   );
 };
 
-const ListView = ({ items, onAction }: IResource) => {
+const ListView = ({ items = [], onAction }: IResource) => {
+  const { environment, project, account } = useParams();
+  const preUrl = `/${account}/${project}/${environment}/secret/`;
   return (
-    <List.Root>
-      {items.map((item, index) => {
-        const { name, id, domainName, updateInfo } = parseItem(item);
-        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        return (
-          <List.Row
-            onClick={() => onAction({ action: 'detail', item })}
-            key={id}
-            className="!p-3xl"
-            columns={[
-              {
-                key: generateKey(keyPrefix, name + id),
-                render: () => <ListTitle title={name} />,
+    <ListV2.Root
+      data={{
+        headers: [
+          {
+            render: () => 'Name',
+            name: 'name',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'secret',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => 'Status',
+            name: 'status',
+            className: 'flex-1 min-w-[30px] flex items-center justify-center',
+          },
+          {
+            render: () => 'Updated',
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'action',
+            className: 'w-[24px]',
+          },
+        ],
+        rows: items.map((i) => {
+          const { name, id, updateInfo } = parseItem(i);
+          return {
+            columns: {
+              name: {
+                render: () => <ListTitle title={name} subtitle={id} />,
               },
-              {
-                key: generateKey(keyPrefix, 'flex-1'),
-                className: 'flex-grow',
-                render: () => <div />,
+              secret: {
+                render: () =>
+                  i.syncedOutputSecretRef ? (
+                    <Button
+                      content="View secrets"
+                      variant="plain"
+                      LinkComponent={Link}
+                      to={`${preUrl}${i.syncedOutputSecretRef?.metadata?.name}`}
+                    />
+                  ) : null,
               },
-              {
-                key: generateKey(keyPrefix, domainName),
-                className: 'w-[300px] text-start',
-                render: () => <ListBody data={domainName} />,
+              status: {
+                render: () => <SyncStatusV2 item={i} />,
               },
-              {
-                key: generateKey(keyPrefix, updateInfo.author),
-                className: 'w-[180px]',
+              updated: {
                 render: () => (
                   <ListItem
-                    data={updateInfo.author}
+                    data={`${updateInfo.author}`}
                     subtitle={updateInfo.time}
                   />
                 ),
               },
-            ]}
-          />
-        );
-      })}
-    </List.Root>
+              action: {
+                render: () => <ExtraButton item={i} onAction={onAction} />,
+              },
+            },
+          };
+        }),
+      }}
+    />
   );
 };
 
-const DomainResources = ({ items = [] }: { items: BaseType[] }) => {
+const ManagedResourceResourcesV2 = ({
+  items = [],
+  templates = [],
+}: {
+  items: BaseType[];
+  templates: IMSvTemplates;
+}) => {
   const [showDeleteDialog, setShowDeleteDialog] = useState<BaseType | null>(
     null
   );
   const [visible, setVisible] = useState<BaseType | null>(null);
-  const [domainDetail, setDomainDetail] = useState<BaseType | null>(null);
   const api = useConsoleApi();
   const reloadPage = useReload();
+  const params = useParams();
+
+  const { environment, project, account } = useParams();
 
-  const { account } = useOutletContext<IAccountContext>();
-  const { cluster } = useOutletContext<IClusterContext>();
   useWatchReload(
     items.map((i) => {
-      return `account:${parseName(account)}.cluster:${parseName(
-        cluster
-      )}.domain_entries:${i.domainName}`;
+      return `account:${account}.project:${project}.environment:${environment}.managed_resource:${parseName(
+        i
+      )}`;
     })
   );
 
@@ -189,16 +223,14 @@ const DomainResources = ({ items = [] }: { items: BaseType[] }) => {
     items,
     onAction: ({ action, item }) => {
       switch (action) {
-        case 'edit':
-          setVisible(item);
-          break;
         case 'delete':
           setShowDeleteDialog(item);
           break;
-        case 'detail':
-          setDomainDetail(item);
+        case 'edit':
+          setVisible(item);
           break;
         default:
+          break;
       }
     },
   };
@@ -209,14 +241,19 @@ const DomainResources = ({ items = [] }: { items: BaseType[] }) => {
         gridView={<GridView {...props} />}
       />
       <DeleteDialog
-        resourceName={showDeleteDialog?.displayName}
+        resourceName={parseName(showDeleteDialog)}
         resourceType={RESOURCE_NAME}
         show={showDeleteDialog}
         setShow={setShowDeleteDialog}
         onSubmit={async () => {
+          if (!params.project || !params.environment) {
+            throw new Error('Project and Environment is required!.');
+          }
           try {
-            const { errors } = await api.deleteDomain({
-              domainName: showDeleteDialog!.domainName,
+            const { errors } = await api.deleteManagedResource({
+              mresName: parseName(showDeleteDialog),
+              envName: params.environment,
+              projectName: params.project,
             });
 
             if (errors) {
@@ -230,23 +267,17 @@ const DomainResources = ({ items = [] }: { items: BaseType[] }) => {
           }
         }}
       />
-      <HandleDomain
+      <HandleManagedResources
         {...{
           isUpdate: true,
-          data: visible!,
           visible: !!visible,
           setVisible: () => setVisible(null),
-        }}
-      />
-      <DomainDetailPopup
-        {...{
-          visible: !!domainDetail,
-          setVisible: () => setDomainDetail(null),
-          data: domainDetail!,
+          data: visible!,
+          templates: templates || [],
         }}
       />
     </>
   );
 };
 
-export default DomainResources;
+export default ManagedResourceResourcesV2;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/route.tsx
index 1e794085f..55f153307 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/route.tsx
@@ -9,7 +9,7 @@ import { parseNodes } from '~/console/server/r-utils/common';
 import { IRemixCtx } from '~/root/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
 import Tools from './tools';
-import ManagedResourceResources from './managed-resources-resource';
+import ManagedResourceResourcesV2 from './managed-resources-resource-v2';
 
 export const loader = (ctx: IRemixCtx) => {
   const { project, environment } = ctx.params;
@@ -75,7 +75,10 @@ const KlOperatorServices = () => {
             }}
             tools={<Tools />}
           >
-            <ManagedResourceResources items={managedResources} templates={[]} />
+            <ManagedResourceResourcesV2
+              items={managedResources}
+              templates={[]}
+            />
           </Wrapper>
         );
       }}
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx
index 3d24981d2..cf023dc0d 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx
@@ -183,18 +183,19 @@ const ListView = ({ items, onAction }: IResource) => {
           {
             render: () => 'Name',
             name: 'name',
-            className: 'w-[180px]',
+            className: 'w-[180px] shrink-0',
           },
           {
             render: () => 'Status',
             name: 'status',
-            className: 'flex-1 min-w-[30px] flex items-center justify-center',
+            className:
+              'lg:flex-1 min-w-[80px] flex items-center lg:justify-center shrink-0',
           },
 
           {
             render: () => 'Domains',
             name: 'domains',
-            className: 'w-[250px]',
+            className: 'min-w-[280px] max-w-[280px] lg:max-w-none lg:flex-1',
           },
           {
             render: () => 'Updated',
@@ -220,12 +221,16 @@ const ListView = ({ items, onAction }: IResource) => {
               },
               domains: {
                 render: () => (
-                  <ListItem
-                    data={
-                      <div className="flex flex-row items-center gap-md">
+                  <div className="flex flex-row items-center gap-md">
+                    <Tooltip.Root
+                      content={
                         <Button
                           size="sm"
-                          content={formatDomain(firstDomain).short}
+                          content={
+                            <span className="text-left">
+                              {formatDomain(firstDomain).short}
+                            </span>
+                          }
                           variant="primary-plain"
                           className="!pl-0"
                           onClick={(e) => {
@@ -237,42 +242,66 @@ const ListView = ({ items, onAction }: IResource) => {
                             );
                           }}
                         />
-
-                        {i.spec.domains.length > 1 && (
-                          <Tooltip.Root
-                            content={
-                              <div className="flex flex-col gap-md">
-                                {i.spec.domains
-                                  .filter((d) => d !== firstDomain)
-                                  .map((d) => (
-                                    <Button
-                                      key={d}
-                                      size="sm"
-                                      content={formatDomain(d).short}
-                                      variant="primary-plain"
-                                      onClick={(e) => {
-                                        e.preventDefault();
-                                        window.open(
-                                          formatDomain(d).full,
-                                          '_blank',
-                                          'noopener,noreferrer'
-                                        );
-                                      }}
-                                    />
-                                  ))}
-                              </div>
-                            }
-                          >
-                            <Button
-                              content={`+${i.spec.domains.length - 1} more`}
-                              variant="plain"
-                              size="sm"
-                            />
-                          </Tooltip.Root>
-                        )}
-                      </div>
-                    }
-                  />
+                      }
+                    >
+                      <Button
+                        size="sm"
+                        content={
+                          <span className="truncate text-left">
+                            {formatDomain(firstDomain).short}
+                          </span>
+                        }
+                        variant="primary-plain"
+                        className="truncate"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          window.open(
+                            formatDomain(firstDomain).full,
+                            '_blank',
+                            'noopener,noreferrer'
+                          );
+                        }}
+                      />
+                    </Tooltip.Root>
+                    {i.spec.domains.length > 1 && (
+                      <Tooltip.Root
+                        content={
+                          <div className="flex flex-col gap-md">
+                            {i.spec.domains
+                              .filter((d) => d !== firstDomain)
+                              .map((d) => (
+                                <Button
+                                  key={d}
+                                  size="sm"
+                                  content={
+                                    <span className="text-left">
+                                      {formatDomain(d).short}
+                                    </span>
+                                  }
+                                  variant="primary-plain"
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    window.open(
+                                      formatDomain(d).full,
+                                      '_blank',
+                                      'noopener,noreferrer'
+                                    );
+                                  }}
+                                />
+                              ))}
+                          </div>
+                        }
+                      >
+                        <div className="shrink-0">
+                          <Button
+                            content={`+${i.spec.domains.length - 1} more`}
+                            variant="plain"
+                            size="sm"
+                          />
+                        </div>
+                      </Tooltip.Root>
+                    )}
+                  </div>
                 ),
               },
               updated: {
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
index 5de217bb9..423a8e15f 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
@@ -8,10 +8,10 @@ import Wrapper from '~/console/components/wrapper';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { parseNodes } from '~/console/server/r-utils/common';
 import { IRemixCtx } from '~/root/lib/types/common';
+import fake from '~/root/fake-data-generator/fake';
 import Tools from './tools';
-import HelmChartResources from './helm-chart-resources';
 import HandleHelmChart from './handle-helm-chart';
-import fake from "~/root/fake-data-generator/fake";
+import HelmChartResourcesV2 from './helm-chart-resources-v2';
 
 export const loader = (ctx: IRemixCtx) => {
   const { cluster } = ctx.params;
@@ -38,10 +38,11 @@ const HelmCharts = () => {
   return (
     <>
       <LoadingComp
-          data={promise}
-          skeletonData={{
-            helmChartData: fake.ConsoleListHelmChartQuery.infra_listHelmReleases as any,
-          }}
+        data={promise}
+        skeletonData={{
+          helmChartData: fake.ConsoleListHelmChartQuery
+            .infra_listHelmReleases as any,
+        }}
       >
         {({ helmChartData }) => {
           const helmCharts = parseNodes(helmChartData);
@@ -80,7 +81,7 @@ const HelmCharts = () => {
               }}
               tools={<Tools />}
             >
-              <HelmChartResources items={helmCharts} />
+              <HelmChartResourcesV2 items={helmCharts} />
             </Wrapper>
           );
         }}
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
index fab57ded2..f29abfaa8 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
@@ -273,26 +273,26 @@ const Root = (props: IDialog) => {
     useForm({
       initialValues: !isUpdate
         ? {
-          displayName: '',
-          name: '',
-          namespace: '',
-          chartName: '',
-          chartRepoURL: '',
-          values: '',
-          isNameError: false,
-        }
+            displayName: '',
+            name: '',
+            namespace: '',
+            chartName: '',
+            chartRepoURL: '',
+            values: '',
+            isNameError: false,
+          }
         : {
-          isNameError: false,
-          displayName: props.data.displayName,
-          name: props.data.metadata?.name || '',
-          values:
-            Object.keys(props.data.spec?.values).length > 0
-              ? yaml.dump(props.data.spec?.values)
-              : '',
-          namespace: props.data.metadata?.namespace,
-          chartName: props.data.spec?.chartName,
-          chartRepoURL: props.data.spec?.chartRepoURL,
-        },
+            isNameError: false,
+            displayName: props.data.displayName,
+            name: props.data.metadata?.name || '',
+            values:
+              Object.keys(props.data.spec?.values).length > 0
+                ? yaml.dump(props.data.spec?.values)
+                : '',
+            namespace: props.data.metadata?.namespace,
+            chartName: props.data.spec?.chartName,
+            chartRepoURL: props.data.spec?.chartRepoURL,
+          },
       validationSchema: Yup.object({
         displayName: Yup.string().required(),
         name: Yup.string().required(),
@@ -425,11 +425,11 @@ const Root = (props: IDialog) => {
               options={async () =>
                 isUpdate
                   ? [
-                    {
-                      label: values.namespace || '',
-                      value: values.namespace || '',
-                    },
-                  ]
+                      {
+                        label: values.namespace || '',
+                        value: values.namespace || '',
+                      },
+                    ]
                   : namespaces
               }
               value={values.namespace}
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources-v2.tsx
similarity index 80%
rename from src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources.tsx
rename to src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources-v2.tsx
index 1cf9d6515..b8709ede1 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/helm-chart-resources-v2.tsx
@@ -1,12 +1,10 @@
 import { PencilSimple, Trash } from '@jengaicons/react';
 import { generateKey, titleCase } from '~/components/utils';
 import {
-  listFlex,
   ListItem,
   ListTitle,
 } from '~/console/components/console-list-components';
 import Grid from '~/console/components/grid';
-import List from '~/console/components/list';
 import ListGridView from '~/console/components/list-grid-view';
 import {
   ExtractNodeType,
@@ -26,6 +24,8 @@ import { IHelmCharts } from '~/console/server/gql/queries/helm-chart-queries';
 import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
 import { IClusterContext } from '~/console/routes/_main+/$account+/infra+/$cluster+/_layout';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
+import ListV2 from '~/console/components/listV2';
+import { SyncStatusV2 } from '~/console/components/sync-status';
 import HandleHelmChart from './handle-helm-chart';
 
 const RESOURCE_NAME = 'helm chart';
@@ -124,24 +124,47 @@ const GridView = ({ items = [], onAction }: IResource) => {
 
 const ListView = ({ items = [], onAction }: IResource) => {
   return (
-    <List.Root>
-      {items.map((item, index) => {
-        const { name, id, updateInfo } = parseItem(item);
-        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        return (
-          <List.Row
-            key={id}
-            className="!p-3xl"
-            columns={[
-              {
-                key: generateKey(keyPrefix, name),
-                className: 'min-w-[180px] max-w-[180px] w-[180px]',
+    <ListV2.Root
+      data={{
+        headers: [
+          {
+            render: () => (
+              <div className="flex flex-row">
+                <span className="w-[32px]" />
+                Name
+              </div>
+            ),
+            name: 'name',
+            className: 'w-[300px]',
+          },
+          {
+            render: () => 'Status',
+            name: 'status',
+            className: 'flex-1 min-w-[30px] flex items-center justify-center',
+          },
+          {
+            render: () => 'Updated',
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'action',
+            className: 'w-[24px]',
+          },
+        ],
+        rows: items.map((i) => {
+          const { name, id, updateInfo } = parseItem(i);
+          return {
+            columns: {
+              name: {
                 render: () => <ListTitle title={name} subtitle={id} />,
               },
-              listFlex({ key: 'flex-1' }),
-              {
-                key: generateKey(keyPrefix, 'author'),
-                className: 'w-[180px]',
+
+              status: {
+                render: () => <SyncStatusV2 item={i} />,
+              },
+              updated: {
                 render: () => (
                   <ListItem
                     data={updateInfo.author}
@@ -149,19 +172,18 @@ const ListView = ({ items = [], onAction }: IResource) => {
                   />
                 ),
               },
-              {
-                key: generateKey(keyPrefix, 'action'),
-                render: () => <ExtraButton onAction={onAction} item={item} />,
+              action: {
+                render: () => <ExtraButton item={i} onAction={onAction} />,
               },
-            ]}
-          />
-        );
-      })}
-    </List.Root>
+            },
+          };
+        }),
+      }}
+    />
   );
 };
 
-const HelmChartResources = ({ items = [] }: { items: BaseType[] }) => {
+const HelmChartResourcesV2 = ({ items = [] }: { items: BaseType[] }) => {
   const [showDeleteDialog, setShowDeleteDialog] = useState<BaseType | null>(
     null
   );
@@ -236,4 +258,4 @@ const HelmChartResources = ({ items = [] }: { items: BaseType[] }) => {
   );
 };
 
-export default HelmChartResources;
+export default HelmChartResourcesV2;
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/domain-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/domain-resources-v2.tsx
new file mode 100644
index 000000000..a6a335bdb
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/domain-resources-v2.tsx
@@ -0,0 +1,171 @@
+import { useState } from 'react';
+import { generateKey } from '~/components/utils';
+import {
+  ListBody,
+  ListItem,
+  ListTitle,
+} from '~/console/components/console-list-components';
+import Grid from '~/console/components/grid';
+import ListGridView from '~/console/components/list-grid-view';
+import { IDomains } from '~/console/server/gql/queries/domain-queries';
+import {
+  ExtractNodeType,
+  parseName,
+  parseUpdateOrCreatedBy,
+  parseUpdateOrCreatedOn,
+} from '~/console/server/r-utils/common';
+import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
+import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
+import { useOutletContext } from '@remix-run/react';
+import { IClusterContext } from '~/console/routes/_main+/$account+/infra+/$cluster+/_layout';
+import ListV2 from '~/console/components/listV2';
+import { Domain } from '~/console/components/icons';
+import DomainDetailPopup from './domain-detail';
+
+const RESOURCE_NAME = 'domain';
+type BaseType = ExtractNodeType<IDomains>;
+
+const parseItem = (item: BaseType) => {
+  return {
+    name: item.displayName,
+    id: item.id,
+    domainName: item.domainName,
+    updateInfo: {
+      author: `Updated by ${parseUpdateOrCreatedBy(item)}`,
+      time: parseUpdateOrCreatedOn(item),
+    },
+  };
+};
+
+type OnAction = ({
+  action,
+  item,
+}: {
+  action: 'detail';
+  item: BaseType;
+}) => void;
+
+interface IResource {
+  items: BaseType[];
+  onAction: OnAction;
+}
+
+const GridView = ({ items, onAction }: IResource) => {
+  return (
+    <Grid.Root className="!grid-cols-1 md:!grid-cols-3">
+      {items.map((item, index) => {
+        const { name, domainName, id, updateInfo } = parseItem(item);
+        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
+        return (
+          <Grid.Column
+            onClick={() => onAction({ action: 'detail', item })}
+            key={id}
+            rows={[
+              {
+                key: generateKey(keyPrefix, name + id),
+                render: () => <ListTitle title={name} />,
+              },
+              {
+                key: generateKey(keyPrefix, domainName),
+                render: () => <ListBody data={domainName} />,
+              },
+              {
+                key: generateKey(keyPrefix, updateInfo.author),
+                render: () => (
+                  <ListItem
+                    data={updateInfo.author}
+                    subtitle={updateInfo.time}
+                  />
+                ),
+              },
+            ]}
+          />
+        );
+      })}
+    </Grid.Root>
+  );
+};
+
+const ListView = ({ items, onAction }: IResource) => {
+  return (
+    <ListV2.Root
+      data={{
+        headers: [
+          {
+            render: () => 'Name',
+            name: 'name',
+            className: 'min-w-[180px] flex-1',
+          },
+          {
+            render: () => 'Updated',
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+        ],
+        rows: items.map((i) => {
+          const { domainName, updateInfo } = parseItem(i);
+
+          return {
+            columns: {
+              name: {
+                render: () => <ListTitle title={domainName} />,
+              },
+              updated: {
+                render: () => (
+                  <ListItem
+                    data={`${updateInfo.author}`}
+                    subtitle={updateInfo.time}
+                  />
+                ),
+              },
+            },
+            onClick: () => onAction({ action: 'detail', item: i }),
+          };
+        }),
+      }}
+    />
+  );
+};
+
+const DomainResourcesV2 = ({ items = [] }: { items: BaseType[] }) => {
+  const [domainDetail, setDomainDetail] = useState<BaseType | null>(null);
+
+  const { account } = useOutletContext<IAccountContext>();
+  const { cluster } = useOutletContext<IClusterContext>();
+  useWatchReload(
+    items.map((i) => {
+      return `account:${parseName(account)}.cluster:${parseName(
+        cluster
+      )}.domain_entries:${i.domainName}`;
+    })
+  );
+
+  const props: IResource = {
+    items,
+    onAction: ({ action, item }) => {
+      switch (action) {
+        case 'detail':
+          setDomainDetail(item);
+          break;
+        default:
+      }
+    },
+  };
+  return (
+    <>
+      <ListGridView
+        listView={<ListView {...props} />}
+        gridView={<GridView {...props} />}
+      />
+      <DomainDetailPopup
+        {...{
+          visible: !!domainDetail,
+          setVisible: () => setDomainDetail(null),
+          data: domainDetail!,
+        }}
+      />
+    </>
+  );
+};
+
+export default DomainResourcesV2;
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/route.tsx
index 52cac5f59..9781766ce 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/settings+/domain/route.tsx
@@ -9,9 +9,9 @@ import { getPagination, getSearch } from '~/console/server/utils/common';
 import logger from '~/root/lib/client/helpers/log';
 import { IRemixCtx } from '~/root/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
-import DomainResources from './domain-resources';
 import HandleDomain from './handle-domain';
 import Tools from './tools';
+import DomainResourcesV2 from './domain-resources-v2';
 
 export const loader = async (ctx: IRemixCtx) => {
   const promise = pWrapper(async () => {
@@ -78,7 +78,7 @@ const Domain = () => {
               }}
               tools={<Tools />}
             >
-              <DomainResources items={domains} />
+              <DomainResourcesV2 items={domains} />
             </Wrapper>
           );
         }}
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/route.tsx
index ec9e0c682..f56ef4b2f 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/route.tsx
@@ -11,7 +11,7 @@ import { IRemixCtx } from '~/root/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
 import { getPagination, getSearch } from '~/console/server/utils/common';
 import Tools from './tools';
-import StorageResources from './storage-resources';
+import StorageResourcesV2 from './storage-resources-v2';
 
 export const loader = async (ctx: IRemixCtx) => {
   ensureAccountSet(ctx);
@@ -65,7 +65,7 @@ const ClusterStorage = () => {
             }}
             tools={<Tools />}
           >
-            <StorageResources items={storages} />
+            <StorageResourcesV2 items={storages} />
           </Wrapper>
         );
       }}
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources-v2.tsx
similarity index 73%
rename from src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx
rename to src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources-v2.tsx
index 078d120d0..e50738813 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources-v2.tsx
@@ -1,11 +1,10 @@
 import { generateKey, titleCase } from '~/components/utils';
 import {
   ListBody,
-  ListSecondary,
+  ListItem,
   ListTitle,
 } from '~/console/components/console-list-components';
 import Grid from '~/console/components/grid';
-import List from '~/console/components/list';
 import ListGridView from '~/console/components/list-grid-view';
 import {
   ExtractNodeType,
@@ -24,6 +23,7 @@ import { useReload } from '~/root/lib/client/helpers/reloader';
 import { handleError } from '~/root/lib/utils/common';
 import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
+import ListV2 from '~/console/components/listV2';
 
 const RESOURCE_NAME = 'storage';
 type BaseType = ExtractNodeType<IPvs>;
@@ -88,7 +88,13 @@ const GridView = ({ items, onAction }: IResource) => {
             rows={[
               {
                 key: generateKey(keyPrefix, name + id),
-                render: () => <ListTitle title={name} subtitle={id} />,
+                render: () => (
+                  <ListTitle
+                    title={name}
+                    subtitle={id}
+                    action={<ExtraButton item={item} onAction={onAction} />}
+                  />
+                ),
               },
               {
                 key: generateKey(keyPrefix, 'time'),
@@ -102,21 +108,48 @@ const GridView = ({ items, onAction }: IResource) => {
   );
 };
 
-const ListView = ({ items, onAction }: IResource) => {
+const ListView = ({ items = [], onAction }: IResource) => {
   return (
-    <List.Root>
-      {items.map((item, index) => {
-        const { name, id, updateInfo, storage, storageClass, phase } =
-          parseItem(item);
-        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        return (
-          <List.Row
-            key={id}
-            className="!p-3xl"
-            columns={[
-              {
-                key: generateKey(keyPrefix, name + id),
-                className: 'w-[180px] min-w-[180px] max-w-[180px]',
+    <ListV2.Root
+      data={{
+        headers: [
+          {
+            render: () => (
+              <div className="flex flex-row">
+                <span className="w-[32px]" />
+                Name
+              </div>
+            ),
+            name: 'name',
+            className: 'w-[300px]',
+          },
+          {
+            render: () => 'Phase',
+            name: 'phase',
+            className: 'w-[180px] ml-[20px]',
+          },
+          {
+            render: () => '',
+            name: 'flex',
+            className: 'flex-1',
+          },
+          {
+            render: () => 'Updated',
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'action',
+            className: 'w-[24px]',
+          },
+        ],
+        rows: items.map((i) => {
+          const { name, updateInfo, storage, storageClass, phase } =
+            parseItem(i);
+          return {
+            columns: {
+              name: {
                 render: () => (
                   <ListTitle
                     title={name}
@@ -137,39 +170,28 @@ const ListView = ({ items, onAction }: IResource) => {
                   />
                 ),
               },
-              {
-                key: generateKey(keyPrefix, 'flex-1'),
-                className: 'flex-grow',
-                render: () => <div />,
+              phase: {
+                render: () => <ListItem data={phase} />,
               },
-              {
-                key: generateKey(keyPrefix, 'phase'),
-                className: 'flex-grow',
-                render: () => <ListSecondary title="Phase" subtitle={phase} />,
+              flex: {
+                render: () => null,
               },
-              {
-                key: generateKey(keyPrefix, 'flex-2'),
-                className: 'flex-grow',
-                render: () => <div />,
-              },
-              {
-                key: generateKey(keyPrefix, 'time'),
-                className: 'max-w-[180px] w-[180px]',
-                render: () => <ListBody data={`Updated ${updateInfo.time}`} />,
+              updated: {
+                render: () => (
+                  <ListItem subtitle={`Updated ${updateInfo.time}`} />
+                ),
               },
-              {
-                key: generateKey(keyPrefix, 'action'),
-                render: () => <ExtraButton onAction={onAction} item={item} />,
+              action: {
+                render: () => <ExtraButton item={i} onAction={onAction} />,
               },
-            ]}
-          />
-        );
-      })}
-    </List.Root>
+            },
+          };
+        }),
+      }}
+    />
   );
 };
-
-const StorageResources = ({ items = [] }: { items: BaseType[] }) => {
+const StorageResourcesV2 = ({ items = [] }: { items: BaseType[] }) => {
   const [showDeleteDialog, setShowDeleteDialog] = useState<BaseType | null>(
     null
   );
@@ -236,4 +258,4 @@ const StorageResources = ({ items = [] }: { items: BaseType[] }) => {
   );
 };
 
-export default StorageResources;
+export default StorageResourcesV2;
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
index b05cc60f6..0840ad026 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
@@ -11,7 +11,6 @@ import {
 import Grid from '~/console/components/grid';
 import ListGridView from '~/console/components/list-grid-view';
 import ResourceExtraAction from '~/console/components/resource-extra-action';
-import { SyncStatusV2 } from '~/console/components/sync-status';
 import { IClusters } from '~/console/server/gql/queries/cluster-queries';
 import {
   ExtractNodeType,
@@ -27,10 +26,8 @@ import ListV2 from '~/console/components/listV2';
 import AnimateHide from '~/components/atoms/animate-hide';
 import LogComp from '~/root/lib/client/components/logger';
 import LogAction from '~/console/page-components/log-action';
-import { Button } from '~/components/atoms/button';
 import { useDataState } from '~/console/page-components/common-state';
 import { useState } from 'react';
-import { dayjs } from '~/components/molecule/dayjs';
 
 type BaseType = ExtractNodeType<IClusters>;
 const RESOURCE_NAME = 'cluster';
@@ -172,7 +169,7 @@ const ListView = ({ items }: { items: BaseType[] }) => {
           //   className: 'w-[180px]',
           // },
           {
-            render: () => '',
+            render: () => 'Status',
             name: 'status',
             className: 'flex-1 min-w-[30px] flex items-center justify-center',
           },

From 88fff190b3f74e97a584a218675fdc3fe991f845 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Wed, 13 Mar 2024 17:32:26 +0530
Subject: [PATCH 20/66] fix(user-management): - user can edit role for members
 - only remove button will require for pending invitations

---
 .../infra+/$cluster+/helm-charts/_index.tsx   |  11 +-
 .../settings+/user-management/handle-user.tsx | 166 ++++++++++--------
 .../settings+/user-management/route.tsx       |  26 ++-
 .../user-management/user-access-resource.tsx  | 138 +++++++++++----
 4 files changed, 215 insertions(+), 126 deletions(-)

diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
index 5de217bb9..ec6e73341 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
@@ -8,10 +8,10 @@ import Wrapper from '~/console/components/wrapper';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { parseNodes } from '~/console/server/r-utils/common';
 import { IRemixCtx } from '~/root/lib/types/common';
+import fake from '~/root/fake-data-generator/fake';
 import Tools from './tools';
 import HelmChartResources from './helm-chart-resources';
 import HandleHelmChart from './handle-helm-chart';
-import fake from "~/root/fake-data-generator/fake";
 
 export const loader = (ctx: IRemixCtx) => {
   const { cluster } = ctx.params;
@@ -38,10 +38,11 @@ const HelmCharts = () => {
   return (
     <>
       <LoadingComp
-          data={promise}
-          skeletonData={{
-            helmChartData: fake.ConsoleListHelmChartQuery.infra_listHelmReleases as any,
-          }}
+        data={promise}
+        skeletonData={{
+          helmChartData: fake.ConsoleListHelmChartQuery
+            .infra_listHelmReleases as any,
+        }}
       >
         {({ helmChartData }) => {
           const helmCharts = parseNodes(helmChartData);
diff --git a/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx b/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
index f38daa433..689c03856 100644
--- a/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
+++ b/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
@@ -3,42 +3,55 @@ import { TextInput } from '~/components/atoms/input';
 import SelectPrimitive from '~/components/atoms/select-primitive';
 import Popup from '~/components/molecule/popup';
 import { toast } from '~/components/molecule/toast';
-import { IDialog } from '~/console/components/types.d';
+import { IDialogBase } from '~/console/components/types.d';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import useForm from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
 import { Github__Com___Kloudlite___Api___Apps___Iam___Types__Role as Role } from '~/root/src/generated/gql/server';
 import { parseName } from '~/console/server/r-utils/common';
+import CommonPopupHandle from '~/console/components/common-popup-handle';
+import {
+  IMemberType,
+  mapRoleToDisplayName,
+} from '~/console/routes/_main+/$account+/settings+/user-management/user-access-resource';
 import { IAccountContext } from '../../_layout';
 
+type IDialog = IDialogBase<IMemberType>;
+
 const validRoles = (role: string): Role => {
-  switch (role as Role) {
-    case 'account_owner':
-    case 'account_admin':
-    case 'account_member':
-      return role as Role;
+  switch (role) {
+    case 'owner':
+      return 'account_owner' as Role;
+    case 'member':
+      return 'account_member' as Role;
     default:
       throw new Error(`invalid role ${role}`);
   }
 };
 
-const HandleUser = ({ show, setShow }: IDialog) => {
+const Root = (props: IDialog) => {
+  const { setVisible, isUpdate } = props;
   const api = useConsoleApi();
 
   const { account } = useOutletContext<IAccountContext>();
 
-  const { values, handleChange, handleSubmit, resetValues, isLoading } =
-    useForm({
-      initialValues: {
-        email: '',
-        role: 'account_member',
-      },
-      validationSchema: Yup.object({
-        email: Yup.string().required().email(),
-      }),
-      onSubmit: async (val) => {
-        try {
+  const { values, handleChange, handleSubmit, isLoading } = useForm({
+    initialValues: isUpdate
+      ? {
+          email: props?.data.email || '',
+          role: mapRoleToDisplayName(props?.data.role) || 'member',
+        }
+      : {
+          email: '',
+          role: 'member',
+        },
+    validationSchema: Yup.object({
+      email: Yup.string().required().email(),
+    }),
+    onSubmit: async (val) => {
+      try {
+        if (!isUpdate) {
           const { errors: e } = await api.inviteMembersForAccount({
             accountName: parseName(account),
             invitations: {
@@ -49,68 +62,81 @@ const HandleUser = ({ show, setShow }: IDialog) => {
           if (e) {
             throw e[0];
           }
-          toast.success('user invited');
-          setShow(null);
-        } catch (err) {
-          handleError(err);
+        } else if (isUpdate) {
+          const { errors: e } = await api.updateAccountMembership({
+            accountName: parseName(account),
+            memberId: props?.data.id,
+            role: validRoles(val.role),
+          });
+          if (e) {
+            throw e[0];
+          }
         }
-      },
-    });
+        toast.success(`user ${isUpdate ? 'role updated' : 'invited'}`);
+        setVisible(false);
+      } catch (err) {
+        handleError(err);
+      }
+    },
+  });
 
-  const roles: Role[] = ['account_owner', 'account_admin', 'account_member'];
+  const roles: string[] = ['owner', 'member'];
 
   return (
-    <Popup.Root
-      show={show as any}
-      onOpenChange={(e) => {
-        if (!e) {
-          resetValues();
-        }
-
-        setShow(e);
-      }}
-    >
-      <Popup.Header>Invite user</Popup.Header>
-      <form onSubmit={handleSubmit}>
-        <Popup.Content>
-          <div className="flex gap-2xl">
-            <div className="flex-1">
+    <Popup.Form onSubmit={handleSubmit}>
+      <Popup.Content>
+        <div className="flex gap-2xl">
+          <div className="flex-1">
+            {!isUpdate ? (
               <TextInput
                 label="Email"
                 value={values.email}
                 onChange={handleChange('email')}
               />
-            </div>
-
-            <SelectPrimitive.Root
-              label="Role"
-              value={values.role}
-              onChange={handleChange('role')}
-            >
-              <SelectPrimitive.Option value="">
-                -- not-selected --
-              </SelectPrimitive.Option>
-              {roles.map((role) => {
-                return (
-                  <SelectPrimitive.Option key={role} value={role}>
-                    {role}
-                  </SelectPrimitive.Option>
-                );
-              })}
-            </SelectPrimitive.Root>
+            ) : (
+              <TextInput label="Email" value={values.email} disabled />
+            )}
           </div>
-        </Popup.Content>
-        <Popup.Footer>
-          <Popup.Button closable content="Cancel" variant="basic" />
-          <Popup.Button
-            loading={isLoading}
-            type="submit"
-            content="Send invite"
-            variant="primary"
-          />
-        </Popup.Footer>
-      </form>
-    </Popup.Root>
+
+          <SelectPrimitive.Root
+            label="Role"
+            value={values.role}
+            onChange={handleChange('role')}
+          >
+            <SelectPrimitive.Option value="">
+              -- not-selected --
+            </SelectPrimitive.Option>
+            {roles.map((role) => {
+              return (
+                <SelectPrimitive.Option key={role} value={role}>
+                  {role}
+                </SelectPrimitive.Option>
+              );
+            })}
+          </SelectPrimitive.Root>
+        </div>
+      </Popup.Content>
+      <Popup.Footer>
+        <Popup.Button closable content="Cancel" variant="basic" />
+        <Popup.Button
+          loading={isLoading}
+          type="submit"
+          content={isUpdate ? 'update' : 'Send invite'}
+          variant="primary"
+        />
+      </Popup.Footer>
+    </Popup.Form>
+  );
+};
+
+const HandleUser = (props: IDialog) => {
+  return (
+    <CommonPopupHandle
+      {...props}
+      createTitle="Invite Member"
+      updateTitle="Update Member"
+      root={Root}
+    />
   );
 };
 
diff --git a/src/apps/console/routes/_main+/$account+/settings+/user-management/route.tsx b/src/apps/console/routes/_main+/$account+/settings+/user-management/route.tsx
index 55c77fd00..c46fc7e8c 100644
--- a/src/apps/console/routes/_main+/$account+/settings+/user-management/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/settings+/user-management/route.tsx
@@ -5,10 +5,8 @@ import { Button } from '~/components/atoms/button';
 import Profile from '~/components/molecule/profile';
 import ExtendedFilledTab from '~/console/components/extended-filled-tab';
 import SecondarySubHeader from '~/console/components/secondary-sub-header';
-import { IShowDialog } from '~/console/components/types.d';
 import Wrapper from '~/console/components/wrapper';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { DIALOG_DATA_NONE } from '~/console/utils/commons';
 import { useSearch } from '~/root/lib/client/helpers/search-filter';
 import { NonNullableString } from '~/root/lib/types/common';
 import Pulsable from '~/console/components/pulsable';
@@ -22,7 +20,7 @@ import Tools from './tools';
 import UserAccessResources from './user-access-resource';
 
 interface ITeams {
-  setShowUserInvite: React.Dispatch<React.SetStateAction<IShowDialog>>;
+  setShowUserInvite: React.Dispatch<React.SetStateAction<boolean>>;
   searchText: string;
 }
 
@@ -78,7 +76,7 @@ const Teams = ({ setShowUserInvite, searchText }: ITeams) => {
             content: 'Invite users',
             prefix: <Plus />,
             onClick: () => {
-              setShowUserInvite(DIALOG_DATA_NONE);
+              setShowUserInvite(true);
             },
           },
         }}
@@ -105,6 +103,7 @@ const Teams = ({ setShowUserInvite, searchText }: ITeams) => {
                       email: i.user.email,
                     }))
               }
+              isPendingInvitation={false}
             />
           )}
         </Pulsable>
@@ -159,7 +158,7 @@ const Invitations = ({ setShowUserInvite, searchText }: ITeams) => {
             content: 'Invite users',
             prefix: <Plus />,
             onClick: () => {
-              setShowUserInvite(DIALOG_DATA_NONE);
+              setShowUserInvite(true);
             },
           },
         }}
@@ -178,6 +177,7 @@ const Invitations = ({ setShowUserInvite, searchText }: ITeams) => {
                       id: i.id || i.userEmail || '',
                     }))
             }
+            isPendingInvitation
           />
         </Pulsable>
       </Wrapper>
@@ -189,7 +189,7 @@ const SettingUserManagement = () => {
   const [active, setActive] = useState<
     'team' | 'invitations' | NonNullableString
   >('team');
-  const [showUserInvite, setShowUserInvite] = useState<IShowDialog>(null);
+  const [visible, setVisible] = useState(false);
   const { account } = useOutletContext<IAccountContext>();
 
   const [searchText, setSearchText] = useState('');
@@ -219,7 +219,7 @@ const SettingUserManagement = () => {
             <Button
               content="Invite user"
               variant="primary"
-              onClick={() => setShowUserInvite(DIALOG_DATA_NONE)}
+              onClick={() => setVisible(true)}
             />
           }
         />
@@ -272,18 +272,12 @@ const SettingUserManagement = () => {
           <Tools setSearchText={setSearchText} searchText={searchText} />
         </div>
         {active === 'team' ? (
-          <Teams
-            setShowUserInvite={setShowUserInvite}
-            searchText={searchText}
-          />
+          <Teams setShowUserInvite={setVisible} searchText={searchText} />
         ) : (
-          <Invitations
-            setShowUserInvite={setShowUserInvite}
-            searchText={searchText}
-          />
+          <Invitations setShowUserInvite={setVisible} searchText={searchText} />
         )}
       </div>
-      <HandleUser show={showUserInvite} setShow={setShowUserInvite} />
+      <HandleUser {...{ isUpdate: false, visible, setVisible }} />
     </div>
   );
 };
diff --git a/src/apps/console/routes/_main+/$account+/settings+/user-management/user-access-resource.tsx b/src/apps/console/routes/_main+/$account+/settings+/user-management/user-access-resource.tsx
index 653030b45..dda01e1a7 100644
--- a/src/apps/console/routes/_main+/$account+/settings+/user-management/user-access-resource.tsx
+++ b/src/apps/console/routes/_main+/$account+/settings+/user-management/user-access-resource.tsx
@@ -1,4 +1,4 @@
-import { Trash } from '@jengaicons/react';
+import { PencilSimple, Trash } from '@jengaicons/react';
 import { useOutletContext } from '@remix-run/react';
 import { useState } from 'react';
 import { Avatar } from '~/components/atoms/avatar';
@@ -11,11 +11,14 @@ import {
 import DeleteDialog from '~/console/components/delete-dialog';
 import List from '~/console/components/list';
 import ListGridView from '~/console/components/list-grid-view';
-import ResourceExtraAction from '~/console/components/resource-extra-action';
+import ResourceExtraAction, {
+  IResourceExtraItem,
+} from '~/console/components/resource-extra-action';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { handleError } from '~/root/lib/utils/common';
 import { parseName } from '~/console/server/r-utils/common';
+import HandleUser from '~/console/routes/_main+/$account+/settings+/user-management/handle-user';
 import { IAccountContext } from '../../_layout';
 
 const RESOURCE_NAME = 'user';
@@ -26,43 +29,66 @@ type BaseType = {
   role: string;
   email: string;
 };
+export type IMemberType = BaseType;
 
-interface IResource {
-  items: BaseType[];
-  onDelete: (item: BaseType) => void;
-}
+type OnAction = ({
+  action,
+  item,
+}: {
+  action: 'delete' | 'edit';
+  item: BaseType;
+}) => void;
+
+type IExtraButton = {
+  onAction: OnAction;
+  item: BaseType;
+  isInvite: boolean;
+};
 
-const mapRoleToDisplayName = (role: string): string => {
+export const mapRoleToDisplayName = (role: string): string => {
   switch (role) {
     case 'account_owner':
       return 'owner';
     case 'account_member':
       return 'member';
-    case 'account_admin':
-      return 'admin';
     default:
       return role;
   }
 };
 
-const ExtraButton = ({ onDelete }: { onDelete: () => void }) => {
-  return (
-    <ResourceExtraAction
-      options={[
-        {
-          label: 'Remove',
-          icon: <Trash size={16} />,
-          type: 'item',
-          onClick: onDelete,
-          key: 'remove',
-          className: '!text-text-critical',
-        },
-      ]}
-    />
-  );
+const ExtraButton = ({ onAction, item, isInvite }: IExtraButton) => {
+  let items: IResourceExtraItem[] = [
+    {
+      label: 'Remove',
+      icon: <Trash size={16} />,
+      type: 'item',
+      onClick: () => onAction({ action: 'delete', item }),
+      key: 'remove',
+      className: '!text-text-critical',
+    },
+  ];
+  if (!isInvite) {
+    items = [
+      {
+        label: 'Edit',
+        icon: <PencilSimple size={16} />,
+        type: 'item',
+        onClick: () => onAction({ action: 'edit', item }),
+        key: 'edit',
+      },
+      ...items,
+    ];
+  }
+  return <ResourceExtraAction options={items} />;
 };
 
-const ListView = ({ items = [], onDelete }: IResource) => {
+interface IResource {
+  items: BaseType[];
+  onAction: OnAction;
+  isInvite: boolean;
+}
+
+const ListView = ({ items = [], onAction, isInvite }: IResource) => {
   return (
     <List.Root>
       {items.map((item) => (
@@ -87,7 +113,13 @@ const ListView = ({ items = [], onDelete }: IResource) => {
             },
             {
               key: 3,
-              render: () => <ExtraButton onDelete={() => onDelete(item)} />,
+              render: () => (
+                <ExtraButton
+                  isInvite={isInvite}
+                  onAction={onAction}
+                  item={item}
+                />
+              ),
             },
           ]}
         />
@@ -96,10 +128,17 @@ const ListView = ({ items = [], onDelete }: IResource) => {
   );
 };
 
-const UserAccessResources = ({ items = [] }: { items: BaseType[] }) => {
+const UserAccessResources = ({
+  items = [],
+  isPendingInvitation = false,
+}: {
+  items: BaseType[];
+  isPendingInvitation: boolean;
+}) => {
   const [showDeleteDialog, setShowDeleteDialog] = useState<BaseType | null>(
     null
   );
+  const [showUserInvite, setShowUserInvite] = useState<BaseType | null>(null);
 
   const { account } = useOutletContext<IAccountContext>();
 
@@ -108,16 +147,35 @@ const UserAccessResources = ({ items = [] }: { items: BaseType[] }) => {
 
   const props: IResource = {
     items,
-    onDelete: (item) => {
-      setShowDeleteDialog(item);
+    isInvite: isPendingInvitation,
+    onAction: ({ action, item }) => {
+      switch (action) {
+        case 'edit':
+          setShowUserInvite(item);
+          break;
+        case 'delete':
+          setShowDeleteDialog(item);
+          break;
+        default:
+          break;
+      }
     },
   };
+
   return (
     <>
       <ListGridView
         listView={<ListView {...props} />}
         gridView={<ListView {...props} />}
       />
+      <HandleUser
+        {...{
+          isUpdate: true,
+          data: showUserInvite!,
+          setVisible: () => setShowUserInvite(null),
+          visible: !!showUserInvite,
+        }}
+      />
       <DeleteDialog
         resourceName="confirm"
         customMessages={{
@@ -139,12 +197,22 @@ const UserAccessResources = ({ items = [] }: { items: BaseType[] }) => {
         setShow={setShowDeleteDialog}
         onSubmit={async () => {
           try {
-            const { errors } = await api.deleteAccountMembership({
-              accountName: parseName(account),
-              memberId: showDeleteDialog!.id,
-            });
-            if (errors) {
-              throw errors[0];
+            if (!isPendingInvitation) {
+              const { errors } = await api.deleteAccountMembership({
+                accountName: parseName(account),
+                memberId: showDeleteDialog!.id,
+              });
+              if (errors) {
+                throw errors[0];
+              }
+            } else if (isPendingInvitation) {
+              const { errors } = await api.deleteAccountInvitation({
+                accountName: parseName(account),
+                invitationId: showDeleteDialog!.id,
+              });
+              if (errors) {
+                throw errors[0];
+              }
             }
             reloadPage();
             toast.success(`${titleCase(RESOURCE_NAME)} deleted successfully`);

From 820495686a40e4b5c3df4d6007afb274452ff65d Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Wed, 13 Mar 2024 15:31:44 +0530
Subject: [PATCH 21/66] :art: Improved error handling for serverside

---
 Taskfile.yaml                                 |  2 +-
 lib/app-setup/root.tsx                        | 13 ++++--
 lib/client/helpers/log.ts                     |  4 +-
 lib/client/hooks/use-custom-loader-data.tsx   | 12 ++++++
 .../helpers/execute-query-with-context.ts     |  4 +-
 lib/utils/common.tsx                          | 24 +++++++++--
 src/apps/auth/routes/_main+/logout.tsx        | 41 +++++++++----------
 src/apps/auth/routes/_main+/verify-email.tsx  |  6 ++-
 8 files changed, 71 insertions(+), 35 deletions(-)
 create mode 100644 lib/client/hooks/use-custom-loader-data.tsx

diff --git a/Taskfile.yaml b/Taskfile.yaml
index cc9bb95da..41360ec3b 100644
--- a/Taskfile.yaml
+++ b/Taskfile.yaml
@@ -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
diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
index 696bf1f5f..7c22f3087 100644
--- a/lib/app-setup/root.tsx
+++ b/lib/app-setup/root.tsx
@@ -32,6 +32,7 @@ import tailwindBase from '~/design-system/tailwind-base.js';
 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: LinksFunction = () => [
   { rel: 'stylesheet', href: stylesUrl },
@@ -167,6 +168,8 @@ const Root = ({
 }) => {
   const env = useLoaderData();
 
+  const error = useDataFromMatches('error', '');
+
   return (
     <html lang="en" className="bg-surface-basic-subdued text-text-default">
       <head>
@@ -235,9 +238,13 @@ const Root = ({
             <ReloadIndicator />
             <NonIdleProgressBar />
             <ToastContainer position="bottom-left" />
-            <Wrapper>
-              <Outlet />
-            </Wrapper>
+            {error ? (
+              <div>{JSON.stringify(error)}</div>
+            ) : (
+              <Wrapper>
+                <Outlet />
+              </Wrapper>
+            )}
           </ProgressContainer>
         </Tooltip.Provider>
         <Scripts />
diff --git a/lib/client/helpers/log.ts b/lib/client/helpers/log.ts
index 0e18c6651..63ef9b663 100644
--- a/lib/client/helpers/log.ts
+++ b/lib/client/helpers/log.ts
@@ -90,12 +90,12 @@ const logger = {
     }
 
     if (err) {
-      console.log(err);
+      console.trace(`\n\n${err}\n\n`);
       if (!isDev) {
         PostToHook(`\`\`\`${err}\`\`\``);
       }
     } else {
-      console.trace(args);
+      console.trace(`\n\n${args}\n\n`);
     }
 
     if (isDev && typeof window === 'undefined') {
diff --git a/lib/client/hooks/use-custom-loader-data.tsx b/lib/client/hooks/use-custom-loader-data.tsx
new file mode 100644
index 000000000..75b2088be
--- /dev/null
+++ b/lib/client/hooks/use-custom-loader-data.tsx
@@ -0,0 +1,12 @@
+import { useLoaderData } from '@remix-run/react';
+
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
+  k: infer I
+) => void
+  ? I
+  : never;
+
+const useExtLoaderData = <T extends (...args: any) => Promise<any>>() =>
+  useLoaderData() as UnionToIntersection<Awaited<ReturnType<T>>>;
+
+export default useExtLoaderData;
diff --git a/lib/server/helpers/execute-query-with-context.ts b/lib/server/helpers/execute-query-with-context.ts
index 91f24e7da..43eea48a6 100644
--- a/lib/server/helpers/execute-query-with-context.ts
+++ b/lib/server/helpers/execute-query-with-context.ts
@@ -112,12 +112,12 @@ export const ExecuteQueryWithContext = (
         return { ...resp.data, data };
       } catch (err) {
         if ((err as AxiosError).response) {
-          console.trace('ErrorIn:', apiName, (err as Error).name);
+          console.log('\nErrorIn:', apiName, (err as Error).name, '\n');
 
           return (err as AxiosError).response?.data;
         }
 
-        console.trace('ErrorIn:', apiName, (err as Error).message);
+        console.log('\nErrorIn:', apiName, (err as Error).message, '\n');
 
         return {
           data: null,
diff --git a/lib/utils/common.tsx b/lib/utils/common.tsx
index fb71ad287..d731753fa 100644
--- a/lib/utils/common.tsx
+++ b/lib/utils/common.tsx
@@ -1,10 +1,27 @@
 import { toast } from '~/components/molecule/toast';
 import logger from '../client/helpers/log';
 
-export const handleError = (e: unknown): void => {
+export const handleError = (
+  e: unknown
+): {
+  error?: {
+    message: string;
+  };
+} => {
+  if (typeof window === 'undefined') {
+    const a = e as Error;
+    return {
+      error: {
+        message: a.message,
+      },
+    };
+  }
+
   const err = e as Error;
   toast.error(err.message);
   logger.error(e);
+
+  return {};
 };
 
 export const parseError = (e: unknown): Error => {
@@ -27,8 +44,9 @@ export const Truncate = ({
 };
 
 export function sleep(time: number) {
-  // eslint-disable-next-line no-promise-executor-return
-  return new Promise((resolve) => setTimeout(resolve, time));
+  return new Promise((resolve) => {
+    setTimeout(resolve, time);
+  });
 }
 
 export const anyUndefined: any = undefined;
diff --git a/src/apps/auth/routes/_main+/logout.tsx b/src/apps/auth/routes/_main+/logout.tsx
index 6d06933d7..9a34770b9 100644
--- a/src/apps/auth/routes/_main+/logout.tsx
+++ b/src/apps/auth/routes/_main+/logout.tsx
@@ -1,13 +1,27 @@
-import { getCookie } from '~/root/lib/app-setup/cookies';
-import withContext from '~/root/lib/app-setup/with-contxt';
-import { useNavigate, useLoaderData } from '@remix-run/react';
-import { useEffect } from 'react';
+import { useNavigate } from '@remix-run/react';
 import { BrandLogo } from '~/components/branding/brand-logo';
 import { IExtRemixCtx } from '~/root/lib/types/common';
+import { GQLServerHandler } from '~/auth/server/gql/saved-queries';
+import { handleError } from '~/root/lib/utils/common';
+import useExtLoaderData from '~/root/lib/client/hooks/use-custom-loader-data';
+import { useEffect } from 'react';
+
+export const loader = async (ctx: IExtRemixCtx) => {
+  const { errors } = await GQLServerHandler(ctx.request).logout();
+
+  if (errors) {
+    return handleError(errors[0]);
+  }
+
+  return {
+    done: true,
+  };
+};
 
 const LogoutPage = () => {
   const navigate = useNavigate();
-  const { done } = useLoaderData();
+
+  const { done } = useExtLoaderData<typeof loader>();
 
   useEffect(() => {
     if (done) {
@@ -22,21 +36,4 @@ const LogoutPage = () => {
   );
 };
 
-export const loader = async (ctx: IExtRemixCtx) => {
-  const cookie = getCookie(ctx);
-
-  const keys = Object.keys(cookie.getAll());
-
-  for (let i = 0; i < keys.length; i += 1) {
-    const key = keys[i];
-    if (key === 'hotspot-session') {
-      cookie.remove(key);
-    }
-  }
-
-  return withContext(ctx, {
-    done: 'true',
-  });
-};
-
 export default LogoutPage;
diff --git a/src/apps/auth/routes/_main+/verify-email.tsx b/src/apps/auth/routes/_main+/verify-email.tsx
index c34b6e724..b85459f96 100644
--- a/src/apps/auth/routes/_main+/verify-email.tsx
+++ b/src/apps/auth/routes/_main+/verify-email.tsx
@@ -46,6 +46,7 @@ const VerifyEmail = () => {
     (async () => {
       try {
         if (!email) {
+          // TODO: handle this case, by taking email from user
           toast.error('Something went wrong! Please try again.');
           return;
         }
@@ -137,8 +138,9 @@ export const loader = async (ctx: IRemixCtx) => {
   const query = getQueries(ctx);
   const { data, errors } = await GQLServerHandler(ctx.request).whoAmI();
   if (errors) {
-    console.error(errors[0].message);
-    return redirect('/');
+    return {
+      query,
+    };
   }
   const { email, verified } = data || {};
 

From efd6d3600ee811d82f1c57c7b35fe28f61c09a60 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Wed, 13 Mar 2024 16:53:22 +0530
Subject: [PATCH 22/66] :bug: Fixed issue with logs, state [loading,subscribed]

---
 lib/client/components/logger/index.tsx      |  4 +-
 lib/client/helpers/log.ts                   | 52 +++------------------
 lib/client/helpers/socket/context.tsx       | 24 ++++++----
 lib/client/helpers/socket/useSockLogs.tsx   | 14 +-----
 lib/client/hooks/use-custom-loader-data.tsx |  4 +-
 lib/utils/common.tsx                        |  6 +--
 src/apps/auth/routes/_main+/logout.tsx      | 47 ++++++++++---------
 7 files changed, 52 insertions(+), 99 deletions(-)

diff --git a/lib/client/components/logger/index.tsx b/lib/client/components/logger/index.tsx
index 85bd5c3ea..f85dd9a34 100644
--- a/lib/client/components/logger/index.tsx
+++ b/lib/client/components/logger/index.tsx
@@ -669,7 +669,7 @@ const LogComp = ({
     }
   }, [fullScreen]);
 
-  const { logs, subscribed, errors } = useSocketLogs(websocket);
+  const { logs, subscribed, errors, isLoading } = useSocketLogs(websocket);
 
   const [isClientSide, setIsClientSide] = useState(false);
 
@@ -744,7 +744,7 @@ const LogComp = ({
         </Pulsable>
       )}
 
-      {!subscribed && logs.length === 0 && <LoadingComp />}
+      {isLoading && <LoadingComp />}
 
       {errors.length ? (
         <pre>{JSON.stringify(errors)}</pre>
diff --git a/lib/client/helpers/log.ts b/lib/client/helpers/log.ts
index 63ef9b663..ed4525f45 100644
--- a/lib/client/helpers/log.ts
+++ b/lib/client/helpers/log.ts
@@ -1,7 +1,4 @@
-// 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 = (() => {
@@ -19,43 +16,6 @@ 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 = {
@@ -63,8 +23,6 @@ const logger = {
   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(`\n\n${err}\n\n`);
       if (!isDev) {
-        PostToHook(`\`\`\`${err}\`\`\``);
+        console.trace(`\n\n${args}\n\n`);
+        return;
       }
-    } else {
-      console.trace(`\n\n${args}\n\n`);
+      console.error(`\n\n${err}\n\n`);
+      return;
     }
 
+    console.trace(`\n\n${args}\n\n`);
+
     if (isDev && typeof window === 'undefined') {
       serverError(args);
     }
diff --git a/lib/client/helpers/socket/context.tsx b/lib/client/helpers/socket/context.tsx
index e4d3859be..07c66fecb 100644
--- a/lib/client/helpers/socket/context.tsx
+++ b/lib/client/helpers/socket/context.tsx
@@ -62,8 +62,8 @@ export const useSubscribe = <T extends IData>(
   const {
     sendMsg,
     responses,
-    infos: i,
-    errors: e,
+    infos: mInfos,
+    errors: mErrors,
     clear,
   } = useContext(Context);
 
@@ -85,9 +85,10 @@ export const useSubscribe = <T extends IData>(
           const m = msg[k];
 
           tr.push(...(responses[m.for]?.[m.data.id || 'default'] || []));
-          terr.push(...(e[m.for]?.[m.data.id || 'default'] || []));
-          ti.push(...(i[m.for]?.[m.data.id || 'default'] || []));
+          terr.push(...(mErrors[m.for]?.[m.data.id || 'default'] || []));
+          ti.push(...(mInfos[m.for]?.[m.data.id || 'default'] || []));
         }
+
         setResp(tr);
         setErrors(terr);
         setInfos(ti);
@@ -97,16 +98,19 @@ export const useSubscribe = <T extends IData>(
         }
         return;
       }
+      const tempResp = responses[msg.for]?.[msg.data.id || 'default'] || [];
+      setResp(tempResp);
+
+      setErrors(mErrors[msg.for]?.[msg.data.id || 'default'] || []);
 
-      setResp(responses[msg.for]?.[msg.data.id || 'default'] || []);
-      setErrors(e[msg.for]?.[msg.data.id || 'default'] || []);
-      setInfos(i[msg.for]?.[msg.data.id || 'default'] || []);
+      const tempInfo = mInfos[msg.for]?.[msg.data.id || 'default'] || [];
+      setInfos(tempInfo);
 
-      if (resp.length || i[msg.for]?.[msg.data.id || 'default']?.length) {
+      if (tempResp.length || tempInfo.length) {
         setSubscribed(true);
       }
     })();
-  }, [responses]);
+  }, [responses, mInfos, mErrors]);
 
   useDebounce(
     () => {
@@ -236,7 +240,7 @@ export const SockProvider = ({ children }: ChildrenProps) => {
               };
 
               w.onerror = (e) => {
-                console.error(e);
+                console.error('socket closed:', e);
                 if (!rejected) {
                   rejected = true;
                   rej(e);
diff --git a/lib/client/helpers/socket/useSockLogs.tsx b/lib/client/helpers/socket/useSockLogs.tsx
index 81e28e5cc..b1831166f 100644
--- a/lib/client/helpers/socket/useSockLogs.tsx
+++ b/lib/client/helpers/socket/useSockLogs.tsx
@@ -11,7 +11,7 @@ interface IuseLog {
 
 export const useSocketLogs = ({ account, cluster, trackingId }: IuseLog) => {
   const [logs, setLogs] = useState<ISocketResp<ILog>[]>([]);
-  const { responses, subscribed, errors } = useSubscribe(
+  const { responses, infos, subscribed, errors } = useSubscribe(
     {
       for: 'logs',
       data: {
@@ -26,16 +26,6 @@ export const useSocketLogs = ({ account, cluster, trackingId }: IuseLog) => {
     []
   );
 
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    if (subscribed && isLoading) {
-      setIsLoading(false);
-    } else if (!subscribed && !isLoading) {
-      setIsLoading(true);
-    }
-  }, []);
-
   useEffect(() => {
     const sorted = responses.sort((a, b) => {
       const resp = b.data.podName.localeCompare(a.data.podName);
@@ -55,7 +45,7 @@ export const useSocketLogs = ({ account, cluster, trackingId }: IuseLog) => {
   return {
     logs,
     errors,
-    isLoading,
+    isLoading: !subscribed && (logs.length === 0 || infos.length === 0),
     subscribed,
   };
 };
diff --git a/lib/client/hooks/use-custom-loader-data.tsx b/lib/client/hooks/use-custom-loader-data.tsx
index 75b2088be..40ca49199 100644
--- a/lib/client/hooks/use-custom-loader-data.tsx
+++ b/lib/client/hooks/use-custom-loader-data.tsx
@@ -6,7 +6,5 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
   ? I
   : never;
 
-const useExtLoaderData = <T extends (...args: any) => Promise<any>>() =>
+export const useExtLoaderData = <T extends (...args: any) => Promise<any>>() =>
   useLoaderData() as UnionToIntersection<Awaited<ReturnType<T>>>;
-
-export default useExtLoaderData;
diff --git a/lib/utils/common.tsx b/lib/utils/common.tsx
index d731753fa..38469880d 100644
--- a/lib/utils/common.tsx
+++ b/lib/utils/common.tsx
@@ -8,16 +8,16 @@ export const handleError = (
     message: string;
   };
 } => {
+  const err = e as Error;
+
   if (typeof window === 'undefined') {
-    const a = e as Error;
     return {
       error: {
-        message: a.message,
+        message: err.message,
       },
     };
   }
 
-  const err = e as Error;
   toast.error(err.message);
   logger.error(e);
 
diff --git a/src/apps/auth/routes/_main+/logout.tsx b/src/apps/auth/routes/_main+/logout.tsx
index 9a34770b9..ecea7e1a8 100644
--- a/src/apps/auth/routes/_main+/logout.tsx
+++ b/src/apps/auth/routes/_main+/logout.tsx
@@ -1,33 +1,34 @@
 import { useNavigate } from '@remix-run/react';
 import { BrandLogo } from '~/components/branding/brand-logo';
-import { IExtRemixCtx } from '~/root/lib/types/common';
-import { GQLServerHandler } from '~/auth/server/gql/saved-queries';
-import { handleError } from '~/root/lib/utils/common';
-import useExtLoaderData from '~/root/lib/client/hooks/use-custom-loader-data';
-import { useEffect } from 'react';
-
-export const loader = async (ctx: IExtRemixCtx) => {
-  const { errors } = await GQLServerHandler(ctx.request).logout();
-
-  if (errors) {
-    return handleError(errors[0]);
-  }
-
-  return {
-    done: true,
-  };
-};
+import { handleError, sleep } from '~/root/lib/utils/common';
+import { useAuthApi } from '~/auth/server/gql/api-provider';
+import { toast } from 'react-toastify';
+import useDebounce from '~/root/lib/client/hooks/use-debounce';
 
 const LogoutPage = () => {
   const navigate = useNavigate();
+  const api = useAuthApi();
 
-  const { done } = useExtLoaderData<typeof loader>();
+  useDebounce(
+    () => {
+      (async () => {
+        try {
+          const { errors } = await api.logout({});
+          if (errors) {
+            throw errors[0];
+          }
 
-  useEffect(() => {
-    if (done) {
-      navigate('/');
-    }
-  }, [done]);
+          toast.warn('Logged out successfully');
+          await sleep(1000);
+          navigate('/login');
+        } catch (error) {
+          handleError(error);
+        }
+      })();
+    },
+    1000,
+    []
+  );
   return (
     <div className="flex flex-col items-center justify-center gap-7xl h-full">
       <BrandLogo detailed={false} size={100} />

From 2818b1c347c3d82ab93e50d1b768b89b162b0559 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Wed, 13 Mar 2024 19:50:56 +0530
Subject: [PATCH 23/66] minor refactoring

---
 .editorconfig                                         |  0
 .../$account+/infra+/$cluster+/helm-charts/_index.tsx | 11 +++++------
 2 files changed, 5 insertions(+), 6 deletions(-)
 create mode 100644 .editorconfig

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
index ec6e73341..5de217bb9 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
@@ -8,10 +8,10 @@ import Wrapper from '~/console/components/wrapper';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { parseNodes } from '~/console/server/r-utils/common';
 import { IRemixCtx } from '~/root/lib/types/common';
-import fake from '~/root/fake-data-generator/fake';
 import Tools from './tools';
 import HelmChartResources from './helm-chart-resources';
 import HandleHelmChart from './handle-helm-chart';
+import fake from "~/root/fake-data-generator/fake";
 
 export const loader = (ctx: IRemixCtx) => {
   const { cluster } = ctx.params;
@@ -38,11 +38,10 @@ const HelmCharts = () => {
   return (
     <>
       <LoadingComp
-        data={promise}
-        skeletonData={{
-          helmChartData: fake.ConsoleListHelmChartQuery
-            .infra_listHelmReleases as any,
-        }}
+          data={promise}
+          skeletonData={{
+            helmChartData: fake.ConsoleListHelmChartQuery.infra_listHelmReleases as any,
+          }}
       >
         {({ helmChartData }) => {
           const helmCharts = parseNodes(helmChartData);

From b81429a83ab6743e794f817e295a07dc44cde056 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Wed, 13 Mar 2024 20:18:52 +0530
Subject: [PATCH 24/66] minor refactoring

---
 .../settings+/user-management/handle-user.tsx | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx b/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
index 689c03856..5c624b914 100644
--- a/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
+++ b/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
@@ -15,6 +15,7 @@ import {
   IMemberType,
   mapRoleToDisplayName,
 } from '~/console/routes/_main+/$account+/settings+/user-management/user-access-resource';
+import { useState } from 'react';
 import { IAccountContext } from '../../_layout';
 
 type IDialog = IDialogBase<IMemberType>;
@@ -35,6 +36,7 @@ const Root = (props: IDialog) => {
   const api = useConsoleApi();
 
   const { account } = useOutletContext<IAccountContext>();
+  const [inputName, setInputName] = useState('');
 
   const { values, handleChange, handleSubmit, isLoading } = useForm({
     initialValues: isUpdate
@@ -115,6 +117,23 @@ const Root = (props: IDialog) => {
             })}
           </SelectPrimitive.Root>
         </div>
+        {isUpdate && (
+          <div className="py-2xl">
+            <div>
+              Type in <b>confirm</b> to continue.
+            </div>
+            <div className="py-2xl">
+              <TextInput
+                value={inputName}
+                onChange={({ target }) => {
+                  setInputName(target.value);
+                }}
+                // disabled={loading}
+                autoComplete="off"
+              />
+            </div>
+          </div>
+        )}
       </Popup.Content>
       <Popup.Footer>
         <Popup.Button closable content="Cancel" variant="basic" />
@@ -123,6 +142,7 @@ const Root = (props: IDialog) => {
           type="submit"
           content={isUpdate ? 'update' : 'Send invite'}
           variant="primary"
+          disabled={isUpdate ? inputName !== 'confirm' : false}
         />
       </Popup.Footer>
     </Popup.Form>

From 24c166c995f166487758587a7cb46f8576f9d9fe Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Wed, 13 Mar 2024 20:42:57 +0530
Subject: [PATCH 25/66] remove confirm text input from update user role

---
 .../settings+/user-management/handle-user.tsx | 20 -------------------
 1 file changed, 20 deletions(-)

diff --git a/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx b/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
index 5c624b914..689c03856 100644
--- a/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
+++ b/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
@@ -15,7 +15,6 @@ import {
   IMemberType,
   mapRoleToDisplayName,
 } from '~/console/routes/_main+/$account+/settings+/user-management/user-access-resource';
-import { useState } from 'react';
 import { IAccountContext } from '../../_layout';
 
 type IDialog = IDialogBase<IMemberType>;
@@ -36,7 +35,6 @@ const Root = (props: IDialog) => {
   const api = useConsoleApi();
 
   const { account } = useOutletContext<IAccountContext>();
-  const [inputName, setInputName] = useState('');
 
   const { values, handleChange, handleSubmit, isLoading } = useForm({
     initialValues: isUpdate
@@ -117,23 +115,6 @@ const Root = (props: IDialog) => {
             })}
           </SelectPrimitive.Root>
         </div>
-        {isUpdate && (
-          <div className="py-2xl">
-            <div>
-              Type in <b>confirm</b> to continue.
-            </div>
-            <div className="py-2xl">
-              <TextInput
-                value={inputName}
-                onChange={({ target }) => {
-                  setInputName(target.value);
-                }}
-                // disabled={loading}
-                autoComplete="off"
-              />
-            </div>
-          </div>
-        )}
       </Popup.Content>
       <Popup.Footer>
         <Popup.Button closable content="Cancel" variant="basic" />
@@ -142,7 +123,6 @@ const Root = (props: IDialog) => {
           type="submit"
           content={isUpdate ? 'update' : 'Send invite'}
           variant="primary"
-          disabled={isUpdate ? inputName !== 'confirm' : false}
         />
       </Popup.Footer>
     </Popup.Form>

From 890719acf8318aac37c5fdf5323eae400fb2e4a3 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Thu, 14 Mar 2024 10:16:27 +0530
Subject: [PATCH 26/66] updated structure

---
 .../settings+/user-management/handle-user.tsx        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx b/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
index 689c03856..b2ebc1e9e 100644
--- a/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
+++ b/src/apps/console/routes/_main+/$account+/settings+/user-management/handle-user.tsx
@@ -21,9 +21,9 @@ type IDialog = IDialogBase<IMemberType>;
 
 const validRoles = (role: string): Role => {
   switch (role) {
-    case 'owner':
+    case 'account_owner':
       return 'account_owner' as Role;
-    case 'member':
+    case 'account_member':
       return 'account_member' as Role;
     default:
       throw new Error(`invalid role ${role}`);
@@ -40,11 +40,11 @@ const Root = (props: IDialog) => {
     initialValues: isUpdate
       ? {
           email: props?.data.email || '',
-          role: mapRoleToDisplayName(props?.data.role) || 'member',
+          role: props?.data.role || 'account_member',
         }
       : {
           email: '',
-          role: 'member',
+          role: 'account_member',
         },
     validationSchema: Yup.object({
       email: Yup.string().required().email(),
@@ -80,7 +80,7 @@ const Root = (props: IDialog) => {
     },
   });
 
-  const roles: string[] = ['owner', 'member'];
+  const roles: string[] = ['account_owner', 'account_member'];
 
   return (
     <Popup.Form onSubmit={handleSubmit}>
@@ -109,7 +109,7 @@ const Root = (props: IDialog) => {
             {roles.map((role) => {
               return (
                 <SelectPrimitive.Option key={role} value={role}>
-                  {role}
+                  {mapRoleToDisplayName(role)}
                 </SelectPrimitive.Option>
               );
             })}

From 0ea18b157aa0310b3682611f60a9b28189f25b51 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Thu, 14 Mar 2024 12:13:17 +0530
Subject: [PATCH 27/66] Improve/error handling (#143)

* :art: Improved error handling for serverside
---
 lib/client/components/logger/index.tsx |  2 +-
 lib/client/helpers/socket/context.tsx  | 66 ++++++++++++++++----------
 2 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/lib/client/components/logger/index.tsx b/lib/client/components/logger/index.tsx
index f85dd9a34..bdce1fc41 100644
--- a/lib/client/components/logger/index.tsx
+++ b/lib/client/components/logger/index.tsx
@@ -747,7 +747,7 @@ const LogComp = ({
       {isLoading && <LoadingComp />}
 
       {errors.length ? (
-        <pre>{JSON.stringify(errors)}</pre>
+        <pre>{JSON.stringify(errors, null, 2)}</pre>
       ) : (
         logs.length > 0 && (
           <LogBlock
diff --git a/lib/client/helpers/socket/context.tsx b/lib/client/helpers/socket/context.tsx
index 07c66fecb..4919a8f31 100644
--- a/lib/client/helpers/socket/context.tsx
+++ b/lib/client/helpers/socket/context.tsx
@@ -226,35 +226,49 @@ export const SockProvider = ({ children }: ChildrenProps) => {
   useDebounce(
     () => {
       if (typeof window !== 'undefined') {
-        try {
-          sockPromise.current = new Promise<wsock.w3cwebsocket>((res, rej) => {
-            let rejected = false;
-            try {
-              // eslint-disable-next-line new-cap
-              const w = new wsock.w3cwebsocket(`${socketUrl}/ws`, '', '', {});
-
-              w.onmessage = onMessage;
-
-              w.onopen = () => {
-                res(w);
-              };
-
-              w.onerror = (e) => {
-                console.error('socket closed:', e);
-                if (!rejected) {
-                  rejected = true;
+        const connnect = (recon = () => {}) => {
+          try {
+            sockPromise.current = new Promise<wsock.w3cwebsocket>(
+              (res, rej) => {
+                try {
+                  // eslint-disable-next-line new-cap
+                  const w = new wsock.w3cwebsocket(
+                    `${socketUrl}/ws`,
+                    '',
+                    '',
+                    {}
+                  );
+
+                  w.onmessage = onMessage;
+
+                  w.onopen = () => {
+                    res(w);
+                  };
+
+                  w.onerror = (e) => {
+                    console.error(e);
+                    recon();
+                  };
+
+                  w.onclose = () => {
+                    recon();
+                  };
+                } catch (e) {
                   rej(e);
                 }
-              };
+              }
+            );
+          } catch (e) {
+            logger.error(e);
+          }
+        };
 
-              w.onclose = () => {};
-            } catch (e) {
-              rej(e);
-            }
-          });
-        } catch (e) {
-          logger.error(e);
-        }
+        connnect(() => {
+          setTimeout(() => {
+            console.log('reconnecting');
+            connnect();
+          }, 1000);
+        });
       }
     },
     1000,

From 3af142a9777e93eab77e14b84b1efaed2945d952 Mon Sep 17 00:00:00 2001
From: Mohit Kumar <48203820+nxtcoder36@users.noreply.github.com>
Date: Thu, 14 Mar 2024 15:02:05 +0530
Subject: [PATCH 28/66] KLO-231: Impl/app image pull (#144)

* app image pull in progress

* image pull policy check box added, modifications in app setting for
compute and scaling
---
 .../console/page-components/app-states.tsx    |  1 +
 .../app+/$app+/settings+/compute/route.tsx    | 16 +++-
 .../app+/$app+/settings+/scaling/route.tsx    | 73 ++++++++++---------
 .../$environment+/new-app/app-compute.tsx     | 29 +++++++-
 .../new-app/app-environment-variables.tsx     | 17 ++---
 .../$environment+/new-app/app-review.tsx      |  1 -
 6 files changed, 88 insertions(+), 49 deletions(-)

diff --git a/src/apps/console/page-components/app-states.tsx b/src/apps/console/page-components/app-states.tsx
index fe6d5ccf9..8d84065e5 100644
--- a/src/apps/console/page-components/app-states.tsx
+++ b/src/apps/console/page-components/app-states.tsx
@@ -20,6 +20,7 @@ const defaultApp: AppIn = {
       {
         image: '',
         name: 'container-1',
+        env: [],
       },
     ],
   },
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
index b83dee86b..916ad061e 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
@@ -15,6 +15,7 @@ import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { parseNodes } from '~/console/server/r-utils/common';
 import { registryHost } from '~/lib/configs/base-url.cjs';
+import { Checkbox } from '~/components/atoms/checkbox';
 import { plans } from '../../../../new-app/datas';
 
 const valueRender = ({
@@ -63,6 +64,8 @@ const SettingCompute = () => {
   const { values, errors, handleChange, submit, resetValues } = useForm({
     initialValues: {
       imageUrl: getContainer(0)?.image || '',
+      imagePullPolicy:
+        app.spec.containers[activeContIndex]?.imagePullPolicy || 'IfNotPresent',
       pullSecret: 'TODO',
       cpuMode: app.metadata?.annotations?.[keyconstants.cpuMode] || 'shared',
       memPerCpu: app.metadata?.annotations?.[keyconstants.memPerCpu] || 1,
@@ -131,7 +134,7 @@ const SettingCompute = () => {
                   ? `${values.repoName}:${values.repoImageTag}`
                   : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`,
               name: 'container-0',
-              imagePullPolicy: 'Always',
+              imagePullPolicy: val.imagePullPolicy,
               resourceCpu:
                 val.selectionMode === 'quick'
                   ? {
@@ -261,6 +264,15 @@ const SettingCompute = () => {
             }
             loading={digestLoading}
           />
+
+          <Checkbox
+            label="Image Pull Policy"
+            checked={values.imagePullPolicy === 'Always'}
+            onChange={(val) => {
+              const imagePullPolicy = val ? 'Always' : 'IfNotPresent';
+              handleChange('imagePullPolicy')(dummyEvent(imagePullPolicy));
+            }}
+          />
         </div>
         <div className="flex flex-col">
           <div className="flex flex-row gap-lg items-center pb-3xl">
@@ -309,7 +321,7 @@ const SettingCompute = () => {
                   );
                 }}
               />
-              <div className="flex flex-col gap-md p-2xl rounded border border-border-default">
+              <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default">
                 <div className="flex flex-row gap-lg items-center">
                   <div className="bodyMd-medium text-text-default">
                     Select CPU
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx
index 68fc20839..b7fd8e0cd 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx
@@ -109,7 +109,7 @@ const SettingCompute = () => {
           />
           {values.autoscaling ? (
             <div className="flex flex-col gap-3xl">
-              <div className="flex flex-col gap-md p-2xl rounded border border-border-default">
+              <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default">
                 <div className="flex flex-row gap-lg items-center">
                   <div className="bodyMd-medium text-text-default">
                     Select min and max replicas
@@ -125,7 +125,6 @@ const SettingCompute = () => {
                   max={10}
                   value={[values.minReplicas, values.maxReplicas]}
                   onChange={(value) => {
-                    console.log(value);
                     if (Array.isArray(value)) {
                       handleChange('minReplicas')(dummyEvent(value[0]));
                       handleChange('maxReplicas')(dummyEvent(value[1]));
@@ -133,47 +132,49 @@ const SettingCompute = () => {
                   }}
                 />
               </div>
-              <div className="flex flex-col gap-md p-2xl rounded border border-border-default">
-                <div className="flex flex-row gap-lg items-center">
-                  <div className="bodyMd-medium text-text-default">
-                    Select CPU
+              <div className="flex flex-row justify-between gap-3xl">
+                <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default w-full">
+                  <div className="flex flex-row gap-lg items-center">
+                    <div className="bodyMd-medium text-text-default">
+                      Select CPU
+                    </div>
+                    <code className="bodyMd text-text-soft flex-1 text-end">
+                      {values.cpuThreshold || 75}% CPU
+                    </code>
                   </div>
-                  <code className="bodyMd text-text-soft flex-1 text-end">
-                    {values.cpuThreshold || 75}% CPU
-                  </code>
+                  <Slider
+                    step={1}
+                    min={50}
+                    max={95}
+                    value={values.cpuThreshold}
+                    onChange={(value) => {
+                      handleChange('cpuThreshold')(dummyEvent(value));
+                    }}
+                  />
                 </div>
-                <Slider
-                  step={1}
-                  min={50}
-                  max={95}
-                  value={values.cpuThreshold}
-                  onChange={(value) => {
-                    handleChange('cpuThreshold')(dummyEvent(value));
-                  }}
-                />
-              </div>
-              <div className="flex flex-col gap-md p-2xl rounded border border-border-default">
-                <div className="flex flex-row gap-lg items-center">
-                  <div className="bodyMd-medium text-text-default">
-                    Select Memory
+                <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default w-full">
+                  <div className="flex flex-row gap-lg items-center">
+                    <div className="bodyMd-medium text-text-default">
+                      Select Memory
+                    </div>
+                    <code className="bodyMd text-text-soft flex-1 text-end">
+                      {values.memoryThreshold || 75}% Memory
+                    </code>
                   </div>
-                  <code className="bodyMd text-text-soft flex-1 text-end">
-                    {values.memoryThreshold || 75}% Memory
-                  </code>
+                  <Slider
+                    step={1}
+                    min={50}
+                    max={95}
+                    value={values.memoryThreshold}
+                    onChange={(value) => {
+                      handleChange('memoryThreshold')(dummyEvent(value));
+                    }}
+                  />
                 </div>
-                <Slider
-                  step={1}
-                  min={50}
-                  max={95}
-                  value={values.memoryThreshold}
-                  onChange={(value) => {
-                    handleChange('memoryThreshold')(dummyEvent(value));
-                  }}
-                />
               </div>
             </div>
           ) : (
-            <div className="flex flex-col gap-md p-2xl rounded border border-border-default">
+            <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default">
               <div className="flex flex-row gap-lg items-center">
                 <div className="bodyMd-medium text-text-default">
                   Select replicas
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
index 7b5617d05..ffc852e0c 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
@@ -15,6 +15,7 @@ import { registryHost } from '~/lib/configs/base-url.cjs';
 import { BottomNavigation } from '~/console/components/commons';
 import { useOutletContext } from '@remix-run/react';
 import { useLog } from '~/root/lib/client/hooks/use-log';
+import { Checkbox } from '~/components/atoms/checkbox';
 import { plans } from './datas';
 import { IProjectContext } from '../../_layout';
 
@@ -81,9 +82,17 @@ const AppCompute = () => {
   const { values, errors, handleChange, isLoading, submit } = useForm({
     initialValues: {
       imageUrl: app.spec.containers[activeContIndex]?.image || '',
+      imagePullPolicy:
+        app.spec.containers[activeContIndex]?.imagePullPolicy || 'IfNotPresent',
       pullSecret: 'TODO',
       cpuMode: app.metadata?.annotations?.[keyconstants.cpuMode] || 'shared',
       memPerCpu: app.metadata?.annotations?.[keyconstants.memPerCpu] || '1',
+      autoscaling: app.spec.hpa?.enabled || false,
+      minReplicas: app.spec.hpa?.minReplicas || 1,
+      maxReplicas: app.spec.hpa?.maxReplicas || 3,
+      cpuThreshold: app.spec.hpa?.thresholdCpu || 75,
+      memoryThreshold: app.spec.hpa?.thresholdMemory || 75,
+      replicas: app.spec.replicas || 1,
 
       cpu: parseValue(
         app.spec.containers[activeContIndex]?.resourceCpu?.max,
@@ -159,7 +168,7 @@ const AppCompute = () => {
                   ? `${values.repoName}:${values.repoImageTag}`
                   : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`,
               name: 'container-0',
-              imagePullPolicy: 'Always',
+              imagePullPolicy: val.imagePullPolicy,
               resourceCpu:
                 val.selectionMode === 'quick'
                   ? {
@@ -184,6 +193,14 @@ const AppCompute = () => {
                     },
             },
           ],
+          hpa: {
+            enabled: val.autoscaling,
+            maxReplicas: val.maxReplicas,
+            minReplicas: val.minReplicas,
+            thresholdCpu: val.cpuThreshold,
+            thresholdMemory: val.memoryThreshold,
+          },
+          replicas: val.replicas,
         },
       }));
     },
@@ -301,6 +318,16 @@ const AppCompute = () => {
           }
           loading={digestLoading}
         />
+
+        <Checkbox
+          label="Image Pull Policy"
+          checked={values.imagePullPolicy === 'Always'}
+          onChange={(val) => {
+            const imagePullPolicy = val ? 'Always' : 'IfNotPresent';
+            console.log(imagePullPolicy);
+            handleChange('imagePullPolicy')(dummyEvent(imagePullPolicy));
+          }}
+        />
       </div>
 
       <div className="flex flex-col">
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx
index 82b15467d..24d2d1ad1 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx
@@ -230,7 +230,7 @@ export const EnvironmentVariables = () => {
     submit,
     resetValues: resetAppValue,
   } = useForm({
-    initialValues: getContainer().env || [],
+    initialValues: getContainer().env,
     validationSchema: Yup.array(entry),
     onSubmit: (val) => {
       setContainer((c) => ({
@@ -252,15 +252,16 @@ export const EnvironmentVariables = () => {
   }, [hasChanges]);
 
   const addEntry = (val: IEnvVariable) => {
+    const tempVal = val || [];
     setValues((v = []) => {
       const data = {
-        key: val.key,
-        type: val.type,
-        refName: val.refName || '',
-        refKey: val.refKey || '',
-        value: val.value || '',
+        key: tempVal.key,
+        type: tempVal.type,
+        refName: tempVal.refName || '',
+        refKey: tempVal.refKey || '',
+        value: tempVal.value || '',
       };
-      return [...v, data];
+      return [...(v || []), data];
     });
   };
 
@@ -312,8 +313,6 @@ export const EnvironmentVariables = () => {
         }),
     }),
     onSubmit: () => {
-      console.log(eValues);
-
       if (eValues.textInputValue) {
         const ev: IEnvVariable = {
           key: eValues.key,
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
index 754f23e2b..7d4f8e277 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
@@ -51,7 +51,6 @@ const AppReview = () => {
 
   useEffect(() => {
     const res = validateType(app, 'AppIn');
-    // console.log('res', res);
     setErrors(res);
   }, []);
 

From f103b6aa253d495bbdc2f17568c7a383e06d7090 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Thu, 14 Mar 2024 15:10:13 +0530
Subject: [PATCH 29/66] update copy button

---
 src/apps/console/components/commons.tsx       | 12 ++++---
 .../packages+/repos/repo-resources.tsx        | 34 +++++++++++++------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/apps/console/components/commons.tsx b/src/apps/console/components/commons.tsx
index f243b659a..8a37341b8 100644
--- a/src/apps/console/components/commons.tsx
+++ b/src/apps/console/components/commons.tsx
@@ -1,4 +1,4 @@
-import { CopySimple, Question } from '@jengaicons/react';
+import { CopySimple, Question, Check } from '@jengaicons/react';
 import { ReactNode, useState } from 'react';
 import { ProdLogo } from '~/components/branding/prod-logo';
 import { WorkspacesLogo } from '~/components/branding/workspace-logo';
@@ -82,25 +82,27 @@ export const CopyButton = ({
   title: ReactNode;
   value: string;
 }) => {
-  const [_, setCopyIcon] = useState(<CopySimple />);
+  // const [_, setCopyIcon] = useState(<CopySimple />);
+  const [copied, setCopied] = useState(false);
   const { copy } = useClipboard({
     onSuccess: () => {
       setTimeout(() => {
-        setCopyIcon(<CopySimple />);
-      }, 1000);
+        setCopied(false);
+      }, 4000);
     },
   });
 
   return (
     <div
       onClick={() => {
+        setCopied(true);
         copy(value);
       }}
       className="flex flex-row gap-md items-center select-none group cursor-pointer"
     >
       <span>{title}</span>
       <span className="invisible group-hover:visible">
-        <CopySimple size={10} />
+        {copied ? <Check size={12} /> : <CopySimple size={12} />}
       </span>
     </div>
   );
diff --git a/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx b/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
index 9f6dd1c9c..9161cba7e 100644
--- a/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
@@ -1,4 +1,4 @@
-import { Copy, Trash } from '@jengaicons/react';
+import { Copy, Trash, Check } from '@jengaicons/react';
 import { Link, useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { toast } from '~/components/molecule/toast';
@@ -58,12 +58,20 @@ const ExtraButton = ({ onDelete }: { onDelete: () => void }) => {
 
 const RepoUrlView = ({ name }: { name: string }) => {
   const { account } = useParams();
-  const { copy } = useClipboard({
-    onSuccess() {
-      toast.success('Registry url copied successfully.');
-    },
-  });
+  const { copy } = useClipboard({});
   const url = `${registryHost}/${account}/${name}`;
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    copy(url);
+    setCopied(true);
+    toast.success('Registry url copied successfully.');
+
+    setTimeout(() => {
+      setCopied(false);
+    }, 3000);
+  };
+
   return (
     <ListBody
       data={
@@ -72,14 +80,20 @@ const RepoUrlView = ({ name }: { name: string }) => {
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            copy(url);
+            handleCopy();
           }}
           title={url}
         >
           <span className="truncate">{url}</span>
-          <span>
-            <Copy size={16} />
-          </span>
+          {copied ? (
+            <span>
+              <Check size={16} />
+            </span>
+          ) : (
+            <span>
+              <Copy size={16} />
+            </span>
+          )}
         </div>
       }
     />

From 8c9ad8406e5cf6f6860cf24b5873498a9cd703a6 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Thu, 14 Mar 2024 15:13:36 +0530
Subject: [PATCH 30/66] update copy button

---
 src/apps/console/components/commons.tsx                       | 2 +-
 .../_main+/$account+/packages+/repos/repo-resources.tsx       | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/apps/console/components/commons.tsx b/src/apps/console/components/commons.tsx
index 8a37341b8..75ecf66bf 100644
--- a/src/apps/console/components/commons.tsx
+++ b/src/apps/console/components/commons.tsx
@@ -88,7 +88,7 @@ export const CopyButton = ({
     onSuccess: () => {
       setTimeout(() => {
         setCopied(false);
-      }, 4000);
+      }, 1000);
     },
   });
 
diff --git a/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx b/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
index 9161cba7e..235cdad01 100644
--- a/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
@@ -80,7 +80,9 @@ const RepoUrlView = ({ name }: { name: string }) => {
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            handleCopy();
+            if (!copied) {
+              handleCopy();
+            }
           }}
           title={url}
         >

From 0c2e2ef941290383f6cfcf684cd731907376f920 Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Thu, 14 Mar 2024 16:52:50 +0530
Subject: [PATCH 31/66] Fixed list grid switch flicker

---
 Taskfile.yaml                                 |  2 +-
 lib/app-setup/root.tsx                        |  5 +-
 .../console/components/list-grid-view.tsx     | 11 +--
 src/apps/console/components/sync-status.tsx   | 70 +++++++++----------
 src/apps/console/components/view-mode.tsx     | 33 ++++-----
 .../backend-services-resources-V2.tsx         |  2 +-
 .../infra+/clusters/cluster-resources-v2.tsx  |  3 +-
 src/apps/console/server/r-utils/common.ts     |  2 +-
 .../components/atoms/toolbar.tsx              |  1 +
 9 files changed, 60 insertions(+), 69 deletions(-)

diff --git a/Taskfile.yaml b/Taskfile.yaml
index cc9bb95da..41360ec3b 100644
--- a/Taskfile.yaml
+++ b/Taskfile.yaml
@@ -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
diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
index 696bf1f5f..7bbad3a04 100644
--- a/lib/app-setup/root.tsx
+++ b/lib/app-setup/root.tsx
@@ -32,6 +32,7 @@ import tailwindBase from '~/design-system/tailwind-base.js';
 import { ReloadIndicator } from '~/lib/client/components/reload-indicator';
 import { isDev } from '~/lib/client/helpers/log';
 import { getClientEnv, getServerEnv } from '../configs/base-url.cjs';
+import { isBrowser } from '../client/helpers/is-browser';
 
 export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: stylesUrl },
@@ -198,7 +199,7 @@ const Root = ({
           function gtag(){dataLayer.push(arguments);}
           gtag('js', new Date());
 
-          gtag('config', ${tagId});
+          gtag('config', '${tagId}');
               `,
           }}
         />
@@ -234,7 +235,7 @@ const Root = ({
           <ProgressContainer>
             <ReloadIndicator />
             <NonIdleProgressBar />
-            <ToastContainer position="bottom-left" />
+            {isBrowser() && <ToastContainer position="bottom-left" />}
             <Wrapper>
               <Outlet />
             </Wrapper>
diff --git a/src/apps/console/components/list-grid-view.tsx b/src/apps/console/components/list-grid-view.tsx
index 4cfd1793a..653b22e3b 100644
--- a/src/apps/console/components/list-grid-view.tsx
+++ b/src/apps/console/components/list-grid-view.tsx
@@ -1,5 +1,4 @@
-import { ReactNode, useEffect, useState } from 'react';
-import { IListOrGrid } from '../server/r-utils/common';
+import { ReactNode } from 'react';
 import { useViewMode } from './view-mode';
 
 const ListGridView = ({
@@ -10,16 +9,10 @@ const ListGridView = ({
   listView: ReactNode;
 }) => {
   const { viewMode } = useViewMode();
-  const [tempViewMode, setTempViewMode] = useState<IListOrGrid>('list');
-
-  useEffect(() => {
-    setTempViewMode(viewMode);
-  }, [viewMode]);
-
   return (
     <div>
       <div className="hidden md:block">
-        {tempViewMode === 'grid' ? gridView : listView}
+        {viewMode === 'c' ? gridView : listView}
       </div>
       <div className="block md:hidden">{gridView}</div>
     </div>
diff --git a/src/apps/console/components/sync-status.tsx b/src/apps/console/components/sync-status.tsx
index c6579680a..0dc35d986 100644
--- a/src/apps/console/components/sync-status.tsx
+++ b/src/apps/console/components/sync-status.tsx
@@ -21,7 +21,19 @@ interface IStatusMetaV2 {
   recordVersion: number;
   markedForDeletion?: boolean;
   status?: {
-    checks?: any;
+    checks?: {
+      [key: string]: {
+        error: string;
+        generation: number;
+        message: string;
+        state:
+          | 'yet-to-be-reconciled'
+          | 'under-reconcilation'
+          | 'errored-during-reconcilation'
+          | 'finished-reconcilation';
+        status: boolean;
+      };
+    };
     isReady: boolean;
     lastReadyGeneration?: number;
     lastReconcileTime?: any;
@@ -151,25 +163,21 @@ const state = ({
   }
 };
 
-const parseOverallState = (s: IStatusMetaV2['status']): OverallStates => {
-  const checks: {
-    [key: string]: {
-      error: string;
-      generation: number;
-      message: string;
-      state:
-        | 'yet-to-be-reconciled'
-        | 'under-reconcilation'
-        | 'errored-during-reconcilation'
-        | 'finished-reconcilation';
-      status: boolean;
-    };
-  } = s?.checks;
+const parseOverallState = (item: IStatusMetaV2): OverallStates => {
+  const { status, markedForDeletion, syncStatus } = item;
+
+  const checks = status?.checks;
+  const checkList = status?.checkList;
+
+  if (markedForDeletion && syncStatus.action === 'DELETE') {
+    return 'deleting';
+  }
+
   if (!checks) {
     return 'idle';
   }
 
-  const mainStatus = s?.checkList?.reduce(
+  const mainStatus = checkList?.reduce(
     (acc, curr) => {
       const k = checks[curr.name];
       if (acc.progress === 'done') {
@@ -224,8 +232,6 @@ export const SyncStatusV2 = ({
   item: IStatusMetaV2;
   type?: IStatusViewType;
 }) => {
-  const { status } = item;
-
   const parseStage = (check: OverallStates) => {
     const iconSize = 12;
 
@@ -268,25 +274,17 @@ export const SyncStatusV2 = ({
     }
   };
 
-  const getProgressItems = (s: typeof status) => {
-    const checks: {
-      [key: string]: {
-        error: string;
-        generation: number;
-        message: string;
-        state:
-          | 'yet-to-be-reconciled'
-          | 'under-reconcilation'
-          | 'errored-during-reconcilation'
-          | 'finished-reconcilation';
-        status: boolean;
-      };
-    } = s?.checks;
+  const getProgressItems = (item: IStatusMetaV2) => {
+    const { status } = item;
+
+    const checks = status?.checks;
+    const checkList = status?.checkList;
+
     if (!checks) {
       return [];
     }
 
-    const items = status?.checkList?.reduce(
+    const items = checkList?.reduce(
       (acc, curr) => {
         const k = checks[curr.name];
         if (acc.progress === 'done') {
@@ -374,8 +372,8 @@ export const SyncStatusV2 = ({
     ],
   };
 
-  const k = parseOverallState(status);
-  const ic = getProgressItems(status);
+  const k = parseOverallState(item);
+  const ic = getProgressItems(item);
 
   return (
     <div>
@@ -415,5 +413,5 @@ export const SyncStatusV2 = ({
 };
 
 export const status = ({ item }: { item: IStatusMetaV2 }) => {
-  return parseOverallState(item.status);
+  return parseOverallState(item);
 };
diff --git a/src/apps/console/components/view-mode.tsx b/src/apps/console/components/view-mode.tsx
index 341c3ca5b..7dde61efd 100644
--- a/src/apps/console/components/view-mode.tsx
+++ b/src/apps/console/components/view-mode.tsx
@@ -14,25 +14,28 @@ import { IListOrGrid } from '../server/r-utils/common';
 const ViewModeContext = createContext<{
   viewMode: IListOrGrid;
   setViewMode: (mode: IListOrGrid) => void;
-}>({ viewMode: 'list', setViewMode() {} });
+}>({ viewMode: 'r', setViewMode() {} });
 
-const retriveInitialViewMode = (): IListOrGrid => {
-  return (
-    isBrowser() ? sessionStorage.getItem('ViewMode') || 'list' : 'list'
-  ) as IListOrGrid;
+const setVM = ({ mode }: { mode: IListOrGrid }) => {
+  sessionStorage.setItem('view-mode', mode);
 };
 
-const saveViewMode = ({ mode }: { mode: IListOrGrid }) => {
+const getVM = (): IListOrGrid => {
   if (isBrowser()) {
-    sessionStorage.setItem('ViewMode', mode);
+    try {
+      return (sessionStorage.getItem('view-mode') || 'r') as IListOrGrid;
+    } catch (err) {
+      //
+    }
   }
+  return 'r';
 };
 
 export const ViewModeProvider = ({ children }: { children: ReactNode }) => {
-  const [viewMode, setViewMode] = useState(retriveInitialViewMode());
+  const [viewMode, setViewMode] = useState<IListOrGrid>(getVM());
 
   useEffect(() => {
-    saveViewMode({ mode: viewMode });
+    setVM({ mode: viewMode });
   }, [viewMode]);
 
   return (
@@ -55,20 +58,14 @@ export const useViewMode = () => {
 const ViewMode = () => {
   const { viewMode, setViewMode } = useViewMode();
 
-  const [tempViewMode, setTempViewMode] = useState<IListOrGrid>('list');
-
-  useEffect(() => {
-    setTempViewMode(viewMode);
-  }, [viewMode]);
-
   return (
     <Toolbar.ButtonGroup.Root
-      value={tempViewMode}
+      value={viewMode}
       onValueChange={setViewMode}
       selectable
     >
-      <Toolbar.ButtonGroup.IconButton icon={<List />} value="list" />
-      <Toolbar.ButtonGroup.IconButton icon={<SquaresFour />} value="grid" />
+      <Toolbar.ButtonGroup.IconButton icon={<List />} value="r" />
+      <Toolbar.ButtonGroup.IconButton icon={<SquaresFour />} value="c" />
     </Toolbar.ButtonGroup.Root>
   );
 };
diff --git a/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx b/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx
index 556c07bfa..349e612e9 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx
@@ -149,7 +149,7 @@ const ListView = ({ items = [], templates = [], onAction }: IResource) => {
             className: 'w-[180px]',
           },
           {
-            render: () => '',
+            render: () => 'Status',
             name: 'status',
             className: 'flex-1 min-w-[30px] flex items-center justify-center',
           },
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
index 0840ad026..6b4e11a14 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
@@ -28,6 +28,7 @@ import LogComp from '~/root/lib/client/components/logger';
 import LogAction from '~/console/page-components/log-action';
 import { useDataState } from '~/console/page-components/common-state';
 import { useState } from 'react';
+import { SyncStatusV2 } from '~/console/components/sync-status';
 
 type BaseType = ExtractNodeType<IClusters>;
 const RESOURCE_NAME = 'cluster';
@@ -227,7 +228,7 @@ const ListView = ({ items }: { items: BaseType[] }) => {
               //   ),
               // },
               status: {
-                render: () => null,
+                render: () => <SyncStatusV2 item={i} />,
               },
               provider: { render: () => <ListItem data={provider} /> },
               updated: {
diff --git a/src/apps/console/server/r-utils/common.ts b/src/apps/console/server/r-utils/common.ts
index 8727832b5..63e93eaae 100644
--- a/src/apps/console/server/r-utils/common.ts
+++ b/src/apps/console/server/r-utils/common.ts
@@ -151,7 +151,7 @@ export type ExtractNodeType<T> = T extends Nodes
   ? T['edges'][number]['node']
   : T;
 
-export type IListOrGrid = 'list' | 'grid' | NonNullableString;
+export type IListOrGrid = 'r' | 'c' | NonNullableString;
 export type wsOrEnv = 'environment' | 'workspace' | NonNullableString;
 
 export const parseUpdateTime = (resource: { updateTime: string }) => {
diff --git a/src/design-system/components/atoms/toolbar.tsx b/src/design-system/components/atoms/toolbar.tsx
index 8172410c6..f80627ae2 100644
--- a/src/design-system/components/atoms/toolbar.tsx
+++ b/src/design-system/components/atoms/toolbar.tsx
@@ -278,6 +278,7 @@ const ToolbarButtonGroup = React.forwardRef<
       dir={context?.dir}
       {...toggleGroupScope}
       {...toggleGroupProps}
+      value={toggleGroupProps.value}
       ref={forwardedRef}
       rovingFocus={false}
       className={cn('flex flex-row pulsable')}

From 1b498ce6531eb6a8fd7af6786d33217e532a61bf Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Thu, 14 Mar 2024 18:07:29 +0530
Subject: [PATCH 32/66] Fix/issues (#148)

* :construction: Wip

* :bug: Fixed issue with logs reconnection
---
 lib/app-setup/root.tsx                        | 28 +++----
 lib/client/helpers/log.ts                     |  2 +-
 lib/client/helpers/socket/context.tsx         | 79 ++++++++-----------
 lib/client/hooks/use-custom-loader-data.tsx   |  7 +-
 .../helpers/execute-query-with-context.ts     | 23 ++++--
 package.json                                  |  3 +-
 pnpm-lock.yaml                                | 19 ++---
 .../console/components/loading-component.tsx  |  4 +-
 src/apps/console/routes/_a+/teams.tsx         | 15 ++--
 .../$project+/$environment+/_layout.tsx       | 26 ++----
 .../$project+/$environment+/apps/route.tsx    |  8 +-
 .../$router+/settings/general/route.tsx       |  2 -
 .../_main+/$account+/$project+/_layout.tsx    | 46 +++--------
 .../routes/_main+/$account+/_layout.tsx       |  6 +-
 .../gql/queries/managed-templates-queries.ts  |  4 +-
 15 files changed, 110 insertions(+), 162 deletions(-)

diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
index bf731c3ea..f8cab6c3d 100644
--- a/lib/app-setup/root.tsx
+++ b/lib/app-setup/root.tsx
@@ -233,21 +233,21 @@ const Root = ({
             __html: getClientEnv(env),
           }}
         />
-        <LiveReload port={443} />
-        <Tooltip.Provider>
-          <ProgressContainer>
-            <ReloadIndicator />
-            <NonIdleProgressBar />
-            {isBrowser() && <ToastContainer position="bottom-left" />}
-            {error ? (
-              <div>{JSON.stringify(error)}</div>
-            ) : (
-              <Wrapper>
+        {/* <LiveReload port={443} /> */}
+        <ToastContainer position="bottom-left" />
+        <ProgressContainer>
+          <ReloadIndicator />
+          <NonIdleProgressBar />
+          {error ? (
+            <div>{JSON.stringify(error)}</div>
+          ) : (
+            <Wrapper>
+              <Tooltip.Provider>
                 <Outlet />
-              </Wrapper>
-            )}
-          </ProgressContainer>
-        </Tooltip.Provider>
+              </Tooltip.Provider>
+            </Wrapper>
+          )}
+        </ProgressContainer>
         <Scripts />
       </body>
     </html>
diff --git a/lib/client/helpers/log.ts b/lib/client/helpers/log.ts
index ed4525f45..be446b83f 100644
--- a/lib/client/helpers/log.ts
+++ b/lib/client/helpers/log.ts
@@ -49,7 +49,7 @@ const logger = {
 
     if (err) {
       if (!isDev) {
-        console.trace(`\n\n${args}\n\n`);
+        console.trace(`\n\n${err}\n\n`);
         return;
       }
       console.error(`\n\n${err}\n\n`);
diff --git a/lib/client/helpers/socket/context.tsx b/lib/client/helpers/socket/context.tsx
index 4919a8f31..f7d280c99 100644
--- a/lib/client/helpers/socket/context.tsx
+++ b/lib/client/helpers/socket/context.tsx
@@ -7,8 +7,8 @@ import {
   useRef,
   useState,
 } from 'react';
-import * as wsock from 'websocket';
 import { ChildrenProps } from '~/components/types';
+import ReconnectingWebSocket from 'reconnecting-websocket';
 import logger from '~/root/lib/client/helpers/log';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import { socketUrl } from '~/root/lib/configs/base-url.cjs';
@@ -152,7 +152,7 @@ export const useSubscribe = <T extends IData>(
 };
 
 export const SockProvider = ({ children }: ChildrenProps) => {
-  const sockPromise = useRef<Promise<wsock.w3cwebsocket> | null>(null);
+  const sockPromise = useRef<Promise<ReconnectingWebSocket> | null>(null);
 
   const [responses, setResponses] = useState<IResponses>({});
   const [errors, setErrors] = useState<IResponses>({});
@@ -200,7 +200,7 @@ export const SockProvider = ({ children }: ChildrenProps) => {
     });
   }, []);
 
-  const onMessage = useCallback((msg: wsock.IMessageEvent) => {
+  const onMessage = useCallback((msg: any) => {
     try {
       const m: ISocketResp = JSON.parse(msg.data as string);
 
@@ -223,52 +223,39 @@ export const SockProvider = ({ children }: ChildrenProps) => {
     }
   }, []);
 
+  const getSocket = () => {
+    return new Promise<ReconnectingWebSocket>((res, rej) => {
+      try {
+        // eslint-disable-next-line new-cap
+        const w = new ReconnectingWebSocket(`${socketUrl}/ws`, '', {});
+
+        w.onmessage = onMessage;
+
+        w.onopen = () => {
+          res(w);
+        };
+
+        w.onerror = (e) => {
+          rej(e);
+        };
+
+        w.onclose = () => {
+          rej();
+        };
+      } catch (e) {
+        rej(e);
+      }
+    });
+  };
+
   useDebounce(
     () => {
       if (typeof window !== 'undefined') {
-        const connnect = (recon = () => {}) => {
-          try {
-            sockPromise.current = new Promise<wsock.w3cwebsocket>(
-              (res, rej) => {
-                try {
-                  // eslint-disable-next-line new-cap
-                  const w = new wsock.w3cwebsocket(
-                    `${socketUrl}/ws`,
-                    '',
-                    '',
-                    {}
-                  );
-
-                  w.onmessage = onMessage;
-
-                  w.onopen = () => {
-                    res(w);
-                  };
-
-                  w.onerror = (e) => {
-                    console.error(e);
-                    recon();
-                  };
-
-                  w.onclose = () => {
-                    recon();
-                  };
-                } catch (e) {
-                  rej(e);
-                }
-              }
-            );
-          } catch (e) {
-            logger.error(e);
-          }
-        };
-
-        connnect(() => {
-          setTimeout(() => {
-            console.log('reconnecting');
-            connnect();
-          }, 1000);
-        });
+        try {
+          sockPromise.current = getSocket();
+        } catch (e) {
+          logger.error(e);
+        }
       }
     },
     1000,
diff --git a/lib/client/hooks/use-custom-loader-data.tsx b/lib/client/hooks/use-custom-loader-data.tsx
index 40ca49199..7b2efc13d 100644
--- a/lib/client/hooks/use-custom-loader-data.tsx
+++ b/lib/client/hooks/use-custom-loader-data.tsx
@@ -6,5 +6,8 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
   ? I
   : never;
 
-export const useExtLoaderData = <T extends (...args: any) => Promise<any>>() =>
-  useLoaderData() as UnionToIntersection<Awaited<ReturnType<T>>>;
+export const useExtLoaderData = <
+  T extends (...args: any) => Promise<any>
+>() => {
+  return useLoaderData() as UnionToIntersection<Awaited<ReturnType<T>>>;
+};
diff --git a/lib/server/helpers/execute-query-with-context.ts b/lib/server/helpers/execute-query-with-context.ts
index 43eea48a6..74cc33020 100644
--- a/lib/server/helpers/execute-query-with-context.ts
+++ b/lib/server/helpers/execute-query-with-context.ts
@@ -11,6 +11,8 @@ import {
   NN,
 } from '../../types/common';
 
+const ignoreLogsFor = ['accounts_listAccounts', 'auth_me'];
+
 const parseCookie = (cookieString: string) => {
   const [cookie] = cookieString.split(';');
   const [name, value] = cookie.split('=');
@@ -43,9 +45,12 @@ export const ExecuteQueryWithContext = (
     def?: any
   ): IExecutorResp<B, C> {
     const logId = uuid();
-    const apiName = `[#${logId.substring(0, 5)}] ${
-      (q as any)?.definitions[0]?.selectionSet?.selections[0]?.name?.value || ''
-    }`;
+
+    const gqlName =
+      (q as any)?.definitions[0]?.selectionSet?.selections[0]?.name?.value ||
+      '';
+
+    const apiName = `[#${logId.substring(0, 5)}] ${gqlName}`;
 
     const res: IExecutorResp<B, C> = async (variables) => {
       const { transformer } = formatter;
@@ -111,13 +116,15 @@ export const ExecuteQueryWithContext = (
         }
         return { ...resp.data, data };
       } catch (err) {
-        if ((err as AxiosError).response) {
-          console.log('\nErrorIn:', apiName, (err as Error).name, '\n');
+        if (!ignoreLogsFor.includes(gqlName)) {
+          if ((err as AxiosError).response) {
+            console.log('\nErrorIn:', apiName, (err as Error).name, '\n');
 
-          return (err as AxiosError).response?.data;
-        }
+            return (err as AxiosError).response?.data;
+          }
 
-        console.log('\nErrorIn:', apiName, (err as Error).message, '\n');
+          console.log('\nErrorIn:', apiName, (err as Error).message, '\n');
+        }
 
         return {
           data: null,
diff --git a/package.json b/package.json
index 21deaed89..889c3a6d7 100644
--- a/package.json
+++ b/package.json
@@ -93,13 +93,13 @@
 		"react-router-dom": "^6.21.1",
 		"react-toastify": "^9.1.3",
 		"react-viewport-list": "^7.1.2",
+		"reconnecting-websocket": "^4.4.0",
 		"remix": "^1.19.3",
 		"search-in-json": "^1.0.67",
 		"sonner": "^1.4.3",
 		"swr": "^2.2.4",
 		"use-immer": "^0.9.0",
 		"uuid": "^9.0.1",
-		"websocket": "^1.0.34",
 		"yup": "^1.3.3"
 	},
 	"devDependencies": {
@@ -115,7 +115,6 @@
 		"@types/react-dom": "^18.2.18",
 		"@types/react-ranger": "^2.0.4",
 		"@types/uuid": "^9.0.7",
-		"@types/websocket": "^1.0.10",
 		"@typescript-eslint/eslint-plugin": "^6.17.0",
 		"@typescript-eslint/parser": "^6.17.0",
 		"autoprefixer": "^10.4.16",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e711b1a68..78f02f2d6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -218,6 +218,9 @@ dependencies:
   react-viewport-list:
     specifier: ^7.1.2
     version: 7.1.2(react@18.2.0)
+  reconnecting-websocket:
+    specifier: ^4.4.0
+    version: 4.4.0
   remix:
     specifier: ^1.19.3
     version: 1.19.3
@@ -236,9 +239,6 @@ dependencies:
   uuid:
     specifier: ^9.0.1
     version: 9.0.1
-  websocket:
-    specifier: ^1.0.34
-    version: 1.0.34
   yup:
     specifier: ^1.3.3
     version: 1.3.3
@@ -280,9 +280,6 @@ devDependencies:
   '@types/uuid':
     specifier: ^9.0.7
     version: 9.0.7
-  '@types/websocket':
-    specifier: ^1.0.10
-    version: 1.0.10
   '@typescript-eslint/eslint-plugin':
     specifier: ^6.17.0
     version: 6.17.0(@typescript-eslint/parser@6.17.0)(eslint@8.56.0)(typescript@5.3.3)
@@ -4318,12 +4315,6 @@ packages:
     resolution: {integrity: sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==}
     dev: true
 
-  /@types/websocket@1.0.10:
-    resolution: {integrity: sha512-svjGZvPB7EzuYS94cI7a+qhwgGU1y89wUgjT6E2wVUfmAGIvRfT7obBvRtnhXCSsoMdlG4gBFGE7MfkIXZLoww==}
-    dependencies:
-      '@types/node': 20.10.6
-    dev: true
-
   /@typescript-eslint/eslint-plugin@6.17.0(@typescript-eslint/parser@6.17.0)(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-Vih/4xLXmY7V490dGwBQJTpIZxH4ZFH6eCVmQ4RFkB+wmaCTDAx4dtgoWwMNGKLkqRY1L6rPqzEbjorRnDo4rQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -9542,6 +9533,10 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /reconnecting-websocket@4.4.0:
+    resolution: {integrity: sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng==}
+    dev: false
+
   /reflect.getprototypeof@1.0.4:
     resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
     engines: {node: '>= 0.4'}
diff --git a/src/apps/console/components/loading-component.tsx b/src/apps/console/components/loading-component.tsx
index e286eef64..745c0c140 100644
--- a/src/apps/console/components/loading-component.tsx
+++ b/src/apps/console/components/loading-component.tsx
@@ -82,7 +82,9 @@ const GetSkeleton = ({
 };
 
 interface AwaitRespProps {
-  readonly error?: string;
+  readonly error?: {
+    readonly message: string;
+  };
   readonly redirect?: string;
   readonly cookie?: FlatMapType<string>[];
 }
diff --git a/src/apps/console/routes/_a+/teams.tsx b/src/apps/console/routes/_a+/teams.tsx
index 2c7d29c04..4653c453e 100644
--- a/src/apps/console/routes/_a+/teams.tsx
+++ b/src/apps/console/routes/_a+/teams.tsx
@@ -1,15 +1,9 @@
 import { redirect } from '@remix-run/node';
-import {
-  Link,
-  useLoaderData,
-  useNavigate,
-  useOutletContext,
-} from '@remix-run/react';
+import { Link, useNavigate, useOutletContext } from '@remix-run/react';
 import { useEffect, useState } from 'react';
 import { Button } from '~/components/atoms/button';
 import { usePagination } from '~/components/molecule/pagination';
 import { cn, generateKey } from '~/components/utils';
-import logger from '~/root/lib/client/helpers/log';
 import { authBaseUrl } from '~/root/lib/configs/base-url.cjs';
 import { UserMe } from '~/root/lib/server/gql/saved-queries';
 import { IRemixCtx } from '~/root/lib/types/common';
@@ -26,6 +20,7 @@ import ConsoleAvatar from '~/console/components/console-avatar';
 import { ArrowRight, Users } from '~/console/components/icons';
 import SplitWrapper from '~/console/components/split-wrapper';
 import FillerTeam from '~/console/assets/filler-team';
+import { useExtLoaderData } from '~/root/lib/client/hooks/use-custom-loader-data';
 
 export const loader = async (ctx: IRemixCtx) => {
   let accounts;
@@ -35,7 +30,7 @@ export const loader = async (ctx: IRemixCtx) => {
       {}
     );
     if (errors) {
-      throw errors[0];
+      return handleError(errors[0]);
     }
     accounts = data;
 
@@ -58,7 +53,7 @@ export const loader = async (ctx: IRemixCtx) => {
       };
     }
   } catch (err) {
-    logger.error(err);
+    return handleError(err);
   }
   return {
     accounts: accounts || [],
@@ -67,7 +62,7 @@ export const loader = async (ctx: IRemixCtx) => {
 };
 
 const Accounts = () => {
-  const { accounts, invites } = useLoaderData<typeof loader>();
+  const { accounts, invites } = useExtLoaderData<typeof loader>();
   const { user } = useOutletContext<{
     user: UserMe;
   }>();
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/_layout.tsx
index eca956c1c..133432882 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/_layout.tsx
@@ -7,10 +7,8 @@ import {
   File,
   TreeStructure,
   Check,
-  ChevronUpDown,
   ChevronDown,
 } from '~/console/components/icons';
-import { redirect } from '@remix-run/node';
 import {
   Link,
   Outlet,
@@ -18,35 +16,26 @@ import {
   useOutletContext,
   useParams,
 } from '@remix-run/react';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import OptionList from '~/components/atoms/option-list';
 import { CommonTabs } from '~/console/components/common-navbar-tabs';
 import HandleScope from '~/console/page-components/new-scope';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
-import {
-  ExtractNodeType,
-  parseName,
-  parseNodes,
-} from '~/console/server/r-utils/common';
+import { parseName, parseNodes } from '~/console/server/r-utils/common';
 import {
   ensureAccountClientSide,
   ensureAccountSet,
-  ensureClusterClientSide,
 } from '~/console/server/utils/auth-utils';
-import logger from '~/root/lib/client/helpers/log';
 import { SubNavDataProvider } from '~/root/lib/client/hooks/use-create-subnav-action';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import { IRemixCtx } from '~/root/lib/types/common';
-import { handleError } from '~/root/lib/utils/common';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { BreadcrumSlash, tabIconSize } from '~/console/utils/commons';
-import {
-  IEnvironment,
-  IEnvironments,
-} from '~/console/server/gql/queries/environment-queries';
+import { IEnvironment } from '~/console/server/gql/queries/environment-queries';
 import { cn } from '~/components/utils';
 import { Button } from '~/components/atoms/button';
 import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
+import { handleError } from '~/root/lib/utils/common';
 import { IProjectContext } from '../_layout';
 
 export interface IEnvironmentContext extends IProjectContext {
@@ -221,7 +210,7 @@ const CurrentBreadcrum = ({ environment }: { environment: IEnvironment }) => {
                 No environments found
               </div>
               <div className="bodyMd text-text-soft">
-                Your search for "{search}" did not match and environments.
+                Your search for {`"${search}"`} did not match and environments.
               </div>
             </div>
           )}
@@ -264,15 +253,14 @@ export const loader = async (ctx: IRemixCtx) => {
     );
 
     if (errors) {
-      logger.error(errors);
-      throw errors[0];
+      return handleError(errors[0]);
     }
 
     return {
       environment: data || {},
     };
   } catch (err) {
-    return redirect(`../environments`);
+    return handleError(err);
   }
 };
 
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/route.tsx
index d9679b792..dcdb33e30 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/route.tsx
@@ -9,7 +9,6 @@ import { parseNodes } from '~/console/server/r-utils/common';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { getPagination, getSearch } from '~/console/server/utils/common';
 import { IRemixCtx } from '~/root/lib/types/common';
-import fake from '~/root/fake-data-generator/fake';
 import { clearAppState } from '~/console/page-components/app-states';
 import { useEffect } from 'react';
 import Tools from './tools';
@@ -27,7 +26,6 @@ export const loader = async (ctx: IRemixCtx) => {
       search: getSearch(ctx),
     });
     if (errors) {
-      console.error(errors);
       throw errors[0];
     }
 
@@ -47,9 +45,9 @@ const Apps = () => {
   return (
     <LoadingComp
       data={promise}
-    // skeletonData={{
-    //   appsData: fake.ConsoleListAppsQuery.core_listApps as any,
-    // }}
+      // skeletonData={{
+      //   appsData: fake.ConsoleListAppsQuery.core_listApps as any,
+      // }}
     >
       {({ appsData }) => {
         const apps = parseNodes(appsData);
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/general/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/general/route.tsx
index 7c4bbf07b..42bb3cfe9 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/general/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/general/route.tsx
@@ -10,13 +10,11 @@ import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { parseName } from '~/console/server/r-utils/common';
 import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
-import { IRouterConfig } from 'websocket';
 import Wrapper from '~/console/components/wrapper';
 import DeleteDialog from '~/console/components/delete-dialog';
 import { useState } from 'react';
 import { handleError } from '~/root/lib/utils/common';
 import { useReload } from '~/root/lib/client/helpers/reloader';
-import { IProjectContext } from '../../../../../_layout';
 import { IRouterContext } from '../../_layout';
 
 // export const updateProject = async ({
diff --git a/src/apps/console/routes/_main+/$account+/$project+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/_layout.tsx
index 47c68ab72..d69cd4068 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/_layout.tsx
@@ -6,7 +6,6 @@ import {
   useOutletContext,
   useParams,
 } from '@remix-run/react';
-import logger from '~/root/lib/client/helpers/log';
 import { SubNavDataProvider } from '~/root/lib/client/hooks/use-create-subnav-action';
 import { IRemixCtx } from '~/root/lib/types/common';
 import {
@@ -15,39 +14,18 @@ import {
 } from '~/console/server/gql/queries/project-queries';
 import { CommonTabs } from '~/console/components/common-navbar-tabs';
 import {
-  ensureAccountClientSide,
   ensureAccountSet,
   ensureClusterSet,
 } from '~/console/server/utils/auth-utils';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
-import {
-  Check,
-  ChevronUpDown,
-  Database,
-  GearSix,
-  Plus,
-  Search,
-  VirtualMachine,
-} from '~/console/components/icons';
-import {
-  ExtractNodeType,
-  parseName,
-  parseNodes,
-} from '~/console/server/r-utils/common';
+import { Database, GearSix, VirtualMachine } from '~/console/components/icons';
+import { ExtractNodeType, parseName } from '~/console/server/r-utils/common';
 import LogoWrapper from '~/console/components/logo-wrapper';
 import { BrandLogo } from '~/components/branding/brand-logo';
 import { BreadcrumSlash, tabIconSize } from '~/console/utils/commons';
-import { cn } from '~/components/utils';
 import { IMSvTemplates } from '~/console/server/gql/queries/managed-templates-queries';
 import { ICluster } from '~/console/server/gql/queries/cluster-queries';
-import { useRef, useState } from 'react';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
-import useDebounce from '~/root/lib/client/hooks/use-debounce';
-import { handleError } from '~/root/lib/utils/common';
 import { Button } from '~/components/atoms/button';
-import OptionList from '~/components/atoms/option-list';
-import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
-import { LoadingPlaceHolder } from '~/console/components/loading';
 import { IAccountContext } from '../_layout';
 
 export interface IProjectContext extends IAccountContext {
@@ -280,11 +258,19 @@ export const loader = async (ctx: IRemixCtx) => {
       name: project,
     });
 
+    if (errors) {
+      throw errors[0];
+    }
+
     const { data: msvTemplates, errors: msvError } = await GQLServerHandler(
       ctx.request
     ).listMSvTemplates({});
 
-    if (!data.clusterName) {
+    if (msvError) {
+      throw msvError[0];
+    }
+
+    if (!data?.clusterName) {
       throw new Error('No cluster in project.');
     }
 
@@ -294,14 +280,6 @@ export const loader = async (ctx: IRemixCtx) => {
       name: data.clusterName,
     });
 
-    if (errors) {
-      throw errors[0];
-    }
-
-    if (msvError) {
-      throw msvError[0];
-    }
-
     if (clusterError) {
       throw clusterError[0];
     }
@@ -312,7 +290,7 @@ export const loader = async (ctx: IRemixCtx) => {
       cluster: clusterData,
     };
   } catch (err) {
-    logger.log(err);
+    // logger.error(err);
     return redirect(`/${account}/projects`);
   }
 };
diff --git a/src/apps/console/routes/_main+/$account+/_layout.tsx b/src/apps/console/routes/_main+/$account+/_layout.tsx
index f168be918..15586c79b 100644
--- a/src/apps/console/routes/_main+/$account+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/_layout.tsx
@@ -22,7 +22,6 @@ import {
 } from '@remix-run/react';
 import { ReactNode, useEffect, useRef, useState } from 'react';
 import Popup from '~/components/molecule/popup';
-import logger from '~/root/lib/client/helpers/log';
 import { useDataFromMatches } from '~/root/lib/client/hooks/use-custom-matches';
 import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
 import { IRemixCtx, LoaderResult } from '~/root/lib/types/common';
@@ -61,7 +60,7 @@ import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
 import { useSearch } from '~/root/lib/client/helpers/search-filter';
 import { IConsoleRootContext } from '../_layout/_layout';
 
-const ProfileIcon = ({ size = 16 }: { size?: number }) => {
+const _ProfileIcon = ({ size = 16 }: { size?: number }) => {
   return (
     <svg
       width={size}
@@ -79,7 +78,7 @@ const ProfileIcon = ({ size = 16 }: { size?: number }) => {
   );
 };
 
-const AccountMenu = ({ account }: { account: IAccount }) => {
+const _AccountMenu = ({ account }: { account: IAccount }) => {
   const accounts = useDataFromMatches<IAccounts>('accounts', {});
   const { account: accountName } = useParams();
   const navigate = useNavigate();
@@ -504,7 +503,6 @@ export const loader = async (ctx: IRemixCtx) => {
       devicesForUser,
     };
   } catch (err) {
-    logger.error(err);
     const k = redirect('/teams') as any;
     return k as {
       account: typeof acccountData;
diff --git a/src/apps/console/server/gql/queries/managed-templates-queries.ts b/src/apps/console/server/gql/queries/managed-templates-queries.ts
index 79f9721ca..1d264180d 100644
--- a/src/apps/console/server/gql/queries/managed-templates-queries.ts
+++ b/src/apps/console/server/gql/queries/managed-templates-queries.ts
@@ -73,7 +73,7 @@ export const managedTemplateQueries = (executor: IExecutor) => ({
       transformer(data: ConsoleGetMSvTemplateQuery) {
         return data.infra_getManagedServiceTemplate;
       },
-      vars(_: ConsoleGetMSvTemplateQueryVariables) { },
+      vars(_: ConsoleGetMSvTemplateQueryVariables) {},
     }
   ),
   listMSvTemplates: executor(
@@ -133,7 +133,7 @@ export const managedTemplateQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleListMSvTemplatesQuery) =>
         data.infra_listManagedServiceTemplates,
-      vars(_: ConsoleListMSvTemplatesQueryVariables) { },
+      vars(_: ConsoleListMSvTemplatesQueryVariables) {},
     }
   ),
 });

From 303f8f511d9da670eb2d806b94414c90403d8639 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Thu, 14 Mar 2024 18:23:17 +0530
Subject: [PATCH 33/66] :sparkles: Added record version to app logs

---
 gql-queries-generator/doc/queries.graphql      |  1 +
 lib/client/components/logger/index.tsx         |  1 +
 lib/client/helpers/socket/useSockLogs.tsx      | 17 +++++++++++++----
 .../app+/$app+/logs-n-metrics/route.tsx        |  1 +
 src/apps/console/routes/test2/_index.tsx       | 18 ------------------
 .../console/server/gql/queries/app-queries.ts  | 15 ++++++++-------
 src/generated/gql/server.ts                    |  1 +
 7 files changed, 25 insertions(+), 29 deletions(-)
 delete mode 100644 src/apps/console/routes/test2/_index.tsx

diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
index 36efb260f..aed9280dd 100644
--- a/gql-queries-generator/doc/queries.graphql
+++ b/gql-queries-generator/doc/queries.graphql
@@ -945,6 +945,7 @@ mutation consoleDeleteApp($projectName: String!, $envName: String!, $appName: St
 query consoleGetApp($projectName: String!, $envName: String!, $name: String!) {
   core_getApp(projectName: $projectName, envName: $envName, name: $name) {
     id
+    recordVersion
     createdBy {
       userEmail
       userId
diff --git a/lib/client/components/logger/index.tsx b/lib/client/components/logger/index.tsx
index bdce1fc41..1531263cc 100644
--- a/lib/client/components/logger/index.tsx
+++ b/lib/client/components/logger/index.tsx
@@ -71,6 +71,7 @@ export interface IuseLog {
   account: string;
   cluster: string;
   trackingId: string;
+  recordVersion?: number;
 }
 
 const hoverClass = `hover:bg-[#ddd]`;
diff --git a/lib/client/helpers/socket/useSockLogs.tsx b/lib/client/helpers/socket/useSockLogs.tsx
index b1831166f..0f58063b7 100644
--- a/lib/client/helpers/socket/useSockLogs.tsx
+++ b/lib/client/helpers/socket/useSockLogs.tsx
@@ -7,9 +7,15 @@ interface IuseLog {
   account: string;
   cluster: string;
   trackingId: string;
+  recordVersion?: number;
 }
 
-export const useSocketLogs = ({ account, cluster, trackingId }: IuseLog) => {
+export const useSocketLogs = ({
+  account,
+  cluster,
+  trackingId,
+  recordVersion,
+}: IuseLog) => {
   const [logs, setLogs] = useState<ISocketResp<ILog>[]>([]);
   const { responses, infos, subscribed, errors } = useSubscribe(
     {
@@ -17,9 +23,12 @@ export const useSocketLogs = ({ account, cluster, trackingId }: IuseLog) => {
       data: {
         id: `${account}.${cluster}.${trackingId}`,
         spec: {
-          account,
-          cluster,
-          trackingId,
+          ...{
+            account,
+            cluster,
+            trackingId,
+            recordVersion,
+          },
         },
       },
     },
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
index 32248e351..881a2cccf 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
@@ -243,6 +243,7 @@ const LogsAndMetrics = () => {
               account: parseName(account),
               cluster: project.clusterName || '',
               trackingId: app.id,
+              recordVersion: app.recordVersion,
             },
           }}
         />
diff --git a/src/apps/console/routes/test2/_index.tsx b/src/apps/console/routes/test2/_index.tsx
deleted file mode 100644
index 315d5f0d7..000000000
--- a/src/apps/console/routes/test2/_index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useEffect } from 'react';
-import { useSocketLogs } from '~/root/lib/client/helpers/socket/useSockLogs';
-
-const App = () => {
-  const resp = useSocketLogs({
-    account: 'ab-641330',
-    cluster: 'ab-cluster-3',
-    trackingId: 'app-3ez2fpr-3oc8gqjib-ii5-pbat6d',
-  });
-
-  useEffect(() => {
-    console.log(resp);
-  }, [resp]);
-
-  return <div>Logs</div>;
-};
-
-export default App;
diff --git a/src/apps/console/server/gql/queries/app-queries.ts b/src/apps/console/server/gql/queries/app-queries.ts
index 9d33b4f52..7f0a5def6 100644
--- a/src/apps/console/server/gql/queries/app-queries.ts
+++ b/src/apps/console/server/gql/queries/app-queries.ts
@@ -34,7 +34,7 @@ export const appQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleRestartAppQuery) => data.core_restartApp,
-      vars: (_: ConsoleRestartAppQueryVariables) => { },
+      vars: (_: ConsoleRestartAppQueryVariables) => {},
     }
   ),
   createApp: executor(
@@ -55,7 +55,7 @@ export const appQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleCreateAppMutation) => data.core_createApp,
-      vars(_: ConsoleCreateAppMutationVariables) { },
+      vars(_: ConsoleCreateAppMutationVariables) {},
     }
   ),
 
@@ -79,7 +79,7 @@ export const appQueries = (executor: IExecutor) => ({
       transformer: (data: ConsoleUpdateAppMutation) => {
         return data.core_updateApp;
       },
-      vars(_: ConsoleUpdateAppMutationVariables) { },
+      vars(_: ConsoleUpdateAppMutationVariables) {},
     }
   ),
   interceptApp: executor(
@@ -103,7 +103,7 @@ export const appQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleInterceptAppMutation) =>
         data.core_interceptApp,
-      vars(_: ConsoleInterceptAppMutationVariables) { },
+      vars(_: ConsoleInterceptAppMutationVariables) {},
     }
   ),
   deleteApp: executor(
@@ -122,7 +122,7 @@ export const appQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleDeleteAppMutation) => data.core_deleteApp,
-      vars(_: ConsoleDeleteAppMutationVariables) { },
+      vars(_: ConsoleDeleteAppMutationVariables) {},
     }
   ),
   getApp: executor(
@@ -134,6 +134,7 @@ export const appQueries = (executor: IExecutor) => ({
       ) {
         core_getApp(projectName: $projectName, envName: $envName, name: $name) {
           id
+          recordVersion
           createdBy {
             userEmail
             userId
@@ -274,7 +275,7 @@ export const appQueries = (executor: IExecutor) => ({
       transformer(data: ConsoleGetAppQuery) {
         return data.core_getApp;
       },
-      vars(_: ConsoleGetAppQueryVariables) { },
+      vars(_: ConsoleGetAppQueryVariables) {},
     }
   ),
   listApps: executor(
@@ -424,7 +425,7 @@ export const appQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleListAppsQuery) => data.core_listApps,
-      vars(_: ConsoleListAppsQueryVariables) { },
+      vars(_: ConsoleListAppsQueryVariables) {},
     }
   ),
 });
diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
index 42d64a284..e2e43543d 100644
--- a/src/generated/gql/server.ts
+++ b/src/generated/gql/server.ts
@@ -2438,6 +2438,7 @@ export type ConsoleGetAppQueryVariables = Exact<{
 export type ConsoleGetAppQuery = {
   core_getApp?: {
     id: string;
+    recordVersion: number;
     creationTime: any;
     displayName: string;
     enabled?: boolean;

From 4930fe8509b122f09858a8e0d80adaa9706d05a8 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Fri, 15 Mar 2024 08:15:50 +0530
Subject: [PATCH 34/66] :art: Logs added

---
 lib/app-setup/root.tsx                        |   3 +-
 .../app+/$app+/logs-n-metrics/route.tsx       | 109 +++++++-----------
 2 files changed, 43 insertions(+), 69 deletions(-)

diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
index f8cab6c3d..12e1c566b 100644
--- a/lib/app-setup/root.tsx
+++ b/lib/app-setup/root.tsx
@@ -32,7 +32,6 @@ import tailwindBase from '~/design-system/tailwind-base.js';
 import { ReloadIndicator } from '~/lib/client/components/reload-indicator';
 import { isDev } from '~/lib/client/helpers/log';
 import { getClientEnv, getServerEnv } from '../configs/base-url.cjs';
-import { isBrowser } from '../client/helpers/is-browser';
 import { useDataFromMatches } from '../client/hooks/use-custom-matches';
 
 export const links: LinksFunction = () => [
@@ -233,7 +232,7 @@ const Root = ({
             __html: getClientEnv(env),
           }}
         />
-        {/* <LiveReload port={443} /> */}
+        <LiveReload port={443} />
         <ToastContainer position="bottom-left" />
         <ProgressContainer>
           <ReloadIndicator />
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
index 881a2cccf..2d45cc205 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
@@ -26,6 +26,38 @@ const LogsAndMetrics = () => {
   const tooltipXAixsFormatter = (val: number) =>
     dayjs(val * 1000).format('DD/MM/YY hh:mm A');
 
+  const getAnnotations = ({
+    min = '',
+    max = '',
+  }: {
+    min?: string;
+    max?: string;
+  }) => {
+    const tmin = parseValue(min, 0);
+    const tmax = parseValue(max, 0);
+
+    // if (tmin === tmax) {
+    //   return {};
+    // }
+
+    const k: ApexOptions['annotations'] = {
+      yaxis: [
+        {
+          y: tmin,
+          y2: tmax,
+          fillColor: '#33f',
+          borderColor: '#33f',
+          opacity: 0.1,
+          strokeDashArray: 0,
+          borderWidth: 1,
+          label: {},
+        },
+      ],
+    };
+
+    return k;
+  };
+
   useDebounce(
     () => {
       (async () => {
@@ -61,7 +93,7 @@ const LogsAndMetrics = () => {
 
   const chartOptions: ApexOptions = {
     chart: {
-      type: 'area',
+      type: 'line',
       zoom: {
         enabled: false,
       },
@@ -74,6 +106,7 @@ const LogsAndMetrics = () => {
       enabled: false,
     },
     stroke: {
+      width: 2,
       curve: 'smooth',
     },
 
@@ -115,6 +148,11 @@ const LogsAndMetrics = () => {
                 },
               },
             },
+
+            annotations: getAnnotations(
+              app.spec.containers[0].resourceCpu || {}
+            ),
+
             yaxis: {
               min: 0,
               max: parseValue(app.spec.containers[0].resourceCpu?.max, 0),
@@ -138,74 +176,11 @@ const LogsAndMetrics = () => {
                 data: memoryData,
               },
             ],
-            yaxis: {
-              min: 0,
-              max: parseValue(app.spec.containers[0].resourceMemory?.max, 0),
-
-              floating: false,
-              labels: {
-                formatter: (val) => `${val} MB`,
-              },
-            },
-            tooltip: {
-              x: {
-                formatter: tooltipXAixsFormatter,
-              },
-              y: {
-                formatter(val) {
-                  return `${val.toFixed(2)} MB`;
-                },
-              },
-            },
-          }}
-        />
-
-        <Chart
-          disabled
-          title="Network IO"
-          options={{
-            ...chartOptions,
-            series: [
-              {
-                color: '#1D4ED8',
-                name: 'DiskIO',
-                data: memoryData,
-              },
-            ],
-            yaxis: {
-              min: 0,
-              max: parseValue(app.spec.containers[0].resourceMemory?.max, 0),
 
-              floating: false,
-              labels: {
-                formatter: (val) => `${val} MB`,
-              },
-            },
-            tooltip: {
-              x: {
-                formatter: tooltipXAixsFormatter,
-              },
-              y: {
-                formatter(val) {
-                  return `${val.toFixed(2)} MB`;
-                },
-              },
-            },
-          }}
-        />
+            annotations: getAnnotations(
+              app.spec.containers[0].resourceMemory || {}
+            ),
 
-        <Chart
-          disabled
-          title="Disk IO"
-          options={{
-            ...chartOptions,
-            series: [
-              {
-                color: '#1D4ED8',
-                name: 'DiskIO',
-                data: memoryData,
-              },
-            ],
             yaxis: {
               min: 0,
               max: parseValue(app.spec.containers[0].resourceMemory?.max, 0),

From e624332574b611a84496f70ed7ac671214194e2b Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Fri, 15 Mar 2024 08:15:50 +0530
Subject: [PATCH 35/66] updated metrics

---
 lib/app-setup/root.tsx                        |   3 +-
 .../app+/$app+/logs-n-metrics/route.tsx       | 109 +++++++-----------
 2 files changed, 43 insertions(+), 69 deletions(-)

diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
index f8cab6c3d..12e1c566b 100644
--- a/lib/app-setup/root.tsx
+++ b/lib/app-setup/root.tsx
@@ -32,7 +32,6 @@ import tailwindBase from '~/design-system/tailwind-base.js';
 import { ReloadIndicator } from '~/lib/client/components/reload-indicator';
 import { isDev } from '~/lib/client/helpers/log';
 import { getClientEnv, getServerEnv } from '../configs/base-url.cjs';
-import { isBrowser } from '../client/helpers/is-browser';
 import { useDataFromMatches } from '../client/hooks/use-custom-matches';
 
 export const links: LinksFunction = () => [
@@ -233,7 +232,7 @@ const Root = ({
             __html: getClientEnv(env),
           }}
         />
-        {/* <LiveReload port={443} /> */}
+        <LiveReload port={443} />
         <ToastContainer position="bottom-left" />
         <ProgressContainer>
           <ReloadIndicator />
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
index 881a2cccf..2d45cc205 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
@@ -26,6 +26,38 @@ const LogsAndMetrics = () => {
   const tooltipXAixsFormatter = (val: number) =>
     dayjs(val * 1000).format('DD/MM/YY hh:mm A');
 
+  const getAnnotations = ({
+    min = '',
+    max = '',
+  }: {
+    min?: string;
+    max?: string;
+  }) => {
+    const tmin = parseValue(min, 0);
+    const tmax = parseValue(max, 0);
+
+    // if (tmin === tmax) {
+    //   return {};
+    // }
+
+    const k: ApexOptions['annotations'] = {
+      yaxis: [
+        {
+          y: tmin,
+          y2: tmax,
+          fillColor: '#33f',
+          borderColor: '#33f',
+          opacity: 0.1,
+          strokeDashArray: 0,
+          borderWidth: 1,
+          label: {},
+        },
+      ],
+    };
+
+    return k;
+  };
+
   useDebounce(
     () => {
       (async () => {
@@ -61,7 +93,7 @@ const LogsAndMetrics = () => {
 
   const chartOptions: ApexOptions = {
     chart: {
-      type: 'area',
+      type: 'line',
       zoom: {
         enabled: false,
       },
@@ -74,6 +106,7 @@ const LogsAndMetrics = () => {
       enabled: false,
     },
     stroke: {
+      width: 2,
       curve: 'smooth',
     },
 
@@ -115,6 +148,11 @@ const LogsAndMetrics = () => {
                 },
               },
             },
+
+            annotations: getAnnotations(
+              app.spec.containers[0].resourceCpu || {}
+            ),
+
             yaxis: {
               min: 0,
               max: parseValue(app.spec.containers[0].resourceCpu?.max, 0),
@@ -138,74 +176,11 @@ const LogsAndMetrics = () => {
                 data: memoryData,
               },
             ],
-            yaxis: {
-              min: 0,
-              max: parseValue(app.spec.containers[0].resourceMemory?.max, 0),
-
-              floating: false,
-              labels: {
-                formatter: (val) => `${val} MB`,
-              },
-            },
-            tooltip: {
-              x: {
-                formatter: tooltipXAixsFormatter,
-              },
-              y: {
-                formatter(val) {
-                  return `${val.toFixed(2)} MB`;
-                },
-              },
-            },
-          }}
-        />
-
-        <Chart
-          disabled
-          title="Network IO"
-          options={{
-            ...chartOptions,
-            series: [
-              {
-                color: '#1D4ED8',
-                name: 'DiskIO',
-                data: memoryData,
-              },
-            ],
-            yaxis: {
-              min: 0,
-              max: parseValue(app.spec.containers[0].resourceMemory?.max, 0),
 
-              floating: false,
-              labels: {
-                formatter: (val) => `${val} MB`,
-              },
-            },
-            tooltip: {
-              x: {
-                formatter: tooltipXAixsFormatter,
-              },
-              y: {
-                formatter(val) {
-                  return `${val.toFixed(2)} MB`;
-                },
-              },
-            },
-          }}
-        />
+            annotations: getAnnotations(
+              app.spec.containers[0].resourceMemory || {}
+            ),
 
-        <Chart
-          disabled
-          title="Disk IO"
-          options={{
-            ...chartOptions,
-            series: [
-              {
-                color: '#1D4ED8',
-                name: 'DiskIO',
-                data: memoryData,
-              },
-            ],
             yaxis: {
               min: 0,
               max: parseValue(app.spec.containers[0].resourceMemory?.max, 0),

From feb19af23d37c11848a854350dd561ca9355b243 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Fri, 15 Mar 2024 13:02:28 +0530
Subject: [PATCH 36/66] fix(router/app): - add link for router - add advanced
 options for nodepool in create app - add nodepool select in app settings

---
 .../app+/$app+/settings+/compute/route.tsx    |  49 ++-
 .../$environment+/new-app/app-compute.tsx     |  49 ++-
 .../routers/router-resources-V2.tsx           |   5 +-
 .../routers/router-resources.tsx              | 354 ------------------
 4 files changed, 84 insertions(+), 373 deletions(-)
 delete mode 100644 src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx

diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
index 916ad061e..d35c4a736 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
@@ -13,9 +13,12 @@ import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
 import { Button } from '~/components/atoms/button';
 import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { parseNodes } from '~/console/server/r-utils/common';
+import { parseName, parseNodes } from '~/console/server/r-utils/common';
 import { registryHost } from '~/lib/configs/base-url.cjs';
 import { Checkbox } from '~/components/atoms/checkbox';
+import { useMapper } from '~/components/utils';
+import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
+import { useOutletContext } from '@remix-run/react';
 import { plans } from '../../../../new-app/datas';
 
 const valueRender = ({
@@ -50,6 +53,7 @@ const SettingCompute = () => {
     getImageTag,
   } = useAppState();
   const { setPerformAction, hasChanges, loading } = useUnsavedChanges();
+  const { cluster } = useOutletContext<IProjectContext>();
 
   const api = useConsoleApi();
 
@@ -61,6 +65,21 @@ const SettingCompute = () => {
     return api.listRepo({});
   });
 
+  const {
+    data: nodepoolData,
+    isLoading: nodepoolLoading,
+    error: nodepoolLoadingError,
+  } = useCustomSwr('/nodepools', async () => {
+    return api.listNodePools({
+      clusterName: parseName(cluster),
+      pagination: {
+        first: 100,
+        orderBy: 'updateTime',
+        sortDirection: 'DESC',
+      },
+    });
+  });
+
   const { values, errors, handleChange, submit, resetValues } = useForm({
     initialValues: {
       imageUrl: getContainer(0)?.image || '',
@@ -104,6 +123,8 @@ const SettingCompute = () => {
         app.spec.containers[activeContIndex].resourceMemory?.max,
         0
       ),
+
+      nodepoolName: app.spec.nodeSelector?.[keyconstants.nodepoolName] || '',
     },
     validationSchema: Yup.object({
       imageUrl: Yup.string().required(),
@@ -125,6 +146,10 @@ const SettingCompute = () => {
         },
         spec: {
           ...s.spec,
+          nodeSelector: {
+            ...(s.spec.nodeSelector || {}),
+            [keyconstants.nodepoolName]: val.nodepoolName,
+          },
           containers: [
             {
               ...(s.spec.containers?.[0] || {}),
@@ -166,6 +191,11 @@ const SettingCompute = () => {
 
   const repos = getRepoMapper(data);
 
+  const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({
+    label: val.metadata?.name || '',
+    value: val.metadata?.name || '',
+  }));
+
   const {
     data: digestData,
     isLoading: digestLoading,
@@ -265,6 +295,23 @@ const SettingCompute = () => {
             loading={digestLoading}
           />
 
+          <Select
+            label="Nodepool Name"
+            size="lg"
+            placeholder="Select Nodepool"
+            value={values.nodepoolName}
+            creatable
+            onChange={(val) => {
+              handleChange('nodepoolName')(dummyEvent(val.value));
+            }}
+            options={async () => [...nodepools]}
+            error={!!errors.repos || !!nodepoolLoadingError}
+            message={
+              nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app
+            }
+            loading={nodepoolLoading}
+          />
+
           <Checkbox
             label="Image Pull Policy"
             checked={values.imagePullPolicy === 'Always'}
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
index ffc852e0c..514b4cada 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
@@ -16,6 +16,8 @@ import { BottomNavigation } from '~/console/components/commons';
 import { useOutletContext } from '@remix-run/react';
 import { useLog } from '~/root/lib/client/hooks/use-log';
 import { Checkbox } from '~/components/atoms/checkbox';
+import { useState } from 'react';
+import { Button } from '~/components/atoms/button';
 import { plans } from './datas';
 import { IProjectContext } from '../../_layout';
 
@@ -52,6 +54,7 @@ const AppCompute = () => {
   } = useAppState();
   const api = useConsoleApi();
   const { cluster } = useOutletContext<IProjectContext>();
+  const [advancedOptions, setAdvancedOptions] = useState(false);
 
   const {
     data,
@@ -247,23 +250,6 @@ const AppCompute = () => {
         manipulation and calculations in a system.
       </div>
       <div className="flex flex-col gap-3xl">
-        <Select
-          label="Nodepool Name"
-          size="lg"
-          placeholder="Select Nodepool"
-          value={values.nodepoolName}
-          creatable
-          onChange={(val) => {
-            handleChange('nodepoolName')(dummyEvent(val.value));
-          }}
-          options={async () => [...nodepools]}
-          error={!!errors.repos || !!nodepoolLoadingError}
-          message={
-            nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app
-          }
-          loading={nodepoolLoading}
-        />
-
         <Select
           label="Repo Name"
           size="lg"
@@ -319,6 +305,35 @@ const AppCompute = () => {
           loading={digestLoading}
         />
 
+        <Button
+          size="sm"
+          content={<span className="truncate text-left">Advanced options</span>}
+          variant="primary-plain"
+          className="truncate"
+          onClick={() => {
+            setAdvancedOptions(!advancedOptions);
+          }}
+        />
+
+        {advancedOptions && (
+          <Select
+            label="Nodepool Name"
+            size="lg"
+            placeholder="Select Nodepool"
+            value={values.nodepoolName}
+            creatable
+            onChange={(val) => {
+              handleChange('nodepoolName')(dummyEvent(val.value));
+            }}
+            options={async () => [...nodepools]}
+            error={!!errors.repos || !!nodepoolLoadingError}
+            message={
+              nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app
+            }
+            loading={nodepoolLoading}
+          />
+        )}
+
         <Checkbox
           label="Image Pull Policy"
           checked={values.imagePullPolicy === 'Always'}
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx
index cf023dc0d..33f551003 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx
@@ -176,8 +176,10 @@ const GridView = ({ items, onAction }: IResource) => {
 };
 
 const ListView = ({ items, onAction }: IResource) => {
+  const { account, project, environment } = useParams();
   return (
     <ListV2.Root
+      linkComponent={Link}
       data={{
         headers: [
           {
@@ -209,9 +211,10 @@ const ListView = ({ items, onAction }: IResource) => {
           },
         ],
         rows: items.map((i) => {
-          const { name, updateInfo } = parseItem(i);
+          const { name, id, updateInfo } = parseItem(i);
           const firstDomain = i.spec.domains?.[0];
           return {
+            to: `/${account}/${project}/${environment}/router/${id}/routes`,
             columns: {
               name: {
                 render: () => <ListTitle title={name} />,
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx
deleted file mode 100644
index 458dd87f8..000000000
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx
+++ /dev/null
@@ -1,354 +0,0 @@
-import { Trash, PencilLine } from '@jengaicons/react';
-import { useState } from 'react';
-import { generateKey, titleCase } from '~/components/utils';
-import {
-  ListItem,
-  ListTitle,
-  listClass,
-  listFlex,
-} from '~/console/components/console-list-components';
-import DeleteDialog from '~/console/components/delete-dialog';
-import Grid from '~/console/components/grid';
-import List from '~/console/components/list';
-import ListGridView from '~/console/components/list-grid-view';
-import ResourceExtraAction from '~/console/components/resource-extra-action';
-import {
-  ExtractNodeType,
-  parseName,
-  parseUpdateOrCreatedBy,
-  parseUpdateOrCreatedOn,
-} from '~/console/server/r-utils/common';
-import { handleError } from '~/root/lib/utils/common';
-import { IRouters } from '~/console/server/gql/queries/router-queries';
-import { Link, useParams } from '@remix-run/react';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import { toast } from '~/components/molecule/toast';
-import { Button } from '~/components/atoms/button';
-import Tooltip from '~/components/atoms/tooltip';
-import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
-import HandleRouter from './handle-router';
-
-const RESOURCE_NAME = 'router';
-type BaseType = ExtractNodeType<IRouters>;
-
-const parseItem = (item: BaseType) => {
-  return {
-    name: item.displayName,
-    id: parseName(item),
-    updateInfo: {
-      author: `Updated by ${parseUpdateOrCreatedBy(item)}`,
-      time: parseUpdateOrCreatedOn(item),
-    },
-  };
-};
-
-type OnAction = ({
-  action,
-  item,
-}: {
-  action: 'edit' | 'delete' | 'detail';
-  item: BaseType;
-}) => void;
-
-type IExtraButton = {
-  onAction: OnAction;
-  item: BaseType;
-};
-
-const formatDomain = (domain: string) => {
-  const d = domain.startsWith('https://') ? domain : `https://${domain}`;
-  return { full: d, short: d.replace('https://', '') };
-};
-
-const ExtraButton = ({ onAction, item }: IExtraButton) => {
-  return (
-    <ResourceExtraAction
-      options={[
-        {
-          label: 'Edit',
-          icon: <PencilLine size={16} />,
-          type: 'item',
-          onClick: () => onAction({ action: 'edit', item }),
-          key: 'edit',
-        },
-        {
-          label: 'Delete',
-          icon: <Trash size={16} />,
-          type: 'item',
-          onClick: () => onAction({ action: 'delete', item }),
-          key: 'delete',
-          className: '!text-text-critical',
-        },
-      ]}
-    />
-  );
-};
-
-interface IResource {
-  items: BaseType[];
-  onAction: OnAction;
-}
-
-const GridView = ({ items, onAction }: IResource) => {
-  const { account, project, environment } = useParams();
-  return (
-    <Grid.Root className="!grid-cols-1 md:!grid-cols-3" linkComponent={Link}>
-      {items.map((item, index) => {
-        const { name, id, updateInfo } = parseItem(item);
-        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        const firstDomain = item.spec.domains?.[0];
-        return (
-          <Grid.Column
-            key={id}
-            to={`/${account}/${project}/${environment}/router/${id}/routes`}
-            rows={[
-              {
-                key: generateKey(keyPrefix, name + id),
-                render: () => (
-                  <ListTitle
-                    title={name}
-                    action={<ExtraButton onAction={onAction} item={item} />}
-                  />
-                ),
-              },
-              {
-                key: generateKey(keyPrefix, 'extra_domain'),
-                render: () => (
-                  <ListItem
-                    data={
-                      <div className="flex flex-row items-center gap-md">
-                        <Button
-                          LinkComponent={Link}
-                          target="_blank"
-                          size="sm"
-                          content={formatDomain(firstDomain).short}
-                          variant="primary-plain"
-                          to={formatDomain(firstDomain).full}
-                        />
-
-                        {item.spec.domains.length > 1 && (
-                          <Tooltip.Root
-                            content={
-                              <div className="flex flex-col gap-md">
-                                {item.spec.domains
-                                  .filter((d) => d !== firstDomain)
-                                  .map((d) => (
-                                    <Button
-                                      key={d}
-                                      LinkComponent={Link}
-                                      target="_blank"
-                                      size="sm"
-                                      content={formatDomain(d).short}
-                                      variant="primary-plain"
-                                      to={formatDomain(d).full}
-                                    />
-                                  ))}
-                              </div>
-                            }
-                          >
-                            <Button
-                              content={`+${item.spec.domains.length - 1} more`}
-                              variant="plain"
-                              size="sm"
-                            />
-                          </Tooltip.Root>
-                        )}
-                      </div>
-                    }
-                  />
-                ),
-              },
-              {
-                key: generateKey(keyPrefix, updateInfo.author),
-                render: () => (
-                  <ListItem
-                    data={updateInfo.author}
-                    subtitle={updateInfo.time}
-                  />
-                ),
-              },
-            ]}
-          />
-        );
-      })}
-    </Grid.Root>
-  );
-};
-
-const ListView = ({ items, onAction }: IResource) => {
-  const { account, project, environment } = useParams();
-  return (
-    <List.Root linkComponent={Link}>
-      {items.map((item, index) => {
-        const { name, id, updateInfo } = parseItem(item);
-        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        const firstDomain = item.spec.domains?.[0];
-        return (
-          <List.Row
-            key={id}
-            className="!p-3xl"
-            to={`/${account}/${project}/${environment}/router/${id}/routes`}
-            columns={[
-              {
-                key: generateKey(keyPrefix, name + id),
-                className: listClass.title,
-                render: () => <ListTitle title={name} />,
-              },
-              {
-                key: generateKey(keyPrefix, 'extra_domain'),
-                render: () => (
-                  <ListItem
-                    data={
-                      <div className="flex flex-row items-center gap-md">
-                        <Button
-                          size="sm"
-                          content={formatDomain(firstDomain).short}
-                          variant="primary-plain"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            window.open(
-                              formatDomain(firstDomain).full,
-                              '_blank',
-                              'noopener,noreferrer'
-                            );
-                          }}
-                        />
-
-                        {item.spec.domains.length > 1 && (
-                          <Tooltip.Root
-                            content={
-                              <div className="flex flex-col gap-md">
-                                {item.spec.domains
-                                  .filter((d) => d !== firstDomain)
-                                  .map((d) => (
-                                    <Button
-                                      key={d}
-                                      size="sm"
-                                      content={formatDomain(d).short}
-                                      variant="primary-plain"
-                                      onClick={(e) => {
-                                        e.preventDefault();
-                                        window.open(
-                                          formatDomain(d).full,
-                                          '_blank',
-                                          'noopener,noreferrer'
-                                        );
-                                      }}
-                                    />
-                                  ))}
-                              </div>
-                            }
-                          >
-                            <Button
-                              content={`+${item.spec.domains.length - 1} more`}
-                              variant="plain"
-                              size="sm"
-                            />
-                          </Tooltip.Root>
-                        )}
-                      </div>
-                    }
-                  />
-                ),
-              },
-              listFlex({ key: 'flex-1' }),
-              {
-                key: generateKey(keyPrefix, updateInfo.author),
-                className: listClass.author,
-                render: () => (
-                  <ListItem
-                    data={updateInfo.author}
-                    subtitle={updateInfo.time}
-                  />
-                ),
-              },
-              {
-                key: generateKey(keyPrefix, 'action'),
-                render: () => <ExtraButton onAction={onAction} item={item} />,
-              },
-            ]}
-          />
-        );
-      })}
-    </List.Root>
-  );
-};
-
-const RouterResources = ({ items = [] }: { items: BaseType[] }) => {
-  const [showDeleteDialog, setShowDeleteDialog] = useState<BaseType | null>(
-    null
-  );
-  const [visible, setVisible] = useState<BaseType | null>(null);
-  const api = useConsoleApi();
-  const reloadPage = useReload();
-  const { environment, project, account } = useParams();
-
-  useWatchReload(
-    items.map((i) => {
-      return `account:${account}.project:${project}.environment:${environment}.router:${parseName(
-        i
-      )}`;
-    })
-  );
-
-  const props: IResource = {
-    items,
-    onAction: ({ action, item }) => {
-      switch (action) {
-        case 'edit':
-          setVisible(item);
-          break;
-        case 'delete':
-          setShowDeleteDialog(item);
-          break;
-        default:
-      }
-    },
-  };
-  return (
-    <>
-      <ListGridView
-        listView={<ListView {...props} />}
-        gridView={<GridView {...props} />}
-      />
-      <DeleteDialog
-        resourceName={showDeleteDialog?.displayName}
-        resourceType={RESOURCE_NAME}
-        show={showDeleteDialog}
-        setShow={setShowDeleteDialog}
-        onSubmit={async () => {
-          if (!environment || !project) {
-            throw new Error('Project and Environment is required!.');
-          }
-          try {
-            const { errors } = await api.deleteRouter({
-              envName: environment,
-              projectName: project,
-              routerName: parseName(showDeleteDialog),
-            });
-
-            if (errors) {
-              throw errors[0];
-            }
-            reloadPage();
-            toast.success(`${titleCase(RESOURCE_NAME)} deleted successfully`);
-            setShowDeleteDialog(null);
-          } catch (err) {
-            handleError(err);
-          }
-        }}
-      />
-      <HandleRouter
-        {...{
-          isUpdate: true,
-          data: visible!,
-          visible: !!visible,
-          setVisible: () => setVisible(null),
-        }}
-      />
-    </>
-  );
-};
-
-export default RouterResources;

From fca7458a765fbf744150f3f80889a604b0b310d9 Mon Sep 17 00:00:00 2001
From: Mohit Kumar <48203820+nxtcoder36@users.noreply.github.com>
Date: Fri, 15 Mar 2024 15:42:23 +0530
Subject: [PATCH 37/66] Impl/app image pull (#151)

* app image pull in progress

* image pull policy check box added, modifications in app setting for
compute and scaling

* label changed for image pull policy in app creation and app settings page
---
 .../$environment+/app+/$app+/settings+/compute/route.tsx        | 2 +-
 .../$account+/$project+/$environment+/new-app/app-compute.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
index d35c4a736..55afbaa23 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
@@ -313,7 +313,7 @@ const SettingCompute = () => {
           />
 
           <Checkbox
-            label="Image Pull Policy"
+            label="Always pull image on restart"
             checked={values.imagePullPolicy === 'Always'}
             onChange={(val) => {
               const imagePullPolicy = val ? 'Always' : 'IfNotPresent';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
index 514b4cada..16b0f3ff8 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
@@ -335,7 +335,7 @@ const AppCompute = () => {
         )}
 
         <Checkbox
-          label="Image Pull Policy"
+          label="Always pull image on restart"
           checked={values.imagePullPolicy === 'Always'}
           onChange={(val) => {
             const imagePullPolicy = val ? 'Always' : 'IfNotPresent';

From 28fa1d5c0335c6575c974adf60bf62e671c51532 Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Fri, 15 Mar 2024 16:13:59 +0530
Subject: [PATCH 38/66] wip helm chart changes

---
 src/apps/console/components/icons.tsx         |   2 +
 src/apps/console/components/sync-status.tsx   |  11 +-
 .../new-app/app-config-mount.tsx              | 487 ++++++++++++++++++
 .../infra+/$cluster+/helm-charts/_index.tsx   |   4 +-
 .../helm-charts/handle-helm-chart.tsx         |  90 +++-
 .../$repo+/buildruns/buildruns-resources.tsx  |   6 +-
 .../console/routes/artifacthub-values-api.tsx |  19 +
 7 files changed, 595 insertions(+), 24 deletions(-)
 create mode 100644 src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx
 create mode 100644 src/apps/console/routes/artifacthub-values-api.tsx

diff --git a/src/apps/console/components/icons.tsx b/src/apps/console/components/icons.tsx
index 92e15f570..37b454980 100644
--- a/src/apps/console/components/icons.tsx
+++ b/src/apps/console/components/icons.tsx
@@ -1,4 +1,6 @@
 export {
+  Warning,
+  WarningCircleFill,
   Domain,
   ArrowLeftFill as ArrowLeft,
   ArrowRightFill as ArrowRight,
diff --git a/src/apps/console/components/sync-status.tsx b/src/apps/console/components/sync-status.tsx
index 0dc35d986..b025b8b80 100644
--- a/src/apps/console/components/sync-status.tsx
+++ b/src/apps/console/components/sync-status.tsx
@@ -3,10 +3,9 @@ import {
   CheckCircleFill,
   Checks,
   CircleNotch,
-  XCircleFill,
   Circle,
   CircleFill,
-  X,
+  WarningCircleFill,
 } from '~/console/components/icons';
 import Tooltip from '~/components/atoms/tooltip';
 import {
@@ -136,11 +135,9 @@ const state = ({
       return {
         component:
           type === 'minimal' ? (
-            <span className="text-text-critical">
-              <X size={iconSize} />
-            </span>
+            <span className="text-text-critical">!!</span>
           ) : (
-            <Badge icon={<X />} type="critical">
+            <Badge icon={<span className="px-xs">!!</span>} type="critical">
               {textData()}
             </Badge>
           ),
@@ -250,7 +247,7 @@ export const SyncStatusV2 = ({
         return {
           icon: (
             <span className="text-text-critical">
-              <XCircleFill size={iconSize} />
+              <WarningCircleFill size={iconSize} />
             </span>
           ),
         };
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx
new file mode 100644
index 000000000..560b2bc35
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx
@@ -0,0 +1,487 @@
+import { useEffect, useState } from 'react';
+import { Button, IconButton } from '~/components/atoms/button';
+import { Chip, ChipGroup } from '~/components/atoms/chips';
+import { TextInput } from '~/components/atoms/input';
+import { usePagination } from '~/components/molecule/pagination';
+import { cn } from '~/components/utils';
+import List from '~/console/components/list';
+import NoResultsFound from '~/console/components/no-results-found';
+import { IShowDialog } from '~/console/components/types.d';
+import { useAppState } from '~/console/page-components/app-states';
+import useForm from '~/root/lib/client/hooks/use-form';
+import Yup from '~/root/lib/server/helpers/yup';
+import { NonNullableString } from '~/root/lib/types/common';
+import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
+import {
+  ArrowRight,
+  ChevronLeft,
+  ChevronRight,
+  LockSimple,
+  LockSimpleOpen,
+  SmileySad,
+  X,
+  XCircleFill,
+} from '~/console/components/icons';
+import Tooltip from '~/components/atoms/tooltip';
+import { listFlex } from '~/console/components/console-list-components';
+import AppDialog from './app-dialogs';
+
+interface IConfigMount {
+  type: 'config' | 'secret';
+  refName: string;
+  mountPath: string;
+}
+
+interface IConfigMountList {
+  configMounts: Array<IConfigMount>;
+  onDelete: (configMount: IConfigMount) => void;
+}
+
+export interface IValue {
+  refKey: string;
+  refName: string;
+  type: 'config' | 'secret' | NonNullableString;
+}
+
+const EnvironmentVariablesList = ({
+  configMounts,
+  onDelete = (_) => _,
+}: IConfigMountList) => {
+  const { page, hasNext, hasPrevious, onNext, onPrev, setItems } =
+    usePagination({
+      items: configMounts || [],
+      itemsPerPage: 5,
+    });
+
+  useEffect(() => {
+    setItems(configMounts || []);
+  }, [configMounts]);
+
+  return (
+    <div className="flex flex-col bg-surface-basic-default">
+      {configMounts?.length > 0 && (
+        <List.Root
+          className="min-h-[347px] !shadow-none"
+          header={
+            <div className="flex flex-row items-center w-full">
+              <div className="text-text-strong bodyMd flex-1">
+                Environment variable list
+              </div>
+              <div className="flex flex-row items-center">
+                <IconButton
+                  icon={<ChevronLeft />}
+                  size="xs"
+                  variant="plain"
+                  onClick={() => onPrev()}
+                  disabled={!hasPrevious}
+                />
+                <IconButton
+                  icon={<ChevronRight />}
+                  size="xs"
+                  variant="plain"
+                  onClick={() => onNext()}
+                  disabled={!hasNext}
+                />
+              </div>
+            </div>
+          }
+        >
+          {page.map((ev, index) => {
+            return (
+              <List.Row
+                key={ev.key}
+                className={cn({
+                  '!border-b': index < 4,
+                  '!rounded-b-none': index < 4,
+                })}
+                columns={[
+                  {
+                    key: `${index}-column-0`,
+                    render: () => (
+                      <div className="text-icon-default">
+                        {ev.type === 'config' && (
+                          <LockSimpleOpen color="currentColor" size={16} />
+                        )}
+                        {ev.type === 'secret' && (
+                          <LockSimple color="currentColor" size={16} />
+                        )}
+                      </div>
+                    ),
+                  },
+                  {
+                    key: `${index}-column-1`,
+                    className: 'w-[80px]',
+                    render: () => (
+                      <div className="bodyMd-semibold text-text-default">
+                        {ev.key}
+                      </div>
+                    ),
+                  },
+                  {
+                    key: `${index}-column-2`,
+                    render: () => (
+                      <Tooltip.Root
+                        className="!max-w-[400px]"
+                        content={
+                          <div className="flex flex-row gap-md items-center bodyMd text-text-soft">
+                            {!ev.type && ev.value}
+                            {!!ev.type && (
+                              <>
+                                <span className="line-clamp-1">
+                                  {ev.refName}
+                                </span>
+                                <span>
+                                  <ArrowRight size={16} />
+                                </span>
+                                {ev.refKey}
+                              </>
+                            )}
+                          </div>
+                        }
+                      >
+                        <div className="flex flex-row gap-md items-center bodyMd text-text-soft">
+                          {!ev.type && ev.value}
+                          {!!ev.type && (
+                            <>
+                              <span className="line-clamp-1">{ev.refName}</span>
+                              <span>
+                                <ArrowRight size={16} />
+                              </span>
+                              {ev.refKey}
+                            </>
+                          )}
+                        </div>
+                      </Tooltip.Root>
+                    ),
+                  },
+                  listFlex({ key: 'flex-1' }),
+                  {
+                    key: `${index}-column-3`,
+                    render: () => (
+                      <div>
+                        <IconButton
+                          icon={<X />}
+                          variant="plain"
+                          size="sm"
+                          onClick={() => {
+                            onDelete(ev);
+                          }}
+                        />
+                      </div>
+                    ),
+                  },
+                ]}
+              />
+            );
+          })}
+        </List.Root>
+      )}
+      {configMounts?.length === 0 && (
+        <div className="rounded border-border-default border min-h-[347px] flex flex-row items-center justify-center">
+          <NoResultsFound
+            title={null}
+            subtitle="No environment variables are added."
+            compact
+            image={<SmileySad size={32} weight={1} />}
+            shadow={false}
+            border={false}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const ConfigMounts = () => {
+  const { setContainer, getContainer } = useAppState();
+
+  const [showCSDialog, setShowCSDialog] = useState<IShowDialog>(null);
+
+  // for updating
+  const { hasChanges } = useUnsavedChanges();
+
+  const entry = Yup.object({
+    type: Yup.string().oneOf(['config', 'secret']).notRequired(),
+    key: Yup.string().required(),
+
+    refKey: Yup.string()
+      .when(['type'], ([type], schema) => {
+        if (type === 'config' || type === 'secret') {
+          return schema.required();
+        }
+        return schema;
+      })
+      .notRequired(),
+    refName: Yup.string()
+      .when(['type'], ([type], schema) => {
+        if (type === 'config' || type === 'secret') {
+          return schema.required();
+        }
+        return schema;
+      })
+      .notRequired(),
+  });
+
+  const {
+    values,
+    setValues,
+    submit,
+    resetValues: resetAppValue,
+  } = useForm({
+    initialValues: getContainer().env,
+    validationSchema: Yup.array(entry),
+    onSubmit: (val) => {
+      setContainer((c) => ({
+        ...c,
+        env: val,
+      }));
+    },
+  });
+
+  useEffect(() => {
+    submit();
+  }, [values]);
+
+  // for updating
+  useEffect(() => {
+    if (!hasChanges) {
+      resetAppValue();
+    }
+  }, [hasChanges]);
+
+  const addEntry = (val: IConfigMount) => {
+    const tempVal = val || [];
+    setValues((v = []) => {
+      const data = {
+        key: tempVal.key,
+        type: tempVal.type,
+        refName: tempVal.refName || '',
+        refKey: tempVal.refKey || '',
+        value: tempVal.value || '',
+      };
+      return [...(v || []), data];
+    });
+  };
+
+  const removeEntry = (val: IConfigMount) => {
+    setValues((v) => {
+      const nv = v?.filter((v) => v.key !== val.key);
+      return nv;
+    });
+  };
+
+  const vSchema = Yup.object({
+    refKey: Yup.string().when('$textInputValue', ([_v], schema) => {
+      return schema;
+    }),
+    refName: Yup.string().when('$textInputValue', ([_v], schema) => {
+      return schema;
+    }),
+  });
+
+  interface InitialValuesProps {
+    key: string;
+    value?: IValue;
+    textInputValue?: string;
+  }
+
+  const initialValues: InitialValuesProps = {
+    key: '',
+    textInputValue: '',
+  };
+
+  const {
+    values: eValues,
+    errors: eErrors,
+    handleChange: eHandleChange,
+    handleSubmit,
+    setValues: eSetValues,
+    resetValues,
+    submit: eSubmit,
+  } = useForm({
+    initialValues,
+
+    validationSchema: Yup.object().shape({
+      value: vSchema,
+      textInputValue: Yup.string(),
+      key: Yup.string()
+        .required()
+        .test('is-valid', 'Key already exists.', (value) => {
+          return !getContainer().env?.find((v) => v.key === value);
+        }),
+    }),
+    onSubmit: () => {
+      if (eValues.textInputValue) {
+        const ev: IConfigMount = {
+          key: eValues.key,
+          refKey: undefined,
+          refName: undefined,
+          type: undefined,
+          value: eValues.textInputValue,
+        };
+        // setEnvVariables((prev) => [...prev, ev]);
+        addEntry(ev);
+      } else if (eValues.value) {
+        const ev: IConfigMount = {
+          key: eValues.key,
+          refKey: eValues.value.refKey,
+          refName: eValues.value.refName,
+          type: eValues.value.type,
+          value: '',
+        };
+
+        // setEnvVariables((prev) => [...prev, ev]);
+        addEntry(ev);
+      }
+      resetValues();
+    },
+  });
+
+  return (
+    <>
+      <form
+        onSubmit={handleSubmit}
+        className="flex flex-col gap-3xl p-3xl rounded border border-border-default"
+      >
+        <div className="flex flex-row gap-3xl items-start">
+          <div className="flex-1">
+            <TextInput
+              label="Key"
+              size="lg"
+              error={!!eErrors.key}
+              message={eErrors.key}
+              value={eValues.key}
+              autoComplete="off"
+              onChange={eHandleChange('key')}
+            />
+          </div>
+          <div className="flex-1">
+            {eValues.value ? (
+              <div className="flex flex-col gap-md">
+                <div className="bodyMd-medium text-text-default">Value</div>
+                <div className="flex flex-row items-center rounded border border-border-default bg-surface-basic-default line-clamp-1">
+                  <span className="py-lg pl-lg pr-md text-text-default">
+                    {eValues.value.type === 'config' ? (
+                      <LockSimpleOpen
+                        size={14}
+                        weight={2.5}
+                        color="currentColor"
+                      />
+                    ) : (
+                      <LockSimple size={14} weight={2.5} color="currentColor" />
+                    )}
+                  </span>
+                  <Tooltip.Root
+                    className="!max-w-[400px]"
+                    content={
+                      <div className="flex-1 flex flex-row gap-md items-center py-xl px-lg bodyMd text-text-soft ">
+                        <span>{eValues.value.refKey}</span>
+                        <span>
+                          <ArrowRight size={16} />
+                        </span>
+                        <span className="line-clamp-1">
+                          {eValues.value.refName}
+                        </span>
+                      </div>
+                    }
+                  >
+                    <div className="flex-1 flex flex-row gap-md items-center py-xl px-lg bodyMd text-text-soft ">
+                      <span>{eValues.value.refKey}</span>
+                      <span>
+                        <ArrowRight size={16} />
+                      </span>
+                      <span className="line-clamp-1">
+                        {eValues.value.refName}
+                      </span>
+                    </div>
+                  </Tooltip.Root>
+                  <button
+                    aria-label="clear"
+                    tabIndex={-1}
+                    type="button"
+                    className="outline-none p-lg text-text-default rounded-full"
+                    onClick={() => {
+                      eSetValues((v) => {
+                        return {
+                          ...v,
+                          value: undefined,
+                        };
+                      });
+                    }}
+                  >
+                    <XCircleFill size={16} color="currentColor" />
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <TextInput
+                value={eValues.textInputValue}
+                onChange={eHandleChange('textInputValue')}
+                label="Value"
+                size="lg"
+                suffix={
+                  !eValues.textInputValue ? (
+                    <ChipGroup
+                      onClick={(data) => {
+                        setShowCSDialog({ type: data.name, data: null });
+                      }}
+                    >
+                      <Chip
+                        label="Config"
+                        item={{ name: 'config' }}
+                        type="CLICKABLE"
+                      />
+                      <Chip
+                        item={{ name: 'secret' }}
+                        label="Secrets"
+                        type="CLICKABLE"
+                      />
+                    </ChipGroup>
+                  ) : null
+                }
+                showclear={!!eValues.textInputValue}
+              />
+            )}
+          </div>
+        </div>
+        <div className="flex flex-row gap-md items-center">
+          <div className="bodySm text-text-soft flex-1">
+            All environment entries be mounted on the path specified in the
+            container
+          </div>
+          <Button
+            type="submit"
+            content="Add environment"
+            variant="basic"
+            disabled={
+              !eValues.key || !(eValues.value || eValues.textInputValue)
+            }
+            onClick={() => {
+              eSubmit();
+            }}
+          />
+        </div>
+      </form>
+      <EnvironmentVariablesList
+        configMounts={getContainer().env || []}
+        onDelete={(ev) => {
+          removeEntry(ev);
+          // setEnvVariables((prev) => prev.filter((p) => p !== ev));
+        }}
+      />
+      <AppDialog
+        show={showCSDialog}
+        setShow={setShowCSDialog}
+        onSubmit={(item) => {
+          eSetValues((v) => {
+            return {
+              ...v,
+              value: item,
+            };
+          });
+          setShowCSDialog(null);
+        }}
+      />
+    </>
+  );
+};
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
index 423a8e15f..7a6ee6202 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
@@ -54,7 +54,7 @@ const HelmCharts = () => {
                 action: helmCharts.length > 0 && (
                   <Button
                     variant="primary"
-                    content="Create helm chart"
+                    content="Install helm chart"
                     prefix={<PlusFill />}
                     onClick={() => {
                       setVisible(true);
@@ -72,7 +72,7 @@ const HelmCharts = () => {
                   </p>
                 ),
                 action: {
-                  content: 'Create helm chart',
+                  content: 'Install helm chart',
                   prefix: <Plus />,
                   onClick: () => {
                     setVisible(true);
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
index f29abfaa8..f64394bb3 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
@@ -24,6 +24,12 @@ import { cn, useMapper } from '~/components/utils';
 import Pulsable from 'react-pulsable';
 import { NameIdView } from '~/console/components/name-id-view';
 import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
+import { toast } from '~/components/molecule/toast';
+import ExtendedFilledTab from '~/console/components/extended-filled-tab';
+import CodeView from '~/console/components/code-view';
+import CodeMirrorClient from '~/root/lib/client/components/editor-client';
+import { javascript } from '@codemirror/lang-javascript';
+import { basicSetup } from '@uiw/react-codemirror';
 
 const LOGO_URL = 'https://artifacthub.io/image/';
 
@@ -92,6 +98,8 @@ const Root = (props: IDialog) => {
   const [isRepoCreatable, setIsRepoCreatable] = useState(false);
   const [selectedRepo, setSelectedRepo] = useState<string>('');
   const [repoErrors, setRepoErrors] = useState(false);
+  const [helmValues, setHelmValues] = useState('');
+  const [activeTab, setActiveTab] = useState('defaults');
 
   useEffect(() => {
     if (isUpdate) {
@@ -156,6 +164,28 @@ const Root = (props: IDialog) => {
     }
   };
 
+  const fetchValues = async ({
+    packageId,
+    version,
+  }: {
+    packageId: string;
+    version: string;
+  }) => {
+    try {
+      const r = await axios({
+        method: 'get',
+        url: `/artifacthub-values-api`,
+        params: {
+          packageId,
+          version,
+        },
+      });
+      setHelmValues(r.data);
+    } catch (err) {
+      toast.error('Error fetching chart values');
+    }
+  };
+
   const searchRepos = async (text: string) => {
     setChartVersions([]);
     if (text) {
@@ -524,22 +554,58 @@ const Root = (props: IDialog) => {
               loading={isUpdate && helmChartsLoading}
               onChange={(val) => {
                 setChartVersion(val);
+                fetchValues({ packageId: selectedRepo, version: val.value });
               }}
               onSearch={() => true}
             />
           </div>
-          <div className="basis-full">
-            <TextArea
-              containerClassName="h-full"
-              className="h-full"
-              label="Helm values"
-              placeholder="Helm values"
-              onChange={handleChange('values')}
-              error={!!errors.values}
-              message={errors.values}
-              value={values.values}
-              name="helm-chart-values"
+          <div className="basis-full flex flex-col">
+            <ExtendedFilledTab
+              value={activeTab}
+              onChange={setActiveTab}
+              items={[
+                { label: 'Defaults', value: 'defaults' },
+                {
+                  label: 'Overrides',
+                  value: 'overrides',
+                },
+
+                {
+                  label: 'Effective',
+                  value: 'effective',
+                },
+              ]}
+            />
+            <CodeMirrorClient
+              extensions={[basicSetup]}
+              value={`
+---
+title: Hello World
+---
+
+`}
             />
+            {/* <TextArea */}
+            {/*   containerClassName="h-full" */}
+            {/*   className="h-full" */}
+            {/*   placeholder="Helm values" */}
+            {/*   onChange={handleChange('values')} */}
+            {/*   error={!!errors.values} */}
+            {/*   message={errors.values} */}
+            {/*   value={(() => { */}
+            {/*     if (activeTab === 'defaults') { */}
+            {/*       return helmValues; */}
+            {/*     } */}
+            {/*     if (activeTab === 'overrides') { */}
+            {/*       return values.values; */}
+            {/*     } */}
+            {/*     if (activeTab === 'effective') { */}
+            {/*       return ''; */}
+            {/*     } */}
+            {/*     return ''; */}
+            {/*   })()} */}
+            {/*   name="helm-chart-values" */}
+            {/* /> */}
           </div>
         </div>
       </Popup.Content>
@@ -566,7 +632,7 @@ const HandleHelmChart = (props: IDialog) => {
       className="!w-[900px]"
     >
       <Popup.Header>
-        {isUpdate ? 'Edit helm chart' : 'Add new helm chart'}
+        {isUpdate ? 'Edit helm chart' : 'Install helm chart'}
       </Popup.Header>
       {(!isUpdate || (isUpdate && props.data)) && <Root {...props} />}
     </Popup.Root>
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
index 392cfde55..a544c078c 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
@@ -88,7 +88,7 @@ const GridView = ({ items }: IResource) => {
 const ListItem = ({ item }: { item: BaseType }) => {
   const [open, setOpen] = useState<boolean>(false);
   const { account } = useOutletContext<IAccountContext>();
-  const commitHash = item.metadata?.annotations['github.com/commit'];
+  const commitHash = item.metadata?.annotations?.['github.com/commit'] || '';
 
   // eslint-disable-next-line no-nested-ternary
   const state: 'running' | 'done' | 'error' = item.status?.isReady
@@ -136,7 +136,7 @@ const ListItem = ({ item }: { item: BaseType }) => {
             <ListTitle
               title={
                 <div className="flex items-center gap-xl">
-                  {item.metadata?.annotations['github.com/repository']}{' '}
+                  {item.metadata?.annotations?.['github.com/repository'] || ''}
                 </div>
               }
               subtitle={
@@ -149,7 +149,7 @@ const ListItem = ({ item }: { item: BaseType }) => {
                   </div>
                   <div className="flex items-center gap-md">
                     <GitBranch size={12} />
-                    {item.metadata?.annotations['github.com/branch']}{' '}
+                    {item.metadata?.annotations?.['github.com/branch'] || ''}
                   </div>
 
                   <div className="flex items-center gap-md">
diff --git a/src/apps/console/routes/artifacthub-values-api.tsx b/src/apps/console/routes/artifacthub-values-api.tsx
new file mode 100644
index 000000000..c814bdeeb
--- /dev/null
+++ b/src/apps/console/routes/artifacthub-values-api.tsx
@@ -0,0 +1,19 @@
+import axios from 'axios';
+import { artifactEnv } from '~/root/lib/configs/envs';
+import getQueries from '~/root/lib/server/helpers/get-queries';
+import { IExtRemixCtx } from '~/root/lib/types/common';
+
+export const loader = async (ctx: IExtRemixCtx) => {
+  const { packageId, version } = getQueries(ctx);
+  const res = await axios.get(
+    `https://artifacthub.io/api/v1/packages/${packageId}/${version}/values`,
+    {
+      headers: {
+        'X-API-KEY-ID': artifactEnv.artifact_hub_key_id,
+        'X-API-KEY-SECRET': artifactEnv.artifact_hub_key_secret,
+      },
+    }
+  );
+
+  return res.data;
+};

From 0e0e0368aebe0315473c4e78bba342fe148d77d0 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Fri, 15 Mar 2024 16:19:13 +0530
Subject: [PATCH 39/66] fix(app/project/cluster): - add image pull policy of
 app in advanced options - change project review page as per figma - removes
 vms from infra and make cluster tab flat

---
 .../console/page-components/new-project.tsx   | 12 +++++-----
 .../onboarding+/$a+/$cluster+/new-project.tsx |  1 -
 .../$environment+/new-app/app-compute.tsx     | 20 +++++++++--------
 .../$environment+/new-app/app-review.tsx      | 22 +++++++++++--------
 .../_main+/$account+/infra+/_layout.tsx       | 22 +------------------
 .../$account+/infra+/clusters/route.tsx       |  2 +-
 .../routes/_main+/$account+/infra+/vms.tsx    |  7 ------
 7 files changed, 31 insertions(+), 55 deletions(-)
 delete mode 100644 src/apps/console/routes/_main+/$account+/infra+/vms.tsx

diff --git a/src/apps/console/page-components/new-project.tsx b/src/apps/console/page-components/new-project.tsx
index f79a6ce5e..01c7b913d 100644
--- a/src/apps/console/page-components/new-project.tsx
+++ b/src/apps/console/page-components/new-project.tsx
@@ -181,18 +181,16 @@ const NewProject = () => {
                 jumpStep(1);
               }}
             >
-              <div className="flex flex-col p-xl  gap-lg rounded border border-border-default flex-1 overflow-hidden">
-                <div className="flex flex-col gap-md  pb-lg  border-b border-border-default">
+              <div className="flex flex-row justify-between p-xl  gap-lg rounded border border-border-default flex-1 overflow-hidden">
+                <div className="flex flex-col gap-md">
+                  <div className="bodySm text-text-soft">Project name</div>
                   <div className="bodyMd-semibold text-text-default">
-                    Project name
+                    {values.name}
                   </div>
-                  <div className="bodySm text-text-soft">{values.name}</div>
                 </div>
                 <div className="flex flex-col gap-md">
+                  <div className="bodySm text-text-soft">Cluster</div>
                   <div className="bodyMd-semibold text-text-default">
-                    Cluster
-                  </div>
-                  <div className="bodySm text-text-soft">
                     {values.clusterName}
                   </div>
                 </div>
diff --git a/src/apps/console/routes/_a+/onboarding+/$a+/$cluster+/new-project.tsx b/src/apps/console/routes/_a+/onboarding+/$a+/$cluster+/new-project.tsx
index 633298b3d..c5b5ca390 100644
--- a/src/apps/console/routes/_a+/onboarding+/$a+/$cluster+/new-project.tsx
+++ b/src/apps/console/routes/_a+/onboarding+/$a+/$cluster+/new-project.tsx
@@ -4,7 +4,6 @@ import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import logger from '~/root/lib/client/helpers/log';
 import { IRemixCtx } from '~/root/lib/types/common';
 
-
 const _NewProject = () => {
   return <NewProject />;
 };
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
index 514b4cada..af04395b4 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
@@ -334,15 +334,17 @@ const AppCompute = () => {
           />
         )}
 
-        <Checkbox
-          label="Image Pull Policy"
-          checked={values.imagePullPolicy === 'Always'}
-          onChange={(val) => {
-            const imagePullPolicy = val ? 'Always' : 'IfNotPresent';
-            console.log(imagePullPolicy);
-            handleChange('imagePullPolicy')(dummyEvent(imagePullPolicy));
-          }}
-        />
+        {advancedOptions && (
+          <Checkbox
+            label="Image Pull Policy"
+            checked={values.imagePullPolicy === 'Always'}
+            onChange={(val) => {
+              const imagePullPolicy = val ? 'Always' : 'IfNotPresent';
+              console.log(imagePullPolicy);
+              handleChange('imagePullPolicy')(dummyEvent(imagePullPolicy));
+            }}
+          />
+        )}
       </div>
 
       <div className="flex flex-col">
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
index 7d4f8e277..01bae8bec 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
@@ -114,16 +114,20 @@ const AppReview = () => {
             </div>
           </div>
         </ReviewComponent>
-        <ReviewComponent title="Nodepool Details" onEdit={() => {}}>
-          <div className="flex flex-col p-xl gap-md rounded border border-border-default">
-            <div className="bodyMd-semibold text-text-default">
-              Nodepool Selector
-            </div>
-            <div className="bodySm text-text-soft">
-              {app.spec.nodeSelector[keyconstants.nodepoolName]}
+
+        {app.spec.nodeSelector[keyconstants.nodepoolName] !== '' && (
+          <ReviewComponent title="Nodepool Details" onEdit={() => {}}>
+            <div className="flex flex-col p-xl gap-md rounded border border-border-default">
+              <div className="bodyMd-semibold text-text-default">
+                Nodepool Selector
+              </div>
+              <div className="bodySm text-text-soft">
+                {app.spec.nodeSelector[keyconstants.nodepoolName]}
+              </div>
             </div>
-          </div>
-        </ReviewComponent>
+          </ReviewComponent>
+        )}
+
         <ReviewComponent
           title="Environment"
           onEdit={() => {
diff --git a/src/apps/console/routes/_main+/$account+/infra+/_layout.tsx b/src/apps/console/routes/_main+/$account+/infra+/_layout.tsx
index 21ad6164e..473c0f6b2 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/_layout.tsx
@@ -1,28 +1,8 @@
 import { Outlet, useOutletContext } from '@remix-run/react';
-import SidebarLayout from '~/console/components/sidebar-layout';
-import { useSubNavData } from '~/root/lib/client/hooks/use-create-subnav-action';
-import { useHandleFromMatches } from '~/root/lib/client/hooks/use-custom-matches';
 
 const Infra = () => {
   const rootContext = useOutletContext();
-  const subNavAction = useSubNavData();
-  const noLayout = useHandleFromMatches('noLayout', null);
-
-  if (noLayout) {
-    return <Outlet context={rootContext} />;
-  }
-  return (
-    <SidebarLayout
-      navItems={[
-        { label: 'Clusters', value: 'clusters' },
-        { label: 'VM instances', value: 'vms' },
-      ]}
-      parentPath="/infra"
-      headerActions={subNavAction.data}
-    >
-      <Outlet context={rootContext} />
-    </SidebarLayout>
-  );
+  return <Outlet context={rootContext} />;
 };
 
 export default Infra;
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
index ca81ffe46..f10a71d29 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
@@ -130,7 +130,7 @@ const Clusters = () => {
         const { pageInfo, totalCount } = clustersData;
         return (
           <Wrapper
-            secondaryHeader={{
+            header={{
               title: 'Clusters',
               action: clusters.length > 0 && (
                 <Button
diff --git a/src/apps/console/routes/_main+/$account+/infra+/vms.tsx b/src/apps/console/routes/_main+/$account+/infra+/vms.tsx
deleted file mode 100644
index a99b90523..000000000
--- a/src/apps/console/routes/_main+/$account+/infra+/vms.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import Wip from "~/console/components/wip";
-
-const VM = () => {
-  return <Wip />;
-};
-
-export default VM;

From ef1da257f5cab95d6769865c09fbe37f7d31b277 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 16 Mar 2024 22:38:07 +0000
Subject: [PATCH 40/66] :arrow_up: Bump the npm_and_yarn group across 1
 directory with 1 update

Bumps the npm_and_yarn group with 1 update in the / directory: [follow-redirects](https://github.com/follow-redirects/follow-redirects).


Updates `follow-redirects` from 1.15.4 to 1.15.6
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.4...v1.15.6)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
  dependency-group: npm_and_yarn-security-group
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 pnpm-lock.yaml | 83 +++++++++++++++++++++++++-------------------------
 1 file changed, 42 insertions(+), 41 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 78f02f2d6..a378570a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -127,7 +127,7 @@ dependencies:
     version: 1.19.3(react-dom@18.2.0)(react@18.2.0)
   '@uiw/react-codemirror':
     specifier: ^4.21.21
-    version: 4.21.21(@babel/runtime@7.24.0)(@codemirror/autocomplete@6.13.0)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.24.1)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0)
+    version: 4.21.21(@babel/runtime@7.24.0)(@codemirror/autocomplete@6.15.0)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.26.0)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0)
   anser:
     specifier: ^2.1.1
     version: 2.1.1
@@ -235,7 +235,7 @@ dependencies:
     version: 2.2.4(react@18.2.0)
   use-immer:
     specifier: ^0.9.0
-    version: 0.9.0(immer@10.0.3)(react@18.2.0)
+    version: 0.9.0(immer@10.0.4)(react@18.2.0)
   uuid:
     specifier: ^9.0.1
     version: 9.0.1
@@ -1586,8 +1586,8 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  /@codemirror/autocomplete@6.13.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1)(@lezer/common@1.2.1):
-    resolution: {integrity: sha512-SuDrho1klTINfbcMPnyro1ZxU9xJtwDMtb62R8TjL/tOl71IoOsvBo1a9x+hDvHhIzkTcJHy2VC+rmpGgYkRSw==}
+  /@codemirror/autocomplete@6.15.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.1)(@codemirror/view@6.26.0)(@lezer/common@1.2.1):
+    resolution: {integrity: sha512-G2Zm0mXznxz97JhaaOdoEG2cVupn4JjPaS4AcNvZzhOsnnG9YVN68VzfoUw6dYTsIxT6a/cmoFEN47KAWhXaOg==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
       '@codemirror/state': ^6.0.0
@@ -1596,12 +1596,12 @@ packages:
     dependencies:
       '@codemirror/language': 6.10.0
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.24.1
+      '@codemirror/view': 6.26.0
       '@lezer/common': 1.2.1
     dev: false
 
-  /@codemirror/autocomplete@6.13.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1)(@lezer/common@1.2.1):
-    resolution: {integrity: sha512-SuDrho1klTINfbcMPnyro1ZxU9xJtwDMtb62R8TjL/tOl71IoOsvBo1a9x+hDvHhIzkTcJHy2VC+rmpGgYkRSw==}
+  /@codemirror/autocomplete@6.15.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.0)(@lezer/common@1.2.1):
+    resolution: {integrity: sha512-G2Zm0mXznxz97JhaaOdoEG2cVupn4JjPaS4AcNvZzhOsnnG9YVN68VzfoUw6dYTsIxT6a/cmoFEN47KAWhXaOg==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
       '@codemirror/state': ^6.0.0
@@ -1610,7 +1610,7 @@ packages:
     dependencies:
       '@codemirror/language': 6.10.1
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.24.1
+      '@codemirror/view': 6.26.0
       '@lezer/common': 1.2.1
     dev: false
 
@@ -1638,7 +1638,7 @@ packages:
     resolution: {integrity: sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==}
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.24.1
+      '@codemirror/view': 6.26.0
       '@lezer/common': 1.2.1
       '@lezer/highlight': 1.2.0
       '@lezer/lr': 1.4.0
@@ -1655,7 +1655,7 @@ packages:
     resolution: {integrity: sha512-+5YyicIaaAZKU8K43IQi8TBy6mF6giGeWAH7N96Z5LC30Wm5JMjqxOYIE9mxwMG1NbhT2mA3l9hA4uuKUM3E5g==}
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.24.1
+      '@codemirror/view': 6.26.0
       crelt: 1.0.6
     dev: false
 
@@ -1663,7 +1663,7 @@ packages:
     resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.24.1
+      '@codemirror/view': 6.26.0
       crelt: 1.0.6
     dev: false
 
@@ -1680,7 +1680,7 @@ packages:
     dependencies:
       '@codemirror/language': 6.10.1
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.24.1
+      '@codemirror/view': 6.26.0
       '@lezer/highlight': 1.2.0
     dev: false
 
@@ -1692,8 +1692,8 @@ packages:
       w3c-keyname: 2.2.8
     dev: false
 
-  /@codemirror/view@6.24.1:
-    resolution: {integrity: sha512-sBfP4rniPBRQzNakwuQEqjEuiJDWJyF2kqLLqij4WXRoVwPPJfjx966Eq3F7+OPQxDtMt/Q9MWLoZLWjeveBlg==}
+  /@codemirror/view@6.26.0:
+    resolution: {integrity: sha512-nSSmzONpqsNzshPOxiKhK203R6BvABepugAe34QfQDbNDslyjkqBuKgrK5ZBvqNXpfxz5iLrlGTmEfhbQyH46A==}
     dependencies:
       '@codemirror/state': 6.4.1
       style-mod: 4.1.2
@@ -4447,7 +4447,7 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@uiw/codemirror-extensions-basic-setup@4.21.21(@codemirror/autocomplete@6.13.0)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1):
+  /@uiw/codemirror-extensions-basic-setup@4.21.21(@codemirror/autocomplete@6.15.0)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.26.0):
     resolution: {integrity: sha512-+0i9dPrRSa8Mf0CvyrMvnAhajnqwsP3IMRRlaHDRgsSGL8igc4z7MhvUPn+7cWFAAqWzQRhMdMSWzo6/TEa3EA==}
     peerDependencies:
       '@codemirror/autocomplete': '>=6.0.0'
@@ -4458,16 +4458,16 @@ packages:
       '@codemirror/state': '>=6.0.0'
       '@codemirror/view': '>=6.0.0'
     dependencies:
-      '@codemirror/autocomplete': 6.13.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1)(@lezer/common@1.2.1)
+      '@codemirror/autocomplete': 6.15.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.1)(@codemirror/view@6.26.0)(@lezer/common@1.2.1)
       '@codemirror/commands': 6.3.3
       '@codemirror/language': 6.10.0
       '@codemirror/lint': 6.5.0
       '@codemirror/search': 6.5.6
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.24.1
+      '@codemirror/view': 6.26.0
     dev: false
 
-  /@uiw/react-codemirror@4.21.21(@babel/runtime@7.24.0)(@codemirror/autocomplete@6.13.0)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.24.1)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0):
+  /@uiw/react-codemirror@4.21.21(@babel/runtime@7.24.0)(@codemirror/autocomplete@6.15.0)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.26.0)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-PaxBMarufMWoR0qc5zuvBSt76rJ9POm9qoOaJbqRmnNL2viaF+d+Paf2blPSlm1JSnqn7hlRjio+40nZJ9TKzw==}
     peerDependencies:
       '@babel/runtime': '>=7.11.0'
@@ -4482,8 +4482,8 @@ packages:
       '@codemirror/commands': 6.3.3
       '@codemirror/state': 6.4.1
       '@codemirror/theme-one-dark': 6.1.2
-      '@codemirror/view': 6.24.1
-      '@uiw/codemirror-extensions-basic-setup': 4.21.21(@codemirror/autocomplete@6.13.0)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1)
+      '@codemirror/view': 6.26.0
+      '@uiw/codemirror-extensions-basic-setup': 4.21.21(@codemirror/autocomplete@6.15.0)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.26.0)
       codemirror: 6.0.1(@lezer/common@1.2.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -4868,7 +4868,7 @@ packages:
   /axios@1.6.4:
     resolution: {integrity: sha512-heJnIs6N4aa1eSthhN9M5ioILu8Wi8vmQW9iHQ9NUvfkJb0lEEDUiIdQNAuBtfUt3FxReaKdpQA5DbmMOqzF/A==}
     dependencies:
-      follow-redirects: 1.15.4
+      follow-redirects: 1.15.6
       form-data: 4.0.0
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -5071,7 +5071,7 @@ packages:
     engines: {node: '>=6.14.2'}
     requiresBuild: true
     dependencies:
-      node-gyp-build: 4.7.1
+      node-gyp-build: 4.8.0
     dev: false
 
   /bytes@3.0.0:
@@ -5280,13 +5280,13 @@ packages:
   /codemirror@6.0.1(@lezer/common@1.2.1):
     resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
     dependencies:
-      '@codemirror/autocomplete': 6.13.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1)(@lezer/common@1.2.1)
+      '@codemirror/autocomplete': 6.15.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.0)(@lezer/common@1.2.1)
       '@codemirror/commands': 6.3.3
       '@codemirror/language': 6.10.1
       '@codemirror/lint': 6.5.0
       '@codemirror/search': 6.5.6
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.24.1
+      '@codemirror/view': 6.26.0
     transitivePeerDependencies:
       - '@lezer/common'
     dev: false
@@ -5826,7 +5826,7 @@ packages:
     requiresBuild: true
     dependencies:
       es6-iterator: 2.0.3
-      es6-symbol: 3.1.3
+      es6-symbol: 3.1.4
       esniff: 2.0.1
       next-tick: 1.1.0
     dev: false
@@ -5836,11 +5836,12 @@ packages:
     dependencies:
       d: 1.0.2
       es5-ext: 0.10.64
-      es6-symbol: 3.1.3
+      es6-symbol: 3.1.4
     dev: false
 
-  /es6-symbol@3.1.3:
-    resolution: {integrity: sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==}
+  /es6-symbol@3.1.4:
+    resolution: {integrity: sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==}
+    engines: {node: '>=0.12'}
     dependencies:
       d: 1.0.2
       ext: 1.7.0
@@ -6600,8 +6601,8 @@ packages:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
     dev: true
 
-  /follow-redirects@1.15.4:
-    resolution: {integrity: sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==}
+  /follow-redirects@1.15.6:
+    resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
     engines: {node: '>=4.0'}
     peerDependencies:
       debug: '*'
@@ -7111,8 +7112,8 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
-  /immer@10.0.3:
-    resolution: {integrity: sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==}
+  /immer@10.0.4:
+    resolution: {integrity: sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==}
     dev: false
 
   /import-fresh@3.3.0:
@@ -8412,8 +8413,8 @@ packages:
       whatwg-url: 5.0.0
     dev: true
 
-  /node-gyp-build@4.7.1:
-    resolution: {integrity: sha512-wTSrZ+8lsRRa3I3H8Xr65dLWSgCvY2l4AOnaeKdPA9TB/WYMPaTcrzf3rXvFoVvjKNVnu0CcWSx54qq9GKRUYg==}
+  /node-gyp-build@4.8.0:
+    resolution: {integrity: sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==}
     hasBin: true
     dev: false
 
@@ -9146,7 +9147,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.24.0
       classnames: 2.5.1
-      rc-util: 5.38.2(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.39.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       resize-observer-polyfill: 1.5.1
@@ -9178,8 +9179,8 @@ packages:
       react-is: 18.2.0
     dev: false
 
-  /rc-util@5.38.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-yRGRPKyi84H7NkRSP6FzEIYBdUt4ufdsmXUZ7qM2H5qoByPax70NnGPkfo36N+UKUnUBj2f2Q2eUbwYMuAsIOQ==}
+  /rc-util@5.39.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-OW/ERynNDgNr4y0oiFmtes3rbEamXw7GHGbkbNd9iRr7kgT03T6fT0b9WpJ3mbxKhyOcAHnGcIoh5u/cjrC2OQ==}
     peerDependencies:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
@@ -9200,7 +9201,7 @@ packages:
       '@babel/runtime': 7.24.0
       classnames: 2.5.1
       rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
-      rc-util: 5.38.2(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.39.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -10746,13 +10747,13 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /use-immer@0.9.0(immer@10.0.3)(react@18.2.0):
+  /use-immer@0.9.0(immer@10.0.4)(react@18.2.0):
     resolution: {integrity: sha512-/L+enLi0nvuZ6j4WlyK0US9/ECUtV5v9RUbtxnn5+WbtaXYUaOBoKHDNL9I5AETdurQ4rIFIj/s+Z5X80ATyKw==}
     peerDependencies:
       immer: '>=2.0.0'
       react: ^16.8.0 || ^17.0.1 || ^18.0.0
     dependencies:
-      immer: 10.0.3
+      immer: 10.0.4
       react: 18.2.0
     dev: false
 
@@ -10785,7 +10786,7 @@ packages:
     engines: {node: '>=6.14.2'}
     requiresBuild: true
     dependencies:
-      node-gyp-build: 4.7.1
+      node-gyp-build: 4.8.0
     dev: false
 
   /util-deprecate@1.0.2:

From 0614932d704414d9301e183d532ae40a18d70f75 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Sun, 17 Mar 2024 11:29:50 +0530
Subject: [PATCH 41/66] :alien: Auth error message updated

---
 lib/server/helpers/minimal-auth.ts    | 2 +-
 src/apps/console/routes/_a+/teams.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/server/helpers/minimal-auth.ts b/lib/server/helpers/minimal-auth.ts
index 5bcd8aaeb..ac3c8c0e7 100644
--- a/lib/server/helpers/minimal-auth.ts
+++ b/lib/server/helpers/minimal-auth.ts
@@ -26,7 +26,7 @@ export const minimalAuth = async (ctx: IExtRemixCtx) => {
 
   if (
     whoAmI.errors &&
-    whoAmI.errors[0].message === 'input: auth_me user not logged in'
+    whoAmI.errors[0].message === 'input: auth_me Unauthorized'
   ) {
     return redirect(`${authBaseUrl}/login`);
   }
diff --git a/src/apps/console/routes/_a+/teams.tsx b/src/apps/console/routes/_a+/teams.tsx
index 4653c453e..7c798c360 100644
--- a/src/apps/console/routes/_a+/teams.tsx
+++ b/src/apps/console/routes/_a+/teams.tsx
@@ -30,7 +30,7 @@ export const loader = async (ctx: IRemixCtx) => {
       {}
     );
     if (errors) {
-      return handleError(errors[0]);
+      throw errors[0];
     }
     accounts = data;
 
@@ -55,6 +55,7 @@ export const loader = async (ctx: IRemixCtx) => {
   } catch (err) {
     return handleError(err);
   }
+
   return {
     accounts: accounts || [],
     invites: invites || [],

From 02d9807b2635fa6dbcf8fe34443a30f1f07f0ced Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Sun, 17 Mar 2024 11:50:37 +0530
Subject: [PATCH 42/66] :bug: Fixed issue with reponame while creating
 build-integration

---
 .../routes/_main+/$account+/repo+/$repo+/new-build/route.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
index cd18a3b20..bdb2b7b67 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
@@ -116,7 +116,7 @@ const NewBuild = () => {
           if (e) {
             throw e[0];
           }
-          navigate(`/${account}/repo/${repoName}/builds`);
+          navigate(`/${account}/repo/${atob(repoName)}/builds`);
         } catch (err) {
           handleError(err);
         }

From 3e4876fbe61a1d533229bd4bfc5a074a6e403e2c Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Sun, 17 Mar 2024 12:00:02 +0530
Subject: [PATCH 43/66] :art: Improved logs screen for build-run

---
 .../overview+/logs-n-metrics/route.tsx        | 41 ++-----------------
 .../$repo+/buildruns/buildruns-resources.tsx  | 11 ++++-
 2 files changed, 13 insertions(+), 39 deletions(-)

diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
index 7ab4a9904..c328c0dc0 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
@@ -4,10 +4,9 @@ import { useState } from 'react';
 import { dayjs } from '~/components/molecule/dayjs';
 import { ApexOptions } from 'apexcharts';
 import { parseName } from '~/console/server/r-utils/common';
-import { Clock, ListNumbers } from '@jengaicons/react';
-import { cn } from '~/components/utils';
 import { useDataState } from '~/console/page-components/common-state';
 import LogComp from '~/root/lib/client/components/logger';
+import LogAction from '~/console/page-components/log-action';
 import { IClusterContext } from '../../_layout';
 
 const LogsAndMetrics = () => {
@@ -87,7 +86,7 @@ const LogsAndMetrics = () => {
     },
   };
 
-  const { state, setState } = useDataState<{
+  const { state } = useDataState<{
     linesVisible: boolean;
     timestampVisible: boolean;
   }>('logs');
@@ -237,41 +236,7 @@ const LogsAndMetrics = () => {
             width: '100%',
             height: '70vh',
             title: 'Logs',
-            actionComponent: (
-              <div className="hljs flex items-center gap-xl px-xs">
-                <div
-                  onClick={() => {
-                    setState((s) => ({ ...s, linesVisible: !s.linesVisible }));
-                  }}
-                  className="flex items-center justify-center font-bold text-xl cursor-pointer select-none active:translate-y-[1px] transition-all"
-                >
-                  <span
-                    className={cn({
-                      'opacity-50': !state.linesVisible,
-                    })}
-                  >
-                    <ListNumbers color="currentColor" size={16} />
-                  </span>
-                </div>
-                <div
-                  onClick={() => {
-                    setState((s) => ({
-                      ...s,
-                      timestampVisible: !s.timestampVisible,
-                    }));
-                  }}
-                  className="flex items-center justify-center font-bold text-xl cursor-pointer select-none active:translate-y-[1px] transition-all"
-                >
-                  <span
-                    className={cn({
-                      'opacity-50': !state.timestampVisible,
-                    })}
-                  >
-                    <Clock color="currentColor" size={16} />
-                  </span>
-                </div>
-              </div>
-            ),
+            actionComponent: <LogAction />,
             websocket: {
               account: parseName(account),
               cluster: parseName(cluster),
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
index 392cfde55..31c37211e 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
@@ -26,6 +26,8 @@ import {
 } from '@jengaicons/react';
 import dayjs from 'dayjs';
 import LogComp from '~/root/lib/client/components/logger';
+import LogAction from '~/console/page-components/log-action';
+import { useDataState } from '~/console/page-components/common-state';
 import { IAccountContext } from '../../../_layout';
 
 const RESOURCE_NAME = 'build run';
@@ -99,6 +101,11 @@ const ListItem = ({ item }: { item: BaseType }) => {
 
   const isLatest = dayjs(item.updateTime).isAfter(dayjs().subtract(3, 'hour'));
 
+  const { state: st } = useDataState<{
+    linesVisible: boolean;
+    timestampVisible: boolean;
+  }>('logs');
+
   return (
     <div className="flex flex-col flex-1">
       <div className="flex flex-row justify-between items-center gap-6xl">
@@ -188,7 +195,9 @@ const ListItem = ({ item }: { item: BaseType }) => {
             width: '100%',
             height: '40rem',
             title: 'Logs',
-            hideLineNumber: true,
+            hideLineNumber: !st.linesVisible,
+            hideTimestamp: !st.timestampVisible,
+            actionComponent: <LogAction />,
             websocket: {
               account: parseName(account),
               cluster: item.clusterName,

From 79f7eae6c024c37b5a41f654577f94a74607bbfc Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Sun, 17 Mar 2024 12:11:10 +0530
Subject: [PATCH 44/66] :bug: Fixed issue with logger width

---
 lib/client/components/logger/index.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/lib/client/components/logger/index.tsx b/lib/client/components/logger/index.tsx
index 1531263cc..4839df6e6 100644
--- a/lib/client/components/logger/index.tsx
+++ b/lib/client/components/logger/index.tsx
@@ -682,12 +682,12 @@ const LogComp = ({
 
   const wRef = useRef<HTMLDivElement>(null);
 
-  const getFullWidthInPx = () => {
-    if (wRef.current) {
-      return wRef.current.clientWidth;
+  const [wInPx, setWInPx] = useState('100%');
+  useEffect(() => {
+    if (wRef.current && wInPx === '100%') {
+      setWInPx(`${wRef.current.clientWidth}`);
     }
-    return '100%';
-  };
+  }, [wRef.current]);
 
   return isClientSide ? (
     <div
@@ -697,11 +697,7 @@ const LogComp = ({
         'relative hljs rounded-md': !fullScreen,
       })}
       style={{
-        width: fullScreen
-          ? '100%'
-          : width === '100%'
-          ? getFullWidthInPx()
-          : width,
+        width: fullScreen ? '100%' : width === '100%' ? wInPx : width,
         height: fullScreen ? '100vh' : height,
       }}
     >

From 2b3d8beb7986591f81c6580b9ea4d00e524a94f6 Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Mon, 18 Mar 2024 10:39:47 +0530
Subject: [PATCH 45/66] added default values tab in helm creation

---
 gql-queries-generator/doc/queries.graphql     |   1 +
 package.json                                  |   3 +-
 pnpm-lock.yaml                                |  45 +++-
 .../infra+/$cluster+/helm-charts/_index.tsx   |  10 +-
 .../helm-charts/handle-helm-chart.tsx         | 197 ++++++++++--------
 .../server/gql/queries/helm-chart-queries.ts  |  11 +-
 .../console/server/r-utils/key-constants.js   |   1 +
 src/design-system/components/atoms/input.tsx  |   3 +
 src/generated/gql/server.ts                   |   7 +-
 9 files changed, 174 insertions(+), 104 deletions(-)

diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
index 36efb260f..c81a1cdaa 100644
--- a/gql-queries-generator/doc/queries.graphql
+++ b/gql-queries-generator/doc/queries.graphql
@@ -3429,6 +3429,7 @@ query consoleListHelmChart($clusterName: String!, $search: SearchHelmRelease, $p
           generation
           name
           namespace
+          annotations
         }
         recordVersion
         spec {
diff --git a/package.json b/package.json
index 21deaed89..f7e4414ea 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
 		"tsgen": "pnpm gql:parse && cd src/generated && pnpm tsgen"
 	},
 	"dependencies": {
+		"@codemirror/lang-javascript": "^6.2.2",
 		"@codemirror/language": "^6.10.0",
 		"@codemirror/legacy-modes": "^6.3.3",
 		"@jengaicons/react": "^1.3.0",
@@ -62,7 +63,7 @@
 		"@react-types/shared": "^3.22.0",
 		"@remix-run/node": "^1.19.3",
 		"@remix-run/react": "^1.19.3",
-		"@uiw/react-codemirror": "^4.21.21",
+		"@uiw/react-codemirror": "^4.21.24",
 		"anser": "^2.1.1",
 		"apexcharts": "^3.45.2",
 		"aria-hidden": "^1.2.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e711b1a68..92b3f9854 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@codemirror/lang-javascript':
+    specifier: ^6.2.2
+    version: 6.2.2
   '@codemirror/language':
     specifier: ^6.10.0
     version: 6.10.0
@@ -126,8 +129,8 @@ dependencies:
     specifier: ^1.19.3
     version: 1.19.3(react-dom@18.2.0)(react@18.2.0)
   '@uiw/react-codemirror':
-    specifier: ^4.21.21
-    version: 4.21.21(@babel/runtime@7.24.0)(@codemirror/autocomplete@6.13.0)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.24.1)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^4.21.24
+    version: 4.21.24(@babel/runtime@7.24.0)(@codemirror/autocomplete@6.13.0)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.24.1)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0)
   anser:
     specifier: ^2.1.1
     version: 2.1.1
@@ -1620,10 +1623,22 @@ packages:
   /@codemirror/commands@6.3.3:
     resolution: {integrity: sha512-dO4hcF0fGT9tu1Pj1D2PvGvxjeGkbC6RGcZw6Qs74TH+Ed1gw98jmUgd2axWvIZEqTeTuFrg1lEB1KV6cK9h1A==}
     dependencies:
-      '@codemirror/language': 6.10.0
-      '@codemirror/state': 6.4.0
-      '@codemirror/view': 6.23.0
-      '@lezer/common': 1.2.0
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.24.1
+      '@lezer/common': 1.2.1
+    dev: false
+
+  /@codemirror/lang-javascript@6.2.2:
+    resolution: {integrity: sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.13.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1)(@lezer/common@1.2.1)
+      '@codemirror/language': 6.10.1
+      '@codemirror/lint': 6.5.0
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.24.1
+      '@lezer/common': 1.2.1
+      '@lezer/javascript': 1.4.13
     dev: false
 
   /@codemirror/language@6.10.0:
@@ -2601,6 +2616,14 @@ packages:
       '@lezer/common': 1.2.0
     dev: false
 
+  /@lezer/javascript@1.4.13:
+    resolution: {integrity: sha512-5IBr8LIO3xJdJH1e9aj/ZNLE4LSbdsx25wFmGRAZsj2zSmwAYjx26JyU/BYOCpRQlu1jcv1z3vy4NB9+UkfRow==}
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.0
+    dev: false
+
   /@lezer/lr@1.3.14:
     resolution: {integrity: sha512-z5mY4LStlA3yL7aHT/rqgG614cfcvklS+8oFRFBYrs4YaWLJyKKM4+nN6KopToX0o9Hj6zmH6M5kinOYuy06ug==}
     dependencies:
@@ -4456,8 +4479,8 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@uiw/codemirror-extensions-basic-setup@4.21.21(@codemirror/autocomplete@6.13.0)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1):
-    resolution: {integrity: sha512-+0i9dPrRSa8Mf0CvyrMvnAhajnqwsP3IMRRlaHDRgsSGL8igc4z7MhvUPn+7cWFAAqWzQRhMdMSWzo6/TEa3EA==}
+  /@uiw/codemirror-extensions-basic-setup@4.21.24(@codemirror/autocomplete@6.13.0)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1):
+    resolution: {integrity: sha512-TJYKlPxNAVJNclW1EGumhC7I02jpdMgBon4jZvb5Aju9+tUzS44IwORxUx8BD8ZtH2UHmYS+04rE3kLk/BtnCQ==}
     peerDependencies:
       '@codemirror/autocomplete': '>=6.0.0'
       '@codemirror/commands': '>=6.0.0'
@@ -4476,8 +4499,8 @@ packages:
       '@codemirror/view': 6.24.1
     dev: false
 
-  /@uiw/react-codemirror@4.21.21(@babel/runtime@7.24.0)(@codemirror/autocomplete@6.13.0)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.24.1)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-PaxBMarufMWoR0qc5zuvBSt76rJ9POm9qoOaJbqRmnNL2viaF+d+Paf2blPSlm1JSnqn7hlRjio+40nZJ9TKzw==}
+  /@uiw/react-codemirror@4.21.24(@babel/runtime@7.24.0)(@codemirror/autocomplete@6.13.0)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.24.1)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-8zs5OuxbhikHocHBsVBMuW1vqlv4ccZAkt4rFwr7ebLP2Q6RwHsjpsR9GeGyAigAqonKRoeHugqF78UMrkaTgg==}
     peerDependencies:
       '@babel/runtime': '>=7.11.0'
       '@codemirror/state': '>=6.0.0'
@@ -4492,7 +4515,7 @@ packages:
       '@codemirror/state': 6.4.1
       '@codemirror/theme-one-dark': 6.1.2
       '@codemirror/view': 6.24.1
-      '@uiw/codemirror-extensions-basic-setup': 4.21.21(@codemirror/autocomplete@6.13.0)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1)
+      '@uiw/codemirror-extensions-basic-setup': 4.21.24(@codemirror/autocomplete@6.13.0)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.0)(@codemirror/lint@6.5.0)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1)
       codemirror: 6.0.1(@lezer/common@1.2.1)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
index 7a6ee6202..cafbd0f51 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
@@ -1,7 +1,7 @@
 import { Plus, PlusFill } from '@jengaicons/react';
 import { defer } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from '~/components/atoms/button.jsx';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import Wrapper from '~/console/components/wrapper';
@@ -9,6 +9,9 @@ import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { parseNodes } from '~/console/server/r-utils/common';
 import { IRemixCtx } from '~/root/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
+import CodeMirrorClient from '~/root/lib/client/components/editor-client';
+import { isBrowser } from 'framer-motion';
+import ReactCodeMirror from '@uiw/react-codemirror';
 import Tools from './tools';
 import HandleHelmChart from './handle-helm-chart';
 import HelmChartResourcesV2 from './helm-chart-resources-v2';
@@ -35,6 +38,11 @@ const HelmCharts = () => {
   const [visible, setVisible] = useState(false);
   const { promise } = useLoaderData<typeof loader>();
 
+  const [l, setL] = useState(false);
+  useEffect(() => {
+    setL(true);
+  }, []);
+
   return (
     <>
       <LoadingComp
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
index f64394bb3..f1a24ce9e 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
@@ -26,10 +26,7 @@ import { NameIdView } from '~/console/components/name-id-view';
 import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
 import { toast } from '~/components/molecule/toast';
 import ExtendedFilledTab from '~/console/components/extended-filled-tab';
-import CodeView from '~/console/components/code-view';
-import CodeMirrorClient from '~/root/lib/client/components/editor-client';
-import { javascript } from '@codemirror/lang-javascript';
-import { basicSetup } from '@uiw/react-codemirror';
+import { keyconstants } from '~/console/server/r-utils/key-constants';
 
 const LOGO_URL = 'https://artifacthub.io/image/';
 
@@ -101,15 +98,40 @@ const Root = (props: IDialog) => {
   const [helmValues, setHelmValues] = useState('');
   const [activeTab, setActiveTab] = useState('defaults');
 
+  const fetchValues = async ({
+    packageId,
+    version,
+  }: {
+    packageId: string;
+    version: string;
+  }) => {
+    try {
+      const r = await axios({
+        method: 'get',
+        url: `/artifacthub-values-api`,
+        params: {
+          packageId,
+          version,
+        },
+      });
+      setHelmValues(r.data);
+    } catch (err) {
+      toast.error('Error fetching chart values');
+    }
+  };
+
   useEffect(() => {
     if (isUpdate) {
-      setChartVersions(
-        hemlCharts.find((v) => v.value === chartName?.value)?.item || []
-      );
-      setChartName({
-        label: props.data.spec?.chartName || '',
-        value: props.data.spec?.chartName || '',
-      });
+      if (hemlCharts && hemlCharts.length > 0) {
+        setChartVersions(
+          hemlCharts.find((v) => v.value === props.data.spec?.chartName)
+            ?.item || []
+        );
+        setChartName({
+          label: props.data.spec?.chartName || '',
+          value: props.data.spec?.chartName || '',
+        });
+      }
     } else {
       setChartName(undefined);
       setChartVersions([]);
@@ -118,10 +140,21 @@ const Root = (props: IDialog) => {
 
   useEffect(() => {
     if (isUpdate) {
-      setChartVersion({
-        label: props.data.spec?.chartVersion || '',
-        value: props.data.spec?.chartVersion || '',
-      });
+      if (chartVersions && chartVersions.length > 0) {
+        setChartVersion({
+          label: props.data.spec?.chartVersion || '',
+          value: props.data.spec?.chartVersion || '',
+        });
+        if (props.data.spec?.chartVersion) {
+          fetchValues({
+            packageId:
+              props.data.metadata?.annotations?.[
+                keyconstants.helmChartRepoPackageId
+              ],
+            version: props.data.spec?.chartVersion,
+          });
+        }
+      }
     } else {
       setChartVersion(undefined);
     }
@@ -164,28 +197,6 @@ const Root = (props: IDialog) => {
     }
   };
 
-  const fetchValues = async ({
-    packageId,
-    version,
-  }: {
-    packageId: string;
-    version: string;
-  }) => {
-    try {
-      const r = await axios({
-        method: 'get',
-        url: `/artifacthub-values-api`,
-        params: {
-          packageId,
-          version,
-        },
-      });
-      setHelmValues(r.data);
-    } catch (err) {
-      toast.error('Error fetching chart values');
-    }
-  };
-
   const searchRepos = async (text: string) => {
     setChartVersions([]);
     if (text) {
@@ -352,6 +363,12 @@ const Root = (props: IDialog) => {
                 metadata: {
                   name: val.name,
                   namespace: val.namespace,
+                  annotations: {
+                    [keyconstants.helmChartRepoPackageId]:
+                      props.data.metadata?.annotations?.[
+                        keyconstants.helmChartRepoPackageId
+                      ],
+                  },
                 },
                 spec: {
                   chartName: props.data.spec?.chartName,
@@ -375,6 +392,9 @@ const Root = (props: IDialog) => {
                 metadata: {
                   name: val.name,
                   namespace: val.namespace,
+                  annotations: {
+                    [keyconstants.helmChartRepoPackageId]: selectedRepo,
+                  },
                 },
                 spec: {
                   chartName: chartName?.value,
@@ -404,6 +424,7 @@ const Root = (props: IDialog) => {
     () => {
       if (values.chartRepoURL) {
         fetchHelmCharts(values.chartRepoURL);
+        console.log('fetchHelmCharts');
       }
     },
     300,
@@ -530,7 +551,12 @@ const Root = (props: IDialog) => {
                 onSearch={() => true}
               />
             ) : (
-              <TextInput value={chartName?.value} disabled label="Chart name" />
+              <TextInput
+                value={chartName?.value}
+                disabled
+                label="Chart name"
+                placeholder="Chart name"
+              />
             )}
             <Select
               searchable
@@ -554,58 +580,59 @@ const Root = (props: IDialog) => {
               loading={isUpdate && helmChartsLoading}
               onChange={(val) => {
                 setChartVersion(val);
+                setHelmValues('');
                 fetchValues({ packageId: selectedRepo, version: val.value });
               }}
               onSearch={() => true}
             />
           </div>
           <div className="basis-full flex flex-col">
-            <ExtendedFilledTab
-              value={activeTab}
-              onChange={setActiveTab}
-              items={[
-                { label: 'Defaults', value: 'defaults' },
-                {
-                  label: 'Overrides',
-                  value: 'overrides',
-                },
-
-                {
-                  label: 'Effective',
-                  value: 'effective',
-                },
-              ]}
-            />
-            <CodeMirrorClient
-              extensions={[basicSetup]}
-              value={`
----
-title: Hello World
----
-
-`}
-            />
-            {/* <TextArea */}
-            {/*   containerClassName="h-full" */}
-            {/*   className="h-full" */}
-            {/*   placeholder="Helm values" */}
-            {/*   onChange={handleChange('values')} */}
-            {/*   error={!!errors.values} */}
-            {/*   message={errors.values} */}
-            {/*   value={(() => { */}
-            {/*     if (activeTab === 'defaults') { */}
-            {/*       return helmValues; */}
-            {/*     } */}
-            {/*     if (activeTab === 'overrides') { */}
-            {/*       return values.values; */}
-            {/*     } */}
-            {/*     if (activeTab === 'effective') { */}
-            {/*       return ''; */}
-            {/*     } */}
-            {/*     return ''; */}
-            {/*   })()} */}
-            {/*   name="helm-chart-values" */}
-            {/* /> */}
+            {chartVersion ? (
+              <div className="flex flex-col gap-3xl h-full">
+                <ExtendedFilledTab
+                  value={activeTab}
+                  onChange={setActiveTab}
+                  items={[
+                    { label: 'Defaults', value: 'defaults' },
+                    {
+                      label: 'Values',
+                      value: 'values',
+                    },
+                  ]}
+                />
+                <TextArea
+                  containerClassName="h-full"
+                  className="h-full"
+                  textFieldClassName={cn(
+                    '!font-mono whitespace-pre break-normal overflow-x-scroll'
+                  )}
+                  placeholder={
+                    activeTab === 'defaults' ? 'Default values' : 'Helm Values'
+                  }
+                  onChange={(e) => {
+                    if (activeTab === 'values') {
+                      handleChange('values')(e);
+                    }
+                  }}
+                  error={!!errors.values}
+                  message={errors.values}
+                  value={(() => {
+                    if (activeTab === 'defaults') {
+                      return helmValues;
+                    }
+                    if (activeTab === 'values') {
+                      return values.values;
+                    }
+                    return '';
+                  })()}
+                  name="helm-chart-values"
+                />
+              </div>
+            ) : (
+              <div className="flex items-center justify-center bodyMd flex-col h-full">
+                Select chart name and version
+              </div>
+            )}
           </div>
         </div>
       </Popup.Content>
@@ -614,7 +641,7 @@ title: Hello World
         <Popup.Button
           loading={isLoading}
           type="submit"
-          content={isUpdate ? 'Update' : 'Add'}
+          content={isUpdate ? 'Update' : 'Install'}
           variant="primary"
         />
       </Popup.Footer>
diff --git a/src/apps/console/server/gql/queries/helm-chart-queries.ts b/src/apps/console/server/gql/queries/helm-chart-queries.ts
index aea9cee92..4ec38bbfb 100644
--- a/src/apps/console/server/gql/queries/helm-chart-queries.ts
+++ b/src/apps/console/server/gql/queries/helm-chart-queries.ts
@@ -71,7 +71,7 @@ export const helmChartQueries = (executor: IExecutor) => ({
       transformer(data: ConsoleGetHelmChartQuery) {
         return data.infra_getHelmRelease;
       },
-      vars(_: ConsoleGetHelmChartQueryVariables) { },
+      vars(_: ConsoleGetHelmChartQueryVariables) {},
     }
   ),
   listHelmChart: executor(
@@ -107,6 +107,7 @@ export const helmChartQueries = (executor: IExecutor) => ({
                 generation
                 name
                 namespace
+                annotations
               }
               recordVersion
               spec {
@@ -156,7 +157,7 @@ export const helmChartQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleListHelmChartQuery) =>
         data.infra_listHelmReleases,
-      vars(_: ConsoleListHelmChartQueryVariables) { },
+      vars(_: ConsoleListHelmChartQueryVariables) {},
     }
   ),
   createHelmChart: executor(
@@ -173,7 +174,7 @@ export const helmChartQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleCreateHelmChartMutation) =>
         data.infra_createHelmRelease,
-      vars(_: ConsoleCreateHelmChartMutationVariables) { },
+      vars(_: ConsoleCreateHelmChartMutationVariables) {},
     }
   ),
   updateHelmChart: executor(
@@ -191,7 +192,7 @@ export const helmChartQueries = (executor: IExecutor) => ({
       transformer(data: ConsoleUpdateHelmChartMutation) {
         return data.infra_updateHelmRelease;
       },
-      vars(_: ConsoleUpdateHelmChartMutationVariables) { },
+      vars(_: ConsoleUpdateHelmChartMutationVariables) {},
     }
   ),
   deleteHelmChart: executor(
@@ -210,7 +211,7 @@ export const helmChartQueries = (executor: IExecutor) => ({
       transformer(data: ConsoleDeleteHelmChartMutation) {
         return data.infra_deleteHelmRelease;
       },
-      vars(_: ConsoleDeleteHelmChartMutationVariables) { },
+      vars(_: ConsoleDeleteHelmChartMutationVariables) {},
     }
   ),
 });
diff --git a/src/apps/console/server/r-utils/key-constants.js b/src/apps/console/server/r-utils/key-constants.js
index 4dc90bfe5..966ad5f35 100644
--- a/src/apps/console/server/r-utils/key-constants.js
+++ b/src/apps/console/server/r-utils/key-constants.js
@@ -14,4 +14,5 @@ export const keyconstants = {
   nodepoolName: 'kloudlite.io/nodepool.name',
 
   nodepoolStateType: 'kloudlite.io/ui-pool.app-state-type',
+  helmChartRepoPackageId: 'kloudlite.io/helm-chart-repo-package-id',
 };
diff --git a/src/design-system/components/atoms/input.tsx b/src/design-system/components/atoms/input.tsx
index ea1a5a96b..7be5c5931 100644
--- a/src/design-system/components/atoms/input.tsx
+++ b/src/design-system/components/atoms/input.tsx
@@ -28,6 +28,7 @@ export interface IInputRow {
   value?: string | number;
   extra?: JSX.Element;
   className?: string;
+  textFieldClassName?: string;
   containerClassName?: string;
   error?: boolean;
   disabled?: boolean;
@@ -117,6 +118,7 @@ export const TextInputBase = forwardRef<HTMLInputElement, ITextInputBase>(
       shimmerLoading,
       autoFocus,
       focusRing = true,
+      textFieldClassName,
       ...extraProps
     } = props;
     const [t, setT] = useState(type || 'text');
@@ -191,6 +193,7 @@ export const TextInputBase = forwardRef<HTMLInputElement, ITextInputBase>(
             id={id}
             tabIndex={tabIndex}
             className={cn(
+              textFieldClassName,
               'outline-none flex-1 w-full h-full',
               'rounded bodyMd bg-transparent',
               {
diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
index 42d64a284..caeca885a 100644
--- a/src/generated/gql/server.ts
+++ b/src/generated/gql/server.ts
@@ -4781,7 +4781,12 @@ export type ConsoleListHelmChartQuery = {
         updateTime: any;
         createdBy: { userEmail: string; userId: string; userName: string };
         lastUpdatedBy: { userEmail: string; userId: string; userName: string };
-        metadata?: { generation: number; name: string; namespace?: string };
+        metadata?: {
+          generation: number;
+          name: string;
+          namespace?: string;
+          annotations?: any;
+        };
         spec?: {
           chartName: string;
           chartRepoURL: string;

From 38bd13b4b2b83758f70276ebbe89527dfdd7e8a0 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 18 Mar 2024 11:22:13 +0530
Subject: [PATCH 46/66] :bug: Fixed issue with build-resources and logs

---
 lib/client/helpers/socket/useSockLogs.tsx                    | 2 +-
 .../$account+/repo+/$repo+/buildruns/buildruns-resources.tsx | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/lib/client/helpers/socket/useSockLogs.tsx b/lib/client/helpers/socket/useSockLogs.tsx
index 0f58063b7..6be5392ad 100644
--- a/lib/client/helpers/socket/useSockLogs.tsx
+++ b/lib/client/helpers/socket/useSockLogs.tsx
@@ -37,7 +37,7 @@ export const useSocketLogs = ({
 
   useEffect(() => {
     const sorted = responses.sort((a, b) => {
-      const resp = b.data.podName.localeCompare(a.data.podName);
+      const resp = a.data.podName.localeCompare(b.data.podName);
 
       if (resp === 0) {
         return dayjs(a.data.timestamp).unix() - dayjs(b.data.timestamp).unix();
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
index 31c37211e..4f6d8cf8c 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
@@ -90,6 +90,11 @@ const GridView = ({ items }: IResource) => {
 const ListItem = ({ item }: { item: BaseType }) => {
   const [open, setOpen] = useState<boolean>(false);
   const { account } = useOutletContext<IAccountContext>();
+
+  if (item.metadata && !item.metadata.annotations) {
+    item.metadata.annotations = {};
+  }
+
   const commitHash = item.metadata?.annotations['github.com/commit'];
 
   // eslint-disable-next-line no-nested-ternary

From 8d0d8426bd0e3a06cca0e8c45d59e61eef6f0e6c Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Mon, 18 Mar 2024 12:52:14 +0530
Subject: [PATCH 47/66] Added config and secret for config files in app

---
 .../$app+/settings+/environment/route.tsx     |   4 +-
 .../new-app/app-config-mount.tsx              | 259 ++++++++----------
 .../new-app/app-environment-variables.tsx     |  31 ++-
 .../$environment+/new-app/app-environment.tsx |   4 +-
 .../infra+/$cluster+/helm-charts/_index.tsx   |  10 +-
 5 files changed, 143 insertions(+), 165 deletions(-)

diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/route.tsx
index e84509468..8b4d731a7 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/route.tsx
@@ -8,7 +8,7 @@ import Wrapper from '~/console/components/wrapper';
 import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
 import { Button } from '~/components/atoms/button';
 import { EnvironmentVariables } from '../../../../new-app/app-environment-variables';
-import { ConfigMounts } from '../../../../new-app/app-environment-mounts';
+import { ConfigMounts } from '../../../../new-app/app-config-mount';
 
 export interface IAppDialogValue {
   refKey: string;
@@ -28,7 +28,7 @@ const SettingEnvironment = () => {
       value: 'environment_variables',
     },
     {
-      label: 'Config mount',
+      label: 'Config files',
       value: 'config_mounts',
     },
   ];
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx
index 560b2bc35..26ff9fa4a 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx
@@ -43,7 +43,7 @@ export interface IValue {
   type: 'config' | 'secret' | NonNullableString;
 }
 
-const EnvironmentVariablesList = ({
+const ConfigMountList = ({
   configMounts,
   onDelete = (_) => _,
 }: IConfigMountList) => {
@@ -65,7 +65,7 @@ const EnvironmentVariablesList = ({
           header={
             <div className="flex flex-row items-center w-full">
               <div className="text-text-strong bodyMd flex-1">
-                Environment variable list
+                Config mount list
               </div>
               <div className="flex flex-row items-center">
                 <IconButton
@@ -89,7 +89,7 @@ const EnvironmentVariablesList = ({
           {page.map((ev, index) => {
             return (
               <List.Row
-                key={ev.key}
+                key={ev.mountPath}
                 className={cn({
                   '!border-b': index < 4,
                   '!rounded-b-none': index < 4,
@@ -110,11 +110,22 @@ const EnvironmentVariablesList = ({
                   },
                   {
                     key: `${index}-column-1`,
-                    className: 'w-[80px]',
+                    className: 'w-[80px] truncate',
                     render: () => (
-                      <div className="bodyMd-semibold text-text-default">
-                        {ev.key}
-                      </div>
+                      <Tooltip.Root
+                        className="!max-w-[400px]"
+                        content={
+                          <div className="bodyMd-semibold text-text-default truncate">
+                            {ev.mountPath}
+                          </div>
+                        }
+                      >
+                        <div className="bodyMd-semibold text-text-default truncate w-fit max-w-full">
+                          <div className="truncate">
+                            <span>{ev.mountPath}</span>
+                          </div>
+                        </div>
+                      </Tooltip.Root>
                     ),
                   },
                   {
@@ -124,31 +135,15 @@ const EnvironmentVariablesList = ({
                         className="!max-w-[400px]"
                         content={
                           <div className="flex flex-row gap-md items-center bodyMd text-text-soft">
-                            {!ev.type && ev.value}
                             {!!ev.type && (
-                              <>
-                                <span className="line-clamp-1">
-                                  {ev.refName}
-                                </span>
-                                <span>
-                                  <ArrowRight size={16} />
-                                </span>
-                                {ev.refKey}
-                              </>
+                              <span className="line-clamp-1">{ev.refName}</span>
                             )}
                           </div>
                         }
                       >
                         <div className="flex flex-row gap-md items-center bodyMd text-text-soft">
-                          {!ev.type && ev.value}
                           {!!ev.type && (
-                            <>
-                              <span className="line-clamp-1">{ev.refName}</span>
-                              <span>
-                                <ArrowRight size={16} />
-                              </span>
-                              {ev.refKey}
-                            </>
+                            <span className="line-clamp-1">{ev.refName}</span>
                           )}
                         </div>
                       </Tooltip.Root>
@@ -180,7 +175,7 @@ const EnvironmentVariablesList = ({
         <div className="rounded border-border-default border min-h-[347px] flex flex-row items-center justify-center">
           <NoResultsFound
             title={null}
-            subtitle="No environment variables are added."
+            subtitle="No config mounts are added."
             compact
             image={<SmileySad size={32} weight={1} />}
             shadow={false}
@@ -202,16 +197,6 @@ export const ConfigMounts = () => {
 
   const entry = Yup.object({
     type: Yup.string().oneOf(['config', 'secret']).notRequired(),
-    key: Yup.string().required(),
-
-    refKey: Yup.string()
-      .when(['type'], ([type], schema) => {
-        if (type === 'config' || type === 'secret') {
-          return schema.required();
-        }
-        return schema;
-      })
-      .notRequired(),
     refName: Yup.string()
       .when(['type'], ([type], schema) => {
         if (type === 'config' || type === 'secret') {
@@ -220,6 +205,7 @@ export const ConfigMounts = () => {
         return schema;
       })
       .notRequired(),
+    mountPath: Yup.string().required(),
   });
 
   const {
@@ -228,12 +214,13 @@ export const ConfigMounts = () => {
     submit,
     resetValues: resetAppValue,
   } = useForm({
-    initialValues: getContainer().env,
+    initialValues: getContainer().volumes,
     validationSchema: Yup.array(entry),
     onSubmit: (val) => {
+      console.log('values', val);
       setContainer((c) => ({
         ...c,
-        env: val,
+        volumes: val,
       }));
     },
   });
@@ -250,14 +237,13 @@ export const ConfigMounts = () => {
   }, [hasChanges]);
 
   const addEntry = (val: IConfigMount) => {
+    console.log('here', val);
     const tempVal = val || [];
     setValues((v = []) => {
       const data = {
-        key: tempVal.key,
         type: tempVal.type,
-        refName: tempVal.refName || '',
-        refKey: tempVal.refKey || '',
-        value: tempVal.value || '',
+        refName: tempVal.refName,
+        mountPath: tempVal.mountPath,
       };
       return [...(v || []), data];
     });
@@ -265,7 +251,7 @@ export const ConfigMounts = () => {
 
   const removeEntry = (val: IConfigMount) => {
     setValues((v) => {
-      const nv = v?.filter((v) => v.key !== val.key);
+      const nv = v?.filter((v) => v.mountPath !== val.mountPath);
       return nv;
     });
   };
@@ -280,14 +266,12 @@ export const ConfigMounts = () => {
   });
 
   interface InitialValuesProps {
-    key: string;
+    mountPath: string;
     value?: IValue;
-    textInputValue?: string;
   }
 
   const initialValues: InitialValuesProps = {
-    key: '',
-    textInputValue: '',
+    mountPath: '',
   };
 
   const {
@@ -300,37 +284,23 @@ export const ConfigMounts = () => {
     submit: eSubmit,
   } = useForm({
     initialValues,
-
     validationSchema: Yup.object().shape({
       value: vSchema,
       textInputValue: Yup.string(),
-      key: Yup.string()
+      mountPath: Yup.string()
         .required()
-        .test('is-valid', 'Key already exists.', (value) => {
-          return !getContainer().env?.find((v) => v.key === value);
+        .test('is-valid', 'Path already exists.', (value) => {
+          return !getContainer().volumes?.find((v) => v.mountPath === value);
         }),
     }),
     onSubmit: () => {
-      if (eValues.textInputValue) {
+      console.log('helre', eValues);
+      if (eValues.value) {
         const ev: IConfigMount = {
-          key: eValues.key,
-          refKey: undefined,
-          refName: undefined,
-          type: undefined,
-          value: eValues.textInputValue,
-        };
-        // setEnvVariables((prev) => [...prev, ev]);
-        addEntry(ev);
-      } else if (eValues.value) {
-        const ev: IConfigMount = {
-          key: eValues.key,
-          refKey: eValues.value.refKey,
           refName: eValues.value.refName,
           type: eValues.value.type,
-          value: '',
+          mountPath: eValues.mountPath,
         };
-
-        // setEnvVariables((prev) => [...prev, ev]);
         addEntry(ev);
       }
       resetValues();
@@ -346,81 +316,85 @@ export const ConfigMounts = () => {
         <div className="flex flex-row gap-3xl items-start">
           <div className="flex-1">
             <TextInput
-              label="Key"
+              label="Path"
               size="lg"
-              error={!!eErrors.key}
-              message={eErrors.key}
-              value={eValues.key}
+              error={!!eErrors.mountPath}
+              message={eErrors.mountPath}
+              value={eValues.mountPath}
               autoComplete="off"
-              onChange={eHandleChange('key')}
+              onChange={eHandleChange('mountPath')}
             />
           </div>
-          <div className="flex-1">
-            {eValues.value ? (
-              <div className="flex flex-col gap-md">
-                <div className="bodyMd-medium text-text-default">Value</div>
-                <div className="flex flex-row items-center rounded border border-border-default bg-surface-basic-default line-clamp-1">
-                  <span className="py-lg pl-lg pr-md text-text-default">
-                    {eValues.value.type === 'config' ? (
-                      <LockSimpleOpen
-                        size={14}
-                        weight={2.5}
-                        color="currentColor"
-                      />
-                    ) : (
-                      <LockSimple size={14} weight={2.5} color="currentColor" />
-                    )}
-                  </span>
-                  <Tooltip.Root
-                    className="!max-w-[400px]"
-                    content={
+          <div className="flex-1 ">
+            <div className="flex flex-col">
+              <div className="bodyMd-medium text-text-default pb-md">
+                <span className="h-4xl block">Value</span>
+              </div>
+              <div className="h-[43px] px-lg flex flex-row items-center rounded border border-border-default bg-surface-basic-default line-clamp-1">
+                {eValues.value ? (
+                  <div className="flex flex-row items-center">
+                    <span className="py-lg pl-lg pr-md text-text-default">
+                      {eValues.value.type === 'config' ? (
+                        <LockSimpleOpen
+                          size={14}
+                          weight={2.5}
+                          color="currentColor"
+                        />
+                      ) : (
+                        <LockSimple
+                          size={14}
+                          weight={2.5}
+                          color="currentColor"
+                        />
+                      )}
+                    </span>
+                    <Tooltip.Root
+                      className="!max-w-[400px]"
+                      content={
+                        <div className="flex-1 flex flex-row gap-md items-center py-xl px-lg bodyMd text-text-soft ">
+                          <span>{eValues.value.refName}</span>
+                          <span>
+                            <ArrowRight size={16} />
+                          </span>
+                          <span className="truncate">
+                            {eValues.value.refKey}
+                          </span>
+                        </div>
+                      }
+                    >
                       <div className="flex-1 flex flex-row gap-md items-center py-xl px-lg bodyMd text-text-soft ">
-                        <span>{eValues.value.refKey}</span>
+                        <span className="line-clamp-1">
+                          {eValues.value.refName}
+                        </span>
                         <span>
                           <ArrowRight size={16} />
                         </span>
+
                         <span className="line-clamp-1">
-                          {eValues.value.refName}
+                          {eValues.value.refKey}
                         </span>
                       </div>
-                    }
-                  >
-                    <div className="flex-1 flex flex-row gap-md items-center py-xl px-lg bodyMd text-text-soft ">
-                      <span>{eValues.value.refKey}</span>
-                      <span>
-                        <ArrowRight size={16} />
-                      </span>
-                      <span className="line-clamp-1">
-                        {eValues.value.refName}
-                      </span>
-                    </div>
-                  </Tooltip.Root>
-                  <button
-                    aria-label="clear"
-                    tabIndex={-1}
-                    type="button"
-                    className="outline-none p-lg text-text-default rounded-full"
-                    onClick={() => {
-                      eSetValues((v) => {
-                        return {
-                          ...v,
-                          value: undefined,
-                        };
-                      });
-                    }}
-                  >
-                    <XCircleFill size={16} color="currentColor" />
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <TextInput
-                value={eValues.textInputValue}
-                onChange={eHandleChange('textInputValue')}
-                label="Value"
-                size="lg"
-                suffix={
-                  !eValues.textInputValue ? (
+                    </Tooltip.Root>
+                    <button
+                      aria-label="clear"
+                      tabIndex={-1}
+                      type="button"
+                      className="outline-none p-lg text-text-default rounded-full"
+                      onClick={() => {
+                        eSetValues((v) => {
+                          return {
+                            ...v,
+                            value: undefined,
+                          };
+                        });
+                      }}
+                    >
+                      <XCircleFill size={16} color="currentColor" />
+                    </button>
+                  </div>
+                ) : (
+                  <div className="w-full flex flex-row justify-between">
+                    <div />
                     <ChipGroup
                       onClick={(data) => {
                         setShowCSDialog({ type: data.name, data: null });
@@ -437,36 +411,31 @@ export const ConfigMounts = () => {
                         type="CLICKABLE"
                       />
                     </ChipGroup>
-                  ) : null
-                }
-                showclear={!!eValues.textInputValue}
-              />
-            )}
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
         </div>
         <div className="flex flex-row gap-md items-center">
           <div className="bodySm text-text-soft flex-1">
-            All environment entries be mounted on the path specified in the
-            container
+            All config entries be mounted on path specified in the container.
           </div>
           <Button
             type="submit"
-            content="Add environment"
+            content="Add config mount"
             variant="basic"
-            disabled={
-              !eValues.key || !(eValues.value || eValues.textInputValue)
-            }
+            disabled={!eValues.mountPath || !eValues.value}
             onClick={() => {
               eSubmit();
             }}
           />
         </div>
       </form>
-      <EnvironmentVariablesList
-        configMounts={getContainer().env || []}
+      <ConfigMountList
+        configMounts={getContainer().volumes || []}
         onDelete={(ev) => {
           removeEntry(ev);
-          // setEnvVariables((prev) => prev.filter((p) => p !== ev));
         }}
       />
       <AppDialog
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx
index 24d2d1ad1..9511a074d 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx
@@ -114,9 +114,20 @@ const EnvironmentVariablesList = ({
                     key: `${index}-column-1`,
                     className: 'w-[80px]',
                     render: () => (
-                      <div className="bodyMd-semibold text-text-default">
-                        {ev.key}
-                      </div>
+                      <Tooltip.Root
+                        className="!max-w-[400px]"
+                        content={
+                          <div className="bodyMd-semibold text-text-default">
+                            {ev.key}
+                          </div>
+                        }
+                      >
+                        <div className="bodyMd-semibold text-text-default truncate w-fit max-w-full">
+                          <div className="truncate">
+                            <span>{ev.key}</span>
+                          </div>
+                        </div>
+                      </Tooltip.Root>
                     ),
                   },
                   {
@@ -377,23 +388,29 @@ export const EnvironmentVariables = () => {
                     className="!max-w-[400px]"
                     content={
                       <div className="flex-1 flex flex-row gap-md items-center py-xl px-lg bodyMd text-text-soft ">
-                        <span>{eValues.value.refKey}</span>
+                        <span className="line-clamp-1">
+                          {eValues.value.refName}
+                        </span>
                         <span>
                           <ArrowRight size={16} />
                         </span>
+
                         <span className="line-clamp-1">
-                          {eValues.value.refName}
+                          {eValues.value.refKey}
                         </span>
                       </div>
                     }
                   >
                     <div className="flex-1 flex flex-row gap-md items-center py-xl px-lg bodyMd text-text-soft ">
-                      <span>{eValues.value.refKey}</span>
+                      <span className="line-clamp-1">
+                        {eValues.value.refName}
+                      </span>
                       <span>
                         <ArrowRight size={16} />
                       </span>
+
                       <span className="line-clamp-1">
-                        {eValues.value.refName}
+                        {eValues.value.refKey}
                       </span>
                     </div>
                   </Tooltip.Root>
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment.tsx
index 24b6c4c83..9179ab024 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment.tsx
@@ -7,7 +7,7 @@ import {
 import { BottomNavigation } from '~/console/components/commons';
 import { FadeIn } from '../../../../../../page-components/util';
 import { EnvironmentVariables } from './app-environment-variables';
-import { ConfigMounts } from './app-environment-mounts';
+import { ConfigMounts } from './app-config-mount';
 
 export interface IAppDialogValue {
   refKey: string;
@@ -26,7 +26,7 @@ const AppEnvironment = () => {
       value: 'environment_variables',
     },
     {
-      label: 'Config mount',
+      label: 'Config files',
       value: 'config_mounts',
     },
   ];
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
index cafbd0f51..7a6ee6202 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/_index.tsx
@@ -1,7 +1,7 @@
 import { Plus, PlusFill } from '@jengaicons/react';
 import { defer } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Button } from '~/components/atoms/button.jsx';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import Wrapper from '~/console/components/wrapper';
@@ -9,9 +9,6 @@ import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { parseNodes } from '~/console/server/r-utils/common';
 import { IRemixCtx } from '~/root/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
-import CodeMirrorClient from '~/root/lib/client/components/editor-client';
-import { isBrowser } from 'framer-motion';
-import ReactCodeMirror from '@uiw/react-codemirror';
 import Tools from './tools';
 import HandleHelmChart from './handle-helm-chart';
 import HelmChartResourcesV2 from './helm-chart-resources-v2';
@@ -38,11 +35,6 @@ const HelmCharts = () => {
   const [visible, setVisible] = useState(false);
   const { promise } = useLoaderData<typeof loader>();
 
-  const [l, setL] = useState(false);
-  useEffect(() => {
-    setL(true);
-  }, []);
-
   return (
     <>
       <LoadingComp

From 65450f320c01ff8f74b61f37361f9378a6bfed9b Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 18 Mar 2024 14:50:57 +0530
Subject: [PATCH 48/66] :bug: Fixed issues with logs

---
 lib/client/components/logger/index.tsx         |  2 +-
 lib/client/helpers/socket/context.tsx          |  8 +++++---
 lib/client/helpers/socket/useSockLogs.tsx      | 18 ++++++++++++++----
 .../overview+/logs-n-metrics/route.tsx         |  2 +-
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/lib/client/components/logger/index.tsx b/lib/client/components/logger/index.tsx
index 4839df6e6..cdb81f966 100644
--- a/lib/client/components/logger/index.tsx
+++ b/lib/client/components/logger/index.tsx
@@ -685,7 +685,7 @@ const LogComp = ({
   const [wInPx, setWInPx] = useState('100%');
   useEffect(() => {
     if (wRef.current && wInPx === '100%') {
-      setWInPx(`${wRef.current.clientWidth}`);
+      setWInPx(`${wRef.current.clientWidth}px`);
     }
   }, [wRef.current]);
 
diff --git a/lib/client/helpers/socket/context.tsx b/lib/client/helpers/socket/context.tsx
index f7d280c99..81019e166 100644
--- a/lib/client/helpers/socket/context.tsx
+++ b/lib/client/helpers/socket/context.tsx
@@ -12,6 +12,7 @@ import ReconnectingWebSocket from 'reconnecting-websocket';
 import logger from '~/root/lib/client/helpers/log';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import { socketUrl } from '~/root/lib/configs/base-url.cjs';
+import { sleep } from '~/root/lib/utils/common';
 
 type IFor = 'logs' | 'resource-update';
 
@@ -264,9 +265,10 @@ export const SockProvider = ({ children }: ChildrenProps) => {
 
   const sendMsg = useCallback(
     async <T extends IData>(msg: ISocketMsg<T>) => {
-      if (!sockPromise.current) {
-        logger.log('no socket connection');
-        return;
+      while (!sockPromise.current) {
+        logger.log('no socket connection waiting');
+        // eslint-disable-next-line no-await-in-loop
+        await sleep(1000);
       }
       try {
         const w = await sockPromise.current;
diff --git a/lib/client/helpers/socket/useSockLogs.tsx b/lib/client/helpers/socket/useSockLogs.tsx
index 6be5392ad..65f8e6845 100644
--- a/lib/client/helpers/socket/useSockLogs.tsx
+++ b/lib/client/helpers/socket/useSockLogs.tsx
@@ -37,13 +37,23 @@ export const useSocketLogs = ({
 
   useEffect(() => {
     const sorted = responses.sort((a, b) => {
-      const resp = a.data.podName.localeCompare(b.data.podName);
+      const podDiff = a.data.podName.localeCompare(b.data.podName);
 
-      if (resp === 0) {
-        return dayjs(a.data.timestamp).unix() - dayjs(b.data.timestamp).unix();
+      if (podDiff === 0) {
+        const contDiff = a.data.containerName.localeCompare(
+          b.data.containerName
+        );
+
+        if (contDiff === 0) {
+          return (
+            dayjs(a.data.timestamp).unix() - dayjs(b.data.timestamp).unix()
+          );
+        }
+
+        return contDiff;
       }
 
-      return resp;
+      return podDiff;
     });
 
     if (JSON.stringify(sorted) !== JSON.stringify(logs)) {
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
index c328c0dc0..5c4dbe725 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
@@ -227,7 +227,7 @@ const LogsAndMetrics = () => {
         />
       </div>
 
-      <div className="flex-1">
+      <div className="flex-1 max-w-full">
         <LogComp
           {...{
             hideLineNumber: !state.linesVisible,

From c401c799290900eeff04889e1c01bb5582cb990f Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 18 Mar 2024 15:05:39 +0530
Subject: [PATCH 49/66] :bug: Fixed issue with rerender on logs component

---
 lib/client/components/logger/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/lib/client/components/logger/index.tsx b/lib/client/components/logger/index.tsx
index cdb81f966..927224728 100644
--- a/lib/client/components/logger/index.tsx
+++ b/lib/client/components/logger/index.tsx
@@ -689,6 +689,14 @@ const LogComp = ({
     }
   }, [wRef.current]);
 
+  const [logData, setLogData] = useState<ISocketMessage[]>([]);
+
+  useEffect(() => {
+    if (logs.length) {
+      setLogData(logs.map((d) => d.data));
+    }
+  }, [logs]);
+
   return isClientSide ? (
     <div
       ref={wRef}
@@ -749,9 +757,7 @@ const LogComp = ({
         logs.length > 0 && (
           <LogBlock
             {...{
-              data: logs.map((d) => {
-                return d.data;
-              }),
+              data: logData,
               follow,
               dark,
               enableSearch,

From 69646838ab90877bc22189592bbd0d2fb0aefaef Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Mon, 18 Mar 2024 11:59:58 +0530
Subject: [PATCH 50/66] fix(new-team): - sign out button added in new team -
 copy button is giving feedback in access management registry url and password

---
 .../components/common-console-components.tsx  |  56 +++++++-
 src/apps/console/components/icons.tsx         |   1 +
 .../multi-step-progress-wrapper.tsx           |  18 ++-
 .../access-management/cred-resources.tsx      | 134 ++++++------------
 .../packages+/repos/repo-resources.tsx        |  45 +-----
 5 files changed, 122 insertions(+), 132 deletions(-)

diff --git a/src/apps/console/components/common-console-components.tsx b/src/apps/console/components/common-console-components.tsx
index dae60b845..8d39553e0 100644
--- a/src/apps/console/components/common-console-components.tsx
+++ b/src/apps/console/components/common-console-components.tsx
@@ -1,6 +1,10 @@
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
 import { Button } from '~/components/atoms/button';
 import { cn } from '~/components/utils';
+import useClipboard from '~/root/lib/client/hooks/use-clipboard';
+import { toast } from '~/components/molecule/toast';
+import { Copy, Check } from '~/console/components/icons';
+import { ListBody } from './console-list-components';
 
 interface IDeleteContainer {
   title: ReactNode;
@@ -51,3 +55,53 @@ export const Box = ({ children, title, className }: IBox) => {
     </div>
   );
 };
+
+export const CopyContentToClipboard = ({
+  content,
+  toastMessage,
+}: {
+  content: string;
+  toastMessage: string;
+}) => {
+  const iconSize = 16;
+  const { copy } = useClipboard({});
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    copy(content);
+    setCopied(true);
+    toast.success(toastMessage);
+
+    setTimeout(() => {
+      setCopied(false);
+    }, 3000);
+  };
+
+  return (
+    <ListBody
+      data={
+        <div
+          className="cursor-pointer flex flex-row items-center gap-lg truncate"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!copied) {
+              handleCopy();
+            }
+          }}
+        >
+          <span className="truncate">{content}</span>
+          {copied ? (
+            <span>
+              <Check size={iconSize} />
+            </span>
+          ) : (
+            <span>
+              <Copy size={iconSize} />
+            </span>
+          )}
+        </div>
+      }
+    />
+  );
+};
diff --git a/src/apps/console/components/icons.tsx b/src/apps/console/components/icons.tsx
index 92e15f570..f4b63352f 100644
--- a/src/apps/console/components/icons.tsx
+++ b/src/apps/console/components/icons.tsx
@@ -50,4 +50,5 @@ export {
   CircleNotch,
   Circle,
   CircleFill,
+  Spinner,
 } from '@jengaicons/react';
diff --git a/src/apps/console/components/multi-step-progress-wrapper.tsx b/src/apps/console/components/multi-step-progress-wrapper.tsx
index 60674d30a..27a3bdf83 100644
--- a/src/apps/console/components/multi-step-progress-wrapper.tsx
+++ b/src/apps/console/components/multi-step-progress-wrapper.tsx
@@ -2,6 +2,9 @@ import { Link } from '@remix-run/react';
 import { ReactNode } from 'react';
 import { Button } from '~/components/atoms/button';
 import { ArrowLeft } from '~/console/components/icons';
+import { SignOut } from '@jengaicons/react';
+import { authBaseUrl } from '~/root/lib/configs/base-url.cjs';
+import { useExternalRedirect } from '~/root/lib/client/helpers/use-redirect';
 import SplitWrapper from './split-wrapper';
 
 type ITitleSection = {
@@ -9,9 +12,22 @@ type ITitleSection = {
   subTitle: ReactNode;
 };
 const TitleSection = ({ title, subTitle }: ITitleSection) => {
+  const eNavigate = useExternalRedirect();
+
   return (
     <div className="flex flex-col gap-xl">
-      <div className="heading4xl text-text-default">{title}</div>
+      <div className="flex flex-row justify-between">
+        <div className="heading4xl text-text-default">{title}</div>
+        <Button
+          variant="plain"
+          suffix={<SignOut />}
+          size="sm"
+          content="Sign Out"
+          onClick={() => {
+            eNavigate(`${authBaseUrl}/logout`);
+          }}
+        />
+      </div>
       <div className="bodyLg text-text-default">{subTitle}</div>
       <div />
     </div>
diff --git a/src/apps/console/routes/_main+/$account+/packages+/access-management/cred-resources.tsx b/src/apps/console/routes/_main+/$account+/packages+/access-management/cred-resources.tsx
index fe94fdc43..05356de37 100644
--- a/src/apps/console/routes/_main+/$account+/packages+/access-management/cred-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/packages+/access-management/cred-resources.tsx
@@ -1,8 +1,4 @@
-import { CaretDownFill, Copy, Eye, Spinner, Trash } from '@jengaicons/react';
 import { useState } from 'react';
-import { Button, IconButton } from '~/components/atoms/button';
-import OptionList from '~/components/atoms/option-list';
-import ScrollArea from '~/components/atoms/scroll-area';
 import { toast } from '~/components/molecule/toast';
 import { generateKey, titleCase } from '~/components/utils';
 import {
@@ -27,6 +23,8 @@ import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import { registryHost } from '~/root/lib/configs/base-url.cjs';
 import { handleError } from '~/root/lib/utils/common';
+import { Copy, Spinner, Trash, Check } from '~/console/components/icons';
+import { CopyContentToClipboard } from '~/console/components/common-console-components';
 
 const RESOURCE_NAME = 'credential';
 type BaseType = ExtractNodeType<ICRCreds>;
@@ -77,113 +75,66 @@ const ExtraButton = ({ onDelete }: { onDelete: () => void }) => {
 };
 
 const RegistryUrlView = () => {
-  const { copy } = useClipboard({
-    onSuccess() {
-      toast.success('Registry url copied successfully.');
-    },
-  });
   return (
-    <ListBody
-      data={
-        <div
-          className="cursor-pointer flex flex-row items-center gap-lg truncate"
-          onClick={() => {
-            copy(registryHost);
-          }}
-        >
-          <span className="truncate">{registryHost}</span>
-          <span>
-            <Copy size={16} />
-          </span>
-        </div>
-      }
+    <CopyContentToClipboard
+      content={registryHost}
+      toastMessage="Registry url copied successfully."
     />
   );
 };
 
-const TokenView = ({
-  username,
-  list = true,
-}: {
-  username: string;
-  list: boolean;
-}) => {
-  const { copy } = useClipboard({
-    onSuccess() {
-      toast.success('Token copied successfully.');
+const TokenView = ({ username }: { username: string }) => {
+  const iconSize = 16;
+  const api = useConsoleApi();
+  const [copy, setCopy] = useState(false);
+  const [copyIcon, setCopyIcon] = useState(<Copy size={iconSize} />);
+
+  const handleCopy = () => {
+    toast.success('Token copied successfully.');
+    setCopyIcon(<Check size={iconSize} />);
+    setTimeout(() => {
+      setCopyIcon(<Copy size={iconSize} />);
+    }, 3000);
+  };
+
+  const { copy: copyToClipboard } = useClipboard({
+    onSuccess: () => {
+      handleCopy();
     },
   });
-  const api = useConsoleApi();
-  const [token, setToken] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [open, setOpen] = useState(false);
 
   useDebounce(
     async () => {
-      if (open) {
-        setLoading(true);
+      if (copy) {
+        setCopyIcon(<Spinner size={iconSize} />);
         const { errors, data } = await api.getCredToken({ username });
-        setLoading(false);
         if (errors) {
           throw errors[0];
         }
-
-        setToken(data);
+        copyToClipboard(data);
+        setCopy(false);
       }
     },
     100,
-    [username, open]
+    [username, copy]
   );
   return (
-    <OptionList.Root
-      onOpenChange={(e) => {
-        setOpen(e);
-      }}
-    >
-      {list ? (
-        <OptionList.Trigger>
-          <Button
-            variant="plain"
-            className="group/view"
-            content={
-              <div className="flex flex-row items-center gap-xl">
-                <span>View password</span>
-                <span className="invisible group-hover/view:visible group-[.selected]/view:visible">
-                  <CaretDownFill size={16} />
-                </span>
-              </div>
-            }
-            prefix={<Eye />}
-          />
-        </OptionList.Trigger>
-      ) : (
-        <OptionList.Trigger>
-          <IconButton variant="plain" icon={<Eye />} size="sm" />
-        </OptionList.Trigger>
-      )}
-
-      <OptionList.Content>
-        <OptionList.Item
+    <ListBody
+      data={
+        <div
+          className="cursor-pointer flex flex-row items-center gap-lg truncate w-fit"
           onClick={(e) => {
             e.preventDefault();
-            copy(token);
+            e.stopPropagation();
+            setCopy(true);
           }}
+          title="Copy token"
         >
-          <ScrollArea className="!w-auto max-w-[200px] min-w-[200px] text-text-default">
-            {token}
-            {loading && (
-              <div className="flex flex-row gap-xl">
-                <div className="animate-spin">
-                  <Spinner size={16} />
-                </div>{' '}
-                Loading...
-              </div>
-            )}
-          </ScrollArea>
-          <Copy size={16} />
-        </OptionList.Item>
-      </OptionList.Content>
-    </OptionList.Root>
+          <span>Copy token</span>
+          {copyIcon}
+        </div>
+      }
+    />
   );
 };
 
@@ -205,7 +156,6 @@ const GridView = ({ items, onDelete = (_) => _ }: IResource) => {
                     subtitle={username}
                     action={
                       <div className="flex flex-row items-center">
-                        <TokenView username={item.username} list={false} />
                         <ExtraButton
                           onDelete={() => {
                             onDelete(item);
@@ -220,6 +170,10 @@ const GridView = ({ items, onDelete = (_) => _ }: IResource) => {
                 key: generateKey(keyPrefix, 'registry-url'),
                 render: () => <RegistryUrlView />,
               },
+              {
+                key: generateKey(keyPrefix, 'token'),
+                render: () => <TokenView username={username} />,
+              },
               {
                 key: generateKey(keyPrefix, 'access'),
                 render: () => (
@@ -269,7 +223,7 @@ const ListView = ({ items, onDelete = (_) => _ }: IResource) => {
               {
                 key: generateKey(keyPrefix, 'token'),
                 className: 'w-[180px]',
-                render: () => <TokenView username={username} list />,
+                render: () => <TokenView username={username} />,
               },
               {
                 key: generateKey(keyPrefix, 'access'),
diff --git a/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx b/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
index 235cdad01..a0474fa61 100644
--- a/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/packages+/repos/repo-resources.tsx
@@ -1,10 +1,9 @@
-import { Copy, Trash, Check } from '@jengaicons/react';
 import { Link, useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { toast } from '~/components/molecule/toast';
 import { generateKey, titleCase } from '~/components/utils';
+import { CopyContentToClipboard } from '~/console/components/common-console-components';
 import {
-  ListBody,
   ListItem,
   ListTitle,
 } from '~/console/components/console-list-components';
@@ -21,9 +20,9 @@ import {
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
 import { useReload } from '~/root/lib/client/helpers/reloader';
-import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 import { registryHost } from '~/root/lib/configs/base-url.cjs';
 import { handleError } from '~/root/lib/utils/common';
+import { Trash } from '~/console/components/icons';
 
 type BaseType = ExtractNodeType<IRepos>;
 const RESOURCE_NAME = 'repository';
@@ -58,46 +57,12 @@ const ExtraButton = ({ onDelete }: { onDelete: () => void }) => {
 
 const RepoUrlView = ({ name }: { name: string }) => {
   const { account } = useParams();
-  const { copy } = useClipboard({});
   const url = `${registryHost}/${account}/${name}`;
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = () => {
-    copy(url);
-    setCopied(true);
-    toast.success('Registry url copied successfully.');
-
-    setTimeout(() => {
-      setCopied(false);
-    }, 3000);
-  };
 
   return (
-    <ListBody
-      data={
-        <div
-          className="cursor-pointer flex flex-row items-center gap-lg truncate w-fit"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (!copied) {
-              handleCopy();
-            }
-          }}
-          title={url}
-        >
-          <span className="truncate">{url}</span>
-          {copied ? (
-            <span>
-              <Check size={16} />
-            </span>
-          ) : (
-            <span>
-              <Copy size={16} />
-            </span>
-          )}
-        </div>
-      }
+    <CopyContentToClipboard
+      content={url}
+      toastMessage="Repository url copied successfully."
     />
   );
 };

From 0709deca8e498318ea8ec7aa7b32a7e23cea19d7 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Mon, 18 Mar 2024 17:58:12 +0530
Subject: [PATCH 51/66] added action for new team signout

---
 .../multi-step-progress-wrapper.tsx           | 21 +++++--------------
 src/apps/console/routes/_a+/new-team.tsx      | 16 ++++++++++++++
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/apps/console/components/multi-step-progress-wrapper.tsx b/src/apps/console/components/multi-step-progress-wrapper.tsx
index 27a3bdf83..9f4161f0f 100644
--- a/src/apps/console/components/multi-step-progress-wrapper.tsx
+++ b/src/apps/console/components/multi-step-progress-wrapper.tsx
@@ -2,31 +2,19 @@ import { Link } from '@remix-run/react';
 import { ReactNode } from 'react';
 import { Button } from '~/components/atoms/button';
 import { ArrowLeft } from '~/console/components/icons';
-import { SignOut } from '@jengaicons/react';
-import { authBaseUrl } from '~/root/lib/configs/base-url.cjs';
-import { useExternalRedirect } from '~/root/lib/client/helpers/use-redirect';
 import SplitWrapper from './split-wrapper';
 
 type ITitleSection = {
   title: ReactNode;
   subTitle: ReactNode;
+  action?: ReactNode;
 };
-const TitleSection = ({ title, subTitle }: ITitleSection) => {
-  const eNavigate = useExternalRedirect();
-
+const TitleSection = ({ title, subTitle, action }: ITitleSection) => {
   return (
     <div className="flex flex-col gap-xl">
       <div className="flex flex-row justify-between">
         <div className="heading4xl text-text-default">{title}</div>
-        <Button
-          variant="plain"
-          suffix={<SignOut />}
-          size="sm"
-          content="Sign Out"
-          onClick={() => {
-            eNavigate(`${authBaseUrl}/logout`);
-          }}
-        />
+        {action}
       </div>
       <div className="bodyLg text-text-default">{subTitle}</div>
       <div />
@@ -48,6 +36,7 @@ const MultiStepProgressWrapper = ({
   children,
   backButton,
   fillerImage,
+  action,
 }: IProgressWrapper) => {
   return (
     <SplitWrapper fillerImage={fillerImage}>
@@ -63,7 +52,7 @@ const MultiStepProgressWrapper = ({
               LinkComponent={Link}
             />
           )}
-          <TitleSection title={title} subTitle={subTitle} />
+          <TitleSection title={title} subTitle={subTitle} action={action} />
         </div>
         {children}
       </div>
diff --git a/src/apps/console/routes/_a+/new-team.tsx b/src/apps/console/routes/_a+/new-team.tsx
index e849a3b34..228a27800 100644
--- a/src/apps/console/routes/_a+/new-team.tsx
+++ b/src/apps/console/routes/_a+/new-team.tsx
@@ -13,6 +13,10 @@ import MultiStepProgress, {
 } from '~/console/components/multi-step-progress';
 import { BottomNavigation } from '~/console/components/commons';
 import FillerCreateTeam from '~/console/assets/filler-create-team';
+import { SignOut } from '@jengaicons/react';
+import { authBaseUrl } from '~/root/lib/configs/base-url.cjs';
+import { useExternalRedirect } from '~/root/lib/client/helpers/use-redirect';
+import { Button } from '~/components/atoms/button';
 
 const NewAccount = () => {
   const api = useConsoleApi();
@@ -52,12 +56,24 @@ const NewAccount = () => {
     defaultStep: 1,
     totalSteps: 4,
   });
+  const eNavigate = useExternalRedirect();
 
   return (
     <form onSubmit={handleSubmit}>
       <MultiStepProgressWrapper
         fillerImage={<FillerCreateTeam />}
         title="Setup your account!"
+        action={
+          <Button
+            variant="plain"
+            suffix={<SignOut />}
+            size="sm"
+            content="Sign Out"
+            onClick={() => {
+              eNavigate(`${authBaseUrl}/logout`);
+            }}
+          />
+        }
         subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite
   teams"
       >

From 3f06db1b569ab830e757983c9c8b796de9500822 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Mon, 18 Mar 2024 18:57:29 +0530
Subject: [PATCH 52/66] :art: Improved structure

---
 lib/utils/color-generator.tsx                 |   3 +-
 .../console/page-components/app-states.tsx    |  17 ++-
 .../app+/$app+/logs-n-metrics/route.tsx       | 134 ++++++++++++-----
 .../app+/$app+/settings+/compute/route.tsx    | 127 +++-------------
 .../$environment+/new-app/app-compute.tsx     | 138 +++---------------
 .../$environment+/new-app/app-utils.ts        | 128 ++++++++++++++++
 6 files changed, 275 insertions(+), 272 deletions(-)
 create mode 100644 src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-utils.ts

diff --git a/lib/utils/color-generator.tsx b/lib/utils/color-generator.tsx
index ed534eadf..3f28d5e6c 100644
--- a/lib/utils/color-generator.tsx
+++ b/lib/utils/color-generator.tsx
@@ -71,6 +71,7 @@ const generateColor = (str = '#', contrast: Contrast = 'dark') => {
 
 export const generatePlainColor = (str = '#') => {
   const cc = colorCode(str);
-  return generateColorFromName(str, cc, 'dark');
+  // return generateColorFromName(str, cc, 'dark');
+  return cc;
 };
 export default generateColor;
diff --git a/src/apps/console/page-components/app-states.tsx b/src/apps/console/page-components/app-states.tsx
index 8d84065e5..22283881e 100644
--- a/src/apps/console/page-components/app-states.tsx
+++ b/src/apps/console/page-components/app-states.tsx
@@ -52,11 +52,18 @@ export const useAppState = () => {
 
   const { app, page, envPage, activeContIndex, completePages } = state;
 
-  const getContainer = (index: number = activeContIndex) =>
-    app.spec.containers[index] || {
-      name: `container-${index}`,
-      image: '',
-    };
+  const getContainer = (index: number = activeContIndex) => {
+    if (!index) {
+      // eslint-disable-next-line no-param-reassign
+      index = 0;
+    }
+    return (
+      app.spec.containers[index] || {
+        name: `container-${index}`,
+        image: '',
+      }
+    );
+  };
 
   const setApp: ISetState<typeof app> = (fn) => {
     if (typeof fn === 'function') {
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
index 2d45cc205..63957c5b2 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
@@ -11,46 +11,72 @@ import { useDataState } from '~/console/page-components/common-state';
 import { observeUrl } from '~/root/lib/configs/base-url.cjs';
 import LogComp from '~/root/lib/client/components/logger';
 import LogAction from '~/console/page-components/log-action';
+import { generatePlainColor } from '~/root/lib/utils/color-generator';
 import { IAppContext } from '../_layout';
 
 const LogsAndMetrics = () => {
   const { app, project, account } = useOutletContext<IAppContext>();
-  const [cpuData, setCpuData] = useState<number[]>([]);
-  const [memoryData, setMemoryData] = useState<number[]>([]);
 
-  const xAxisFormatter = (_: string, __?: number) => {
-    // return dayjs((val || 0) * 1000).format('hh:mm A');
-    return '';
+  type tData = {
+    metric: {
+      exported_pod: string;
+    };
+    values: [number, string][];
+  };
+
+  const [data, setData] = useState<{
+    cpu: tData[];
+    memory: tData[];
+  }>({
+    cpu: [],
+    memory: [],
+  });
+
+  const xAxisFormatter = (val: string, __?: number) => {
+    return dayjs((parseValue(val, 0) || 0) * 1000).format('hh:mm A');
+    // return '';
   };
 
   const tooltipXAixsFormatter = (val: number) =>
     dayjs(val * 1000).format('DD/MM/YY hh:mm A');
 
-  const getAnnotations = ({
-    min = '',
-    max = '',
-  }: {
-    min?: string;
-    max?: string;
-  }) => {
+  const getAnnotations = (
+    {
+      min = '',
+      max = '',
+    }: {
+      min?: string;
+      max?: string;
+    },
+    resType: 'cpu' | 'memory'
+  ) => {
     const tmin = parseValue(min, 0);
     const tmax = parseValue(max, 0);
 
-    // if (tmin === tmax) {
-    //   return {};
-    // }
+    const unit = resType === 'cpu' ? 'vCPU' : 'MB';
 
     const k: ApexOptions['annotations'] = {
       yaxis: [
         {
           y: tmin,
-          y2: tmax,
+          y2: tmin === tmax ? tmax + 1 : tmax,
           fillColor: '#33f',
           borderColor: '#33f',
           opacity: 0.1,
           strokeDashArray: 0,
           borderWidth: 1,
-          label: {},
+          label: {
+            style: {
+              fontFamily: 'Inter',
+              fontSize: '14px',
+            },
+            // textAnchor: 'middle',
+            // position: 'center',
+            text:
+              tmin === tmax
+                ? `allocated: ${tmax}${unit}`
+                : `min: ${tmin}${unit} | max: ${tmax}${unit}`,
+          },
         },
       ],
     };
@@ -68,7 +94,12 @@ const LogsAndMetrics = () => {
             withCredentials: true,
           });
 
-          setCpuData(resp?.data?.data?.result[0]?.values || []);
+          setData((prev) => ({
+            ...prev,
+            cpu: resp?.data?.data?.result || [],
+          }));
+
+          // setCpuData(resp?.data?.data?.result[0]?.values || []);
         } catch (err) {
           console.error(err);
         }
@@ -81,7 +112,10 @@ const LogsAndMetrics = () => {
             withCredentials: true,
           });
 
-          setMemoryData(resp?.data?.data?.result[0]?.values || []);
+          setData((prev) => ({
+            ...prev,
+            memory: resp?.data?.data?.result || [],
+          }));
         } catch (err) {
           console.error(err);
         }
@@ -126,17 +160,29 @@ const LogsAndMetrics = () => {
 
   return (
     <div className="flex flex-col gap-6xl pt-6xl">
-      <div className="gap-6xl items-center flex-col grid sm:grid-cols-2 lg:grid-cols-4">
+      <div className="gap-6xl items-center flex-col grid sm:grid-cols-2 lg:grid-cols-2">
         <Chart
           title="CPU Usage"
           options={{
             ...chartOptions,
             series: [
-              {
-                color: '#1D4ED8',
-                name: 'CPU',
-                data: cpuData,
-              },
+              // {
+              //   color: '#1D4ED8',
+              //   name: 'CPU',
+              //   data: data.cpu.map((d) => {
+              //     return [d.value[0], parseFloat(d.value[1])];
+              //   }),
+              // },
+
+              ...data.cpu.map((d) => {
+                return {
+                  name: d.metric.exported_pod,
+                  color: generatePlainColor(d.metric.exported_pod),
+                  data: d.values.map((v) => {
+                    return [v[0], parseFloat(v[1])];
+                  }),
+                };
+              }),
             ],
             tooltip: {
               x: {
@@ -150,16 +196,19 @@ const LogsAndMetrics = () => {
             },
 
             annotations: getAnnotations(
-              app.spec.containers[0].resourceCpu || {}
+              app.spec.containers[0].resourceCpu || {},
+              'cpu'
             ),
 
             yaxis: {
               min: 0,
-              max: parseValue(app.spec.containers[0].resourceCpu?.max, 0),
+              max: parseValue(app.spec.containers[0].resourceCpu?.max, 0) * 1.1,
 
               floating: false,
               labels: {
-                formatter: (val) => `${val} m`,
+                formatter: (val) => {
+                  return `${(val / 1000).toFixed(3)} vCPU`;
+                },
               },
             },
           }}
@@ -170,24 +219,37 @@ const LogsAndMetrics = () => {
           options={{
             ...chartOptions,
             series: [
-              {
-                color: '#1D4ED8',
-                name: 'Memory',
-                data: memoryData,
-              },
+              ...data.memory.map((d) => {
+                return {
+                  name: d.metric.exported_pod,
+                  color: generatePlainColor(d.metric.exported_pod),
+                  data: d.values.map((v) => {
+                    return [v[0], parseFloat(v[1])];
+                  }),
+                };
+              }),
+              // {
+              //   color: '#1D4ED8',
+              //   name: 'Memory',
+              //   data: data.memory.map((d) => {
+              //     return [d.value[0], parseFloat(d.value[1])];
+              //   }),
+              // },
             ],
 
             annotations: getAnnotations(
-              app.spec.containers[0].resourceMemory || {}
+              app.spec.containers[0].resourceMemory || {},
+              'memory'
             ),
 
             yaxis: {
               min: 0,
-              max: parseValue(app.spec.containers[0].resourceMemory?.max, 0),
+              max:
+                parseValue(app.spec.containers[0].resourceMemory?.max, 0) * 1.1,
 
               floating: false,
               labels: {
-                formatter: (val) => `${val} MB`,
+                formatter: (val) => `${val.toFixed(0)} MB`,
               },
             },
             tooltip: {
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
index 55afbaa23..b69e52402 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
@@ -2,7 +2,6 @@ import { useEffect } from 'react';
 import { NumberInput } from '~/components/atoms/input';
 import Slider from '~/components/atoms/slider';
 import { useAppState } from '~/console/page-components/app-states';
-import { keyconstants } from '~/console/server/r-utils/key-constants';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { parseValue } from '~/console/page-components/util';
@@ -14,12 +13,14 @@ import { Button } from '~/components/atoms/button';
 import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { parseName, parseNodes } from '~/console/server/r-utils/common';
-import { registryHost } from '~/lib/configs/base-url.cjs';
 import { Checkbox } from '~/components/atoms/checkbox';
 import { useMapper } from '~/components/utils';
 import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
 import { useOutletContext } from '@remix-run/react';
 import { plans } from '../../../../new-app/datas';
+import appInitialFormValues, {
+  mapFormValuesToApp,
+} from '../../../../new-app/app-utils';
 
 const valueRender = ({
   label,
@@ -43,15 +44,8 @@ const valueRender = ({
 };
 
 const SettingCompute = () => {
-  const {
-    app,
-    setApp,
-    getContainer,
-    activeContIndex,
-    getRepoMapper,
-    getRepoName,
-    getImageTag,
-  } = useAppState();
+  const { app, setApp, getContainer, getRepoMapper, getRepoName, getImageTag } =
+    useAppState();
   const { setPerformAction, hasChanges, loading } = useUnsavedChanges();
   const { cluster } = useOutletContext<IProjectContext>();
 
@@ -81,51 +75,12 @@ const SettingCompute = () => {
   });
 
   const { values, errors, handleChange, submit, resetValues } = useForm({
-    initialValues: {
-      imageUrl: getContainer(0)?.image || '',
-      imagePullPolicy:
-        app.spec.containers[activeContIndex]?.imagePullPolicy || 'IfNotPresent',
-      pullSecret: 'TODO',
-      cpuMode: app.metadata?.annotations?.[keyconstants.cpuMode] || 'shared',
-      memPerCpu: app.metadata?.annotations?.[keyconstants.memPerCpu] || 1,
-
-      repoName: getContainer(0)?.image
-        ? getRepoName(app.spec.containers[activeContIndex]?.image)
-        : '',
-      repoImageTag: getContainer(0)?.image
-        ? getImageTag(app.spec.containers[activeContIndex]?.image)
-        : '',
-      repoAccountName:
-        app.metadata?.annotations?.[keyconstants.repoAccountName] || '',
-
-      cpu: parseValue(
-        app.spec.containers[activeContIndex]?.resourceCpu?.max,
-        250
-      ),
-
-      selectedPlan:
-        app.metadata?.annotations[keyconstants.selectedPlan] || 'shared-1',
-      selectionMode:
-        app.metadata?.annotations[keyconstants.selectionModeKey] || 'quick',
-      manualCpuMin: parseValue(
-        app.spec.containers[activeContIndex].resourceCpu?.min,
-        0
-      ),
-      manualCpuMax: parseValue(
-        app.spec.containers[activeContIndex].resourceCpu?.max,
-        0
-      ),
-      manualMemMin: parseValue(
-        app.spec.containers[activeContIndex].resourceMemory?.min,
-        0
-      ),
-      manualMemMax: parseValue(
-        app.spec.containers[activeContIndex].resourceMemory?.max,
-        0
-      ),
-
-      nodepoolName: app.spec.nodeSelector?.[keyconstants.nodepoolName] || '',
-    },
+    initialValues: appInitialFormValues({
+      app,
+      getRepoName,
+      getImageTag,
+      getContainer,
+    }),
     validationSchema: Yup.object({
       imageUrl: Yup.string().required(),
       pullSecret: Yup.string(),
@@ -133,59 +88,12 @@ const SettingCompute = () => {
       selectedPlan: Yup.string().required(),
     }),
     onSubmit: (val) => {
-      setApp((s) => ({
-        ...s,
-        metadata: {
-          ...s.metadata!,
-          annotations: {
-            ...(s.metadata?.annotations || {}),
-            [keyconstants.cpuMode]: val.cpuMode,
-            [keyconstants.selectedPlan]: val.selectedPlan,
-            [keyconstants.repoAccountName]: val.repoAccountName,
-          },
-        },
-        spec: {
-          ...s.spec,
-          nodeSelector: {
-            ...(s.spec.nodeSelector || {}),
-            [keyconstants.nodepoolName]: val.nodepoolName,
-          },
-          containers: [
-            {
-              ...(s.spec.containers?.[0] || {}),
-              image:
-                values.repoAccountName === undefined ||
-                values.repoAccountName === ''
-                  ? `${values.repoName}:${values.repoImageTag}`
-                  : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`,
-              name: 'container-0',
-              imagePullPolicy: val.imagePullPolicy,
-              resourceCpu:
-                val.selectionMode === 'quick'
-                  ? {
-                      max: `${val.cpu}m`,
-                      min: `${val.cpu}m`,
-                    }
-                  : {
-                      max: `${val.manualCpuMax}m`,
-                      min: `${val.manualCpuMin}m`,
-                    },
-              resourceMemory:
-                val.selectionMode === 'quick'
-                  ? {
-                      max: `${(
-                        (values.cpu || 1) * parseValue(values.memPerCpu, 4)
-                      ).toFixed(2)}Mi`,
-                      min: `${val.cpu}Mi`,
-                    }
-                  : {
-                      max: `${val.manualMemMax}Mi`,
-                      min: `${val.manualMemMin}Mi`,
-                    },
-            },
-          ],
-        },
-      }));
+      setApp((s) =>
+        mapFormValuesToApp({
+          appIn: val,
+          oldAppIn: s,
+        })
+      );
     },
   });
 
@@ -286,6 +194,7 @@ const SettingCompute = () => {
             }
             error={!!errors.repoImageTag || !!digestError}
             message={
+              // eslint-disable-next-line no-nested-ternary
               errors.repoImageTag
                 ? errors.repoImageTag
                 : digestError
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
index 163d25151..d9627a509 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
@@ -1,7 +1,6 @@
 import { NumberInput } from '~/components/atoms/input';
 import Slider from '~/components/atoms/slider';
 import { useAppState } from '~/console/page-components/app-states';
-import { keyconstants } from '~/console/server/r-utils/key-constants';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { FadeIn, parseValue } from '~/console/page-components/util';
@@ -11,7 +10,6 @@ import { parseName, parseNodes } from '~/console/server/r-utils/common';
 import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useMapper } from '~/components/utils';
-import { registryHost } from '~/lib/configs/base-url.cjs';
 import { BottomNavigation } from '~/console/components/commons';
 import { useOutletContext } from '@remix-run/react';
 import { useLog } from '~/root/lib/client/hooks/use-log';
@@ -20,6 +18,7 @@ import { useState } from 'react';
 import { Button } from '~/components/atoms/button';
 import { plans } from './datas';
 import { IProjectContext } from '../../_layout';
+import appInitialFormValues, { mapFormValuesToApp } from './app-utils';
 
 const valueRender = ({
   label,
@@ -48,7 +47,7 @@ const AppCompute = () => {
     setApp,
     setPage,
     markPageAsCompleted,
-    activeContIndex,
+    getContainer,
     getRepoName,
     getImageTag,
   } = useAppState();
@@ -79,61 +78,13 @@ const AppCompute = () => {
     });
   });
 
-  useLog(nodepoolData);
-  useLog(nodepoolLoadingError);
-
   const { values, errors, handleChange, isLoading, submit } = useForm({
-    initialValues: {
-      imageUrl: app.spec.containers[activeContIndex]?.image || '',
-      imagePullPolicy:
-        app.spec.containers[activeContIndex]?.imagePullPolicy || 'IfNotPresent',
-      pullSecret: 'TODO',
-      cpuMode: app.metadata?.annotations?.[keyconstants.cpuMode] || 'shared',
-      memPerCpu: app.metadata?.annotations?.[keyconstants.memPerCpu] || '1',
-      autoscaling: app.spec.hpa?.enabled || false,
-      minReplicas: app.spec.hpa?.minReplicas || 1,
-      maxReplicas: app.spec.hpa?.maxReplicas || 3,
-      cpuThreshold: app.spec.hpa?.thresholdCpu || 75,
-      memoryThreshold: app.spec.hpa?.thresholdMemory || 75,
-      replicas: app.spec.replicas || 1,
-
-      cpu: parseValue(
-        app.spec.containers[activeContIndex]?.resourceCpu?.max,
-        250
-      ),
-
-      repoName: app.spec.containers[activeContIndex]?.image
-        ? getRepoName(app.spec.containers[activeContIndex]?.image)
-        : '',
-      repoImageTag: app.spec.containers[activeContIndex]?.image
-        ? getImageTag(app.spec.containers[activeContIndex]?.image)
-        : '',
-      repoAccountName:
-        app.metadata?.annotations?.[keyconstants.repoAccountName] || '',
-
-      selectedPlan:
-        app.metadata?.annotations[keyconstants.selectedPlan] || 'shared-1',
-      selectionMode:
-        app.metadata?.annotations[keyconstants.selectionModeKey] || 'quick',
-      manualCpuMin: parseValue(
-        app.spec.containers[activeContIndex].resourceCpu?.min,
-        0
-      ),
-      manualCpuMax: parseValue(
-        app.spec.containers[activeContIndex].resourceCpu?.max,
-        0
-      ),
-      manualMemMin: parseValue(
-        app.spec.containers[activeContIndex].resourceMemory?.min,
-        0
-      ),
-      manualMemMax: parseValue(
-        app.spec.containers[activeContIndex].resourceMemory?.max,
-        0
-      ),
-
-      nodepoolName: app.spec.nodeSelector?.[keyconstants.nodepoolName] || '',
-    },
+    initialValues: appInitialFormValues({
+      app,
+      getRepoName,
+      getImageTag,
+      getContainer,
+    }),
     validationSchema: Yup.object({
       pullSecret: Yup.string(),
       repoName: Yup.string().required(),
@@ -142,70 +93,12 @@ const AppCompute = () => {
       selectedPlan: Yup.string().required(),
     }),
     onSubmit: (val) => {
-      setApp((s) => ({
-        ...s,
-        metadata: {
-          ...s.metadata!,
-          annotations: {
-            ...(s.metadata?.annotations || {}),
-            [keyconstants.cpuMode]: val.cpuMode,
-            [keyconstants.memPerCpu]: `${val.memPerCpu}`,
-            [keyconstants.selectionModeKey]: val.selectionMode,
-            [keyconstants.selectedPlan]: val.selectedPlan,
-            [keyconstants.repoAccountName]: val.repoAccountName,
-          },
-        },
-        spec: {
-          ...s.spec,
-          nodeSelector: {
-            ...(s.spec.nodeSelector || {}),
-            [keyconstants.nodepoolName]: val.nodepoolName,
-          },
-          containers: [
-            {
-              ...(s.spec.containers?.[0] || {}),
-              // image: val.image === '' ? val.repoImageUrl : val.imageUrl,
-              image:
-                values.repoAccountName === undefined ||
-                values.repoAccountName === ''
-                  ? `${values.repoName}:${values.repoImageTag}`
-                  : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`,
-              name: 'container-0',
-              imagePullPolicy: val.imagePullPolicy,
-              resourceCpu:
-                val.selectionMode === 'quick'
-                  ? {
-                      max: `${val.cpu}m`,
-                      min: `${val.cpu}m`,
-                    }
-                  : {
-                      max: `${val.manualCpuMax}m`,
-                      min: `${val.manualCpuMin}m`,
-                    },
-              resourceMemory:
-                val.selectionMode === 'quick'
-                  ? {
-                      max: `${(
-                        (values.cpu || 1) * parseValue(values.memPerCpu, 4)
-                      ).toFixed(2)}Mi`,
-                      min: `${val.cpu}Mi`,
-                    }
-                  : {
-                      max: `${val.manualMemMax}Mi`,
-                      min: `${val.manualMemMin}Mi`,
-                    },
-            },
-          ],
-          hpa: {
-            enabled: val.autoscaling,
-            maxReplicas: val.maxReplicas,
-            minReplicas: val.minReplicas,
-            thresholdCpu: val.cpuThreshold,
-            thresholdMemory: val.memoryThreshold,
-          },
-          replicas: val.replicas,
-        },
-      }));
+      setApp((s) =>
+        mapFormValuesToApp({
+          appIn: val,
+          oldAppIn: s,
+        })
+      );
     },
   });
 
@@ -231,6 +124,8 @@ const AppCompute = () => {
     }
   );
 
+  useLog(values.selectionMode);
+
   return (
     <FadeIn
       onSubmit={(e) => {
@@ -353,6 +248,7 @@ const AppCompute = () => {
             <ExtendedFilledTab
               value={values.selectionMode}
               onChange={(e) => {
+                console.log(e, values.selectionMode);
                 handleChange('selectionMode')(dummyEvent(e));
               }}
               items={[
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-utils.ts b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-utils.ts
new file mode 100644
index 000000000..89a80c132
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-utils.ts
@@ -0,0 +1,128 @@
+import { useAppState } from '~/console/page-components/app-states';
+import { parseValue } from '~/console/page-components/util';
+import { keyconstants } from '~/console/server/r-utils/key-constants';
+import { AppIn } from '~/root/src/generated/gql/server';
+import { registryHost } from '~/lib/configs/base-url.cjs';
+
+export const appInitialFormValues = ({
+  app,
+  getRepoName,
+  getImageTag,
+  getContainer,
+}: {
+  app: ReturnType<typeof useAppState>['app'];
+  getRepoName: ReturnType<typeof useAppState>['getRepoName'];
+  getImageTag: ReturnType<typeof useAppState>['getImageTag'];
+  getContainer: ReturnType<typeof useAppState>['getContainer'];
+}) => {
+  return {
+    imageUrl: getContainer().image || '',
+    imagePullPolicy: getContainer().imagePullPolicy || 'IfNotPresent',
+    pullSecret: 'TODO',
+    cpuMode: app.metadata?.annotations?.[keyconstants.cpuMode] || 'shared',
+    memPerCpu: app.metadata?.annotations?.[keyconstants.memPerCpu] || '1',
+
+    autoscaling: app.spec.hpa?.enabled || false,
+    minReplicas: app.spec.hpa?.minReplicas || 1,
+    maxReplicas: app.spec.hpa?.maxReplicas || 3,
+    cpuThreshold: app.spec.hpa?.thresholdCpu || 75,
+    memoryThreshold: app.spec.hpa?.thresholdMemory || 75,
+    replicas: app.spec.replicas || 1,
+
+    cpu: parseValue(getContainer().resourceCpu?.max, 250),
+
+    repoName: getContainer().image ? getRepoName(getContainer().image) : '',
+
+    repoImageTag: getContainer().image ? getImageTag(getContainer().image) : '',
+    repoAccountName:
+      app.metadata?.annotations?.[keyconstants.repoAccountName] || '',
+
+    selectedPlan:
+      app.metadata?.annotations[keyconstants.selectedPlan] || 'shared-1',
+    selectionMode:
+      app.metadata?.annotations[keyconstants.selectionModeKey] || 'quick',
+    manualCpuMin: parseValue(getContainer().resourceCpu?.min, 0),
+    manualCpuMax: parseValue(getContainer().resourceCpu?.max, 0),
+    manualMemMin: parseValue(getContainer().resourceMemory?.min, 0),
+    manualMemMax: parseValue(getContainer().resourceMemory?.max, 0),
+
+    nodepoolName: app.spec.nodeSelector?.[keyconstants.nodepoolName] || '',
+  };
+};
+
+export const mapFormValuesToApp = ({
+  oldAppIn: s,
+  appIn: val,
+}: {
+  oldAppIn: AppIn;
+  appIn: ReturnType<typeof appInitialFormValues>;
+}): AppIn => {
+  return {
+    ...s,
+    metadata: {
+      ...s.metadata!,
+      annotations: {
+        ...(s.metadata?.annotations || {}),
+        [keyconstants.cpuMode]: val.cpuMode,
+        [keyconstants.selectedPlan]: val.selectedPlan,
+        [keyconstants.repoAccountName]: val.repoAccountName,
+        [keyconstants.selectionModeKey]: val.selectionMode,
+        [keyconstants.memPerCpu]: `${val.memPerCpu}`,
+      },
+    },
+    spec: {
+      ...s.spec,
+      nodeSelector: {
+        ...(s.spec.nodeSelector || {}),
+        [keyconstants.nodepoolName]: val.nodepoolName,
+      },
+      containers: [
+        {
+          ...(s.spec.containers?.[0] || {}),
+          image:
+            val.repoAccountName === undefined || val.repoAccountName === ''
+              ? `${val.repoName}:${val.repoImageTag}`
+              : `${registryHost}/${val.repoAccountName}/${val.repoName}:${val.repoImageTag}`,
+          name: 'container-0',
+          imagePullPolicy: val.imagePullPolicy,
+          resourceCpu:
+            val.selectionMode === 'quick'
+              ? {
+                  max: `${val.cpu}m`,
+                  min:
+                    val.cpuMode === 'shared'
+                      ? `${val.cpu / 4}m`
+                      : `${val.cpu}m`,
+                }
+              : {
+                  max: `${val.manualCpuMax}m`,
+                  min: `${val.manualCpuMin}m`,
+                },
+          resourceMemory:
+            val.selectionMode === 'quick'
+              ? {
+                  max: `${(
+                    parseValue(val.cpu, 1) * parseValue(val.memPerCpu, 4)
+                  ).toFixed(0)}Mi`,
+                  min: `${val.cpu}Mi`,
+                }
+              : {
+                  max: `${val.manualMemMax}Mi`,
+                  min: `${val.manualMemMin}Mi`,
+                },
+        },
+      ],
+
+      hpa: {
+        enabled: val.autoscaling,
+        maxReplicas: val.maxReplicas,
+        minReplicas: val.minReplicas,
+        thresholdCpu: val.cpuThreshold,
+        thresholdMemory: val.memoryThreshold,
+      },
+      replicas: val.replicas,
+    },
+  };
+};
+
+export default appInitialFormValues;

From 93450fbeef71b853c09f26073c763b097c70bd11 Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Mon, 18 Mar 2024 18:58:21 +0530
Subject: [PATCH 53/66] WIP app redesign

---
 src/apps/console/components/icons.tsx         |   1 +
 src/apps/console/components/listV2.tsx        |  13 +-
 .../$environment+/new-app/app-compute.tsx     | 200 ++------
 .../$environment+/new-app/app-detail.tsx      | 429 ++++++++++++++++--
 4 files changed, 442 insertions(+), 201 deletions(-)

diff --git a/src/apps/console/components/icons.tsx b/src/apps/console/components/icons.tsx
index 37b454980..775da402e 100644
--- a/src/apps/console/components/icons.tsx
+++ b/src/apps/console/components/icons.tsx
@@ -52,4 +52,5 @@ export {
   CircleNotch,
   Circle,
   CircleFill,
+  Spinner,
 } from '@jengaicons/react';
diff --git a/src/apps/console/components/listV2.tsx b/src/apps/console/components/listV2.tsx
index 69a573279..841e6545f 100644
--- a/src/apps/console/components/listV2.tsx
+++ b/src/apps/console/components/listV2.tsx
@@ -138,7 +138,7 @@ const RowBase = ({
       'bg-surface-basic-default': !pressed,
       'cursor-pointer hover:bg-surface-basic-hovered':
         (!!onClick || linkComponent !== 'div') && !pressed && !disabled,
-      'bg-surface-basic-active': pressed,
+      'bg-surface-basic-pressed': pressed,
       'cursor-default': !!disabled,
     },
     hideDetailSeperator
@@ -148,11 +148,10 @@ const RowBase = ({
 
   const css = cn(
     'w-full overflow-hidden resource-list-item focus-visible:ring-2 focus:ring-border-focus focus:z-10 outline-none ring-offset-1 relative flex flex-row items-center gap-3xl',
-    ' first:rounded-t last:rounded-b p-2xl',
     className
   );
 
-  if (!disabled) {
+  if (!disabled && !pressed) {
     return (
       <RovingFocusGroup.Item
         role="row"
@@ -168,7 +167,7 @@ const RowBase = ({
       >
         <Component
           {...(Component === 'a' ? { href: to } : { to })}
-          className={cn('flex flex-col', commonCss)}
+          className={cn('flex flex-col last:rounded-b p-2xl', commonCss)}
         >
           <div className={css}>
             {headers?.map((item) => (
@@ -184,8 +183,8 @@ const RowBase = ({
   }
 
   return (
-    <div className="flex flex-col">
-      <div className={css} role="row">
+    <div className={cn(css, commonCss, 'p-2xl')}>
+      <div role="row">
         {headers?.map((item) => (
           <div key={item.name} className={cn(item.className)}>
             {columns?.[item.name]?.render()}
@@ -233,6 +232,7 @@ interface IRoot {
       detail?: ReactNode;
       hideDetailSeperator?: boolean;
       onClick?: ((item?: Record<string, IColumn>) => void) | null;
+      pressed?: boolean;
     }>;
     className?: Array<string>;
   };
@@ -307,6 +307,7 @@ const Root = ({
                   detail={r.detail}
                   hideDetailSeperator={r.hideDetailSeperator}
                   onClick={r.onClick}
+                  pressed={r.pressed}
                 />
               ))}
             </div>
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
index 163d25151..51b3d91a2 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
@@ -11,7 +11,6 @@ import { parseName, parseNodes } from '~/console/server/r-utils/common';
 import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useMapper } from '~/components/utils';
-import { registryHost } from '~/lib/configs/base-url.cjs';
 import { BottomNavigation } from '~/console/components/commons';
 import { useOutletContext } from '@remix-run/react';
 import { useLog } from '~/root/lib/client/hooks/use-log';
@@ -43,27 +42,12 @@ const valueRender = ({
 };
 
 const AppCompute = () => {
-  const {
-    app,
-    setApp,
-    setPage,
-    markPageAsCompleted,
-    activeContIndex,
-    getRepoName,
-    getImageTag,
-  } = useAppState();
+  const { app, setApp, setPage, markPageAsCompleted, activeContIndex } =
+    useAppState();
   const api = useConsoleApi();
   const { cluster } = useOutletContext<IProjectContext>();
   const [advancedOptions, setAdvancedOptions] = useState(false);
 
-  const {
-    data,
-    isLoading: repoLoading,
-    error: repoLoadingError,
-  } = useCustomSwr('/repos', async () => {
-    return api.listRepo({});
-  });
-
   const {
     data: nodepoolData,
     isLoading: nodepoolLoading,
@@ -84,7 +68,6 @@ const AppCompute = () => {
 
   const { values, errors, handleChange, isLoading, submit } = useForm({
     initialValues: {
-      imageUrl: app.spec.containers[activeContIndex]?.image || '',
       imagePullPolicy:
         app.spec.containers[activeContIndex]?.imagePullPolicy || 'IfNotPresent',
       pullSecret: 'TODO',
@@ -102,15 +85,6 @@ const AppCompute = () => {
         250
       ),
 
-      repoName: app.spec.containers[activeContIndex]?.image
-        ? getRepoName(app.spec.containers[activeContIndex]?.image)
-        : '',
-      repoImageTag: app.spec.containers[activeContIndex]?.image
-        ? getImageTag(app.spec.containers[activeContIndex]?.image)
-        : '',
-      repoAccountName:
-        app.metadata?.annotations?.[keyconstants.repoAccountName] || '',
-
       selectedPlan:
         app.metadata?.annotations[keyconstants.selectedPlan] || 'shared-1',
       selectionMode:
@@ -136,8 +110,6 @@ const AppCompute = () => {
     },
     validationSchema: Yup.object({
       pullSecret: Yup.string(),
-      repoName: Yup.string().required(),
-      repoImageTag: Yup.string().required(),
       cpuMode: Yup.string().required(),
       selectedPlan: Yup.string().required(),
     }),
@@ -152,7 +124,6 @@ const AppCompute = () => {
             [keyconstants.memPerCpu]: `${val.memPerCpu}`,
             [keyconstants.selectionModeKey]: val.selectionMode,
             [keyconstants.selectedPlan]: val.selectedPlan,
-            [keyconstants.repoAccountName]: val.repoAccountName,
           },
         },
         spec: {
@@ -164,13 +135,6 @@ const AppCompute = () => {
           containers: [
             {
               ...(s.spec.containers?.[0] || {}),
-              // image: val.image === '' ? val.repoImageUrl : val.imageUrl,
-              image:
-                values.repoAccountName === undefined ||
-                values.repoAccountName === ''
-                  ? `${values.repoName}:${values.repoImageTag}`
-                  : `${registryHost}/${values.repoAccountName}/${values.repoName}:${values.repoImageTag}`,
-              name: 'container-0',
               imagePullPolicy: val.imagePullPolicy,
               resourceCpu:
                 val.selectionMode === 'quick'
@@ -209,28 +173,11 @@ const AppCompute = () => {
     },
   });
 
-  const repos = useMapper(parseNodes(data), (val) => ({
-    label: val.name,
-    value: val.name,
-    accName: val.accountName,
-  }));
-
   const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({
     label: val.metadata?.name || '',
     value: val.metadata?.name || '',
   }));
 
-  const {
-    data: digestData,
-    isLoading: digestLoading,
-    error: digestError,
-  } = useCustomSwr(
-    () => `/digests_${values.repoName}`,
-    async () => {
-      return api.listDigest({ repoName: values.repoName });
-    }
-  );
-
   return (
     <FadeIn
       onSubmit={(e) => {
@@ -249,103 +196,6 @@ const AppCompute = () => {
         Compute refers to the processing power and resources used for data
         manipulation and calculations in a system.
       </div>
-      <div className="flex flex-col gap-3xl">
-        <Select
-          label="Repo Name"
-          size="lg"
-          placeholder="Select Repo"
-          value={values.repoName}
-          creatable
-          onChange={(val) => {
-            handleChange('repoName')(dummyEvent(val.value));
-            if (val.accName === undefined || val.accName === '') {
-              handleChange('repoAccountName')(dummyEvent(''));
-            } else {
-              handleChange('repoAccountName')(dummyEvent(val.accName));
-            }
-          }}
-          options={async () => [...repos]}
-          error={!!errors.repoName || !!repoLoadingError}
-          message={
-            repoLoadingError ? 'Error fetching repositories.' : errors.app
-          }
-          loading={repoLoading}
-        />
-
-        <Select
-          label="Image Tag"
-          size="lg"
-          placeholder="Select Image Tag"
-          value={values.repoImageTag}
-          creatable
-          onChange={(_, val) => {
-            handleChange('repoImageTag')(dummyEvent(val));
-          }}
-          options={async () =>
-            [
-              ...new Set(
-                parseNodes(digestData)
-                  .map((item) => item.tags)
-                  .flat()
-              ),
-            ].map((item) => ({
-              label: item,
-              value: item,
-            }))
-          }
-          error={!!errors.repoImageTag || !!digestError}
-          message={
-            // eslint-disable-next-line no-nested-ternary
-            errors.repoImageTag
-              ? errors.repoImageTag
-              : digestError
-              ? 'Failed to load Image tags.'
-              : ''
-          }
-          loading={digestLoading}
-        />
-
-        <Button
-          size="sm"
-          content={<span className="truncate text-left">Advanced options</span>}
-          variant="primary-plain"
-          className="truncate"
-          onClick={() => {
-            setAdvancedOptions(!advancedOptions);
-          }}
-        />
-
-        {advancedOptions && (
-          <Select
-            label="Nodepool Name"
-            size="lg"
-            placeholder="Select Nodepool"
-            value={values.nodepoolName}
-            creatable
-            onChange={(val) => {
-              handleChange('nodepoolName')(dummyEvent(val.value));
-            }}
-            options={async () => [...nodepools]}
-            error={!!errors.repos || !!nodepoolLoadingError}
-            message={
-              nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app
-            }
-            loading={nodepoolLoading}
-          />
-        )}
-
-        {advancedOptions && (
-          <Checkbox
-            label="Always pull image on restart"
-            checked={values.imagePullPolicy === 'Always'}
-            onChange={(val) => {
-              const imagePullPolicy = val ? 'Always' : 'IfNotPresent';
-              console.log(imagePullPolicy);
-              handleChange('imagePullPolicy')(dummyEvent(imagePullPolicy));
-            }}
-          />
-        )}
-      </div>
 
       <div className="flex flex-col">
         <div className="flex flex-row gap-lg items-center pb-3xl">
@@ -477,6 +327,52 @@ const AppCompute = () => {
             </div>
           </div>
         )}
+
+        <div className="flex flex-col gap-3xl pt-3xl">
+          <Button
+            size="sm"
+            content={
+              <span className="truncate text-left">Advanced options</span>
+            }
+            variant="primary-plain"
+            className="truncate"
+            onClick={() => {
+              setAdvancedOptions(!advancedOptions);
+            }}
+          />
+
+          {advancedOptions && (
+            <Select
+              label="Nodepool Name"
+              size="lg"
+              placeholder="Select Nodepool"
+              value={values.nodepoolName}
+              creatable
+              onChange={(val) => {
+                handleChange('nodepoolName')(dummyEvent(val.value));
+              }}
+              options={async () => [...nodepools]}
+              error={!!errors.repos || !!nodepoolLoadingError}
+              message={
+                nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app
+              }
+              loading={nodepoolLoading}
+              showclear
+            />
+          )}
+
+          {advancedOptions && (
+            <Checkbox
+              label="Always pull image on restart"
+              checked={values.imagePullPolicy === 'Always'}
+              onChange={(val) => {
+                const imagePullPolicy = val ? 'Always' : 'IfNotPresent';
+                console.log(imagePullPolicy);
+                handleChange('imagePullPolicy')(dummyEvent(imagePullPolicy));
+              }}
+            />
+          )}
+        </div>
       </div>
 
       <BottomNavigation
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
index fe635b14f..6152d788d 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
@@ -1,49 +1,377 @@
 import { TextInput } from '~/components/atoms/input';
 import { useAppState } from '~/console/page-components/app-states';
 import { keyconstants } from '~/console/server/r-utils/key-constants';
-import useForm from '~/root/lib/client/hooks/use-form';
+import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
-import { parseName } from '~/console/server/r-utils/common';
+import {
+  parseName,
+  parseNodes,
+  parseUpdateOrCreatedBy,
+  parseUpdateOrCreatedOn,
+} from '~/console/server/r-utils/common';
 import { FadeIn } from '~/console/page-components/util';
 import { NameIdView } from '~/console/components/name-id-view';
 import { BottomNavigation } from '~/console/components/commons';
+import { registryHost } from '~/lib/configs/base-url.cjs';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
+import { titleCase, useMapper } from '~/components/utils';
+import Tooltip from '~/components/atoms/tooltip';
+import { Chip, ChipGroup } from '~/components/atoms/chips';
+import { ArrowLeft, Spinner, XCircleFill } from '~/console/components/icons';
+import Popup from '~/components/molecule/popup';
+import { Dispatch, SetStateAction, useState } from 'react';
+import MultiStep, { useMultiStep } from '~/console/components/multi-step';
+import { IconButton } from '~/components/atoms/button';
+import ListV2 from '~/console/components/listV2';
+import {
+  ListItem,
+  ListTitle,
+} from '~/console/components/console-list-components';
+import { useParams } from '@remix-run/react';
 
-const AppDetail = () => {
-  const { app, setApp, setPage, markPageAsCompleted } = useAppState();
-
-  const { values, errors, handleChange, handleSubmit, isLoading } = useForm({
-    initialValues: {
-      name: parseName(app),
-      displayName: app.displayName,
-      description: app.metadata?.annotations?.[keyconstants.description] || '',
-      isNameError: false,
-    },
-    validationSchema: Yup.object({
-      name: Yup.string().required(),
-      displayName: Yup.string().required(),
-      description: Yup.string(),
-    }),
-
-    onSubmit: async (val) => {
-      setApp((a) => {
-        return {
-          ...a,
-          metadata: {
-            ...a.metadata,
-            annotations: {
-              ...(a.metadata?.annotations || {}),
-              [keyconstants.description]: val.description || '',
-            },
-            name: val.name,
+type IRepoSelectDialogListItem = {
+  label: string;
+  value: string;
+  updateInfo: { author: string; time: string } | null;
+};
+const RepoSelectDialogList = ({
+  data,
+  onClick,
+  type,
+  selectedOption,
+}: {
+  data: IRepoSelectDialogListItem[];
+  onClick: (data: IRepoSelectDialogListItem) => void;
+  type: 'repo' | 'tags';
+  selectedOption: string;
+}) => {
+  return (
+    <ListV2.Root
+      data={{
+        headers: [
+          {
+            name: 'name',
+            render: () => 'Name',
+            className: 'flex-1',
           },
-          displayName: val.displayName,
-        };
-      });
-      setPage(2);
-      markPageAsCompleted(1);
-    },
+
+          {
+            render: () => (type === 'repo' ? 'Updated' : null),
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+        ],
+        rows: data.map((r) => {
+          return {
+            onClick: () => onClick(r),
+            pressed: r.value === selectedOption,
+            columns: {
+              name: {
+                render: () => <ListTitle title={r.label} />,
+              },
+              ...(type === 'repo'
+                ? {
+                    updated: {
+                      render: () => (
+                        <ListItem
+                          data={`${r.updateInfo?.author}`}
+                          subtitle={r.updateInfo?.time}
+                        />
+                      ),
+                    },
+                  }
+                : {}),
+            },
+          };
+        }),
+      }}
+    />
+  );
+};
+
+const RepoSelectDialog = ({
+  open,
+  setOpen,
+  onChange,
+}: {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  onChange?: (data: { repo: string; tag: string }) => void;
+}) => {
+  const [repoName, setRepoName] = useState('');
+  const [tag, setTag] = useState('');
+
+  const {
+    currentStep,
+    onNext,
+    onPrevious,
+    reset: resetStep,
+  } = useMultiStep({
+    totalSteps: 2,
+    defaultStep: 1,
+  });
+
+  const api = useConsoleApi();
+
+  const {
+    data,
+    isLoading: repoLoading,
+    error: repoLoadingError,
+  } = useCustomSwr('/repos', async () => {
+    return api.listRepo({});
   });
 
+  const repos = useMapper(parseNodes(data), (val) => ({
+    label: val.name,
+    value: val.name,
+    updateInfo: {
+      author: `Updated by ${titleCase(parseUpdateOrCreatedBy(val))}`,
+      time: parseUpdateOrCreatedOn(val),
+    },
+  }));
+
+  const {
+    data: digestData,
+    isLoading: digestLoading,
+    error: digestError,
+  } = useCustomSwr(
+    () => (repoName ? `/digests_${repoName}` : null),
+    async () => {
+      return api.listDigest({ repoName });
+    }
+  );
+
+  const tags = useMapper(parseNodes(digestData), (val) => val.tags)
+    .flat()
+    .flatMap((f) => ({ label: f, value: f, updateInfo: null }));
+
+  const reset = () => {
+    setRepoName('');
+    setTag('');
+    resetStep();
+  };
+
+  return (
+    <Popup.Root show={open} onOpenChange={setOpen} className="!w-[900px]">
+      <Popup.Header showclose={false}>
+        <div className="flex flex-row items-center gap-lg">
+          {currentStep === 2 && (
+            <IconButton
+              size="sm"
+              icon={<ArrowLeft />}
+              variant="plain"
+              onClick={() => {
+                onPrevious();
+                reset();
+              }}
+            />
+          )}
+          <div className="flex-1">
+            {currentStep === 1 ? 'Select Repository' : 'Select tag'}
+          </div>
+          <div className="bodyMd text-text-strong font-normal">
+            {currentStep}/2
+          </div>
+        </div>
+      </Popup.Header>
+      <Popup.Content>
+        <div className="min-h-[40vh] h-full">
+          {true ? (
+            <div className="flex flex-col items-center justify-center gap-xl h-full">
+              <span className="animate-spin">
+                <Spinner color="currentColor" weight={2} size={24} />
+              </span>
+              <span className="text-text-soft bodyMd">Loading</span>
+            </div>
+          ) : (
+            <MultiStep.Root currentStep={currentStep}>
+              <MultiStep.Step step={1}>
+                <RepoSelectDialogList
+                  selectedOption=""
+                  data={repos}
+                  onClick={(d) => {
+                    setRepoName(d.value);
+                    onNext();
+                  }}
+                  type="repo"
+                />
+              </MultiStep.Step>
+              <MultiStep.Step step={2}>
+                <RepoSelectDialogList
+                  data={tags}
+                  selectedOption={tag}
+                  onClick={(t) => {
+                    setTag(t.value);
+                  }}
+                  type="tags"
+                />
+              </MultiStep.Step>
+            </MultiStep.Root>
+          )}
+        </div>
+      </Popup.Content>
+      <Popup.Footer>
+        <Popup.Button
+          closable={currentStep === 1}
+          content={currentStep === 1 ? 'Cancel' : 'Back'}
+          variant="basic"
+          onClick={() => {
+            onPrevious();
+            reset();
+          }}
+        />
+        <Popup.Button
+          type="submit"
+          disabled={currentStep === 1 || (!tag && currentStep === 2)}
+          content={currentStep === 2 ? 'Select' : 'Continue'}
+          variant="primary"
+          onClick={() => {
+            onChange?.({ repo: repoName, tag });
+            reset();
+            setOpen(false);
+          }}
+        />
+      </Popup.Footer>
+    </Popup.Root>
+  );
+};
+
+const RepoSelector = ({
+  tag,
+  repo,
+  onClear,
+  textValue,
+  onTextChanged,
+  onValueChange,
+}: {
+  tag: string;
+  repo: string;
+  onClear: () => void;
+  onTextChanged: () => void;
+  textValue: string;
+  onValueChange: (data: { repo: string; tag: string }) => void;
+}) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="flex-1">
+      {tag && repo && !textValue ? (
+        <div className="flex flex-col">
+          <div className="bodyMd-medium text-text-default pb-md">
+            <span className="h-4xl block flex items-center">Repository</span>
+          </div>
+          <div className="max-h-[43px] px-lg flex flex-row items-center rounded border border-border-default bg-surface-basic-default line-clamp-1">
+            <Tooltip.Root
+              className="!max-w-[400px]"
+              content={
+                <div className="flex-1 flex flex-row gap-md items-center py-xl px-lg bodyMd text-text-soft ">
+                  <span className="line-clamp-1">{repo}</span>
+                  <span>:</span>
+
+                  <span className="line-clamp-1">{tag}</span>
+                </div>
+              }
+            >
+              <div className="flex-1 flex flex-row gap-md items-center py-xl px-md bodyMd text-text-soft ">
+                <span className="line-clamp-1">{repo}</span>
+                <span>:</span>
+
+                <span className="line-clamp-1">{tag}</span>
+              </div>
+            </Tooltip.Root>
+            <button
+              aria-label="clear"
+              tabIndex={-1}
+              type="button"
+              className="outline-none p-lg text-text-default rounded-full"
+              onClick={onClear}
+            >
+              <XCircleFill size={16} color="currentColor" />
+            </button>
+          </div>
+        </div>
+      ) : (
+        <TextInput
+          placeholder="eg: nginx:latest"
+          value={textValue}
+          onChange={onTextChanged}
+          label="Repository"
+          size="lg"
+          suffix={
+            !textValue ? (
+              <ChipGroup onClick={() => setOpen(true)}>
+                <Chip
+                  label="Kloudlite repository"
+                  item="repo"
+                  type="CLICKABLE"
+                />
+              </ChipGroup>
+            ) : null
+          }
+          showclear={!!textValue}
+        />
+      )}
+      <RepoSelectDialog
+        open={open}
+        setOpen={setOpen}
+        onChange={onValueChange}
+      />
+    </div>
+  );
+};
+const AppDetail = () => {
+  const { app, setApp, setPage, markPageAsCompleted, activeContIndex } =
+    useAppState();
+
+  const { account } = useParams();
+
+  const { values, errors, handleChange, handleSubmit, isLoading, setValues } =
+    useForm({
+      initialValues: {
+        name: parseName(app),
+        displayName: app.displayName,
+        isNameError: false,
+        imageUrl: app.spec.containers[activeContIndex]?.image || '',
+        manualRepo: '',
+        repoAccountName:
+          app.metadata?.annotations?.[keyconstants.repoAccountName] || '',
+      },
+      validationSchema: Yup.object({
+        name: Yup.string().required(),
+        displayName: Yup.string().required(),
+        repoName: Yup.string().required(),
+        repoImageTag: Yup.string().required(),
+      }),
+
+      onSubmit: async (val) => {
+        setApp((a) => {
+          return {
+            ...a,
+            metadata: {
+              ...a.metadata,
+              annotations: {
+                ...(a.metadata?.annotations || {}),
+                [keyconstants.repoAccountName]: val.repoAccountName,
+              },
+              name: val.name,
+            },
+            displayName: val.displayName,
+            spec: {
+              containers: [
+                {
+                  ...(a.spec.containers?.[0] || {}),
+                  image: val.imageUrl,
+                  name: 'container-0',
+                },
+              ],
+            },
+          };
+        });
+        setPage(2);
+        markPageAsCompleted(1);
+      },
+    });
+
   return (
     <FadeIn
       onSubmit={(e) => {
@@ -69,14 +397,29 @@ const AppDetail = () => {
           handleChange={handleChange}
           nameErrorLabel="isNameError"
         />
-        <TextInput
-          error={!!errors.description}
-          message={errors.description}
-          label="Description"
-          placeholder="Enter application description"
-          size="lg"
-          value={values.description}
-          onChange={handleChange('description')}
+        <RepoSelector
+          tag={values.imageUrl.split(':')[1]}
+          repo={
+            values.imageUrl
+              .replace(`${registryHost}/${account}/`, '')
+              .split(':')[0]
+          }
+          onClear={() => {
+            setValues((v) => {
+              return {
+                ...v,
+                imageUrl: '',
+                manualRepo: '',
+              };
+            });
+          }}
+          textValue={values.manualRepo}
+          onTextChanged={handleChange('manualRepo')}
+          onValueChange={({ repo, tag }) => {
+            handleChange('imageUrl')(
+              dummyEvent(`${registryHost}/${account}/${repo}:${tag}`)
+            );
+          }}
         />
       </div>
       <BottomNavigation

From 88a048539839e1dae46b63eaaf4a88d547f6e3e8 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Tue, 19 Mar 2024 12:14:40 +0530
Subject: [PATCH 54/66] :bug: Fixed issue with app nodepool

---
 .../$account+/$project+/$environment+/new-app/app-utils.ts  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-utils.ts b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-utils.ts
index 89a80c132..7238629de 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-utils.ts
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-utils.ts
@@ -74,7 +74,11 @@ export const mapFormValuesToApp = ({
       ...s.spec,
       nodeSelector: {
         ...(s.spec.nodeSelector || {}),
-        [keyconstants.nodepoolName]: val.nodepoolName,
+        ...(val.nodepoolName === ''
+          ? {}
+          : {
+              [keyconstants.nodepoolName]: val.nodepoolName,
+            }),
       },
       containers: [
         {

From 1dbf7062b758cf92c13f8482eb28440611e42961 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Tue, 19 Mar 2024 12:33:18 +0530
Subject: [PATCH 55/66] :art: Improved logs handling page

---
 lib/app-setup/root.tsx | 75 +++++++++++++++++++++++-------------------
 1 file changed, 42 insertions(+), 33 deletions(-)

diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
index 12e1c566b..f245102bb 100644
--- a/lib/app-setup/root.tsx
+++ b/lib/app-setup/root.tsx
@@ -11,7 +11,6 @@ import {
   useNavigation,
   useRouteError,
 } from '@remix-run/react';
-import { motion } from 'framer-motion';
 import rcSlide from 'rc-slider/assets/index.css';
 import { ReactNode, useEffect } from 'react';
 import skeletonCSS from 'react-loading-skeleton/dist/skeleton.css';
@@ -31,6 +30,8 @@ import rcss from 'react-highlightjs-logs/dist/index.css';
 import tailwindBase from '~/design-system/tailwind-base.js';
 import { ReloadIndicator } from '~/lib/client/components/reload-indicator';
 import { isDev } from '~/lib/client/helpers/log';
+import { Button } from '~/components/atoms/button';
+import { ChildrenProps } from '~/components/types';
 import { getClientEnv, getServerEnv } from '../configs/base-url.cjs';
 import { useDataFromMatches } from '../client/hooks/use-custom-matches';
 
@@ -49,6 +50,33 @@ export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
 ];
 
+export const Serror = ({ children, message }: ChildrenProps & any) => {
+  return (
+    <main className="antialiased">
+      <TopBar logo={<BrandLogo detailed />} />
+      <Container>
+        <pre>
+          <div className="flex flex-col max-h-[80vh] w-full bg-surface-basic-input border border-surface-basic-pressed on my-4xl rounded-md p-4xl gap-xl overflow-hidden">
+            <div
+              className="font-bold text-xl text-[#A71B1B] truncate"
+              title={message}
+            >
+              {message}
+            </div>
+            <div className="flex overflow-scroll">
+              <div className="bg-[#A71B1B] w-2xl" />
+              <div className="overflow-auto max-h-full p-2xl flex-1 flex bg-[#EBEBEB] text-[#640C0C]">
+                {children}
+              </div>
+            </div>
+          </div>
+        </pre>
+      </Container>
+      <Scripts />
+    </main>
+  );
+};
+
 export const ErrorWrapper = ({ children, message }: any) => {
   return (
     <html lang="en" className="bg-surface-basic-subdued text-text-default">
@@ -59,29 +87,7 @@ export const ErrorWrapper = ({ children, message }: any) => {
         <Meta />
       </head>
       <body className="antialiased">
-        <TopBar logo={<BrandLogo detailed />} />
-        <Container>
-          <motion.pre
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ ease: 'anticipate' }}
-          >
-            <div className="flex flex-col max-h-[80vh] w-full bg-surface-basic-input border border-surface-basic-pressed on my-4xl rounded-md p-4xl gap-xl overflow-hidden">
-              <div
-                className="font-bold text-xl text-[#A71B1B] truncate"
-                title={message}
-              >
-                {message}
-              </div>
-              <div className="flex overflow-scroll">
-                <div className="bg-[#A71B1B] w-2xl" />
-                <div className="overflow-auto max-h-full p-2xl flex-1 flex bg-[#EBEBEB] text-[#640C0C]">
-                  {children}
-                </div>
-              </div>
-            </div>
-          </motion.pre>
-        </Container>
+        <Serror message={message}>{children}</Serror>
         <Scripts />
       </body>
     </html>
@@ -195,6 +201,7 @@ const Root = ({
         <script
           async
           id="gtag-init"
+          // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{
             __html: `
                 window.dataLayer = window.dataLayer || [];
@@ -238,7 +245,15 @@ const Root = ({
           <ReloadIndicator />
           <NonIdleProgressBar />
           {error ? (
-            <div>{JSON.stringify(error)}</div>
+            <div>
+              <Serror message="Server Side Error">
+                <code>{JSON.stringify(error, null, 2)}</code>
+              </Serror>
+
+              <div className="flex items-center justify-center">
+                <Button to="/teams" content="Go To Home Page" />
+              </div>
+            </div>
           ) : (
             <Wrapper>
               <Tooltip.Provider>
@@ -257,15 +272,9 @@ export const loader = () => {
   return getServerEnv();
 };
 
-export const headers: HeadersFunction = ({
-  actionHeaders,
-  loaderHeaders,
-  parentHeaders,
-  errorHeaders,
-}) => {
-  // console.log(loaderHeaders, actionHeaders, parentHeaders, errorHeaders);
+export const headers: HeadersFunction = () => {
+  // TODO: Remove this header if not needed
   return {
-    'X-Stretchy-Pants': 'its for fun',
     'Cache-Control': 'max-age=300, s-maxage=3600',
   };
 };

From 0e9932abafa5d69ad8894ea05699190e2a8dfbf3 Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Tue, 19 Mar 2024 16:50:25 +0530
Subject: [PATCH 56/66] Moved image section to app detail, refactored code

---
 lib/client/hooks/use-unsaved-changes.tsx      |  11 +-
 .../console/page-components/app/app-utils.ts  | 114 ++++++
 .../page-components/app/app-wrapper.tsx       |  42 +++
 .../page-components/app/components.tsx        | 318 +++++++++++++++++
 .../console/page-components/app/compute.tsx   | 334 +++++++++++++++++
 src/apps/console/page-components/app/datas.ts |  62 ++++
 .../app+/$app+/settings+/_layout.tsx          |  26 +-
 .../app+/$app+/settings+/compute/route.tsx    | 288 +--------------
 .../settings+/environment/app-dialogs.tsx     | 272 --------------
 .../$app+/settings+/environment/cs-item.tsx   |  55 ---
 .../$app+/settings+/environment/route.tsx     |  63 +---
 .../app+/$app+/settings+/general/route.tsx    | 150 ++++----
 .../app+/$app+/settings+/network/route.tsx    |  34 +-
 .../app+/$app+/settings+/scaling/route.tsx    | 191 +++++-----
 .../new-app/app-config-mount.tsx              |  17 +-
 .../$environment+/new-app/app-detail.tsx      | 337 +-----------------
 .../new-app/app-environment-variables.tsx     |  18 +-
 .../$environment+/new-app/app-review.tsx      |   4 +-
 .../$project+/$environment+/new-app/route.tsx |   4 +-
 19 files changed, 1103 insertions(+), 1237 deletions(-)
 create mode 100644 src/apps/console/page-components/app/app-utils.ts
 create mode 100644 src/apps/console/page-components/app/app-wrapper.tsx
 create mode 100644 src/apps/console/page-components/app/components.tsx
 create mode 100644 src/apps/console/page-components/app/compute.tsx
 create mode 100644 src/apps/console/page-components/app/datas.ts
 delete mode 100644 src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/app-dialogs.tsx
 delete mode 100644 src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/cs-item.tsx

diff --git a/lib/client/hooks/use-unsaved-changes.tsx b/lib/client/hooks/use-unsaved-changes.tsx
index b411bbfe3..78723f7e7 100644
--- a/lib/client/hooks/use-unsaved-changes.tsx
+++ b/lib/client/hooks/use-unsaved-changes.tsx
@@ -3,6 +3,7 @@ import {
   unstable_useBlocker,
   useBeforeUnload,
   useLocation,
+  useRevalidator,
 } from '@remix-run/react';
 import {
   createContext,
@@ -27,7 +28,6 @@ const UnsavedChanges = createContext<{
   performAction: string;
   setPerformAction: (action: string) => void;
   loading: boolean;
-  setLoading: (loading: boolean) => void;
 }>({
   hasChanges: false,
   setHasChanges() {},
@@ -39,7 +39,6 @@ const UnsavedChanges = createContext<{
   performAction: '',
   setPerformAction() {},
   loading: false,
-  setLoading() {},
 });
 
 export const UnsavedChangesProvider = ({ children }: ChildrenProps) => {
@@ -47,7 +46,6 @@ export const UnsavedChangesProvider = ({ children }: ChildrenProps) => {
   const [reload, setReload] = useState(false);
   const [ignorePaths, setIgnorePaths] = useState<string[]>([]);
   const [performAction, setPerformAction] = useState<string>('');
-  const [loading, setLoading] = useState<boolean>(false);
   const location = useLocation();
   const { state, proceed, reset } = unstable_useBlocker(({ nextLocation }) => {
     if (hasChanges && !ignorePaths.includes(nextLocation.pathname)) {
@@ -94,6 +92,7 @@ export const UnsavedChangesProvider = ({ children }: ChildrenProps) => {
     setReload(true);
   };
 
+  const { state: s } = useRevalidator();
   return (
     <UnsavedChanges.Provider
       value={useMemo(
@@ -107,8 +106,7 @@ export const UnsavedChangesProvider = ({ children }: ChildrenProps) => {
           setIgnorePaths,
           setPerformAction,
           performAction,
-          loading,
-          setLoading,
+          loading: s === 'loading',
         }),
         [
           hasChanges,
@@ -117,8 +115,7 @@ export const UnsavedChangesProvider = ({ children }: ChildrenProps) => {
           ignorePaths,
           performAction,
           setPerformAction,
-          loading,
-          setLoading,
+          s,
         ]
       )}
     >
diff --git a/src/apps/console/page-components/app/app-utils.ts b/src/apps/console/page-components/app/app-utils.ts
new file mode 100644
index 000000000..ee58a612b
--- /dev/null
+++ b/src/apps/console/page-components/app/app-utils.ts
@@ -0,0 +1,114 @@
+import { useAppState } from '~/console/page-components/app-states';
+import { parseValue } from '~/console/page-components/util';
+import { keyconstants } from '~/console/server/r-utils/key-constants';
+import { AppIn } from '~/root/src/generated/gql/server';
+
+export const appInitialFormValues = ({
+  app,
+  getContainer,
+}: {
+  app: ReturnType<typeof useAppState>['app'];
+  getContainer: ReturnType<typeof useAppState>['getContainer'];
+}) => {
+  return {
+    imagePullPolicy: getContainer().imagePullPolicy || 'IfNotPresent',
+    pullSecret: 'TODO',
+    cpuMode: app.metadata?.annotations?.[keyconstants.cpuMode] || 'shared',
+    memPerCpu: app.metadata?.annotations?.[keyconstants.memPerCpu] || '1',
+
+    autoscaling: app.spec.hpa?.enabled || false,
+    minReplicas: app.spec.hpa?.minReplicas || 1,
+    maxReplicas: app.spec.hpa?.maxReplicas || 3,
+    cpuThreshold: app.spec.hpa?.thresholdCpu || 75,
+    memoryThreshold: app.spec.hpa?.thresholdMemory || 75,
+    replicas: app.spec.replicas || 1,
+
+    cpu: parseValue(getContainer().resourceCpu?.max, 250),
+
+    selectedPlan:
+      app.metadata?.annotations[keyconstants.selectedPlan] || 'shared-1',
+    selectionMode:
+      app.metadata?.annotations[keyconstants.selectionModeKey] || 'quick',
+    manualCpuMin: parseValue(getContainer().resourceCpu?.min, 0),
+    manualCpuMax: parseValue(getContainer().resourceCpu?.max, 0),
+    manualMemMin: parseValue(getContainer().resourceMemory?.min, 0),
+    manualMemMax: parseValue(getContainer().resourceMemory?.max, 0),
+
+    nodepoolName: app.spec.nodeSelector?.[keyconstants.nodepoolName] || '',
+  };
+};
+
+export const mapFormValuesToApp = ({
+  oldAppIn: s,
+  appIn: val,
+}: {
+  oldAppIn: AppIn;
+  appIn: ReturnType<typeof appInitialFormValues>;
+}): AppIn => {
+  console.log('nodepool names', val.nodepoolName);
+  return {
+    ...s,
+    metadata: {
+      ...s.metadata!,
+      annotations: {
+        ...(s.metadata?.annotations || {}),
+        [keyconstants.cpuMode]: val.cpuMode,
+        [keyconstants.selectedPlan]: val.selectedPlan,
+        [keyconstants.selectionModeKey]: val.selectionMode,
+        [keyconstants.memPerCpu]: `${val.memPerCpu}`,
+      },
+    },
+    spec: {
+      ...s.spec,
+      nodeSelector: val.nodepoolName
+        ? {
+            ...(s.spec.nodeSelector || {}),
+            [keyconstants.nodepoolName]: val.nodepoolName,
+          }
+        : null,
+
+      containers: [
+        {
+          ...(s.spec.containers?.[0] || {}),
+          imagePullPolicy: val.imagePullPolicy,
+          resourceCpu:
+            val.selectionMode === 'quick'
+              ? {
+                  max: `${val.cpu}m`,
+                  min:
+                    val.cpuMode === 'shared'
+                      ? `${val.cpu / 4}m`
+                      : `${val.cpu}m`,
+                }
+              : {
+                  max: `${val.manualCpuMax}m`,
+                  min: `${val.manualCpuMin}m`,
+                },
+          resourceMemory:
+            val.selectionMode === 'quick'
+              ? {
+                  max: `${(
+                    parseValue(val.cpu, 1) * parseValue(val.memPerCpu, 4)
+                  ).toFixed(0)}Mi`,
+                  min: `${val.cpu}Mi`,
+                }
+              : {
+                  max: `${val.manualMemMax}Mi`,
+                  min: `${val.manualMemMin}Mi`,
+                },
+        },
+      ],
+
+      hpa: {
+        enabled: val.autoscaling,
+        maxReplicas: val.maxReplicas,
+        minReplicas: val.minReplicas,
+        thresholdCpu: val.cpuThreshold,
+        thresholdMemory: val.memoryThreshold,
+      },
+      replicas: val.replicas,
+    },
+  };
+};
+
+export default appInitialFormValues;
diff --git a/src/apps/console/page-components/app/app-wrapper.tsx b/src/apps/console/page-components/app/app-wrapper.tsx
new file mode 100644
index 000000000..062536367
--- /dev/null
+++ b/src/apps/console/page-components/app/app-wrapper.tsx
@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { Button } from '~/components/atoms/button';
+import Wrapper from '~/console/components/wrapper';
+import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
+
+const AppWrapper = ({
+  children,
+  title,
+}: {
+  children: ReactNode;
+  title: string;
+}) => {
+  const { setPerformAction, hasChanges, loading } = useUnsavedChanges();
+  return (
+    <div>
+      <Wrapper
+        secondaryHeader={{
+          title,
+          action: hasChanges && !loading && (
+            <div className="flex flex-row items-center gap-lg">
+              <Button
+                disabled={loading}
+                variant="basic"
+                content="Discard changes"
+                onClick={() => setPerformAction('discard-changes')}
+              />
+              <Button
+                disabled={loading}
+                content={loading ? 'Committing changes.' : 'View changes'}
+                loading={loading}
+                onClick={() => setPerformAction('view-changes')}
+              />
+            </div>
+          ),
+        }}
+      >
+        {children}
+      </Wrapper>
+    </div>
+  );
+};
+export default AppWrapper;
diff --git a/src/apps/console/page-components/app/components.tsx b/src/apps/console/page-components/app/components.tsx
new file mode 100644
index 000000000..bf610bb17
--- /dev/null
+++ b/src/apps/console/page-components/app/components.tsx
@@ -0,0 +1,318 @@
+import { ChangeEventHandler, Dispatch, SetStateAction, useState } from 'react';
+import { IconButton } from '~/components/atoms/button';
+import { Chip, ChipGroup } from '~/components/atoms/chips';
+import { TextInput } from '~/components/atoms/input';
+import Tooltip from '~/components/atoms/tooltip';
+import Popup from '~/components/molecule/popup';
+import { titleCase, useMapper } from '~/components/utils';
+import {
+  ListItem,
+  ListTitle,
+} from '~/console/components/console-list-components';
+import { ArrowLeft, Spinner, XCircleFill } from '~/console/components/icons';
+import ListV2 from '~/console/components/listV2';
+import MultiStep, { useMultiStep } from '~/console/components/multi-step';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import {
+  parseNodes,
+  parseUpdateOrCreatedBy,
+  parseUpdateOrCreatedOn,
+} from '~/console/server/r-utils/common';
+import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
+
+type IRepoSelectDialogListItem = {
+  label: string;
+  value: string;
+  updateInfo: { author: string; time: string } | null;
+};
+const RepoSelectDialogList = ({
+  data,
+  onClick,
+  type,
+  selectedOption,
+}: {
+  data: IRepoSelectDialogListItem[];
+  onClick: (data: IRepoSelectDialogListItem) => void;
+  type: 'repo' | 'tags';
+  selectedOption: string;
+}) => {
+  return (
+    <ListV2.Root
+      data={{
+        headers: [
+          {
+            name: 'name',
+            render: () => 'Name',
+            className: 'flex-1',
+          },
+
+          {
+            render: () => (type === 'repo' ? 'Updated' : null),
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+        ],
+        rows: data.map((r) => {
+          return {
+            onClick: () => onClick(r),
+            pressed: r.value === selectedOption,
+            columns: {
+              name: {
+                render: () => <ListTitle title={r.label} />,
+              },
+              ...(type === 'repo'
+                ? {
+                    updated: {
+                      render: () => (
+                        <ListItem
+                          data={`${r.updateInfo?.author}`}
+                          subtitle={r.updateInfo?.time}
+                        />
+                      ),
+                    },
+                  }
+                : {}),
+            },
+          };
+        }),
+      }}
+    />
+  );
+};
+
+const RepoSelectDialog = ({
+  open,
+  setOpen,
+  onChange,
+}: {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  onChange?: (data: { repo: string; tag: string }) => void;
+}) => {
+  const [repoName, setRepoName] = useState('');
+  const [tag, setTag] = useState('');
+
+  const {
+    currentStep,
+    onNext,
+    onPrevious,
+    reset: resetStep,
+  } = useMultiStep({
+    totalSteps: 2,
+    defaultStep: 1,
+  });
+
+  const api = useConsoleApi();
+
+  const {
+    data,
+    isLoading: repoLoading,
+    error: repoLoadingError,
+  } = useCustomSwr('/repos', async () => {
+    return api.listRepo({});
+  });
+
+  const repos = useMapper(parseNodes(data), (val) => ({
+    label: val.name,
+    value: val.name,
+    updateInfo: {
+      author: `Updated by ${titleCase(parseUpdateOrCreatedBy(val))}`,
+      time: parseUpdateOrCreatedOn(val),
+    },
+  }));
+
+  const {
+    data: digestData,
+    isLoading: digestLoading,
+    error: digestError,
+  } = useCustomSwr(
+    () => (repoName ? `/digests_${repoName}` : null),
+    async () => {
+      return api.listDigest({ repoName });
+    }
+  );
+
+  const tags = useMapper(parseNodes(digestData), (val) => val.tags)
+    .flat()
+    .flatMap((f) => ({ label: f, value: f, updateInfo: null }));
+
+  const reset = () => {
+    setRepoName('');
+    setTag('');
+    resetStep();
+  };
+
+  return (
+    <Popup.Root show={open} onOpenChange={setOpen} className="!w-[900px]">
+      <Popup.Header showclose={false}>
+        <div className="flex flex-row items-center gap-lg">
+          {currentStep === 2 && (
+            <IconButton
+              size="sm"
+              icon={<ArrowLeft />}
+              variant="plain"
+              onClick={() => {
+                onPrevious();
+                reset();
+              }}
+            />
+          )}
+          <div className="flex-1">
+            {currentStep === 1 ? 'Select Repository' : 'Select tag'}
+          </div>
+          <div className="bodyMd text-text-strong font-normal">
+            {currentStep}/2
+          </div>
+        </div>
+      </Popup.Header>
+      <Popup.Content>
+        <div className="min-h-[40vh]">
+          {repoLoading || digestLoading ? (
+            <div className="flex flex-col items-center justify-center gap-xl pt-5xl">
+              <span className="animate-spin">
+                <Spinner color="currentColor" weight={2} size={24} />
+              </span>
+              <span className="text-text-soft bodyMd">Loading</span>
+            </div>
+          ) : (
+            <MultiStep.Root currentStep={currentStep}>
+              <MultiStep.Step step={1}>
+                <RepoSelectDialogList
+                  selectedOption=""
+                  data={repos}
+                  onClick={(d) => {
+                    setRepoName(d.value);
+                    onNext();
+                  }}
+                  type="repo"
+                />
+              </MultiStep.Step>
+              <MultiStep.Step step={2}>
+                <RepoSelectDialogList
+                  data={tags}
+                  selectedOption={tag}
+                  onClick={(t) => {
+                    setTag(t.value);
+                  }}
+                  type="tags"
+                />
+              </MultiStep.Step>
+            </MultiStep.Root>
+          )}
+        </div>
+      </Popup.Content>
+      <Popup.Footer>
+        <Popup.Button
+          closable={currentStep === 1}
+          content={currentStep === 1 ? 'Cancel' : 'Back'}
+          variant="basic"
+          onClick={() => {
+            onPrevious();
+            reset();
+          }}
+        />
+        <Popup.Button
+          type="submit"
+          disabled={currentStep === 1 || (!tag && currentStep === 2)}
+          content={currentStep === 2 ? 'Select' : 'Continue'}
+          variant="primary"
+          onClick={() => {
+            onChange?.({ repo: repoName, tag });
+            reset();
+            setOpen(false);
+          }}
+        />
+      </Popup.Footer>
+    </Popup.Root>
+  );
+};
+
+const RepoSelector = ({
+  tag,
+  repo,
+  onClear,
+  textValue,
+  onTextChanged,
+  onValueChange,
+  error,
+}: {
+  tag: string;
+  repo: string;
+  onClear: () => void;
+  onTextChanged: ChangeEventHandler<HTMLInputElement> | undefined;
+  textValue: string;
+  onValueChange: (data: { repo: string; tag: string }) => void;
+  error?: string;
+}) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="">
+      {tag && repo && !textValue ? (
+        <div className="flex flex-col max-w-full">
+          <div className="bodyMd-medium text-text-default pb-md">
+            <span className="h-4xl block flex items-center">Image</span>
+          </div>
+          <div className="max-h-[43px] px-lg flex flex-row items-center rounded border border-border-default bg-surface-basic-default line-clamp-1 justify-between">
+            <Tooltip.Root
+              className="!max-w-[400px]"
+              content={
+                <div className="flex-1 flex flex-row gap-md items-center py-xl px-lg bodyMd text-text-soft ">
+                  <span className="line-clamp-1">{repo}</span>
+                  <span>:</span>
+
+                  <span className="line-clamp-1">{tag}</span>
+                </div>
+              }
+            >
+              <div className="gap-md items-center py-xl px-md bodyMd text-text-soft max-w-full w-fit">
+                <div className="flex flex-row items-center truncate">
+                  <span className="truncate">{repo}</span>
+                  <span>:</span>
+                  <span className="truncate">{tag}</span>
+                </div>
+              </div>
+            </Tooltip.Root>
+            <button
+              aria-label="clear"
+              tabIndex={-1}
+              type="button"
+              className="outline-none p-lg text-text-default rounded-full"
+              onClick={onClear}
+            >
+              <XCircleFill size={16} color="currentColor" />
+            </button>
+          </div>
+        </div>
+      ) : (
+        <TextInput
+          placeholder="eg: nginx:latest"
+          value={textValue}
+          onChange={onTextChanged}
+          label="Image"
+          size="lg"
+          error={!!error}
+          message={error}
+          suffix={
+            !textValue ? (
+              <ChipGroup onClick={() => setOpen(true)}>
+                <Chip
+                  label="Kloudlite repository"
+                  item="repo"
+                  type="CLICKABLE"
+                />
+              </ChipGroup>
+            ) : null
+          }
+          showclear={!!textValue}
+        />
+      )}
+      <RepoSelectDialog
+        open={open}
+        setOpen={setOpen}
+        onChange={onValueChange}
+      />
+    </div>
+  );
+};
+
+export default RepoSelector;
diff --git a/src/apps/console/page-components/app/compute.tsx b/src/apps/console/page-components/app/compute.tsx
new file mode 100644
index 000000000..2d8b979eb
--- /dev/null
+++ b/src/apps/console/page-components/app/compute.tsx
@@ -0,0 +1,334 @@
+import { NumberInput } from '~/components/atoms/input';
+import Slider from '~/components/atoms/slider';
+import { useAppState } from '~/console/page-components/app-states';
+import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
+import Yup from '~/root/lib/server/helpers/yup';
+import { FadeIn, parseValue } from '~/console/page-components/util';
+import Select from '~/components/atoms/select';
+import ExtendedFilledTab from '~/console/components/extended-filled-tab';
+import { parseName, parseNodes } from '~/console/server/r-utils/common';
+import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { useMapper } from '~/components/utils';
+import { BottomNavigation } from '~/console/components/commons';
+import { useOutletContext } from '@remix-run/react';
+import { Checkbox } from '~/components/atoms/checkbox';
+import { useEffect, useState } from 'react';
+import { Button } from '~/components/atoms/button';
+import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
+import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
+import { plans } from './datas';
+import appInitialFormValues, { mapFormValuesToApp } from './app-utils';
+
+const valueRender = ({
+  label,
+  isShared,
+  memoryPerCpu,
+}: {
+  label: string;
+  isShared: boolean;
+  memoryPerCpu: number;
+}) => {
+  return (
+    <div className="flex flex-row gap-xl items-center w-full justify-between bodyMd text-text-default">
+      <span className="flex flex-row items-center gap-xl">
+        <span>{label}</span>-<span>{isShared ? 'Shared' : 'Dedicated'}</span>
+      </span>
+      <span className="flex flex-row items-center gap-xl">
+        <span>{memoryPerCpu}GB/vCPU</span>
+      </span>
+    </div>
+  );
+};
+
+const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
+  /** ---- Only for edit mode in settings ----* */
+  const { hasChanges } = useUnsavedChanges();
+  /** ---- end ----* */
+
+  const { app, setApp, setPage, markPageAsCompleted, getContainer } =
+    useAppState();
+  const api = useConsoleApi();
+  const { cluster } = useOutletContext<IProjectContext>();
+  const [advancedOptions, setAdvancedOptions] = useState(false);
+
+  const {
+    data: nodepoolData,
+    isLoading: nodepoolLoading,
+    error: nodepoolLoadingError,
+  } = useCustomSwr('/nodepools', async () => {
+    return api.listNodePools({
+      clusterName: parseName(cluster),
+      pagination: {
+        first: 100,
+        orderBy: 'updateTime',
+        sortDirection: 'DESC',
+      },
+    });
+  });
+
+  const { values, errors, handleChange, isLoading, submit, resetValues } =
+    useForm({
+      initialValues: appInitialFormValues({
+        app,
+        getContainer,
+      }),
+      validationSchema: Yup.object({
+        pullSecret: Yup.string(),
+        cpuMode: Yup.string().required(),
+        selectedPlan: Yup.string().required(),
+      }),
+      onSubmit: (val) => {
+        setApp((s) =>
+          mapFormValuesToApp({
+            appIn: val,
+            oldAppIn: s,
+          })
+        );
+      },
+    });
+
+  const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({
+    label: val.metadata?.name || '',
+    value: val.metadata?.name || '',
+  }));
+
+  /** ---- Only for edit mode in settings ----* */
+  useEffect(() => {
+    if (mode === 'edit') {
+      submit();
+    }
+  }, [values, mode]);
+
+  // useEffect(() => {
+  //   if (!hasChanges && mode === 'edit') {
+  //     resetValues();
+  //   }
+  // }, [hasChanges, mode]);
+
+  /** ---- end ----* */
+
+  return (
+    <FadeIn
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (mode === 'edit') {
+          return;
+        }
+        (async () => {
+          const res = await submit();
+          if (res) {
+            setPage(3);
+            markPageAsCompleted(2);
+          }
+        })();
+      }}
+    >
+      {mode === 'new' && (
+        <div className="bodyMd text-text-soft">
+          Compute refers to the processing power and resources used for data
+          manipulation and calculations in a system.
+        </div>
+      )}
+      <div className="flex flex-col">
+        <div className="flex flex-row gap-lg items-center pb-3xl">
+          <div className="flex-1">
+            <ExtendedFilledTab
+              value={values.selectionMode}
+              onChange={(e) => {
+                handleChange('selectionMode')(dummyEvent(e));
+              }}
+              items={[
+                { label: 'Quick', value: 'quick' },
+                {
+                  label: 'Manual',
+                  value: 'manual',
+                },
+              ]}
+            />
+          </div>
+        </div>
+        {values.selectionMode === 'quick' ? (
+          <div className="flex flex-col gap-3xl">
+            <Select
+              value={values.selectedPlan}
+              label="Plan"
+              size="lg"
+              options={async () => [
+                ...Object.entries(plans).map(([_, vs]) => ({
+                  label: vs.label,
+                  options: vs.options.map((op) => ({
+                    ...op,
+                    render: () => (
+                      <div className="flex flex-row justify-between">
+                        <div>{op.label}</div>
+                        <div className="bodySm">{op.memoryPerCpu}GB/vCPU</div>
+                      </div>
+                    ),
+                  })),
+                })),
+              ]}
+              valueRender={valueRender}
+              onChange={(v) => {
+                handleChange('selectedPlan')(dummyEvent(v.value));
+                handleChange('memPerCpu')(dummyEvent(v.memoryPerCpu));
+                handleChange('cpuMode')(
+                  dummyEvent(v.isShared ? 'shared' : 'dedicated')
+                );
+              }}
+            />
+            <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default">
+              <div className="flex flex-row gap-lg items-center">
+                <div className="bodyMd-medium text-text-default">
+                  Select CPU
+                </div>
+                <code className="bodyMd text-text-soft flex-1 text-end">
+                  {((values.cpu || 1) / 1000).toFixed(2)}vCPU &{' '}
+                  {(
+                    ((values.cpu || 1) * parseValue(values.memPerCpu, 4)) /
+                    1000
+                  ).toFixed(2)}
+                  GB Memory
+                </code>
+              </div>
+              <Slider
+                step={100}
+                min={100}
+                max={8000}
+                value={values.cpu}
+                onChange={(value) => {
+                  handleChange('cpu')(dummyEvent(value));
+                }}
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-3xl">
+            <div className="flex flex-col gap-md">
+              <div className="flex flex-row items-start gap-2xl">
+                <div className="basis-full">
+                  <NumberInput
+                    value={values.manualCpuMin}
+                    onChange={handleChange('manualCpuMin')}
+                    label="CPU request"
+                    size="lg"
+                    suffix="m"
+                    extra={
+                      <span className="bodySm text-text-soft">
+                        1000m = 1VCPU
+                      </span>
+                    }
+                  />
+                </div>
+                <div className="basis-full">
+                  <NumberInput
+                    value={values.manualCpuMax}
+                    onChange={handleChange('manualCpuMax')}
+                    label="CPU limit"
+                    extra={
+                      <span className="bodySm text-text-soft">
+                        1000m = 1VCPU
+                      </span>
+                    }
+                    size="lg"
+                    suffix="m"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-col gap-md">
+              <div className="flex flex-row items-start gap-2xl">
+                <div className="basis-full">
+                  <NumberInput
+                    value={values.manualMemMin}
+                    onChange={handleChange('manualMemMin')}
+                    label="Memory request"
+                    size="lg"
+                    suffix="MB"
+                  />
+                </div>
+                <div className="basis-full">
+                  <NumberInput
+                    value={values.manualMemMax}
+                    onChange={handleChange('manualMemMax')}
+                    label="Memory limit"
+                    size="lg"
+                    suffix="MB"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="flex flex-col gap-3xl pt-3xl">
+          <Button
+            size="sm"
+            content={
+              <span className="truncate text-left">Advanced options</span>
+            }
+            variant="primary-plain"
+            className="truncate"
+            onClick={() => {
+              setAdvancedOptions(!advancedOptions);
+            }}
+          />
+
+          {advancedOptions && (
+            <Select
+              label="Nodepool Name"
+              size="lg"
+              placeholder="Select Nodepool"
+              value={values.nodepoolName}
+              creatable
+              onChange={(val) => {
+                handleChange('nodepoolName')(dummyEvent(val.value));
+              }}
+              options={async () => [...nodepools]}
+              error={!!errors.repos || !!nodepoolLoadingError}
+              message={
+                nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app
+              }
+              loading={nodepoolLoading}
+              showclear
+            />
+          )}
+
+          {advancedOptions && (
+            <Checkbox
+              label="Always pull image on restart"
+              checked={values.imagePullPolicy === 'Always'}
+              onChange={(val) => {
+                const imagePullPolicy = val ? 'Always' : 'IfNotPresent';
+                handleChange('imagePullPolicy')(dummyEvent(imagePullPolicy));
+              }}
+            />
+          )}
+        </div>
+      </div>
+      {mode === 'new' && (
+        <BottomNavigation
+          primaryButton={{
+            loading: isLoading,
+            type: 'submit',
+            content: 'Save & Continue',
+            variant: 'primary',
+          }}
+          secondaryButton={{
+            content: 'App Info',
+            variant: 'outline',
+            onClick: () => {
+              (async () => {
+                const res = await submit();
+                if (res) {
+                  setPage(1);
+                }
+              })();
+            },
+          }}
+        />
+      )}
+    </FadeIn>
+  );
+};
+export default AppCompute;
diff --git a/src/apps/console/page-components/app/datas.ts b/src/apps/console/page-components/app/datas.ts
new file mode 100644
index 000000000..4ed1cc526
--- /dev/null
+++ b/src/apps/console/page-components/app/datas.ts
@@ -0,0 +1,62 @@
+interface Iplan {
+  value: string;
+  memoryPerCpu: number;
+  label: string;
+  description: string;
+  isShared: boolean;
+}
+
+export type IcpuMode = 'shared' | 'dedicated';
+
+export const plans: {
+  [key: string]: {
+    label: string;
+    options: Iplan[];
+  };
+} = {
+  shared: {
+    label: 'Shared - Burstable Performance',
+    options: [
+      {
+        isShared: true,
+        value: 'shared-1',
+        memoryPerCpu: 1,
+        label: 'General Purpose',
+        description: 'This foundational package for your need',
+      },
+      {
+        isShared: true,
+        value: 'shared-2',
+        memoryPerCpu: 2,
+        label: 'Memory Optmized',
+        description: 'This foundational package for your need',
+      },
+    ],
+  },
+  dedicated: {
+    label: 'Dedicated',
+    options: [
+      {
+        isShared: false,
+        value: 'ded-4',
+        memoryPerCpu: 4,
+        label: 'General Puropse',
+        description: 'This foundational package for your need',
+      },
+      {
+        isShared: false,
+        value: 'ded-2',
+        memoryPerCpu: 2,
+        label: 'CPU Optimised',
+        description: 'This foundational package for your need',
+      },
+      {
+        isShared: false,
+        value: 'ded-8',
+        memoryPerCpu: 8,
+        label: 'Memory Optimised',
+        description: 'This foundational package for your need',
+      },
+    ],
+  },
+};
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx
index 8c8e4c77d..ba71ee282 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx
@@ -1,4 +1,9 @@
-import { Outlet, useOutletContext, useParams } from '@remix-run/react';
+import {
+  Outlet,
+  useNavigation,
+  useOutletContext,
+  useParams,
+} from '@remix-run/react';
 import SidebarLayout from '~/console/components/sidebar-layout';
 import {
   UnsavedChangesProvider,
@@ -37,7 +42,7 @@ const Layout = () => {
     setIgnorePaths,
     performAction,
     setPerformAction,
-    setLoading,
+    loading,
   } = useUnsavedChanges();
   const { app, setApp } = useAppState();
 
@@ -74,8 +79,8 @@ const Layout = () => {
         toast.success('App updated successfully');
         // @ts-ignore
         setPerformAction('');
-        reload();
         setHasChanges(false);
+        reload();
       } catch (err) {
         handleError(err);
       }
@@ -83,19 +88,23 @@ const Layout = () => {
   });
 
   useEffect(() => {
+    if (loading) {
+      return;
+    }
     const isNotSame = JSON.stringify(app) !== JSON.stringify(rootContext.app);
-
     if (isNotSame) {
       setHasChanges(true);
     } else {
       setHasChanges(false);
     }
-  }, [app, rootContext.app]);
+  }, [app, rootContext.app, loading]);
 
   useEffect(() => {
-    setApp(rootContext.app);
-    setLoading(false);
-  }, [rootContext.app]);
+    if (!loading) {
+      setApp(rootContext.app);
+    }
+    setHasChanges(false);
+  }, [rootContext.app, loading]);
 
   useEffect(() => {
     if (performAction === 'discard-changes') {
@@ -126,7 +135,6 @@ const Layout = () => {
             loading={isLoading}
             onClick={() => {
               submit();
-              setLoading(true);
             }}
             content="Commit Changes"
           />
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
index 328c6e832..d2bee5315 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
@@ -1,289 +1,11 @@
-import { useEffect } from 'react';
-import { NumberInput } from '~/components/atoms/input';
-import Slider from '~/components/atoms/slider';
-import { useAppState } from '~/console/page-components/app-states';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { parseValue } from '~/console/page-components/util';
-import Select from '~/components/atoms/select';
-import ExtendedFilledTab from '~/console/components/extended-filled-tab';
-import Wrapper from '~/console/components/wrapper';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
-import { Button } from '~/components/atoms/button';
-import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { parseName, parseNodes } from '~/console/server/r-utils/common';
-import { Checkbox } from '~/components/atoms/checkbox';
-import { useMapper } from '~/components/utils';
-import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
-import { useOutletContext } from '@remix-run/react';
-import { plans } from '../../../../new-app/datas';
-import appInitialFormValues, {
-  mapFormValuesToApp,
-} from '../../../../new-app/app-utils';
-
-const valueRender = ({
-  label,
-  isShared,
-  memoryPerCpu,
-}: {
-  label: string;
-  isShared: boolean;
-  memoryPerCpu: number;
-}) => {
-  return (
-    <div className="flex flex-row gap-xl items-center w-full justify-between bodyMd text-text-default">
-      <span className="flex flex-row items-center gap-xl">
-        <span>{label}</span>-<span>{isShared ? 'Shared' : 'Dedicated'}</span>
-      </span>
-      <span className="flex flex-row items-center gap-xl">
-        <span>{memoryPerCpu}GB/vCPU</span>
-      </span>
-    </div>
-  );
-};
+import AppCompute from '~/console/page-components/app/compute';
+import AppWrapper from '~/console/page-components/app/app-wrapper';
 
 const SettingCompute = () => {
-  const { app, setApp, getContainer } = useAppState();
-  const { setPerformAction, hasChanges, loading } = useUnsavedChanges();
-  const { cluster } = useOutletContext<IProjectContext>();
-
-  const api = useConsoleApi();
-
-  const {
-    data: nodepoolData,
-    isLoading: nodepoolLoading,
-    error: nodepoolLoadingError,
-  } = useCustomSwr('/nodepools', async () => {
-    return api.listNodePools({
-      clusterName: parseName(cluster),
-      pagination: {
-        first: 100,
-        orderBy: 'updateTime',
-        sortDirection: 'DESC',
-      },
-    });
-  });
-
-  const { values, errors, handleChange, submit, resetValues } = useForm({
-    initialValues: appInitialFormValues({
-      app,
-      getContainer,
-    }),
-    validationSchema: Yup.object({
-      imageUrl: Yup.string().required(),
-      pullSecret: Yup.string(),
-      cpuMode: Yup.string().required(),
-      selectedPlan: Yup.string().required(),
-    }),
-    onSubmit: (val) => {
-      setApp((s) =>
-        mapFormValuesToApp({
-          appIn: val,
-          oldAppIn: s,
-        })
-      );
-    },
-  });
-
-  const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({
-    label: val.metadata?.name || '',
-    value: val.metadata?.name || '',
-  }));
-
-  useEffect(() => {
-    submit();
-  }, [values]);
-
-  useEffect(() => {
-    if (!hasChanges) {
-      resetValues();
-    }
-  }, [hasChanges]);
-
   return (
-    <div>
-      <Wrapper
-        secondaryHeader={{
-          title: 'Compute',
-          action: hasChanges && (
-            <div className="flex flex-row items-center gap-lg">
-              <Button
-                disabled={loading}
-                variant="basic"
-                content="Discard changes"
-                onClick={() => setPerformAction('discard-changes')}
-              />
-              <Button
-                disabled={loading}
-                content={loading ? 'Committing changes.' : 'View changes'}
-                loading={loading}
-                onClick={() => setPerformAction('view-changes')}
-              />
-            </div>
-          ),
-        }}
-      >
-        <div className="flex flex-col gap-3xl">
-          <Select
-            label="Nodepool Name"
-            size="lg"
-            placeholder="Select Nodepool"
-            value={values.nodepoolName}
-            creatable
-            onChange={(val) => {
-              handleChange('nodepoolName')(dummyEvent(val.value));
-            }}
-            options={async () => [...nodepools]}
-            error={!!errors.repos || !!nodepoolLoadingError}
-            message={
-              nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app
-            }
-            loading={nodepoolLoading}
-          />
-
-          <Checkbox
-            label="Always pull image on restart"
-            checked={values.imagePullPolicy === 'Always'}
-            onChange={(val) => {
-              const imagePullPolicy = val ? 'Always' : 'IfNotPresent';
-              handleChange('imagePullPolicy')(dummyEvent(imagePullPolicy));
-            }}
-          />
-        </div>
-        <div className="flex flex-col">
-          <div className="flex flex-row gap-lg items-center pb-3xl">
-            <div className="flex-1">
-              <ExtendedFilledTab
-                value={values.selectionMode}
-                onChange={(e) => {
-                  handleChange('selectionMode')(dummyEvent(e));
-                }}
-                items={[
-                  { label: 'Quick', value: 'quick' },
-                  {
-                    label: 'Manual',
-                    value: 'manual',
-                  },
-                ]}
-              />
-            </div>
-          </div>
-          {values.selectionMode === 'quick' ? (
-            <div className="flex flex-col gap-3xl">
-              <Select
-                value={values.selectedPlan}
-                label="Plan"
-                size="lg"
-                options={async () => [
-                  ...Object.entries(plans).map(([_, vs]) => ({
-                    label: vs.label,
-                    options: vs.options.map((op) => ({
-                      ...op,
-                      render: () => (
-                        <div className="flex flex-row justify-between">
-                          <div>{op.label}</div>
-                          <div className="bodySm">{op.memoryPerCpu}GB/vCPU</div>
-                        </div>
-                      ),
-                    })),
-                  })),
-                ]}
-                valueRender={valueRender}
-                onChange={(v) => {
-                  handleChange('selectedPlan')(dummyEvent(v.value));
-                  handleChange('memPerCpu')(dummyEvent(v.memoryPerCpu));
-                  handleChange('cpuMode')(
-                    dummyEvent(v.isShared ? 'shared' : 'dedicated')
-                  );
-                }}
-              />
-              <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default">
-                <div className="flex flex-row gap-lg items-center">
-                  <div className="bodyMd-medium text-text-default">
-                    Select CPU
-                  </div>
-                  <code className="bodyMd text-text-soft flex-1 text-end">
-                    {((values.cpu || 1) / 1000).toFixed(2)}vCPU &{' '}
-                    {(
-                      ((values.cpu || 1) * parseValue(values.memPerCpu, 4)) /
-                      1000
-                    ).toFixed(2)}
-                    GB Memory
-                  </code>
-                </div>
-                <Slider
-                  step={100}
-                  min={100}
-                  max={8000}
-                  value={values.cpu}
-                  onChange={(value) => {
-                    handleChange('cpu')(dummyEvent(value));
-                  }}
-                />
-              </div>
-            </div>
-          ) : (
-            <div className="flex flex-col gap-3xl">
-              <div className="flex flex-col gap-md">
-                <div className="flex flex-row items-start gap-2xl">
-                  <div className="basis-full">
-                    <NumberInput
-                      value={values.manualCpuMin}
-                      onChange={handleChange('manualCpuMin')}
-                      label="CPU request"
-                      size="lg"
-                      suffix="m"
-                      extra={
-                        <span className="bodySm text-text-soft">
-                          1000m = 1VCPU
-                        </span>
-                      }
-                    />
-                  </div>
-                  <div className="basis-full">
-                    <NumberInput
-                      value={values.manualCpuMax}
-                      onChange={handleChange('manualCpuMax')}
-                      label="CPU limit"
-                      extra={
-                        <span className="bodySm text-text-soft">
-                          1000m = 1VCPU
-                        </span>
-                      }
-                      size="lg"
-                      suffix="m"
-                    />
-                  </div>
-                </div>
-              </div>
-              <div className="flex flex-col gap-md">
-                <div className="flex flex-row items-start gap-2xl">
-                  <div className="basis-full">
-                    <NumberInput
-                      value={values.manualMemMin}
-                      onChange={handleChange('manualMemMin')}
-                      label="Memory request"
-                      size="lg"
-                      suffix="MB"
-                    />
-                  </div>
-                  <div className="basis-full">
-                    <NumberInput
-                      value={values.manualMemMax}
-                      onChange={handleChange('manualMemMax')}
-                      label="Memory limit"
-                      size="lg"
-                      suffix="MB"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </Wrapper>
-    </div>
+    <AppWrapper title="Compute">
+      <AppCompute mode="edit" />
+    </AppWrapper>
   );
 };
 export default SettingCompute;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/app-dialogs.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/app-dialogs.tsx
deleted file mode 100644
index 8da2b37f1..000000000
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/app-dialogs.tsx
+++ /dev/null
@@ -1,272 +0,0 @@
-import {
-  ArrowDown,
-  ArrowLeft,
-  ArrowUp,
-  ArrowsDownUp,
-  Search,
-  Spinner,
-} from '@jengaicons/react';
-import { useParams } from '@remix-run/react';
-import { useState } from 'react';
-import { IconButton } from '~/components/atoms/button';
-import OptionList from '~/components/atoms/option-list';
-import Toolbar from '~/components/atoms/toolbar';
-import Popup from '~/components/molecule/popup';
-import { IDialog } from '~/console/components/types.d';
-import ConfigResource from '~/console/page-components/config-resource';
-import SecretResource from '~/console/page-components/secret-resource';
-import { parseName, parseNodes } from '~/console/server/r-utils/common';
-import { useAPIClient } from '~/root/lib/client/hooks/api-provider';
-import useDebounce from '~/root/lib/client/hooks/use-debounce';
-import { handleError } from '~/root/lib/utils/common';
-import CSComponent from './cs-item';
-import { IAppDialogValue } from './route';
-
-const SortbyOptionList = () => {
-  const [orderBy, _setOrderBy] = useState('updateTime');
-  return (
-    <OptionList.Root>
-      <OptionList.Trigger>
-        <div>
-          <div className="hidden md:flex">
-            <Toolbar.Button
-              content="Sortby"
-              variant="basic"
-              prefix={<ArrowsDownUp />}
-            />
-          </div>
-
-          <div className="flex md:hidden">
-            <Toolbar.IconButton variant="basic" icon={<ArrowsDownUp />} />
-          </div>
-        </div>
-      </OptionList.Trigger>
-      <OptionList.Content>
-        <OptionList.RadioGroup>
-          <OptionList.RadioGroupItem
-            value="metadata.name"
-            onClick={(e) => e.preventDefault()}
-          >
-            Name
-          </OptionList.RadioGroupItem>
-          <OptionList.RadioGroupItem
-            value="updateTime"
-            onClick={(e) => e.preventDefault()}
-          >
-            Updated
-          </OptionList.RadioGroupItem>
-        </OptionList.RadioGroup>
-        <OptionList.Separator />
-        <OptionList.RadioGroup>
-          <OptionList.RadioGroupItem
-            showIndicator={false}
-            value="ASC"
-            onClick={(e) => e.preventDefault()}
-          >
-            <ArrowUp size={16} />
-            {orderBy === 'updateTime' ? 'Oldest' : 'Ascending'}
-          </OptionList.RadioGroupItem>
-          <OptionList.RadioGroupItem
-            value="DESC"
-            showIndicator={false}
-            onClick={(e) => e.preventDefault()}
-          >
-            <ArrowDown size={16} />
-            {orderBy === 'updateTime' ? 'Newest' : 'Descending'}
-          </OptionList.RadioGroupItem>
-        </OptionList.RadioGroup>
-      </OptionList.Content>
-    </OptionList.Root>
-  );
-};
-
-const AppDialog = ({
-  show,
-  setShow,
-  onSubmit,
-}: IDialog<null, IAppDialogValue>) => {
-  const api = useAPIClient();
-
-  const [isloading, setIsloading] = useState<boolean>(true);
-  const { workspace, project, scope } = useParams();
-
-  const [configs, setConfigs] = useState<Array<any>>([]);
-  const [showConfig, setShowConfig] = useState<boolean>(false);
-  const [selectedConfig, setSelectedConfig] = useState<any>(null);
-  const [selectedKey, setSelectedKey] = useState<any>(null);
-
-  const isConfigItemPage = () => {
-    return selectedConfig && showConfig;
-  };
-
-  const reset = () => {
-    setConfigs([]);
-    setIsloading(true);
-    setSelectedConfig(null);
-    setSelectedKey(null);
-    setShowConfig(false);
-  };
-
-  useDebounce(
-    async () => {
-      if (!['secret', 'config'].includes(show?.type || '')) {
-        return;
-      }
-      try {
-        setIsloading(true);
-        let apiCall = api.listConfigs;
-        if (show?.type === 'secret') apiCall = api.listSecrets;
-
-        const { data, errors } = await apiCall({
-          project: {
-            value: project,
-            type: 'name',
-          },
-          scope: {
-            value: workspace,
-            type: scope === 'workspace' ? 'workspaceName' : 'environmentName',
-          },
-          //   pagination: getPagination(ctx),
-          //   search: getSearch(ctx),
-        });
-        if (errors) {
-          throw errors[0];
-        }
-        setConfigs(parseNodes(data));
-      } catch (err) {
-        handleError(err);
-      } finally {
-        setIsloading(false);
-      }
-    },
-    300,
-    [show]
-  );
-
-  return (
-    <Popup.Root
-      show={show as any}
-      className="!w-[900px]"
-      onOpenChange={(e) => {
-        if (!e) {
-          //   resetValues();
-        }
-        setShow(e);
-      }}
-    >
-      <Popup.Header showclose={false}>
-        <div className="flex flex-row items-center gap-lg">
-          {isConfigItemPage() && (
-            <IconButton
-              size="sm"
-              icon={<ArrowLeft />}
-              variant="plain"
-              onClick={() => {
-                setIsloading(true);
-                setShowConfig(false);
-                setSelectedConfig(null);
-                setSelectedKey(null);
-                setTimeout(() => {
-                  setIsloading(false);
-                }, 150);
-              }}
-            />
-          )}
-          <div className="flex-1">
-            {isConfigItemPage()
-              ? parseName(selectedConfig as any)
-              : 'Select config'}
-          </div>
-          <div className="bodyMd text-text-strong font-normal">1/2</div>
-        </div>
-      </Popup.Header>
-      <Popup.Content>
-        {!isloading && (
-          <div className="flex flex-col gap-3xl">
-            <Toolbar.Root>
-              <div className="flex-1">
-                <Toolbar.TextInput
-                  prefixIcon={<Search />}
-                  placeholder="Search"
-                />
-              </div>
-              <SortbyOptionList />
-            </Toolbar.Root>
-            {isConfigItemPage() && (
-              <CSComponent
-                items={selectedConfig?.data}
-                type="config"
-                onClick={(val) => {
-                  setSelectedKey(val);
-                }}
-              />
-            )}
-            {!isloading &&
-              !isConfigItemPage() &&
-              (show?.type === 'config' ? (
-                <ConfigResource
-                  items={configs}
-                  hasActions={false}
-                  onClick={(val) => {
-                    setSelectedConfig(val);
-                    setIsloading(true);
-                    setShowConfig(true);
-                    setTimeout(() => {
-                      setIsloading(false);
-                    }, 150);
-                  }}
-                />
-              ) : (
-                <SecretResource
-                  items={configs}
-                  hasActions={false}
-                  onClick={(val) => {
-                    setSelectedConfig(val);
-                  }}
-                />
-              ))}
-          </div>
-        )}
-
-        {isloading && (
-          <div className="min-h-[100px] flex flex-col items-center justify-center gap-xl">
-            <span className="animate-spin">
-              <Spinner color="currentColor" weight={2} size={24} />
-            </span>
-            <span className="text-text-soft bodyMd">Loading</span>
-          </div>
-        )}
-      </Popup.Content>
-      <Popup.Footer>
-        <Popup.Button
-          closable
-          content="Cancel"
-          variant="basic"
-          onClick={() => {
-            reset();
-          }}
-        />
-        <Popup.Button
-          type="submit"
-          content={isConfigItemPage() ? 'Add' : 'Continue'}
-          variant="primary"
-          disabled={isConfigItemPage() ? !selectedKey : !selectedConfig}
-          onClick={() => {
-            if (selectedKey && onSubmit) {
-              const sK = selectedKey;
-              const sC = selectedConfig;
-              reset();
-              onSubmit({
-                refKey: parseName(sC),
-                refName: sK,
-                type: 'config',
-              });
-            }
-          }}
-        />
-      </Popup.Footer>
-    </Popup.Root>
-  );
-};
-
-export default AppDialog;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/cs-item.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/cs-item.tsx
deleted file mode 100644
index c622e7d9b..000000000
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/cs-item.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useEffect, useState } from 'react';
-import List from '~/console/components/list';
-
-interface ICSComponent {
-  items: { [key: string]: string };
-  type: 'config' | 'secret';
-  onClick: (selected: string) => void;
-}
-
-const CSComponent = ({
-  items,
-  type,
-  onClick = (_: any) => _,
-}: ICSComponent) => {
-  const [selected, setSelected] = useState('');
-  useEffect(() => {
-    onClick(selected);
-  }, [selected]);
-
-  return (
-    <List.Root>
-      {Object.entries(items).map(([key, v]) => {
-        return (
-          <List.Row
-            key={key}
-            pressed={selected === key}
-            onClick={() => {
-              setSelected((prev) => (prev === key ? '' : key));
-            }}
-            columns={[
-              {
-                key: 1,
-                className: 'w-[300px]',
-                render: () => (
-                  <div className="bodyMd-semibold text-text-default">{key}</div>
-                ),
-              },
-              {
-                key: 2,
-                className: 'flex-1',
-                render: () => (
-                  <div className="bodyMd text-text-soft">
-                    {type === 'config' ? v : '•••••••••••••••'}
-                  </div>
-                ),
-              },
-            ]}
-          />
-        );
-      })}
-    </List.Root>
-  );
-};
-
-export default CSComponent;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/route.tsx
index 8b4d731a7..d2dc80702 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/route.tsx
@@ -4,9 +4,7 @@ import {
   createAppEnvPage,
   useAppState,
 } from '~/console/page-components/app-states';
-import Wrapper from '~/console/components/wrapper';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
-import { Button } from '~/components/atoms/button';
+import AppWrapper from '~/console/page-components/app/app-wrapper';
 import { EnvironmentVariables } from '../../../../new-app/app-environment-variables';
 import { ConfigMounts } from '../../../../new-app/app-config-mount';
 
@@ -18,7 +16,6 @@ export interface IAppDialogValue {
 
 const SettingEnvironment = () => {
   const { envPage, setEnvPage } = useAppState();
-  const { setPerformAction, hasChanges, loading } = useUnsavedChanges();
   const items: {
     label: string;
     value: createAppEnvPage;
@@ -34,48 +31,22 @@ const SettingEnvironment = () => {
   ];
 
   return (
-    <div>
-      <Wrapper
-        secondaryHeader={{
-          title: 'Environment',
-          action: hasChanges && (
-            <div className="flex flex-row items-center gap-lg">
-              <Button
-                disabled={loading}
-                variant="basic"
-                content="Discard changes"
-                onClick={() => setPerformAction('discard-changes')}
-              />
-              <Button
-                disabled={loading}
-                content={loading ? 'Committing changes.' : 'View changes'}
-                loading={loading}
-                onClick={() => setPerformAction('view-changes')}
-              />
-            </div>
-          ),
-        }}
-      >
-        <ExtendedFilledTab
-          value={envPage}
-          onChange={setEnvPage}
-          items={items}
-        />
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={envPage || 'empty'}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.15 }}
-            className="flex flex-col gap-6xl w-full"
-          >
-            {envPage === 'environment_variables' && <EnvironmentVariables />}
-            {envPage === 'config_mounts' && <ConfigMounts />}
-          </motion.div>
-        </AnimatePresence>
-      </Wrapper>
-    </div>
+    <AppWrapper title="Environment">
+      <ExtendedFilledTab value={envPage} onChange={setEnvPage} items={items} />
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={envPage || 'empty'}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.15 }}
+          className="flex flex-col gap-6xl w-full"
+        >
+          {envPage === 'environment_variables' && <EnvironmentVariables />}
+          {envPage === 'config_mounts' && <ConfigMounts />}
+        </motion.div>
+      </AnimatePresence>
+    </AppWrapper>
   );
 };
 
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/general/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/general/route.tsx
index 9776635af..db8a85976 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/general/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/general/route.tsx
@@ -3,28 +3,40 @@ import { useEffect } from 'react';
 import { TextInput } from '~/components/atoms/input';
 import { Box } from '~/console/components/common-console-components';
 import { useAppState } from '~/console/page-components/app-states';
-import { keyconstants } from '~/console/server/r-utils/key-constants';
-import useForm from '~/root/lib/client/hooks/use-form';
+import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { parseName } from '~/console/server/r-utils/common';
-import Wrapper from '~/console/components/wrapper';
-import { Button } from '~/components/atoms/button';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
+import AppWrapper from '~/console/page-components/app/app-wrapper';
+import RepoSelector from '~/console/page-components/app/components';
+import { registryHost } from '~/root/lib/configs/base-url.cjs';
+import { useParams } from '@remix-run/react';
 
 const SettingGeneral = () => {
-  const { app, setApp } = useAppState();
-  const { setPerformAction, hasChanges, loading } = useUnsavedChanges();
+  const { app, setApp, activeContIndex } = useAppState();
 
-  const { values, errors, handleChange, submit, resetValues } = useForm({
+  const { account } = useParams();
+
+  const { values, errors, handleChange, submit, setValues } = useForm({
     initialValues: {
       name: parseName(app),
       displayName: app.displayName,
-      description: app.metadata?.annotations?.[keyconstants.description] || '',
+      imageUrl: app.spec.containers[activeContIndex]?.image || '',
+      manualRepo: '',
     },
     validationSchema: Yup.object({
       name: Yup.string().required(),
       displayName: Yup.string().required(),
-      description: Yup.string(),
+      imageUrl: Yup.string(),
+      manualRepo: Yup.string().when(['imageUrl'], ([imageUrl], schema, c) => {
+        const regex = /^(\w+):(\w+)$/;
+        if (!imageUrl) {
+          if (!c.value) {
+            return schema.required('Image is required');
+          }
+          return schema.matches(regex, 'Invalid image format');
+        }
+        return schema;
+      }),
     }),
 
     onSubmit: async (val) => {
@@ -36,10 +48,19 @@ const SettingGeneral = () => {
             name: val.name,
             annotations: {
               ...(a.metadata?.annotations || {}),
-              [keyconstants.description]: val.description,
             },
           },
           displayName: val.displayName,
+          spec: {
+            ...a.spec,
+            containers: [
+              {
+                ...(a.spec.containers?.[0] || {}),
+                image: val.imageUrl || val.manualRepo,
+                name: 'container-0',
+              },
+            ],
+          },
         };
       });
     },
@@ -49,65 +70,58 @@ const SettingGeneral = () => {
     submit();
   }, [values]);
 
-  useEffect(() => {
-    if (!hasChanges) {
-      resetValues();
-    }
-  }, [hasChanges]);
-
   return (
-    <div>
-      <Wrapper
-        secondaryHeader={{
-          title: 'General',
-          action: hasChanges && (
-            <div className="flex flex-row items-center gap-lg">
-              <Button
-                disabled={loading}
-                variant="basic"
-                content="Discard changes"
-                onClick={() => setPerformAction('discard-changes')}
-              />
-              <Button
-                disabled={loading}
-                content={loading ? 'Committing changes.' : 'View changes'}
-                loading={loading}
-                onClick={() => setPerformAction('view-changes')}
-              />
-            </div>
-          ),
-        }}
-      >
-        <Box title="Application detail">
-          <div className="flex flex-row items-center gap-3xl">
-            <div className="flex-1">
-              <TextInput
-                label="Application name"
-                error={!!errors.displayName}
-                message={errors.displayName}
-                onChange={handleChange('displayName')}
-                value={values.displayName}
-              />
-            </div>
-            <div className="flex-1">
-              <TextInput
-                label="Application ID"
-                value={values.name}
-                suffixIcon={<CopySimple />}
-                disabled
-              />
-            </div>
+    <AppWrapper title="General">
+      <Box title="Application detail">
+        <div className="flex flex-row items-center gap-3xl">
+          <div className="flex-1">
+            <TextInput
+              label="Application name"
+              error={!!errors.displayName}
+              message={errors.displayName}
+              onChange={handleChange('displayName')}
+              value={values.displayName}
+            />
+          </div>
+          <div className="flex-1">
+            <TextInput
+              label="Application ID"
+              value={values.name}
+              suffixIcon={<CopySimple />}
+              disabled
+            />
           </div>
-          <TextInput
-            label="Description"
-            error={!!errors.description}
-            message={errors.description}
-            value={values.description}
-            onChange={handleChange('description')}
-          />
-        </Box>
-      </Wrapper>
-    </div>
+        </div>
+        <RepoSelector
+          tag={values.imageUrl.split(':')[1]}
+          repo={
+            values.imageUrl
+              .replace(`${registryHost}/${account}/`, '')
+              .split(':')[0]
+          }
+          onClear={() => {
+            setValues((v) => {
+              return {
+                ...v,
+                imageUrl: '',
+                manualRepo: '',
+              };
+            });
+          }}
+          textValue={values.manualRepo}
+          onTextChanged={(e) => {
+            handleChange('manualRepo')(e);
+            handleChange('imageUrl')(dummyEvent(''));
+          }}
+          onValueChange={({ repo, tag }) => {
+            handleChange('imageUrl')(
+              dummyEvent(`${registryHost}/${account}/${repo}:${tag}`)
+            );
+          }}
+          error={errors.manualRepo}
+        />
+      </Box>
+    </AppWrapper>
   );
 };
 export default SettingGeneral;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/network/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/network/route.tsx
index eba8b9fca..960377bfe 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/network/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/network/route.tsx
@@ -1,37 +1,11 @@
-import Wrapper from '~/console/components/wrapper';
-import { Button } from '~/components/atoms/button';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
+import AppWrapper from '~/console/page-components/app/app-wrapper';
 import { ExposedPorts } from '../../../../new-app/app-network';
 
 const AppNetwork = () => {
-  const { setPerformAction, hasChanges, loading } = useUnsavedChanges();
-
   return (
-    <div>
-      <Wrapper
-        secondaryHeader={{
-          title: 'Network',
-          action: hasChanges && (
-            <div className="flex flex-row items-center gap-lg">
-              <Button
-                disabled={loading}
-                variant="basic"
-                content="Discard changes"
-                onClick={() => setPerformAction('discard-changes')}
-              />
-              <Button
-                disabled={loading}
-                content={loading ? 'Committing changes.' : 'View changes'}
-                loading={loading}
-                onClick={() => setPerformAction('view-changes')}
-              />
-            </div>
-          ),
-        }}
-      >
-        <ExposedPorts />
-      </Wrapper>
-    </div>
+    <AppWrapper title="Network">
+      <ExposedPorts />
+    </AppWrapper>
   );
 };
 
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx
index b7fd8e0cd..0ad22d42c 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx
@@ -3,16 +3,13 @@ import Slider from '~/components/atoms/slider';
 import { useAppState } from '~/console/page-components/app-states';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
-import Wrapper from '~/console/components/wrapper';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
-import { Button } from '~/components/atoms/button';
 import { Checkbox } from '~/components/atoms/checkbox';
+import AppWrapper from '~/console/page-components/app/app-wrapper';
 
 const SettingCompute = () => {
   const { app, setApp } = useAppState();
-  const { setPerformAction, hasChanges, loading } = useUnsavedChanges();
 
-  const { values, handleChange, submit, resetValues } = useForm({
+  const { values, handleChange, submit } = useForm({
     initialValues: {
       autoscaling: app.spec.hpa?.enabled || false,
       minReplicas: app.spec.hpa?.minReplicas || 1,
@@ -70,133 +67,105 @@ const SettingCompute = () => {
     submit();
   }, [values]);
 
-  useEffect(() => {
-    if (!hasChanges) {
-      resetValues();
-    }
-  }, [hasChanges]);
-
   return (
-    <div>
-      <Wrapper
-        secondaryHeader={{
-          title: 'Scaling',
-          action: hasChanges && (
-            <div className="flex flex-row items-center gap-lg">
-              <Button
-                disabled={loading}
-                variant="basic"
-                content="Discard changes"
-                onClick={() => setPerformAction('discard-changes')}
-              />
-              <Button
-                disabled={loading}
-                content={loading ? 'Committing changes.' : 'View changes'}
-                loading={loading}
-                onClick={() => setPerformAction('view-changes')}
+    <AppWrapper title="Scaling">
+      <div className="flex flex-col gap-3xl">
+        <Checkbox
+          label="Autoscaling"
+          checked={values.autoscaling}
+          onChange={(val) => {
+            handleChange('autoscaling')(dummyEvent(val));
+          }}
+        />
+        {values.autoscaling ? (
+          <div className="flex flex-col gap-3xl">
+            <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default">
+              <div className="flex flex-row gap-lg items-center">
+                <div className="bodyMd-medium text-text-default">
+                  Select min and max replicas
+                </div>
+                <code className="bodyMd text-text-soft flex-1 text-end">
+                  {values.minReplicas || 75} min - {values.maxReplicas || 75}{' '}
+                  max
+                </code>
+              </div>
+              <Slider
+                step={1}
+                min={1}
+                max={10}
+                value={[values.minReplicas, values.maxReplicas]}
+                onChange={(value) => {
+                  if (Array.isArray(value)) {
+                    handleChange('minReplicas')(dummyEvent(value[0]));
+                    handleChange('maxReplicas')(dummyEvent(value[1]));
+                  }
+                }}
               />
             </div>
-          ),
-        }}
-      >
-        <div className="flex flex-col gap-3xl">
-          <Checkbox
-            label="Autoscaling"
-            checked={values.autoscaling}
-            onChange={(val) => {
-              handleChange('autoscaling')(dummyEvent(val));
-            }}
-          />
-          {values.autoscaling ? (
-            <div className="flex flex-col gap-3xl">
-              <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default">
+            <div className="flex flex-row justify-between gap-3xl">
+              <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default w-full">
                 <div className="flex flex-row gap-lg items-center">
                   <div className="bodyMd-medium text-text-default">
-                    Select min and max replicas
+                    Select CPU
                   </div>
                   <code className="bodyMd text-text-soft flex-1 text-end">
-                    {values.minReplicas || 75} min - {values.maxReplicas || 75}{' '}
-                    max
+                    {values.cpuThreshold || 75}% CPU
                   </code>
                 </div>
                 <Slider
                   step={1}
-                  min={1}
-                  max={10}
-                  value={[values.minReplicas, values.maxReplicas]}
+                  min={50}
+                  max={95}
+                  value={values.cpuThreshold}
                   onChange={(value) => {
-                    if (Array.isArray(value)) {
-                      handleChange('minReplicas')(dummyEvent(value[0]));
-                      handleChange('maxReplicas')(dummyEvent(value[1]));
-                    }
+                    handleChange('cpuThreshold')(dummyEvent(value));
                   }}
                 />
               </div>
-              <div className="flex flex-row justify-between gap-3xl">
-                <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default w-full">
-                  <div className="flex flex-row gap-lg items-center">
-                    <div className="bodyMd-medium text-text-default">
-                      Select CPU
-                    </div>
-                    <code className="bodyMd text-text-soft flex-1 text-end">
-                      {values.cpuThreshold || 75}% CPU
-                    </code>
-                  </div>
-                  <Slider
-                    step={1}
-                    min={50}
-                    max={95}
-                    value={values.cpuThreshold}
-                    onChange={(value) => {
-                      handleChange('cpuThreshold')(dummyEvent(value));
-                    }}
-                  />
-                </div>
-                <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default w-full">
-                  <div className="flex flex-row gap-lg items-center">
-                    <div className="bodyMd-medium text-text-default">
-                      Select Memory
-                    </div>
-                    <code className="bodyMd text-text-soft flex-1 text-end">
-                      {values.memoryThreshold || 75}% Memory
-                    </code>
+              <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default w-full">
+                <div className="flex flex-row gap-lg items-center">
+                  <div className="bodyMd-medium text-text-default">
+                    Select Memory
                   </div>
-                  <Slider
-                    step={1}
-                    min={50}
-                    max={95}
-                    value={values.memoryThreshold}
-                    onChange={(value) => {
-                      handleChange('memoryThreshold')(dummyEvent(value));
-                    }}
-                  />
+                  <code className="bodyMd text-text-soft flex-1 text-end">
+                    {values.memoryThreshold || 75}% Memory
+                  </code>
                 </div>
+                <Slider
+                  step={1}
+                  min={50}
+                  max={95}
+                  value={values.memoryThreshold}
+                  onChange={(value) => {
+                    handleChange('memoryThreshold')(dummyEvent(value));
+                  }}
+                />
               </div>
             </div>
-          ) : (
-            <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default">
-              <div className="flex flex-row gap-lg items-center">
-                <div className="bodyMd-medium text-text-default">
-                  Select replicas
-                </div>
-                <code className="bodyMd text-text-soft flex-1 text-end">
-                  {values.replicas || 1} replicas
-                </code>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-md p-2xl rounded border border-border-default bg-surface-basic-default">
+            <div className="flex flex-row gap-lg items-center">
+              <div className="bodyMd-medium text-text-default">
+                Select replicas
               </div>
-              <Slider
-                step={1}
-                min={1}
-                max={10}
-                value={values.replicas}
-                onChange={(value) => {
-                  handleChange('replicas')(dummyEvent(value));
-                }}
-              />
+              <code className="bodyMd text-text-soft flex-1 text-end">
+                {values.replicas || 1} replicas
+              </code>
             </div>
-          )}
-        </div>
-      </Wrapper>
-    </div>
+            <Slider
+              step={1}
+              min={1}
+              max={10}
+              value={values.replicas}
+              onChange={(value) => {
+                handleChange('replicas')(dummyEvent(value));
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </AppWrapper>
   );
 };
 export default SettingCompute;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx
index 26ff9fa4a..3646b719a 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx
@@ -11,7 +11,6 @@ import { useAppState } from '~/console/page-components/app-states';
 import useForm from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { NonNullableString } from '~/root/lib/types/common';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
 import {
   ArrowRight,
   ChevronLeft,
@@ -193,7 +192,6 @@ export const ConfigMounts = () => {
   const [showCSDialog, setShowCSDialog] = useState<IShowDialog>(null);
 
   // for updating
-  const { hasChanges } = useUnsavedChanges();
 
   const entry = Yup.object({
     type: Yup.string().oneOf(['config', 'secret']).notRequired(),
@@ -208,12 +206,7 @@ export const ConfigMounts = () => {
     mountPath: Yup.string().required(),
   });
 
-  const {
-    values,
-    setValues,
-    submit,
-    resetValues: resetAppValue,
-  } = useForm({
+  const { values, setValues, submit } = useForm({
     initialValues: getContainer().volumes,
     validationSchema: Yup.array(entry),
     onSubmit: (val) => {
@@ -229,13 +222,6 @@ export const ConfigMounts = () => {
     submit();
   }, [values]);
 
-  // for updating
-  useEffect(() => {
-    if (!hasChanges) {
-      resetAppValue();
-    }
-  }, [hasChanges]);
-
   const addEntry = (val: IConfigMount) => {
     console.log('here', val);
     const tempVal = val || [];
@@ -294,7 +280,6 @@ export const ConfigMounts = () => {
         }),
     }),
     onSubmit: () => {
-      console.log('helre', eValues);
       if (eValues.value) {
         const ev: IConfigMount = {
           refName: eValues.value.refName,
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
index 6152d788d..31ac2a8c2 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
@@ -1,324 +1,14 @@
-import { TextInput } from '~/components/atoms/input';
 import { useAppState } from '~/console/page-components/app-states';
-import { keyconstants } from '~/console/server/r-utils/key-constants';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
-import {
-  parseName,
-  parseNodes,
-  parseUpdateOrCreatedBy,
-  parseUpdateOrCreatedOn,
-} from '~/console/server/r-utils/common';
+import { parseName } from '~/console/server/r-utils/common';
 import { FadeIn } from '~/console/page-components/util';
 import { NameIdView } from '~/console/components/name-id-view';
 import { BottomNavigation } from '~/console/components/commons';
 import { registryHost } from '~/lib/configs/base-url.cjs';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
-import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
-import { titleCase, useMapper } from '~/components/utils';
-import Tooltip from '~/components/atoms/tooltip';
-import { Chip, ChipGroup } from '~/components/atoms/chips';
-import { ArrowLeft, Spinner, XCircleFill } from '~/console/components/icons';
-import Popup from '~/components/molecule/popup';
-import { Dispatch, SetStateAction, useState } from 'react';
-import MultiStep, { useMultiStep } from '~/console/components/multi-step';
-import { IconButton } from '~/components/atoms/button';
-import ListV2 from '~/console/components/listV2';
-import {
-  ListItem,
-  ListTitle,
-} from '~/console/components/console-list-components';
 import { useParams } from '@remix-run/react';
+import RepoSelector from '~/console/page-components/app/components';
 
-type IRepoSelectDialogListItem = {
-  label: string;
-  value: string;
-  updateInfo: { author: string; time: string } | null;
-};
-const RepoSelectDialogList = ({
-  data,
-  onClick,
-  type,
-  selectedOption,
-}: {
-  data: IRepoSelectDialogListItem[];
-  onClick: (data: IRepoSelectDialogListItem) => void;
-  type: 'repo' | 'tags';
-  selectedOption: string;
-}) => {
-  return (
-    <ListV2.Root
-      data={{
-        headers: [
-          {
-            name: 'name',
-            render: () => 'Name',
-            className: 'flex-1',
-          },
-
-          {
-            render: () => (type === 'repo' ? 'Updated' : null),
-            name: 'updated',
-            className: 'w-[180px]',
-          },
-        ],
-        rows: data.map((r) => {
-          return {
-            onClick: () => onClick(r),
-            pressed: r.value === selectedOption,
-            columns: {
-              name: {
-                render: () => <ListTitle title={r.label} />,
-              },
-              ...(type === 'repo'
-                ? {
-                    updated: {
-                      render: () => (
-                        <ListItem
-                          data={`${r.updateInfo?.author}`}
-                          subtitle={r.updateInfo?.time}
-                        />
-                      ),
-                    },
-                  }
-                : {}),
-            },
-          };
-        }),
-      }}
-    />
-  );
-};
-
-const RepoSelectDialog = ({
-  open,
-  setOpen,
-  onChange,
-}: {
-  open: boolean;
-  setOpen: Dispatch<SetStateAction<boolean>>;
-  onChange?: (data: { repo: string; tag: string }) => void;
-}) => {
-  const [repoName, setRepoName] = useState('');
-  const [tag, setTag] = useState('');
-
-  const {
-    currentStep,
-    onNext,
-    onPrevious,
-    reset: resetStep,
-  } = useMultiStep({
-    totalSteps: 2,
-    defaultStep: 1,
-  });
-
-  const api = useConsoleApi();
-
-  const {
-    data,
-    isLoading: repoLoading,
-    error: repoLoadingError,
-  } = useCustomSwr('/repos', async () => {
-    return api.listRepo({});
-  });
-
-  const repos = useMapper(parseNodes(data), (val) => ({
-    label: val.name,
-    value: val.name,
-    updateInfo: {
-      author: `Updated by ${titleCase(parseUpdateOrCreatedBy(val))}`,
-      time: parseUpdateOrCreatedOn(val),
-    },
-  }));
-
-  const {
-    data: digestData,
-    isLoading: digestLoading,
-    error: digestError,
-  } = useCustomSwr(
-    () => (repoName ? `/digests_${repoName}` : null),
-    async () => {
-      return api.listDigest({ repoName });
-    }
-  );
-
-  const tags = useMapper(parseNodes(digestData), (val) => val.tags)
-    .flat()
-    .flatMap((f) => ({ label: f, value: f, updateInfo: null }));
-
-  const reset = () => {
-    setRepoName('');
-    setTag('');
-    resetStep();
-  };
-
-  return (
-    <Popup.Root show={open} onOpenChange={setOpen} className="!w-[900px]">
-      <Popup.Header showclose={false}>
-        <div className="flex flex-row items-center gap-lg">
-          {currentStep === 2 && (
-            <IconButton
-              size="sm"
-              icon={<ArrowLeft />}
-              variant="plain"
-              onClick={() => {
-                onPrevious();
-                reset();
-              }}
-            />
-          )}
-          <div className="flex-1">
-            {currentStep === 1 ? 'Select Repository' : 'Select tag'}
-          </div>
-          <div className="bodyMd text-text-strong font-normal">
-            {currentStep}/2
-          </div>
-        </div>
-      </Popup.Header>
-      <Popup.Content>
-        <div className="min-h-[40vh] h-full">
-          {true ? (
-            <div className="flex flex-col items-center justify-center gap-xl h-full">
-              <span className="animate-spin">
-                <Spinner color="currentColor" weight={2} size={24} />
-              </span>
-              <span className="text-text-soft bodyMd">Loading</span>
-            </div>
-          ) : (
-            <MultiStep.Root currentStep={currentStep}>
-              <MultiStep.Step step={1}>
-                <RepoSelectDialogList
-                  selectedOption=""
-                  data={repos}
-                  onClick={(d) => {
-                    setRepoName(d.value);
-                    onNext();
-                  }}
-                  type="repo"
-                />
-              </MultiStep.Step>
-              <MultiStep.Step step={2}>
-                <RepoSelectDialogList
-                  data={tags}
-                  selectedOption={tag}
-                  onClick={(t) => {
-                    setTag(t.value);
-                  }}
-                  type="tags"
-                />
-              </MultiStep.Step>
-            </MultiStep.Root>
-          )}
-        </div>
-      </Popup.Content>
-      <Popup.Footer>
-        <Popup.Button
-          closable={currentStep === 1}
-          content={currentStep === 1 ? 'Cancel' : 'Back'}
-          variant="basic"
-          onClick={() => {
-            onPrevious();
-            reset();
-          }}
-        />
-        <Popup.Button
-          type="submit"
-          disabled={currentStep === 1 || (!tag && currentStep === 2)}
-          content={currentStep === 2 ? 'Select' : 'Continue'}
-          variant="primary"
-          onClick={() => {
-            onChange?.({ repo: repoName, tag });
-            reset();
-            setOpen(false);
-          }}
-        />
-      </Popup.Footer>
-    </Popup.Root>
-  );
-};
-
-const RepoSelector = ({
-  tag,
-  repo,
-  onClear,
-  textValue,
-  onTextChanged,
-  onValueChange,
-}: {
-  tag: string;
-  repo: string;
-  onClear: () => void;
-  onTextChanged: () => void;
-  textValue: string;
-  onValueChange: (data: { repo: string; tag: string }) => void;
-}) => {
-  const [open, setOpen] = useState(false);
-  return (
-    <div className="flex-1">
-      {tag && repo && !textValue ? (
-        <div className="flex flex-col">
-          <div className="bodyMd-medium text-text-default pb-md">
-            <span className="h-4xl block flex items-center">Repository</span>
-          </div>
-          <div className="max-h-[43px] px-lg flex flex-row items-center rounded border border-border-default bg-surface-basic-default line-clamp-1">
-            <Tooltip.Root
-              className="!max-w-[400px]"
-              content={
-                <div className="flex-1 flex flex-row gap-md items-center py-xl px-lg bodyMd text-text-soft ">
-                  <span className="line-clamp-1">{repo}</span>
-                  <span>:</span>
-
-                  <span className="line-clamp-1">{tag}</span>
-                </div>
-              }
-            >
-              <div className="flex-1 flex flex-row gap-md items-center py-xl px-md bodyMd text-text-soft ">
-                <span className="line-clamp-1">{repo}</span>
-                <span>:</span>
-
-                <span className="line-clamp-1">{tag}</span>
-              </div>
-            </Tooltip.Root>
-            <button
-              aria-label="clear"
-              tabIndex={-1}
-              type="button"
-              className="outline-none p-lg text-text-default rounded-full"
-              onClick={onClear}
-            >
-              <XCircleFill size={16} color="currentColor" />
-            </button>
-          </div>
-        </div>
-      ) : (
-        <TextInput
-          placeholder="eg: nginx:latest"
-          value={textValue}
-          onChange={onTextChanged}
-          label="Repository"
-          size="lg"
-          suffix={
-            !textValue ? (
-              <ChipGroup onClick={() => setOpen(true)}>
-                <Chip
-                  label="Kloudlite repository"
-                  item="repo"
-                  type="CLICKABLE"
-                />
-              </ChipGroup>
-            ) : null
-          }
-          showclear={!!textValue}
-        />
-      )}
-      <RepoSelectDialog
-        open={open}
-        setOpen={setOpen}
-        onChange={onValueChange}
-      />
-    </div>
-  );
-};
 const AppDetail = () => {
   const { app, setApp, setPage, markPageAsCompleted, activeContIndex } =
     useAppState();
@@ -333,14 +23,19 @@ const AppDetail = () => {
         isNameError: false,
         imageUrl: app.spec.containers[activeContIndex]?.image || '',
         manualRepo: '',
-        repoAccountName:
-          app.metadata?.annotations?.[keyconstants.repoAccountName] || '',
       },
       validationSchema: Yup.object({
         name: Yup.string().required(),
         displayName: Yup.string().required(),
-        repoName: Yup.string().required(),
-        repoImageTag: Yup.string().required(),
+        imageUrl: Yup.string(),
+        manualRepo: Yup.string().when(['imageUrl'], ([imageUrl], schema) => {
+          const regex = /^(\w+):(\w+)$/;
+
+          if (!imageUrl) {
+            return schema.required().matches(regex, 'Invalid image format');
+          }
+          return schema;
+        }),
       }),
 
       onSubmit: async (val) => {
@@ -351,16 +46,16 @@ const AppDetail = () => {
               ...a.metadata,
               annotations: {
                 ...(a.metadata?.annotations || {}),
-                [keyconstants.repoAccountName]: val.repoAccountName,
               },
               name: val.name,
             },
             displayName: val.displayName,
             spec: {
+              ...a.spec,
               containers: [
                 {
                   ...(a.spec.containers?.[0] || {}),
-                  image: val.imageUrl,
+                  image: val.imageUrl || val.manualRepo,
                   name: 'container-0',
                 },
               ],
@@ -414,12 +109,16 @@ const AppDetail = () => {
             });
           }}
           textValue={values.manualRepo}
-          onTextChanged={handleChange('manualRepo')}
+          onTextChanged={(e) => {
+            handleChange('manualRepo')(e);
+            handleChange('imageUrl')(dummyEvent(''));
+          }}
           onValueChange={({ repo, tag }) => {
             handleChange('imageUrl')(
               dummyEvent(`${registryHost}/${account}/${repo}:${tag}`)
             );
           }}
+          error={errors.manualRepo}
         />
       </div>
       <BottomNavigation
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx
index 9511a074d..6f98303a1 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx
@@ -11,7 +11,6 @@ import { useAppState } from '~/console/page-components/app-states';
 import useForm from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { NonNullableString } from '~/root/lib/types/common';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
 import {
   ArrowRight,
   ChevronLeft,
@@ -210,9 +209,6 @@ export const EnvironmentVariables = () => {
 
   const [showCSDialog, setShowCSDialog] = useState<IShowDialog>(null);
 
-  // for updating
-  const { hasChanges } = useUnsavedChanges();
-
   const entry = Yup.object({
     type: Yup.string().oneOf(['config', 'secret']).notRequired(),
     key: Yup.string().required(),
@@ -235,12 +231,7 @@ export const EnvironmentVariables = () => {
       .notRequired(),
   });
 
-  const {
-    values,
-    setValues,
-    submit,
-    resetValues: resetAppValue,
-  } = useForm({
+  const { values, setValues, submit } = useForm({
     initialValues: getContainer().env,
     validationSchema: Yup.array(entry),
     onSubmit: (val) => {
@@ -255,13 +246,6 @@ export const EnvironmentVariables = () => {
     submit();
   }, [values]);
 
-  // for updating
-  useEffect(() => {
-    if (!hasChanges) {
-      resetAppValue();
-    }
-  }, [hasChanges]);
-
   const addEntry = (val: IEnvVariable) => {
     const tempVal = val || [];
     setValues((v = []) => {
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
index 01bae8bec..6b9d00118 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
@@ -115,14 +115,14 @@ const AppReview = () => {
           </div>
         </ReviewComponent>
 
-        {app.spec.nodeSelector[keyconstants.nodepoolName] !== '' && (
+        {!!app.spec.nodeSelector?.[keyconstants.nodepoolName] && (
           <ReviewComponent title="Nodepool Details" onEdit={() => {}}>
             <div className="flex flex-col p-xl gap-md rounded border border-border-default">
               <div className="bodyMd-semibold text-text-default">
                 Nodepool Selector
               </div>
               <div className="bodySm text-text-soft">
-                {app.spec.nodeSelector[keyconstants.nodepoolName]}
+                {app.spec.nodeSelector?.[keyconstants.nodepoolName]}
               </div>
             </div>
           </ReviewComponent>
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx
index 691f2656f..9dd7fa79f 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx
@@ -12,7 +12,7 @@ import FillerAppCompute from '~/console/assets/app/filler-compute';
 import FillerAppEnv from '~/console/assets/app/filler-env';
 import FillerAppNetwork from '~/console/assets/app/filler-network';
 import FillerAppReview from '~/console/assets/app/filler-review';
-import AppCompute from './app-compute';
+import AppCompute from '~/console/page-components/app/compute';
 import AppDetail from './app-detail';
 import AppEnvironment from './app-environment';
 import AppNetwork from './app-network';
@@ -66,7 +66,7 @@ const AppComp = () => {
           <AppDetail />
         </MultiStepProgress.Step>
         <MultiStepProgress.Step step={2} label="Compute">
-          <AppCompute />
+          <AppCompute mode="new" />
         </MultiStepProgress.Step>
         <MultiStepProgress.Step step={3} label="Environment">
           <AppEnvironment />

From 66d6bfda40777fcef63bf058a2e2495da44aa230 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Tue, 19 Mar 2024 16:46:26 +0530
Subject: [PATCH 57/66] fix(helm charts): - namespace list in showing - signout
 button in new account will only show when there will be no account

---
 src/apps/console/routes/_a+/new-team.tsx      | 26 ++++++++++++-------
 .../server/gql/queries/namespace-queries.ts   | 20 +-------------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/apps/console/routes/_a+/new-team.tsx b/src/apps/console/routes/_a+/new-team.tsx
index 228a27800..5ef751d1d 100644
--- a/src/apps/console/routes/_a+/new-team.tsx
+++ b/src/apps/console/routes/_a+/new-team.tsx
@@ -17,11 +17,17 @@ import { SignOut } from '@jengaicons/react';
 import { authBaseUrl } from '~/root/lib/configs/base-url.cjs';
 import { useExternalRedirect } from '~/root/lib/client/helpers/use-redirect';
 import { Button } from '~/components/atoms/button';
+import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
 
 const NewAccount = () => {
   const api = useConsoleApi();
   const navigate = useNavigate();
   const user = useDataFromMatches<UserMe>('user', {});
+
+  const { data: accountsData } = useCustomSwr('/list_accounts', async () => {
+    return api.listAccounts({});
+  });
+
   const { values, handleChange, errors, isLoading, handleSubmit } = useForm({
     initialValues: {
       name: '',
@@ -64,15 +70,17 @@ const NewAccount = () => {
         fillerImage={<FillerCreateTeam />}
         title="Setup your account!"
         action={
-          <Button
-            variant="plain"
-            suffix={<SignOut />}
-            size="sm"
-            content="Sign Out"
-            onClick={() => {
-              eNavigate(`${authBaseUrl}/logout`);
-            }}
-          />
+          accountsData?.length === 0 && (
+            <Button
+              variant="plain"
+              suffix={<SignOut />}
+              size="sm"
+              content="Sign Out"
+              onClick={() => {
+                eNavigate(`${authBaseUrl}/logout`);
+              }}
+            />
+          )
         }
         subTitle="Simplify Collaboration and Enhance Productivity with Kloudlite
   teams"
diff --git a/src/apps/console/server/gql/queries/namespace-queries.ts b/src/apps/console/server/gql/queries/namespace-queries.ts
index d124d869d..4213e3f66 100644
--- a/src/apps/console/server/gql/queries/namespace-queries.ts
+++ b/src/apps/console/server/gql/queries/namespace-queries.ts
@@ -49,24 +49,6 @@ export const namespaceQueries = (executor: IExecutor) => ({
               spec {
                 finalizers
               }
-              status {
-                conditions {
-                  lastTransitionTime
-                  message
-                  reason
-                  status
-                  type
-                }
-                phase
-              }
-              syncStatus {
-                action
-                error
-                lastSyncedAt
-                recordVersion
-                state
-                syncScheduledAt
-              }
               updateTime
             }
           }
@@ -83,7 +65,7 @@ export const namespaceQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleListNamespacesQuery) =>
         data.infra_listNamespaces,
-      vars(_: ConsoleListNamespacesQueryVariables) { },
+      vars(_: ConsoleListNamespacesQueryVariables) {},
     }
   ),
 });

From 461de01dd9effff297af7431d025194ba8db4e4b Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Tue, 19 Mar 2024 19:15:04 +0530
Subject: [PATCH 58/66] remove extra button for bound storage

---
 .../infra+/$cluster+/helm-charts/handle-helm-chart.tsx       | 3 +--
 .../infra+/$cluster+/storage/storage-resources-v2.tsx        | 5 +++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
index f1a24ce9e..43a28cbe1 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/helm-charts/handle-helm-chart.tsx
@@ -167,9 +167,8 @@ const Root = (props: IDialog) => {
   } = useCustomSwr('/infra_namespaces', async () => {
     if (!cluster) {
       throw new Error('Cluster is required!.');
-    } else {
-      return api.listNamespaces({ clusterName: cluster });
     }
+    return api.listNamespaces({ clusterName: cluster });
   });
 
   const namespaces = useMapper(parseNodes(namespacesData), (val) => {
diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources-v2.tsx
index e50738813..0f1030a0d 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/storage/storage-resources-v2.tsx
@@ -55,7 +55,8 @@ type IExtraButton = {
 };
 
 const ExtraButton = ({ onAction, item }: IExtraButton) => {
-  return (
+  const phase = item.status?.phase;
+  return phase !== 'Bound' ? (
     <ResourceExtraAction
       options={[
         {
@@ -68,7 +69,7 @@ const ExtraButton = ({ onAction, item }: IExtraButton) => {
         },
       ]}
     />
-  );
+  ) : null;
 };
 
 interface IResource {

From 45b04f2075be31915a9a8b6f11ab3e0b43d05d07 Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Tue, 19 Mar 2024 19:31:45 +0530
Subject: [PATCH 59/66] Fixed gql queries and implemented new design for build
 runs

---
 gql-queries-generator/doc/queries.graphql     | 129 ++++++++--
 src/apps/console/components/listV2.tsx        |   4 +-
 src/apps/console/components/sync-status.tsx   |   1 -
 .../_main+/$account+/repo+/$repo+/_layout.tsx |  18 +-
 .../repo+/$repo+/build+/$build+/_index.tsx    |   5 +
 .../repo+/$repo+/build+/$build+/_layout.tsx   |  40 +++
 .../buildruns/buildruns-resources.tsx         | 176 +++++++++++--
 .../{ => build+/$build+}/buildruns/route.tsx  |   7 +-
 .../{ => build+/$build+}/buildruns/tools.tsx  |   0
 .../$repo+/build+/$build+/settings/_index.tsx |   5 +
 .../repo+/$repo+/builds/build-resources.tsx   |  99 ++++---
 .../repo+/$repo+/new-build/route.tsx          |   2 +-
 .../$account+/repo+/$repo+/settings/route.tsx |   2 +-
 .../_main+/$account+/settings+/_layout.tsx    |  34 +--
 .../console/server/gql/queries/app-queries.ts |   2 +
 .../server/gql/queries/build-queries.ts       |  33 +++
 .../server/gql/queries/build-run-queries.tsx  |  38 ++-
 .../server/gql/queries/cluster-queries.ts     |   2 +
 .../server/gql/queries/environment-queries.ts |   2 +
 .../server/gql/queries/helm-chart-queries.ts  |  12 +
 .../gql/queries/managed-resources-queries.ts  |   6 +
 .../project-managed-services-queries.ts       |  12 +
 .../server/gql/queries/project-queries.ts     |   2 +
 .../server/gql/queries/router-queries.ts      |   2 +
 src/generated/gql/sdl.graphql                 |  80 ++++--
 src/generated/gql/server.ts                   | 243 +++++++++++++-----
 26 files changed, 745 insertions(+), 211 deletions(-)
 create mode 100644 src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/_index.tsx
 create mode 100644 src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/_layout.tsx
 rename src/apps/console/routes/_main+/$account+/repo+/$repo+/{ => build+/$build+}/buildruns/buildruns-resources.tsx (60%)
 rename src/apps/console/routes/_main+/$account+/repo+/$repo+/{ => build+/$build+}/buildruns/route.tsx (94%)
 rename src/apps/console/routes/_main+/$account+/repo+/$repo+/{ => build+/$build+}/buildruns/tools.tsx (100%)
 create mode 100644 src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/settings/_index.tsx

diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
index 39782b158..055d5b321 100644
--- a/gql-queries-generator/doc/queries.graphql
+++ b/gql-queries-generator/doc/queries.graphql
@@ -136,6 +136,7 @@ query consoleGetProject($name: String!) {
       checks
       checkList {
         description
+        debug
         name
         title
       }
@@ -200,6 +201,7 @@ query consoleListProjects($search: SearchProjects, $pq: CursorPaginationIn) {
           checks
           checkList {
             description
+            debug
             name
             title
           }
@@ -289,6 +291,7 @@ query consoleListClusters($search: SearchCluster, $pagination: CursorPaginationI
           checks
           checkList {
             description
+            debug
             name
             title
           }
@@ -426,6 +429,7 @@ query consoleGetCluster($name: String!) {
       checks
       checkList {
         description
+        debug
         name
         title
       }
@@ -789,6 +793,7 @@ query consoleGetEnvironment($projectName: String!, $name: String!) {
       checks
       checkList {
         description
+        debug
         name
         title
       }
@@ -863,6 +868,7 @@ query consoleListEnvironments($projectName: String!, $search: SearchEnvironments
           checks
           checkList {
             description
+            debug
             name
             title
           }
@@ -1061,6 +1067,7 @@ query consoleGetApp($projectName: String!, $envName: String!, $name: String!) {
     status {
       checkList {
         description
+        debug
         title
         name
       }
@@ -1195,6 +1202,7 @@ query consoleListApps($projectName: String!, $envName: String!, $search: SearchA
           }
           checkList {
             description
+            debug
             title
             name
           }
@@ -1310,6 +1318,7 @@ query consoleListRouters($projectName: String!, $envName: String!, $search: Sear
           checks
           checkList {
             description
+            debug
             name
             title
           }
@@ -1407,6 +1416,7 @@ query consoleGetRouter($projectName: String!, $envName: String!, $name: String!)
       checks
       checkList {
         description
+        debug
         name
         title
       }
@@ -2019,6 +2029,39 @@ query consoleListBuilds($repoName: String!, $search: SearchBuilds, $pagination:
         }
         status
         updateTime
+        latestBuildRun {
+          recordVersion
+          status {
+            checkList {
+              debug
+              description
+              name
+              title
+            }
+            checks
+            isReady
+            lastReadyGeneration
+            lastReconcileTime
+            message {
+              RawMessage
+            }
+            resources {
+              apiVersion
+              kind
+              name
+              namespace
+            }
+          }
+          syncStatus {
+            action
+            error
+            lastSyncedAt
+            recordVersion
+            state
+            syncScheduledAt
+          }
+          markedForDeletion
+        }
       }
     }
     pageInfo {
@@ -2731,8 +2774,8 @@ mutation consoleDeletePV($clusterName: String!, $pvName: String!) {
   infra_deletePV(clusterName: $clusterName, pvName: $pvName)
 }
 
-query consoleListBuildRuns($repoName: String!, $search: SearchBuildRuns, $pq: CursorPaginationIn) {
-  cr_listBuildRuns(repoName: $repoName, search: $search, pq: $pq) {
+query consoleListBuildRuns($buildID: ID!, $search: SearchBuildRuns, $pq: CursorPaginationIn) {
+  cr_listBuildRuns(buildID: $buildID, search: $search, pq: $pq) {
     edges {
       cursor
       node {
@@ -2740,6 +2783,7 @@ query consoleListBuildRuns($repoName: String!, $search: SearchBuildRuns, $pq: Cu
         clusterName
         creationTime
         markedForDeletion
+        recordVersion
         metadata {
           annotations
           creationTimestamp
@@ -2773,6 +2817,12 @@ query consoleListBuildRuns($repoName: String!, $search: SearchBuildRuns, $pq: Cu
         }
         status {
           checks
+          checkList {
+            description
+            debug
+            name
+            title
+          }
           isReady
           lastReadyGeneration
           lastReconcileTime
@@ -2786,6 +2836,14 @@ query consoleListBuildRuns($repoName: String!, $search: SearchBuildRuns, $pq: Cu
             namespace
           }
         }
+        syncStatus {
+          action
+          error
+          lastSyncedAt
+          recordVersion
+          state
+          syncScheduledAt
+        }
         updateTime
       }
     }
@@ -2799,11 +2857,12 @@ query consoleListBuildRuns($repoName: String!, $search: SearchBuildRuns, $pq: Cu
   }
 }
 
-query consoleGetBuildRun($repoName: String!, $buildRunName: String!) {
-  cr_getBuildRun(repoName: $repoName, buildRunName: $buildRunName) {
+query consoleGetBuildRun($buildID: ID!, $buildRunName: String!) {
+  cr_getBuildRun(buildID: $buildID, buildRunName: $buildRunName) {
     clusterName
     creationTime
     markedForDeletion
+    recordVersion
     metadata {
       annotations
       creationTimestamp
@@ -2837,6 +2896,12 @@ query consoleGetBuildRun($repoName: String!, $buildRunName: String!) {
     }
     status {
       checks
+      checkList {
+        description
+        debug
+        name
+        title
+      }
       isReady
       lastReadyGeneration
       lastReconcileTime
@@ -2850,6 +2915,14 @@ query consoleGetBuildRun($repoName: String!, $buildRunName: String!) {
         namespace
       }
     }
+    syncStatus {
+      action
+      error
+      lastSyncedAt
+      recordVersion
+      state
+      syncScheduledAt
+    }
     updateTime
   }
 }
@@ -2993,6 +3066,12 @@ query consoleGetProjectMSv($projectName: String!, $name: String!) {
     }
     status {
       checks
+      checkList {
+        description
+        debug
+        title
+        name
+      }
       isReady
       lastReadyGeneration
       lastReconcileTime
@@ -3067,6 +3146,12 @@ query consoleListProjectMSvs($projectName: String!, $search: SearchProjectManage
         }
         status {
           checks
+          checkList {
+            description
+            debug
+            title
+            name
+          }
           isReady
           lastReadyGeneration
           lastReconcileTime
@@ -3309,6 +3394,12 @@ query consoleListManagedResources($projectName: String!, $envName: String!, $sea
         }
         status {
           checks
+          checkList {
+            description
+            debug
+            name
+            title
+          }
           isReady
           lastReadyGeneration
           lastReconcileTime
@@ -3384,6 +3475,12 @@ query consoleGetHelmChart($clusterName: String!, $name: String!) {
     }
     status {
       checks
+      checkList {
+        description
+        debug
+        title
+        name
+      }
       isReady
       lastReadyGeneration
       lastReconcileTime
@@ -3441,6 +3538,12 @@ query consoleListHelmChart($clusterName: String!, $search: SearchHelmRelease, $p
         }
         status {
           checks
+          checkList {
+            description
+            debug
+            title
+            name
+          }
           isReady
           lastReadyGeneration
           lastReconcileTime
@@ -3529,24 +3632,6 @@ query consoleListNamespaces($clusterName: String!) {
         spec {
           finalizers
         }
-        status {
-          conditions {
-            lastTransitionTime
-            message
-            reason
-            status
-            type
-          }
-          phase
-        }
-        syncStatus {
-          action
-          error
-          lastSyncedAt
-          recordVersion
-          state
-          syncScheduledAt
-        }
         updateTime
       }
     }
diff --git a/src/apps/console/components/listV2.tsx b/src/apps/console/components/listV2.tsx
index 841e6545f..330a7ebc4 100644
--- a/src/apps/console/components/listV2.tsx
+++ b/src/apps/console/components/listV2.tsx
@@ -141,9 +141,7 @@ const RowBase = ({
       'bg-surface-basic-pressed': pressed,
       'cursor-default': !!disabled,
     },
-    hideDetailSeperator
-      ? ''
-      : '[&:not(:last-child)]:border-b border-border-default'
+    '[&:not(:last-child)]:border-b border-border-default'
   );
 
   const css = cn(
diff --git a/src/apps/console/components/sync-status.tsx b/src/apps/console/components/sync-status.tsx
index b025b8b80..8e5dd7891 100644
--- a/src/apps/console/components/sync-status.tsx
+++ b/src/apps/console/components/sync-status.tsx
@@ -16,7 +16,6 @@ import {
 import { Badge } from '~/components/atoms/badge';
 
 interface IStatusMetaV2 {
-  metadata?: { generation: number };
   recordVersion: number;
   markedForDeletion?: boolean;
   status?: {
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
index caf263886..8100dd6ae 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
@@ -5,13 +5,7 @@ import {
   useOutletContext,
   useParams,
 } from '@remix-run/react';
-import {
-  ChevronRight,
-  GearSix,
-  GitMerge,
-  NoOps,
-  Nodeless,
-} from '@jengaicons/react';
+import { ChevronRight, GearSix, GitMerge, Nodeless } from '@jengaicons/react';
 import Breadcrum from '~/console/components/breadcrum';
 import { CommonTabs } from '~/console/components/common-navbar-tabs';
 
@@ -75,16 +69,6 @@ const Tabs = () => {
           value: '/builds',
           to: '/builds',
         },
-        {
-          label: (
-            <span className="flex flex-row items-center gap-lg">
-              <NoOps size={iconSize} />
-              Build Runs
-            </span>
-          ),
-          value: '/buildruns',
-          to: '/buildruns',
-        },
         {
           label: (
             <span className="flex flex-row items-center gap-lg">
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/_index.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/_index.tsx
new file mode 100644
index 000000000..b687cbb7e
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/_index.tsx
@@ -0,0 +1,5 @@
+import { redirect } from '@remix-run/node';
+
+export const loader = async () => {
+  return redirect('buildruns');
+};
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/_layout.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/_layout.tsx
new file mode 100644
index 000000000..54aa2a698
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/_layout.tsx
@@ -0,0 +1,40 @@
+import { Outlet, useOutletContext, useParams } from '@remix-run/react';
+import { CommonTabs } from '~/console/components/common-navbar-tabs';
+import SidebarLayout from '~/console/components/sidebar-layout';
+
+const Tabs = () => {
+  const { repo, account } = useParams();
+
+  return (
+    <CommonTabs
+      backButton={{
+        label: 'Builds Integrations',
+        to: `/${account}/repo/${repo}/builds`,
+      }}
+    />
+  );
+};
+
+export const handle = () => {
+  return {
+    navbar: <Tabs />,
+  };
+};
+
+const Settings = () => {
+  const rootContext = useOutletContext<any>();
+  const { build } = useParams();
+  return (
+    <SidebarLayout
+      navItems={[
+        { label: 'Build runs', value: 'buildruns' },
+        // { label: 'Settings', value: 'settings' },
+      ]}
+      parentPath={`/${build}`}
+    >
+      <Outlet context={{ ...rootContext }} />
+    </SidebarLayout>
+  );
+};
+
+export default Settings;
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/buildruns/buildruns-resources.tsx
similarity index 60%
rename from src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
rename to src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/buildruns/buildruns-resources.tsx
index e6637626d..fc78c4208 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/buildruns/buildruns-resources.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { cn, generateKey } from '~/components/utils';
 import {
   ListBody,
+  ListItem,
   ListTitle,
 } from '~/console/components/console-list-components';
 import DeleteDialog from '~/console/components/delete-dialog';
@@ -13,7 +14,7 @@ import {
   parseName,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
-import { useOutletContext } from '@remix-run/react';
+import { useOutletContext, useParams } from '@remix-run/react';
 import { IBuildRuns } from '~/console/server/gql/queries/build-run-queries';
 import AnimateHide from '~/components/atoms/animate-hide';
 import { Button } from '~/components/atoms/button';
@@ -28,7 +29,9 @@ import dayjs from 'dayjs';
 import LogComp from '~/root/lib/client/components/logger';
 import LogAction from '~/console/page-components/log-action';
 import { useDataState } from '~/console/page-components/common-state';
-import { IAccountContext } from '../../../_layout';
+import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
+import ListV2 from '~/console/components/listV2';
+import { SyncStatusV2 } from '~/console/components/sync-status';
 
 const RESOURCE_NAME = 'build run';
 type BaseType = ExtractNodeType<IBuildRuns>;
@@ -87,7 +90,7 @@ const GridView = ({ items }: IResource) => {
   );
 };
 
-const ListItem = ({ item }: { item: BaseType }) => {
+const ListItem_ = ({ item }: { item: BaseType }) => {
   const [open, setOpen] = useState<boolean>(false);
   const { account } = useOutletContext<IAccountContext>();
 
@@ -95,7 +98,7 @@ const ListItem = ({ item }: { item: BaseType }) => {
     item.metadata.annotations = {};
   }
 
-  const commitHash = item.metadata?.annotations['github.com/commit'];
+  const commitHash = item.metadata?.annotations?.['github.com/commit'];
 
   // eslint-disable-next-line no-nested-ternary
   const state: 'running' | 'done' | 'error' = item.status?.isReady
@@ -154,7 +157,7 @@ const ListItem = ({ item }: { item: BaseType }) => {
               subtitle={
                 <div className="flex items-center gap-xl pt-md">
                   <div>
-                    {`#${commitHash.substring(
+                    {`#${commitHash?.substring(
                       commitHash.length - 7,
                       commitHash.length
                     )}`}
@@ -214,27 +217,152 @@ const ListItem = ({ item }: { item: BaseType }) => {
     </div>
   );
 };
-const ListView = ({ items }: IResource) => {
+
+const ListView = ({ items }: { items: BaseType[] }) => {
+  const [open, setOpen] = useState<string>('');
+
+  const { account } = useParams();
+
+  const { state: st } = useDataState<{
+    linesVisible: boolean;
+    timestampVisible: boolean;
+  }>('logs');
+
   return (
-    <List.Root>
-      {items.map((item, index) => {
-        const { name, id } = parseItem(item);
-        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        return (
-          <List.Row
-            key={id}
-            className="!p-3xl"
-            columns={[
-              {
-                key: generateKey(keyPrefix, name + id),
-                className: 'w-full',
-                render: () => <ListItem item={item} />,
+    <ListV2.Root
+      data={{
+        headers: [
+          {
+            render: () => (
+              <div className="flex flex-row">
+                <span className="w-[48px]" />
+                Name
+              </div>
+            ),
+            name: 'name',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'logs',
+            className: 'min-w-[180px] flex-1 flex items-center justify-center',
+          },
+          {
+            render: () => 'Status',
+            name: 'status',
+            className: 'min-w-[30px] flex items-center justify-center flex-1',
+          },
+          {
+            render: () => 'Updated',
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+        ],
+        rows: items.map((item) => {
+          const { name, updateInfo } = parseItem(item);
+
+          if (item.metadata && !item.metadata.annotations) {
+            item.metadata.annotations = {};
+          }
+
+          const isLatest = dayjs(item.updateTime).isAfter(
+            dayjs().subtract(3, 'hour')
+          );
+
+          const commitHash = item.metadata?.annotations?.['github.com/commit'];
+
+          return {
+            columns: {
+              name: {
+                render: () => (
+                  <div className="flex flex-col">
+                    <ListTitle title={name} />
+
+                    <div className="flex items-center gap-xl pt-md bodySm text-text-soft pulsable">
+                      <div>
+                        {`#${commitHash?.substring(
+                          commitHash.length - 7,
+                          commitHash.length
+                        )}`}
+                      </div>
+                      <div className="flex items-center gap-md">
+                        <GitBranch size={12} />
+                        {item.metadata?.annotations?.['github.com/branch'] ||
+                          ''}
+                      </div>
+
+                      <div className="flex items-center gap-md">
+                        {item.spec?.registry.repo.tags.map((tag) => (
+                          <div className="flex items-center gap-md" key={tag}>
+                            <Tag size={12} />
+                            {tag}{' '}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                ),
               },
-            ]}
-          />
-        );
-      })}
-    </List.Root>
+
+              logs: {
+                render: () =>
+                  isLatest ? (
+                    <Button
+                      size="sm"
+                      variant="basic"
+                      content={open === item.id ? 'Hide Logs' : 'Show Logs'}
+                      onClick={(e) => {
+                        e.preventDefault();
+
+                        setOpen((s) => {
+                          if (s === item.id) {
+                            return '';
+                          }
+                          return item.id;
+                        });
+                      }}
+                    />
+                  ) : null,
+              },
+              status: {
+                render: () => <SyncStatusV2 item={item} />,
+              },
+              updated: {
+                render: () => <ListItem data={updateInfo.time} />,
+              },
+            },
+
+            detail: (
+              <AnimateHide
+                onClick={(e) => e.preventDefault()}
+                show={open === item.id}
+                className="w-full"
+              >
+                <div className="w-full flex pb-2xl justify-center items-center pt-4xl">
+                  <LogComp
+                    {...{
+                      dark: true,
+                      width: '100%',
+                      height: '40rem',
+                      title: 'Logs',
+                      hideLineNumber: !st.linesVisible,
+                      hideTimestamp: !st.timestampVisible,
+                      actionComponent: <LogAction />,
+                      websocket: {
+                        account: account || '',
+                        cluster: item.clusterName,
+                        trackingId: item.id,
+                      },
+                    }}
+                  />
+                </div>
+              </AnimateHide>
+            ),
+            hideDetailSeperator: true,
+          };
+        }),
+      }}
+    />
   );
 };
 
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/buildruns/route.tsx
similarity index 94%
rename from src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/route.tsx
rename to src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/buildruns/route.tsx
index 3f153897d..a570ab742 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/buildruns/route.tsx
@@ -12,14 +12,15 @@ import BuildRunResources from './buildruns-resources';
 
 export const loader = async (ctx: IRemixCtx) => {
   ensureAccountSet(ctx);
-  const { repo } = ctx.params;
+  const { build } = ctx.params;
 
   const promise = pWrapper(async () => {
     const { data, errors } = await GQLServerHandler(ctx.request).listBuildRuns({
-      repoName: atob(repo),
+      buildID: build,
       pq: getPagination(ctx),
       search: getSearch(ctx),
     });
+    console.log(data);
     if (errors) {
       throw errors[0];
     }
@@ -47,7 +48,7 @@ const BuildRuns = () => {
         const { pageInfo, totalCount } = buildRunData;
         return (
           <Wrapper
-            header={{
+            secondaryHeader={{
               title: 'Build Runs',
             }}
             empty={{
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/tools.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/buildruns/tools.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/tools.tsx
rename to src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/buildruns/tools.tsx
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/settings/_index.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/settings/_index.tsx
new file mode 100644
index 000000000..190655480
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/build+/$build+/settings/_index.tsx
@@ -0,0 +1,5 @@
+const Settings = () => {
+  return 'settings';
+};
+
+export default Settings;
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/build-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/build-resources.tsx
index b61ec068e..e5e20752a 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/build-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/builds/build-resources.tsx
@@ -4,17 +4,14 @@ import {
   ArrowClockwise,
 } from '~/console/components/icons';
 import { useState } from 'react';
-import { Badge } from '~/components/atoms/badge';
 import { toast } from '~/components/molecule/toast';
 import { generateKey, titleCase } from '~/components/utils';
 import {
-  ListBody,
   ListItem,
   ListTitle,
 } from '~/console/components/console-list-components';
 import DeleteDialog from '~/console/components/delete-dialog';
 import Grid from '~/console/components/grid';
-import List from '~/console/components/list';
 import ListGridView from '~/console/components/list-grid-view';
 import ResourceExtraAction from '~/console/components/resource-extra-action';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
@@ -29,7 +26,9 @@ import { useReload } from '~/root/lib/client/helpers/reloader';
 import { handleError } from '~/root/lib/utils/common';
 import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
-import { useOutletContext } from '@remix-run/react';
+import { useOutletContext, Link } from '@remix-run/react';
+import { SyncStatusV2 } from '~/console/components/sync-status';
+import ListV2 from '~/console/components/listV2';
 import HandleBuild from './handle-builds';
 
 type BaseType = ExtractNodeType<IBuilds>;
@@ -146,33 +145,51 @@ const GridView = ({ items, onDelete, onEdit, onTrigger }: IResource) => {
 
 const ListView = ({ items, onDelete, onEdit, onTrigger }: IResource) => {
   return (
-    <List.Root>
-      {items.map((item, index) => {
-        const { name, id, status, updateInfo, cluster } = parseItem(item);
-        const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
-        return (
-          <List.Row
-            key={id}
-            className="!p-3xl"
-            columns={[
-              {
-                key: generateKey(keyPrefix, 0),
-                className: 'flex-1',
-                render: () => <ListTitle title={name} />,
+    <ListV2.Root
+      linkComponent={Link}
+      data={{
+        headers: [
+          {
+            render: () => 'Name',
+            name: 'name',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => 'Status',
+            name: 'status',
+            className: 'flex-1 min-w-[30px] flex items-center justify-center',
+          },
+          {
+            render: () => 'Cluster',
+            name: 'cluster',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => 'Updated',
+            name: 'updated',
+            className: 'w-[180px]',
+          },
+          {
+            render: () => '',
+            name: 'action',
+            className: 'w-[24px]',
+          },
+        ],
+        rows: items.map((i) => {
+          const { name, id, updateInfo, cluster } = parseItem(i);
+          return {
+            columns: {
+              name: {
+                render: () => <ListTitle title={name} subtitle={id} />,
               },
-              {
-                key: generateKey(keyPrefix, 'cluster'),
-                className: 'flex-1',
-                render: () => <ListBody data={cluster} />,
-              },
-              {
-                key: generateKey(keyPrefix, id, index, 'status'),
-                className: 'w-[300px]',
-                render: () => <Badge>{status}</Badge>,
+              status: {
+                render: () =>
+                  i.latestBuildRun ? (
+                    <SyncStatusV2 item={i.latestBuildRun} />
+                  ) : null,
               },
-              {
-                key: generateKey(keyPrefix, updateInfo.author),
-                className: 'w-[180px]',
+              cluster: { render: () => <ListItem data={cluster} /> },
+              updated: {
                 render: () => (
                   <ListItem
                     data={`${updateInfo.author}`}
@@ -180,27 +197,27 @@ const ListView = ({ items, onDelete, onEdit, onTrigger }: IResource) => {
                   />
                 ),
               },
-              {
-                key: generateKey(keyPrefix, 'action'),
+              action: {
                 render: () => (
                   <ExtraButton
-                    onDelete={() => {
-                      onDelete(item);
-                    }}
                     onEdit={() => {
-                      onEdit(item);
+                      onEdit(i);
+                    }}
+                    onDelete={() => {
+                      onDelete(i);
                     }}
                     onTrigger={() => {
-                      onTrigger(item);
+                      onTrigger(i);
                     }}
                   />
                 ),
               },
-            ]}
-          />
-        );
-      })}
-    </List.Root>
+            },
+            to: `../build/${i.id}/buildruns`,
+          };
+        }),
+      }}
+    />
   );
 };
 
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
index bdb2b7b67..def870412 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/new-build/route.tsx
@@ -116,7 +116,7 @@ const NewBuild = () => {
           if (e) {
             throw e[0];
           }
-          navigate(`/${account}/repo/${atob(repoName)}/builds`);
+          navigate(`/${account}/repo/${btoa(repoName)}/builds`);
         } catch (err) {
           handleError(err);
         }
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/route.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/route.tsx
index 5475e8cec..e9b7fa265 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/settings/route.tsx
@@ -7,7 +7,7 @@ const Settings = () => {
     <SidebarLayout
       navItems={[
         { label: 'General', value: 'general' },
-        { label: 'Build caches', value: 'buildcaches' },
+        // { label: 'Build caches', value: 'buildcaches' },
       ]}
       parentPath="/settings"
     >
diff --git a/src/apps/console/routes/_main+/$account+/settings+/_layout.tsx b/src/apps/console/routes/_main+/$account+/settings+/_layout.tsx
index 0a57718b3..f6aa333d9 100644
--- a/src/apps/console/routes/_main+/$account+/settings+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/settings+/_layout.tsx
@@ -1,23 +1,23 @@
-import {Outlet, useOutletContext} from '@remix-run/react';
+import { Outlet, useOutletContext } from '@remix-run/react';
 import SidebarLayout from '~/console/components/sidebar-layout';
 
 const Settings = () => {
-    const rootContext = useOutletContext();
-    return (
-        <SidebarLayout
-            navItems={[
-                {label: 'General', value: 'general'},
-                {label: 'User management', value: 'user-management'},
-                {label: 'Cloud providers', value: 'cloud-providers'},
-                {label: 'VPN', value: 'vpn'},
-            ]}
-            parentPath="/settings"
-            // headerTitle="Settings"
-            // headerActions={subNavAction.data}
-        >
-            <Outlet context={rootContext}/>
-        </SidebarLayout>
-    );
+  const rootContext = useOutletContext();
+  return (
+    <SidebarLayout
+      navItems={[
+        { label: 'General', value: 'general' },
+        { label: 'User management', value: 'user-management' },
+        { label: 'Cloud providers', value: 'cloud-providers' },
+        { label: 'VPN', value: 'vpn' },
+      ]}
+      parentPath="/settings"
+      // headerTitle="Settings"
+      // headerActions={subNavAction.data}
+    >
+      <Outlet context={rootContext} />
+    </SidebarLayout>
+  );
 };
 
 export default Settings;
diff --git a/src/apps/console/server/gql/queries/app-queries.ts b/src/apps/console/server/gql/queries/app-queries.ts
index 7f0a5def6..d79df4889 100644
--- a/src/apps/console/server/gql/queries/app-queries.ts
+++ b/src/apps/console/server/gql/queries/app-queries.ts
@@ -250,6 +250,7 @@ export const appQueries = (executor: IExecutor) => ({
           status {
             checkList {
               description
+              debug
               title
               name
             }
@@ -398,6 +399,7 @@ export const appQueries = (executor: IExecutor) => ({
                 }
                 checkList {
                   description
+                  debug
                   title
                   name
                 }
diff --git a/src/apps/console/server/gql/queries/build-queries.ts b/src/apps/console/server/gql/queries/build-queries.ts
index fe04641dd..1e35408d4 100644
--- a/src/apps/console/server/gql/queries/build-queries.ts
+++ b/src/apps/console/server/gql/queries/build-queries.ts
@@ -83,6 +83,39 @@ export const buildQueries = (executor: IExecutor) => ({
               }
               status
               updateTime
+              latestBuildRun {
+                recordVersion
+                status {
+                  checkList {
+                    debug
+                    description
+                    name
+                    title
+                  }
+                  checks
+                  isReady
+                  lastReadyGeneration
+                  lastReconcileTime
+                  message {
+                    RawMessage
+                  }
+                  resources {
+                    apiVersion
+                    kind
+                    name
+                    namespace
+                  }
+                }
+                syncStatus {
+                  action
+                  error
+                  lastSyncedAt
+                  recordVersion
+                  state
+                  syncScheduledAt
+                }
+                markedForDeletion
+              }
             }
           }
           pageInfo {
diff --git a/src/apps/console/server/gql/queries/build-run-queries.tsx b/src/apps/console/server/gql/queries/build-run-queries.tsx
index 3ba23ced9..21f944368 100644
--- a/src/apps/console/server/gql/queries/build-run-queries.tsx
+++ b/src/apps/console/server/gql/queries/build-run-queries.tsx
@@ -14,11 +14,11 @@ export const buildRunQueries = (executor: IExecutor) => ({
   listBuildRuns: executor(
     gql`
       query Cr_listBuildRuns(
-        $repoName: String!
+        $buildID: ID!
         $search: SearchBuildRuns
         $pq: CursorPaginationIn
       ) {
-        cr_listBuildRuns(repoName: $repoName, search: $search, pq: $pq) {
+        cr_listBuildRuns(buildID: $buildID, search: $search, pq: $pq) {
           edges {
             cursor
             node {
@@ -26,6 +26,7 @@ export const buildRunQueries = (executor: IExecutor) => ({
               clusterName
               creationTime
               markedForDeletion
+              recordVersion
               metadata {
                 annotations
                 creationTimestamp
@@ -59,6 +60,12 @@ export const buildRunQueries = (executor: IExecutor) => ({
               }
               status {
                 checks
+                checkList {
+                  description
+                  debug
+                  name
+                  title
+                }
                 isReady
                 lastReadyGeneration
                 lastReconcileTime
@@ -72,6 +79,14 @@ export const buildRunQueries = (executor: IExecutor) => ({
                   namespace
                 }
               }
+              syncStatus {
+                action
+                error
+                lastSyncedAt
+                recordVersion
+                state
+                syncScheduledAt
+              }
               updateTime
             }
           }
@@ -92,11 +107,12 @@ export const buildRunQueries = (executor: IExecutor) => ({
   ),
   getBuildRun: executor(
     gql`
-      query Cr_getBuildRun($repoName: String!, $buildRunName: String!) {
-        cr_getBuildRun(repoName: $repoName, buildRunName: $buildRunName) {
+      query Cr_getBuildRun($buildID: ID!, $buildRunName: String!) {
+        cr_getBuildRun(buildID: $buildID, buildRunName: $buildRunName) {
           clusterName
           creationTime
           markedForDeletion
+          recordVersion
           metadata {
             annotations
             creationTimestamp
@@ -130,6 +146,12 @@ export const buildRunQueries = (executor: IExecutor) => ({
           }
           status {
             checks
+            checkList {
+              description
+              debug
+              name
+              title
+            }
             isReady
             lastReadyGeneration
             lastReconcileTime
@@ -143,6 +165,14 @@ export const buildRunQueries = (executor: IExecutor) => ({
               namespace
             }
           }
+          syncStatus {
+            action
+            error
+            lastSyncedAt
+            recordVersion
+            state
+            syncScheduledAt
+          }
           updateTime
         }
       }
diff --git a/src/apps/console/server/gql/queries/cluster-queries.ts b/src/apps/console/server/gql/queries/cluster-queries.ts
index 1f109bdfb..2be22e392 100644
--- a/src/apps/console/server/gql/queries/cluster-queries.ts
+++ b/src/apps/console/server/gql/queries/cluster-queries.ts
@@ -102,6 +102,7 @@ export const clusterQueries = (executor: IExecutor) => ({
                 checks
                 checkList {
                   description
+                  debug
                   name
                   title
                 }
@@ -248,6 +249,7 @@ export const clusterQueries = (executor: IExecutor) => ({
             checks
             checkList {
               description
+              debug
               name
               title
             }
diff --git a/src/apps/console/server/gql/queries/environment-queries.ts b/src/apps/console/server/gql/queries/environment-queries.ts
index 2e6a8cd72..8528e00db 100644
--- a/src/apps/console/server/gql/queries/environment-queries.ts
+++ b/src/apps/console/server/gql/queries/environment-queries.ts
@@ -65,6 +65,7 @@ export const environmentQueries = (executor: IExecutor) => ({
             checks
             checkList {
               description
+              debug
               name
               title
             }
@@ -190,6 +191,7 @@ export const environmentQueries = (executor: IExecutor) => ({
                 checks
                 checkList {
                   description
+                  debug
                   name
                   title
                 }
diff --git a/src/apps/console/server/gql/queries/helm-chart-queries.ts b/src/apps/console/server/gql/queries/helm-chart-queries.ts
index 4ec38bbfb..21a5607d4 100644
--- a/src/apps/console/server/gql/queries/helm-chart-queries.ts
+++ b/src/apps/console/server/gql/queries/helm-chart-queries.ts
@@ -48,6 +48,12 @@ export const helmChartQueries = (executor: IExecutor) => ({
           }
           status {
             checks
+            checkList {
+              description
+              debug
+              title
+              name
+            }
             isReady
             lastReadyGeneration
             lastReconcileTime
@@ -118,6 +124,12 @@ export const helmChartQueries = (executor: IExecutor) => ({
               }
               status {
                 checks
+                checkList {
+                  description
+                  debug
+                  title
+                  name
+                }
                 isReady
                 lastReadyGeneration
                 lastReconcileTime
diff --git a/src/apps/console/server/gql/queries/managed-resources-queries.ts b/src/apps/console/server/gql/queries/managed-resources-queries.ts
index 616fd55e5..46d245962 100644
--- a/src/apps/console/server/gql/queries/managed-resources-queries.ts
+++ b/src/apps/console/server/gql/queries/managed-resources-queries.ts
@@ -167,6 +167,12 @@ export const managedResourceQueries = (executor: IExecutor) => ({
               }
               status {
                 checks
+                checkList {
+                  description
+                  debug
+                  name
+                  title
+                }
                 isReady
                 lastReadyGeneration
                 lastReconcileTime
diff --git a/src/apps/console/server/gql/queries/project-managed-services-queries.ts b/src/apps/console/server/gql/queries/project-managed-services-queries.ts
index 4a6e93a21..400ee27cd 100644
--- a/src/apps/console/server/gql/queries/project-managed-services-queries.ts
+++ b/src/apps/console/server/gql/queries/project-managed-services-queries.ts
@@ -63,6 +63,12 @@ export const projectManagedServicesQueries = (executor: IExecutor) => ({
           }
           status {
             checks
+            checkList {
+              description
+              debug
+              title
+              name
+            }
             isReady
             lastReadyGeneration
             lastReconcileTime
@@ -178,6 +184,12 @@ export const projectManagedServicesQueries = (executor: IExecutor) => ({
               }
               status {
                 checks
+                checkList {
+                  description
+                  debug
+                  title
+                  name
+                }
                 isReady
                 lastReadyGeneration
                 lastReconcileTime
diff --git a/src/apps/console/server/gql/queries/project-queries.ts b/src/apps/console/server/gql/queries/project-queries.ts
index 5745d8909..02c9a2510 100644
--- a/src/apps/console/server/gql/queries/project-queries.ts
+++ b/src/apps/console/server/gql/queries/project-queries.ts
@@ -92,6 +92,7 @@ export const projectQueries = (executor: IExecutor) => ({
             checks
             checkList {
               description
+              debug
               name
               title
             }
@@ -166,6 +167,7 @@ export const projectQueries = (executor: IExecutor) => ({
                 checks
                 checkList {
                   description
+                  debug
                   name
                   title
                 }
diff --git a/src/apps/console/server/gql/queries/router-queries.ts b/src/apps/console/server/gql/queries/router-queries.ts
index b94229ec2..c5d3557f1 100644
--- a/src/apps/console/server/gql/queries/router-queries.ts
+++ b/src/apps/console/server/gql/queries/router-queries.ts
@@ -159,6 +159,7 @@ export const routerQueries = (executor: IExecutor) => ({
                 checks
                 checkList {
                   description
+                  debug
                   name
                   title
                 }
@@ -271,6 +272,7 @@ export const routerQueries = (executor: IExecutor) => ({
             checks
             checkList {
               description
+              debug
               name
               title
             }
diff --git a/src/generated/gql/sdl.graphql b/src/generated/gql/sdl.graphql
index dab27d4f4..af6293ed5 100644
--- a/src/generated/gql/sdl.graphql
+++ b/src/generated/gql/sdl.graphql
@@ -51,12 +51,14 @@ scalar Any
 type App {
   accountName: String!
   apiVersion: String
+  build: Build
+  ciBuildId: ID
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
   enabled: Boolean
   environmentName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -76,6 +78,7 @@ type AppEdge {
 
 input AppIn {
   apiVersion: String
+  ciBuildId: ID
   displayName: String!
   enabled: Boolean
   kind: String
@@ -95,8 +98,9 @@ type Build {
   creationTime: Date!
   credUser: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   errorMessages: Map!
-  id: String!
+  id: ID!
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
+  latestBuildRun: BuildRun
   markedForDeletion: Boolean
   name: String!
   recordVersion: Int!
@@ -111,7 +115,7 @@ type BuildCacheKey {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
   name: String!
@@ -158,11 +162,14 @@ type BuildPaginatedRecords {
 type BuildRun {
   accountName: String!
   apiVersion: String
-  buildName: String!
+  buildId: ID!
   clusterName: String!
+  createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
-  id: String!
+  displayName: String!
+  id: ID!
   kind: String
+  lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
   metadata: Metadata
   recordVersion: Int!
@@ -177,6 +184,10 @@ type BuildRunEdge {
   node: BuildRun!
 }
 
+input BuildRunIn {
+  displayName: String!
+}
+
 type BuildRunPaginatedRecords {
   edges: [BuildRunEdge!]!
   pageInfo: PageInfo!
@@ -311,7 +322,7 @@ type Config {
   data: Map
   displayName: String!
   environmentName: String!
-  id: String!
+  id: ID!
   immutable: Boolean
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
@@ -392,7 +403,7 @@ type ConsoleVPNDevice {
   creationTime: Date!
   displayName: String!
   environmentName: String
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   linkedClusters: [String!]
@@ -446,7 +457,7 @@ type Credential {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   expiration: Github__com___kloudlite___api___apps___container____registry___internal___domain___entities__Expiration!
-  id: String!
+  id: ID!
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
   name: String!
@@ -504,7 +515,7 @@ type Digest {
   creationTime: Date!
   deleting: Boolean!
   digest: String!
-  id: String!
+  id: ID!
   length: Int!
   markedForDeletion: Boolean
   mediaType: String!
@@ -569,7 +580,7 @@ type Environment {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -1134,6 +1145,7 @@ type Github__com___kloudlite___operator___apis___crds___v1__AppSpec {
   serviceAccount: String
   services: [Github__com___kloudlite___operator___apis___crds___v1__AppSvc!]
   tolerations: [K8s__io___api___core___v1__Toleration!]
+  topologySpreadConstraints: [K8s__io___api___core___v1__TopologySpreadConstraint!]
 }
 
 input Github__com___kloudlite___operator___apis___crds___v1__AppSpecIn {
@@ -1148,6 +1160,7 @@ input Github__com___kloudlite___operator___apis___crds___v1__AppSpecIn {
   serviceAccount: String
   services: [Github__com___kloudlite___operator___apis___crds___v1__AppSvcIn!]
   tolerations: [K8s__io___api___core___v1__TolerationIn!]
+  topologySpreadConstraints: [K8s__io___api___core___v1__TopologySpreadConstraintIn!]
 }
 
 type Github__com___kloudlite___operator___apis___crds___v1__AppSvc {
@@ -1682,12 +1695,14 @@ input Github__com___kloudlite___operator___pkg___operator__CheckIn {
 }
 
 type Github__com___kloudlite___operator___pkg___operator__CheckMeta {
+  debug: Boolean!
   description: String
   name: String!
   title: String!
 }
 
 input Github__com___kloudlite___operator___pkg___operator__CheckMetaIn {
+  debug: Boolean!
   description: String
   name: String!
   title: String!
@@ -1853,7 +1868,7 @@ type ImagePullSecret {
   dockerConfigJson: String
   environmentName: String!
   format: Github__com___kloudlite___api___apps___console___internal___entities__PullSecretFormat!
-  id: String!
+  id: ID!
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
   metadata: Metadata!
@@ -2682,6 +2697,28 @@ enum K8s__io___api___core___v1__TolerationOperator {
   Exists
 }
 
+type K8s__io___api___core___v1__TopologySpreadConstraint {
+  labelSelector: K8s__io___apimachinery___pkg___apis___meta___v1__LabelSelector
+  matchLabelKeys: [String!]
+  maxSkew: Int!
+  minDomains: Int
+  nodeAffinityPolicy: String
+  nodeTaintsPolicy: String
+  topologyKey: String!
+  whenUnsatisfiable: K8s__io___api___core___v1__UnsatisfiableConstraintAction!
+}
+
+input K8s__io___api___core___v1__TopologySpreadConstraintIn {
+  labelSelector: K8s__io___apimachinery___pkg___apis___meta___v1__LabelSelectorIn
+  matchLabelKeys: [String!]
+  maxSkew: Int!
+  minDomains: Int
+  nodeAffinityPolicy: String
+  nodeTaintsPolicy: String
+  topologyKey: String!
+  whenUnsatisfiable: K8s__io___api___core___v1__UnsatisfiableConstraintAction!
+}
+
 type K8s__io___api___core___v1__TypedLocalObjectReference {
   apiGroup: String
   kind: String!
@@ -2708,6 +2745,11 @@ input K8s__io___api___core___v1__TypedObjectReferenceIn {
   namespace: String
 }
 
+enum K8s__io___api___core___v1__UnsatisfiableConstraintAction {
+  DoNotSchedule
+  ScheduleAnyway
+}
+
 type K8s__io___api___core___v1__VolumeNodeAffinity {
   required: K8s__io___api___core___v1__NodeSelector
 }
@@ -2837,7 +2879,7 @@ type ManagedResource {
   displayName: String!
   enabled: Boolean
   environmentName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -3253,7 +3295,7 @@ type Project {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -3285,7 +3327,7 @@ type ProjectManagedService {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -3380,10 +3422,10 @@ type Query {
   core_resyncSecret(envName: String!, name: String!, projectName: String!): Boolean!
   cr_checkUserNameAvailability(name: String!): CRCheckNameAvailabilityOutput!
   cr_getBuild(id: ID!): Build
-  cr_getBuildRun(buildRunName: String!, repoName: String!): BuildRun
+  cr_getBuildRun(buildID: ID!, buildRunName: String!): BuildRun
   cr_getCredToken(username: String!): String!
   cr_listBuildCacheKeys(pq: CursorPaginationIn, search: SearchBuildCacheKeys): BuildCacheKeyPaginatedRecords
-  cr_listBuildRuns(pq: CursorPaginationIn, repoName: String!, search: SearchBuildRuns): BuildRunPaginatedRecords
+  cr_listBuildRuns(buildID: ID!, pq: CursorPaginationIn, search: SearchBuildRuns): BuildRunPaginatedRecords
   cr_listBuilds(pagination: CursorPaginationIn, repoName: String!, search: SearchBuilds): BuildPaginatedRecords
   cr_listCreds(pagination: CursorPaginationIn, search: SearchCreds): CredentialPaginatedRecords
   cr_listDigests(pagination: CursorPaginationIn, repoName: String!, search: SearchRepos): DigestPaginatedRecords
@@ -3431,7 +3473,7 @@ type Repository {
   accountName: String!
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
-  id: String!
+  id: ID!
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
   name: String!
@@ -3469,7 +3511,7 @@ type Router {
   displayName: String!
   enabled: Boolean
   environmentName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -3634,7 +3676,7 @@ type Secret {
   data: Map
   displayName: String!
   environmentName: String!
-  id: String!
+  id: ID!
   immutable: Boolean
   isReadyOnly: Boolean!
   kind: String
diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
index f4eb92f12..cffac0bfe 100644
--- a/src/generated/gql/server.ts
+++ b/src/generated/gql/server.ts
@@ -53,16 +53,6 @@ export type ConsoleResType =
   | 'secret'
   | 'vpn_device';
 
-export type Github__Com___Kloudlite___Operator___Apis___Crds___V1__ConfigOrSecret =
-  'config' | 'secret';
-
-export type K8s__Io___Api___Core___V1__TaintEffect =
-  | 'NoExecute'
-  | 'NoSchedule'
-  | 'PreferNoSchedule';
-
-export type K8s__Io___Api___Core___V1__TolerationOperator = 'Equal' | 'Exists';
-
 export type Github__Com___Kloudlite___Api___Pkg___Types__SyncAction =
   | 'APPLY'
   | 'DELETE';
@@ -76,6 +66,29 @@ export type Github__Com___Kloudlite___Api___Pkg___Types__SyncState =
   | 'IN_QUEUE'
   | 'UPDATED_AT_AGENT';
 
+export type Github__Com___Kloudlite___Api___Apps___Container____Registry___Internal___Domain___Entities__GitProvider =
+  'github' | 'gitlab';
+
+export type Github__Com___Kloudlite___Api___Apps___Container____Registry___Internal___Domain___Entities__BuildStatus =
+  'error' | 'failed' | 'idle' | 'pending' | 'queued' | 'running' | 'success';
+
+export type Github__Com___Kloudlite___Operator___Apis___Crds___V1__ConfigOrSecret =
+  'config' | 'secret';
+
+export type K8s__Io___Api___Core___V1__TaintEffect =
+  | 'NoExecute'
+  | 'NoSchedule'
+  | 'PreferNoSchedule';
+
+export type K8s__Io___Api___Core___V1__TolerationOperator = 'Equal' | 'Exists';
+
+export type K8s__Io___Apimachinery___Pkg___Apis___Meta___V1__LabelSelectorOperator =
+  'DoesNotExist' | 'Exists' | 'In' | 'NotIn';
+
+export type K8s__Io___Api___Core___V1__UnsatisfiableConstraintAction =
+  | 'DoNotSchedule'
+  | 'ScheduleAnyway';
+
 export type ConfigKeyRefIn = {
   configName: Scalars['String']['input'];
   key: Scalars['String']['input'];
@@ -190,12 +203,6 @@ export type CoreSearchVpnDevices = {
   text?: InputMaybe<MatchFilterIn>;
 };
 
-export type Github__Com___Kloudlite___Api___Apps___Container____Registry___Internal___Domain___Entities__GitProvider =
-  'github' | 'gitlab';
-
-export type Github__Com___Kloudlite___Api___Apps___Container____Registry___Internal___Domain___Entities__BuildStatus =
-  'error' | 'failed' | 'idle' | 'pending' | 'queued' | 'running' | 'success';
-
 export type SearchBuildCacheKeys = {
   text?: InputMaybe<MatchFilterIn>;
 };
@@ -250,9 +257,6 @@ export type K8s__Io___Api___Core___V1__NodeSelectorOperator =
   | 'Lt'
   | 'NotIn';
 
-export type K8s__Io___Apimachinery___Pkg___Apis___Meta___V1__LabelSelectorOperator =
-  'DoesNotExist' | 'Exists' | 'In' | 'NotIn';
-
 export type K8s__Io___Api___Core___V1__ConditionStatus =
   | 'False'
   | 'True'
@@ -366,6 +370,7 @@ export type InvitationIn = {
 
 export type AppIn = {
   apiVersion?: InputMaybe<Scalars['String']['input']>;
+  ciBuildId?: InputMaybe<Scalars['ID']['input']>;
   displayName: Scalars['String']['input'];
   enabled?: InputMaybe<Scalars['Boolean']['input']>;
   kind?: InputMaybe<Scalars['String']['input']>;
@@ -387,6 +392,9 @@ export type Github__Com___Kloudlite___Operator___Apis___Crds___V1__AppSpecIn = {
     Array<Github__Com___Kloudlite___Operator___Apis___Crds___V1__AppSvcIn>
   >;
   tolerations?: InputMaybe<Array<K8s__Io___Api___Core___V1__TolerationIn>>;
+  topologySpreadConstraints?: InputMaybe<
+    Array<K8s__Io___Api___Core___V1__TopologySpreadConstraintIn>
+  >;
 };
 
 export type Github__Com___Kloudlite___Operator___Apis___Crds___V1__AppContainerIn =
@@ -504,6 +512,31 @@ export type K8s__Io___Api___Core___V1__TolerationIn = {
   value?: InputMaybe<Scalars['String']['input']>;
 };
 
+export type K8s__Io___Api___Core___V1__TopologySpreadConstraintIn = {
+  labelSelector?: InputMaybe<K8s__Io___Apimachinery___Pkg___Apis___Meta___V1__LabelSelectorIn>;
+  matchLabelKeys?: InputMaybe<Array<Scalars['String']['input']>>;
+  maxSkew: Scalars['Int']['input'];
+  minDomains?: InputMaybe<Scalars['Int']['input']>;
+  nodeAffinityPolicy?: InputMaybe<Scalars['String']['input']>;
+  nodeTaintsPolicy?: InputMaybe<Scalars['String']['input']>;
+  topologyKey: Scalars['String']['input'];
+  whenUnsatisfiable: K8s__Io___Api___Core___V1__UnsatisfiableConstraintAction;
+};
+
+export type K8s__Io___Apimachinery___Pkg___Apis___Meta___V1__LabelSelectorIn = {
+  matchExpressions?: InputMaybe<
+    Array<K8s__Io___Apimachinery___Pkg___Apis___Meta___V1__LabelSelectorRequirementIn>
+  >;
+  matchLabels?: InputMaybe<Scalars['Map']['input']>;
+};
+
+export type K8s__Io___Apimachinery___Pkg___Apis___Meta___V1__LabelSelectorRequirementIn =
+  {
+    key: Scalars['String']['input'];
+    operator: K8s__Io___Apimachinery___Pkg___Apis___Meta___V1__LabelSelectorOperator;
+    values?: InputMaybe<Array<Scalars['String']['input']>>;
+  };
+
 export type ConfigIn = {
   apiVersion?: InputMaybe<Scalars['String']['input']>;
   binaryData?: InputMaybe<Scalars['Map']['input']>;
@@ -945,20 +978,6 @@ export type K8s__Io___Api___Core___V1__PodAffinityTermIn = {
   topologyKey: Scalars['String']['input'];
 };
 
-export type K8s__Io___Apimachinery___Pkg___Apis___Meta___V1__LabelSelectorIn = {
-  matchExpressions?: InputMaybe<
-    Array<K8s__Io___Apimachinery___Pkg___Apis___Meta___V1__LabelSelectorRequirementIn>
-  >;
-  matchLabels?: InputMaybe<Scalars['Map']['input']>;
-};
-
-export type K8s__Io___Apimachinery___Pkg___Apis___Meta___V1__LabelSelectorRequirementIn =
-  {
-    key: Scalars['String']['input'];
-    operator: K8s__Io___Apimachinery___Pkg___Apis___Meta___V1__LabelSelectorOperator;
-    values?: InputMaybe<Array<Scalars['String']['input']>>;
-  };
-
 export type K8s__Io___Api___Core___V1__PodAntiAffinityIn = {
   preferredDuringSchedulingIgnoredDuringExecution?: InputMaybe<
     Array<K8s__Io___Api___Core___V1__WeightedPodAffinityTermIn>
@@ -1076,6 +1095,10 @@ export type AccountMembershipIn = {
   userId: Scalars['String']['input'];
 };
 
+export type BuildRunIn = {
+  displayName: Scalars['String']['input'];
+};
+
 export type ConfigKeyValueRefIn = {
   configName: Scalars['String']['input'];
   key: Scalars['String']['input'];
@@ -1119,6 +1142,7 @@ export type Github__Com___Kloudlite___Operator___Pkg___Operator__CheckIn = {
 };
 
 export type Github__Com___Kloudlite___Operator___Pkg___Operator__CheckMetaIn = {
+  debug: Scalars['Boolean']['input'];
   description?: InputMaybe<Scalars['String']['input']>;
   name: Scalars['String']['input'];
   title: Scalars['String']['input'];
@@ -1686,7 +1710,12 @@ export type ConsoleGetProjectQuery = {
       isReady: boolean;
       lastReadyGeneration?: number;
       lastReconcileTime?: any;
-      checkList?: Array<{ description?: string; name: string; title: string }>;
+      checkList?: Array<{
+        description?: string;
+        debug: boolean;
+        name: string;
+        title: string;
+      }>;
       message?: { RawMessage?: any };
       resources?: Array<{
         apiVersion: string;
@@ -1742,6 +1771,7 @@ export type ConsoleListProjectsQuery = {
           lastReconcileTime?: any;
           checkList?: Array<{
             description?: string;
+            debug: boolean;
             name: string;
             title: string;
           }>;
@@ -1827,6 +1857,7 @@ export type ConsoleListClustersQuery = {
           lastReconcileTime?: any;
           checkList?: Array<{
             description?: string;
+            debug: boolean;
             name: string;
             title: string;
           }>;
@@ -1948,7 +1979,12 @@ export type ConsoleGetClusterQuery = {
       isReady: boolean;
       lastReadyGeneration?: number;
       lastReconcileTime?: any;
-      checkList?: Array<{ description?: string; name: string; title: string }>;
+      checkList?: Array<{
+        description?: string;
+        debug: boolean;
+        name: string;
+        title: string;
+      }>;
       message?: { RawMessage?: any };
       resources?: Array<{
         apiVersion: string;
@@ -2269,7 +2305,12 @@ export type ConsoleGetEnvironmentQuery = {
       isReady: boolean;
       lastReadyGeneration?: number;
       lastReconcileTime?: any;
-      checkList?: Array<{ description?: string; name: string; title: string }>;
+      checkList?: Array<{
+        description?: string;
+        debug: boolean;
+        name: string;
+        title: string;
+      }>;
       message?: { RawMessage?: any };
       resources?: Array<{
         apiVersion: string;
@@ -2345,6 +2386,7 @@ export type ConsoleListEnvironmentsQuery = {
           lastReconcileTime?: any;
           checkList?: Array<{
             description?: string;
+            debug: boolean;
             name: string;
             title: string;
           }>;
@@ -2525,7 +2567,12 @@ export type ConsoleGetAppQuery = {
       isReady: boolean;
       lastReadyGeneration?: number;
       lastReconcileTime?: any;
-      checkList?: Array<{ description?: string; title: string; name: string }>;
+      checkList?: Array<{
+        description?: string;
+        debug: boolean;
+        title: string;
+        name: string;
+      }>;
       message?: { RawMessage?: any };
       resources?: Array<{
         apiVersion: string;
@@ -2631,6 +2678,7 @@ export type ConsoleListAppsQuery = {
           }>;
           checkList?: Array<{
             description?: string;
+            debug: boolean;
             title: string;
             name: string;
           }>;
@@ -2747,6 +2795,7 @@ export type ConsoleListRoutersQuery = {
           lastReconcileTime?: any;
           checkList?: Array<{
             description?: string;
+            debug: boolean;
             name: string;
             title: string;
           }>;
@@ -2828,7 +2877,12 @@ export type ConsoleGetRouterQuery = {
     status?: {
       checks?: any;
       isReady: boolean;
-      checkList?: Array<{ description?: string; name: string; title: string }>;
+      checkList?: Array<{
+        description?: string;
+        debug: boolean;
+        name: string;
+        title: string;
+      }>;
     };
   };
 };
@@ -3492,6 +3546,37 @@ export type ConsoleListBuildsQuery = {
           registry: { repo: { name: string; tags: Array<string> } };
           resource: { cpu: number; memoryInMb: number };
         };
+        latestBuildRun?: {
+          recordVersion: number;
+          markedForDeletion?: boolean;
+          status?: {
+            checks?: any;
+            isReady: boolean;
+            lastReadyGeneration?: number;
+            lastReconcileTime?: any;
+            checkList?: Array<{
+              debug: boolean;
+              description?: string;
+              name: string;
+              title: string;
+            }>;
+            message?: { RawMessage?: any };
+            resources?: Array<{
+              apiVersion: string;
+              kind: string;
+              name: string;
+              namespace: string;
+            }>;
+          };
+          syncStatus: {
+            action: Github__Com___Kloudlite___Api___Pkg___Types__SyncAction;
+            error?: string;
+            lastSyncedAt?: any;
+            recordVersion: number;
+            state: Github__Com___Kloudlite___Api___Pkg___Types__SyncState;
+            syncScheduledAt?: any;
+          };
+        };
       };
     }>;
     pageInfo: {
@@ -4133,7 +4218,7 @@ export type ConsoleDeletePvMutationVariables = Exact<{
 export type ConsoleDeletePvMutation = { infra_deletePV: boolean };
 
 export type ConsoleListBuildRunsQueryVariables = Exact<{
-  repoName: Scalars['String']['input'];
+  buildID: Scalars['ID']['input'];
   search?: InputMaybe<SearchBuildRuns>;
   pq?: InputMaybe<CursorPaginationIn>;
 }>;
@@ -4148,6 +4233,7 @@ export type ConsoleListBuildRunsQuery = {
         clusterName: string;
         creationTime: any;
         markedForDeletion?: boolean;
+        recordVersion: number;
         updateTime: any;
         metadata?: {
           annotations?: any;
@@ -4177,6 +4263,12 @@ export type ConsoleListBuildRunsQuery = {
           isReady: boolean;
           lastReadyGeneration?: number;
           lastReconcileTime?: any;
+          checkList?: Array<{
+            description?: string;
+            debug: boolean;
+            name: string;
+            title: string;
+          }>;
           message?: { RawMessage?: any };
           resources?: Array<{
             apiVersion: string;
@@ -4185,6 +4277,14 @@ export type ConsoleListBuildRunsQuery = {
             namespace: string;
           }>;
         };
+        syncStatus: {
+          action: Github__Com___Kloudlite___Api___Pkg___Types__SyncAction;
+          error?: string;
+          lastSyncedAt?: any;
+          recordVersion: number;
+          state: Github__Com___Kloudlite___Api___Pkg___Types__SyncState;
+          syncScheduledAt?: any;
+        };
       };
     }>;
     pageInfo: {
@@ -4197,7 +4297,7 @@ export type ConsoleListBuildRunsQuery = {
 };
 
 export type ConsoleGetBuildRunQueryVariables = Exact<{
-  repoName: Scalars['String']['input'];
+  buildID: Scalars['ID']['input'];
   buildRunName: Scalars['String']['input'];
 }>;
 
@@ -4206,6 +4306,7 @@ export type ConsoleGetBuildRunQuery = {
     clusterName: string;
     creationTime: any;
     markedForDeletion?: boolean;
+    recordVersion: number;
     updateTime: any;
     metadata?: {
       annotations?: any;
@@ -4235,6 +4336,12 @@ export type ConsoleGetBuildRunQuery = {
       isReady: boolean;
       lastReadyGeneration?: number;
       lastReconcileTime?: any;
+      checkList?: Array<{
+        description?: string;
+        debug: boolean;
+        name: string;
+        title: string;
+      }>;
       message?: { RawMessage?: any };
       resources?: Array<{
         apiVersion: string;
@@ -4243,6 +4350,14 @@ export type ConsoleGetBuildRunQuery = {
         namespace: string;
       }>;
     };
+    syncStatus: {
+      action: Github__Com___Kloudlite___Api___Pkg___Types__SyncAction;
+      error?: string;
+      lastSyncedAt?: any;
+      recordVersion: number;
+      state: Github__Com___Kloudlite___Api___Pkg___Types__SyncState;
+      syncScheduledAt?: any;
+    };
   };
 };
 
@@ -4379,6 +4494,12 @@ export type ConsoleGetProjectMSvQuery = {
       isReady: boolean;
       lastReadyGeneration?: number;
       lastReconcileTime?: any;
+      checkList?: Array<{
+        description?: string;
+        debug: boolean;
+        title: string;
+        name: string;
+      }>;
       message?: { RawMessage?: any };
       resources?: Array<{
         apiVersion: string;
@@ -4448,6 +4569,12 @@ export type ConsoleListProjectMSvsQuery = {
           isReady: boolean;
           lastReadyGeneration?: number;
           lastReconcileTime?: any;
+          checkList?: Array<{
+            description?: string;
+            debug: boolean;
+            title: string;
+            name: string;
+          }>;
           message?: { RawMessage?: any };
           resources?: Array<{
             apiVersion: string;
@@ -4684,6 +4811,12 @@ export type ConsoleListManagedResourcesQuery = {
           isReady: boolean;
           lastReadyGeneration?: number;
           lastReconcileTime?: any;
+          checkList?: Array<{
+            description?: string;
+            debug: boolean;
+            name: string;
+            title: string;
+          }>;
           message?: { RawMessage?: any };
           resources?: Array<{
             apiVersion: string;
@@ -4751,6 +4884,12 @@ export type ConsoleGetHelmChartQuery = {
       lastReconcileTime?: any;
       releaseNotes: string;
       releaseStatus: string;
+      checkList?: Array<{
+        description?: string;
+        debug: boolean;
+        title: string;
+        name: string;
+      }>;
       message?: { RawMessage?: any };
       resources?: Array<{
         apiVersion: string;
@@ -4801,6 +4940,12 @@ export type ConsoleListHelmChartQuery = {
           lastReconcileTime?: any;
           releaseNotes: string;
           releaseStatus: string;
+          checkList?: Array<{
+            description?: string;
+            debug: boolean;
+            title: string;
+            name: string;
+          }>;
           message?: { RawMessage?: any };
           resources?: Array<{
             apiVersion: string;
@@ -4887,24 +5032,6 @@ export type ConsoleListNamespacesQuery = {
           namespace?: string;
         };
         spec?: { finalizers?: Array<string> };
-        status?: {
-          phase?: K8s__Io___Api___Core___V1__NamespacePhase;
-          conditions?: Array<{
-            lastTransitionTime?: any;
-            message?: string;
-            reason?: string;
-            status: K8s__Io___Api___Core___V1__ConditionStatus;
-            type: K8s__Io___Api___Core___V1__NamespaceConditionType;
-          }>;
-        };
-        syncStatus: {
-          action: Github__Com___Kloudlite___Api___Pkg___Types__SyncAction;
-          error?: string;
-          lastSyncedAt?: any;
-          recordVersion: number;
-          state: Github__Com___Kloudlite___Api___Pkg___Types__SyncState;
-          syncScheduledAt?: any;
-        };
       };
     }>;
     pageInfo: {

From f7d057c236846a77595c23c4cb2c0bfbb9441704 Mon Sep 17 00:00:00 2001
From: Mohit Kumar <48203820+nxtcoder36@users.noreply.github.com>
Date: Wed, 20 Mar 2024 10:53:17 +0530
Subject: [PATCH 60/66] KLO-243: Impl/logs managed services (#158)

* logs of managed services implemented

* pr comments resolved
---
 gql-queries-generator/doc/queries.graphql     |   2 +
 src/apps/console/components/id-selector.tsx   |   7 +-
 src/apps/console/components/name-id-view.tsx  |   4 +-
 .../page-components/config-resource.tsx       |   4 +-
 .../page-components/secret-resource.tsx       |   4 +-
 .../{ => env+}/$environment+/_index.tsx       |   0
 .../{ => env+}/$environment+/_layout.tsx      |  19 +-
 .../$environment+/app+/$app+/_index.tsx       |   0
 .../$environment+/app+/$app+/_layout.tsx      |   8 +-
 .../app+/$app+/logs-n-metrics/route.tsx       |  21 +-
 .../app+/$app+/settings+/_layout.tsx          |  12 +-
 .../app+/$app+/settings+/advance/route.tsx    |   6 +-
 .../app+/$app+/settings+/compute/route.tsx    |   0
 .../$app+/settings+/environment/route.tsx     |   0
 .../app+/$app+/settings+/general/route.tsx    |   0
 .../app+/$app+/settings+/network/route.tsx    |   0
 .../app+/$app+/settings+/scaling/route.tsx    |   0
 .../$environment+/apps/apps-resources-v2.tsx  |  12 +-
 .../$environment+/apps/apps-resources.tsx     |  12 +-
 .../{ => env+}/$environment+/apps/route.tsx   |   4 +-
 .../{ => env+}/$environment+/apps/tools.tsx   |   0
 .../$environment+/config.$config/handle.tsx   |   6 +-
 .../config.$config/resources.tsx              |   0
 .../$environment+/config.$config/route.tsx    |   6 +-
 .../$environment+/config.$config/tools.tsx    |   0
 .../{ => env+}/$environment+/cs+/_index.tsx   |   0
 .../{ => env+}/$environment+/cs+/_layout.tsx  |   0
 .../cs+/configs._index/handle-config.tsx      |   8 +-
 .../cs+/configs._index/route.tsx              |   2 +-
 .../cs+/configs._index/tools.tsx              |   0
 .../cs+/secrets._index/handle-secret.tsx      |   8 +-
 .../cs+/secrets._index/route.tsx              |   2 +-
 .../cs+/secrets._index/tools.tsx              |   0
 .../$environment+/jc+/_index/route.tsx        |   0
 .../$environment+/jc+/scheduledtask/route.tsx |   0
 .../$environment+/jc+/task/route.tsx          |   0
 .../$environment+/jc+/taskruns/route.tsx      |   0
 .../handle-managed-resource.tsx               |  10 +-
 .../managed-resources-resource-v2.tsx         |   6 +-
 .../managed-resources-resource.tsx            |  26 +-
 .../$environment+/managed-resources/route.tsx |   4 +-
 .../$environment+/managed-resources/tools.tsx |   0
 .../$environment+/new-app/app-compute.tsx     |   4 +-
 .../new-app/app-config-mount.tsx              |   0
 .../$environment+/new-app/app-detail.tsx      |   0
 .../$environment+/new-app/app-dialogs.tsx     |   4 +-
 .../new-app/app-environment-mounts.tsx        |  12 +-
 .../new-app/app-environment-variables.tsx     |   0
 .../$environment+/new-app/app-environment.tsx |   2 +-
 .../$environment+/new-app/app-network.tsx     |   2 +-
 .../$environment+/new-app/app-review.tsx      |   6 +-
 .../$environment+/new-app/app-utils.ts        |   0
 .../$environment+/new-app/cs-item.tsx         |   0
 .../{ => env+}/$environment+/new-app/datas.ts |   0
 .../$environment+/new-app/route.tsx           |   0
 .../new-managed-resource/_index.tsx           |  12 +-
 .../$environment+/router+/$router+/_index.tsx |   4 +-
 .../router+/$router+/_layout.tsx              |  10 +-
 .../router+/$router+/routes/_index.tsx        |   2 +-
 .../router+/$router+/routes/handle-route.tsx  |  38 +--
 .../$router+/routes/route-resources.tsx       |   6 +-
 .../router+/$router+/routes/tools.tsx         |   0
 .../router+/$router+/settings/_index.tsx      |   2 +-
 .../router+/$router+/settings/_layout.tsx     |   2 +-
 .../$router+/settings/general/route.tsx       |   8 +-
 .../$environment+/routers/_index.tsx          |   4 +-
 .../$environment+/routers/handle-router.tsx   |  10 +-
 .../routers/router-resources-V2.tsx           |   8 +-
 .../$environment+/routers/tools.tsx           |   0
 .../$environment+/secret.$secret/handle.tsx   |   6 +-
 .../secret.$secret/resources.tsx              |   0
 .../$environment+/secret.$secret/route.tsx    |   6 +-
 .../$environment+/secret.$secret/tools.tsx    |   0
 .../$environment+/settings+/_layout.tsx       |   0
 .../$environment+/settings+/general/route.tsx |  14 +-
 .../settings+/image-pull-secrets/_index.tsx   |   4 +-
 .../handle-image-pull-secret.tsx              |  10 +-
 .../image-pull-secrets-resources.tsx          |   8 +-
 .../settings+/image-pull-secrets/tools.tsx    |   0
 .../environments/environment-resources-v2.tsx |   6 +-
 .../backend-services-resources-V2.tsx         |  30 +-
 .../$project+/msvc+/$msv+/_layout.tsx         |  97 ++++++
 .../$account+/$project+/msvc+/$msv+/index.tsx |   5 +
 .../msvc+/$msv+/logs-n-metrics/route.tsx      | 289 ++++++++++++++++++
 .../$project+/new-managed-service/_index.tsx  |  10 +-
 .../cluster-managed-services-queries.ts       |  10 +-
 .../project-managed-services-queries.ts       |   2 +
 src/generated/gql/server.ts                   |   2 +
 88 files changed, 610 insertions(+), 218 deletions(-)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/_index.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/_layout.tsx (92%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/app+/$app+/_index.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/app+/$app+/_layout.tsx (90%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/app+/$app+/logs-n-metrics/route.tsx (91%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/app+/$app+/settings+/_layout.tsx (92%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/app+/$app+/settings+/advance/route.tsx (94%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/app+/$app+/settings+/compute/route.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/app+/$app+/settings+/environment/route.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/app+/$app+/settings+/general/route.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/app+/$app+/settings+/network/route.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/app+/$app+/settings+/scaling/route.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/apps/apps-resources-v2.tsx (95%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/apps/apps-resources.tsx (95%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/apps/route.tsx (96%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/apps/tools.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/config.$config/handle.tsx (94%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/config.$config/resources.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/config.$config/route.tsx (97%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/config.$config/tools.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/cs+/_index.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/cs+/_layout.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/cs+/configs._index/handle-config.tsx (92%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/cs+/configs._index/route.tsx (98%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/cs+/configs._index/tools.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/cs+/secrets._index/handle-secret.tsx (92%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/cs+/secrets._index/route.tsx (98%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/cs+/secrets._index/tools.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/jc+/_index/route.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/jc+/scheduledtask/route.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/jc+/task/route.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/jc+/taskruns/route.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/managed-resources/handle-managed-resource.tsx (97%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/managed-resources/managed-resources-resource-v2.tsx (97%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/managed-resources/managed-resources-resource.tsx (92%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/managed-resources/route.tsx (96%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/managed-resources/tools.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/app-compute.tsx (98%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/app-config-mount.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/app-detail.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/app-dialogs.tsx (98%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/app-environment-mounts.tsx (96%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/app-environment-variables.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/app-environment.tsx (96%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/app-network.tsx (98%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/app-review.tsx (97%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/app-utils.ts (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/cs-item.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/datas.ts (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-app/route.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/new-managed-resource/_index.tsx (98%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/router+/$router+/_index.tsx (55%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/router+/$router+/_layout.tsx (85%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/router+/$router+/routes/_index.tsx (98%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/router+/$router+/routes/handle-route.tsx (92%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/router+/$router+/routes/route-resources.tsx (98%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/router+/$router+/routes/tools.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/router+/$router+/settings/_index.tsx (70%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/router+/$router+/settings/_layout.tsx (88%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/router+/$router+/settings/general/route.tsx (94%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/routers/_index.tsx (96%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/routers/handle-router.tsx (95%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/routers/router-resources-V2.tsx (97%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/routers/tools.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/secret.$secret/handle.tsx (94%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/secret.$secret/resources.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/secret.$secret/route.tsx (97%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/secret.$secret/tools.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/settings+/_layout.tsx (100%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/settings+/general/route.tsx (94%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/settings+/image-pull-secrets/_index.tsx (96%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/settings+/image-pull-secrets/handle-image-pull-secret.tsx (95%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/settings+/image-pull-secrets/image-pull-secrets-resources.tsx (95%)
 rename src/apps/console/routes/_main+/$account+/$project+/{ => env+}/$environment+/settings+/image-pull-secrets/tools.tsx (100%)
 create mode 100644 src/apps/console/routes/_main+/$account+/$project+/msvc+/$msv+/_layout.tsx
 create mode 100644 src/apps/console/routes/_main+/$account+/$project+/msvc+/$msv+/index.tsx
 create mode 100644 src/apps/console/routes/_main+/$account+/$project+/msvc+/$msv+/logs-n-metrics/route.tsx

diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
index 055d5b321..aba522ef2 100644
--- a/gql-queries-generator/doc/queries.graphql
+++ b/gql-queries-generator/doc/queries.graphql
@@ -3032,6 +3032,8 @@ mutation consoleDeleteClusterMSv($clusterName: String!, $serviceName: String!) {
 
 query consoleGetProjectMSv($projectName: String!, $name: String!) {
   core_getProjectManagedService(projectName: $projectName, name: $name) {
+    id
+    recordVersion
     createdBy {
       userEmail
       userId
diff --git a/src/apps/console/components/id-selector.tsx b/src/apps/console/components/id-selector.tsx
index 015ba7aba..33b662cb1 100644
--- a/src/apps/console/components/id-selector.tsx
+++ b/src/apps/console/components/id-selector.tsx
@@ -14,8 +14,6 @@ import {
   ensureAccountClientSide,
   ensureClusterClientSide,
 } from '../server/utils/auth-utils';
-import { IEnvironmentContext } from '../routes/_main+/$account+/$project+/$environment+/_layout';
-import { parseName } from '../server/r-utils/common';
 
 interface IidSelector {
   name: string;
@@ -57,8 +55,7 @@ export const IdSelector = ({
 
   const api = useAPIClient();
   const params = useParams();
-  const { cluster } = params;
-  const { environment, project } = useOutletContext<IEnvironmentContext>();
+  const { cluster, project } = params;
 
   const checkApi = (() => {
     switch (resType) {
@@ -110,7 +107,7 @@ export const IdSelector = ({
             // eslint-disable-next-line no-nested-ternary
             ...(resType === 'environment' || resType === 'app'
               ? {
-                  projectName: parseName(project),
+                  projectName: project,
                 }
               : {}),
             ...(resType === 'nodepool' || resType === 'vpn_device'
diff --git a/src/apps/console/components/name-id-view.tsx b/src/apps/console/components/name-id-view.tsx
index dfa5b877c..60da31614 100644
--- a/src/apps/console/components/name-id-view.tsx
+++ b/src/apps/console/components/name-id-view.tsx
@@ -6,15 +6,13 @@ import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import { NonNullableString } from '~/root/lib/types/common';
 import { handleError } from '~/root/lib/utils/common';
 import { ConsoleResType, ResType } from '~/root/src/generated/gql/server';
-import { useOutletContext, useParams } from '@remix-run/react';
+import { useParams } from '@remix-run/react';
 import { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import {
   ensureAccountClientSide,
   ensureClusterClientSide,
 } from '../server/utils/auth-utils';
 import { useConsoleApi } from '../server/gql/api-provider';
-import { IEnvironmentContext } from '../routes/_main+/$account+/$project+/$environment+/_layout';
-import { parseName } from '../server/r-utils/common';
 
 interface INameIdView {
   name: string;
diff --git a/src/apps/console/page-components/config-resource.tsx b/src/apps/console/page-components/config-resource.tsx
index 0ab1f9c3a..657695a39 100644
--- a/src/apps/console/page-components/config-resource.tsx
+++ b/src/apps/console/page-components/config-resource.tsx
@@ -93,7 +93,7 @@ const GridView = ({
             key={id}
             to={
               linkComponent !== null
-                ? `/${account}/${project}/${environment}/config/${id}`
+                ? `/${account}/${project}/env/${environment}/config/${id}`
                 : undefined
             }
             rows={[
@@ -169,7 +169,7 @@ const ListView = ({
             className="!p-3xl"
             to={
               linkComponent !== null
-                ? `/${account}/${project}/${environment}/config/${id}`
+                ? `/${account}/${project}/env/${environment}/config/${id}`
                 : undefined
             }
             columns={[
diff --git a/src/apps/console/page-components/secret-resource.tsx b/src/apps/console/page-components/secret-resource.tsx
index 2a9c332ad..ccb7c3172 100644
--- a/src/apps/console/page-components/secret-resource.tsx
+++ b/src/apps/console/page-components/secret-resource.tsx
@@ -93,7 +93,7 @@ const GridView = ({
             key={id}
             to={
               linkComponent !== null
-                ? `/${account}/${project}/${environment}/secret/${id}`
+                ? `/${account}/${project}/env/${environment}/secret/${id}`
                 : undefined
             }
             rows={[
@@ -169,7 +169,7 @@ const ListView = ({
             className="!p-3xl"
             to={
               linkComponent !== null
-                ? `/${account}/${project}/${environment}/secret/${id}`
+                ? `/${account}/${project}/env/${environment}/secret/${id}`
                 : undefined
             }
             columns={[
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/_index.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/_index.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/_index.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/_layout.tsx
similarity index 92%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/_layout.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/_layout.tsx
index 133432882..b9bee1b01 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/_layout.tsx
@@ -26,17 +26,17 @@ import {
   ensureAccountClientSide,
   ensureAccountSet,
 } from '~/console/server/utils/auth-utils';
-import { SubNavDataProvider } from '~/root/lib/client/hooks/use-create-subnav-action';
-import useDebounce from '~/root/lib/client/hooks/use-debounce';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { SubNavDataProvider } from '~/lib/client/hooks/use-create-subnav-action';
+import useDebounce from '~/lib/client/hooks/use-debounce';
+import { IRemixCtx } from '~/lib/types/common';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { BreadcrumSlash, tabIconSize } from '~/console/utils/commons';
 import { IEnvironment } from '~/console/server/gql/queries/environment-queries';
 import { cn } from '~/components/utils';
 import { Button } from '~/components/atoms/button';
-import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
-import { handleError } from '~/root/lib/utils/common';
-import { IProjectContext } from '../_layout';
+import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
+import { handleError } from '~/lib/utils/common';
+import { IProjectContext } from '../../_layout';
 
 export interface IEnvironmentContext extends IProjectContext {
   environment: IEnvironment;
@@ -114,7 +114,10 @@ const tabs = [
 const EnvironmentTabs = () => {
   const { account, project, environment } = useParams();
   return (
-    <CommonTabs baseurl={`/${account}/${project}/${environment}`} tabs={tabs} />
+    <CommonTabs
+      baseurl={`/${account}/${project}/env/${environment}`}
+      tabs={tabs}
+    />
   );
 };
 
@@ -186,7 +189,7 @@ const CurrentBreadcrum = ({ environment }: { environment: IEnvironment }) => {
               <OptionList.Link
                 key={parseName(item)}
                 LinkComponent={Link}
-                to={`/${account}/${project}/${parseName(item)}`}
+                to={`/${account}/${project}/env/${parseName(item)}`}
                 className={cn(
                   'flex flex-row items-center justify-between',
                   parseName(item) === parseName(environment)
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/_index.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_index.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/_index.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/_layout.tsx
similarity index 90%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/_layout.tsx
index 5f27ee193..9a24e547b 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/_layout.tsx
@@ -9,8 +9,8 @@ import { CommonTabs } from '~/console/components/common-navbar-tabs';
 import { IApp } from '~/console/server/gql/queries/app-queries';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
-import logger from '~/root/lib/client/helpers/log';
-import { IRemixCtx } from '~/root/lib/types/common';
+import logger from '~/lib/client/helpers/log';
+import { IRemixCtx } from '~/lib/types/common';
 
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import { IEnvironmentContext } from '../../_layout';
@@ -19,9 +19,9 @@ const ProjectTabs = () => {
   const { account, project, environment, app } = useParams();
   return (
     <CommonTabs
-      baseurl={`/${account}/${project}/${environment}/app/${app}`}
+      baseurl={`/${account}/${project}/env/${environment}/app/${app}`}
       backButton={{
-        to: `/${account}/${project}/${environment}/apps`,
+        to: `/${account}/${project}/env/${environment}/apps`,
         label: 'Apps',
       }}
       tabs={[
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/logs-n-metrics/route.tsx
similarity index 91%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/logs-n-metrics/route.tsx
index 63957c5b2..b84aaa5a9 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/logs-n-metrics/route.tsx
@@ -1,15 +1,15 @@
 import { useOutletContext } from '@remix-run/react';
 import axios from 'axios';
 import Chart from '~/console/components/charts/charts-client';
-import useDebounce from '~/root/lib/client/hooks/use-debounce';
+import useDebounce from '~/lib/client/hooks/use-debounce';
 import { useState } from 'react';
 import { dayjs } from '~/components/molecule/dayjs';
 import { parseValue } from '~/console/page-components/util';
 import { ApexOptions } from 'apexcharts';
 import { parseName } from '~/console/server/r-utils/common';
 import { useDataState } from '~/console/page-components/common-state';
-import { observeUrl } from '~/root/lib/configs/base-url.cjs';
-import LogComp from '~/root/lib/client/components/logger';
+import { observeUrl } from '~/lib/configs/base-url.cjs';
+import LogComp from '~/lib/client/components/logger';
 import LogAction from '~/console/page-components/log-action';
 import { generatePlainColor } from '~/root/lib/utils/color-generator';
 import { IAppContext } from '../_layout';
@@ -166,14 +166,6 @@ const LogsAndMetrics = () => {
           options={{
             ...chartOptions,
             series: [
-              // {
-              //   color: '#1D4ED8',
-              //   name: 'CPU',
-              //   data: data.cpu.map((d) => {
-              //     return [d.value[0], parseFloat(d.value[1])];
-              //   }),
-              // },
-
               ...data.cpu.map((d) => {
                 return {
                   name: d.metric.exported_pod,
@@ -228,13 +220,6 @@ const LogsAndMetrics = () => {
                   }),
                 };
               }),
-              // {
-              //   color: '#1D4ED8',
-              //   name: 'Memory',
-              //   data: data.memory.map((d) => {
-              //     return [d.value[0], parseFloat(d.value[1])];
-              //   }),
-              // },
             ],
 
             annotations: getAnnotations(
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/_layout.tsx
similarity index 92%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/_layout.tsx
index ba71ee282..cf0cfa0e1 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/_layout.tsx
@@ -8,21 +8,21 @@ import SidebarLayout from '~/console/components/sidebar-layout';
 import {
   UnsavedChangesProvider,
   useUnsavedChanges,
-} from '~/root/lib/client/hooks/use-unsaved-changes';
+} from '~/lib/client/hooks/use-unsaved-changes';
 import Popup from '~/components/molecule/popup';
-import { handleError } from '~/root/lib/utils/common';
+import { handleError } from '~/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
 import { getAppIn } from '~/console/server/r-utils/resource-getter';
-import useForm from '~/root/lib/client/hooks/use-form';
+import useForm from '~/lib/client/hooks/use-form';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useEffect } from 'react';
 import {
   AppContextProvider,
   useAppState,
 } from '~/console/page-components/app-states';
-import Yup from '~/root/lib/server/helpers/yup';
+import Yup from '~/lib/server/helpers/yup';
 import { DiffViewer, yamlDump } from '~/console/components/diff-viewer';
-import { useReload } from '~/root/lib/client/helpers/reloader';
+import { useReload } from '~/lib/client/helpers/reloader';
 import { keyconstants } from '~/console/server/r-utils/key-constants';
 import { IAppContext } from '../_layout';
 
@@ -52,7 +52,7 @@ const Layout = () => {
     setIgnorePaths(
       navItems.map(
         (ni) =>
-          `/${account}/${project}/${environment}/app/${appId}/settings/${ni.value}`
+          `/${account}/${project}/env/${environment}/app/${appId}/settings/${ni.value}`
       )
     );
   }, []);
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/advance/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/advance/route.tsx
similarity index 94%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/advance/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/advance/route.tsx
index af52b113c..6e297b6fe 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/advance/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/advance/route.tsx
@@ -5,12 +5,12 @@ import { DeleteContainer } from '~/console/components/common-console-components'
 import { useAppState } from '~/console/page-components/app-states';
 import { parseName } from '~/console/server/r-utils/common';
 import DeleteDialog from '~/console/components/delete-dialog';
-import { useReload } from '~/root/lib/client/helpers/reloader';
+import { useReload } from '~/lib/client/helpers/reloader';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { toast } from '~/components/molecule/toast';
-import { handleError } from '~/root/lib/utils/common';
+import { handleError } from '~/lib/utils/common';
 import Wrapper from '~/console/components/wrapper';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
+import { useUnsavedChanges } from '~/lib/client/hooks/use-unsaved-changes';
 import { IAppContext } from '../../_layout';
 
 const SettingAdvance = () => {
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/compute/route.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/compute/route.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/environment/route.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/environment/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/environment/route.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/general/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/general/route.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/general/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/general/route.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/network/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/network/route.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/network/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/network/route.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/scaling/route.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/scaling/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/settings+/scaling/route.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/apps/apps-resources-v2.tsx
similarity index 95%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources-v2.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/apps/apps-resources-v2.tsx
index ea0dc8476..bf9549d6d 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/apps/apps-resources-v2.tsx
@@ -24,9 +24,9 @@ import {
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
-import { handleError } from '~/root/lib/utils/common';
+import { handleError } from '~/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
-import { useReload } from '~/root/lib/client/helpers/reloader';
+import { useReload } from '~/lib/client/helpers/reloader';
 import { SyncStatusV2 } from '~/console/components/sync-status';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import ListV2 from '~/console/components/listV2';
@@ -68,7 +68,7 @@ const ExtraButton = ({ onAction, item }: IExtraButton) => {
       label: 'Settings',
       icon: <GearSix size={iconSize} />,
       type: 'item',
-      to: `/${account}/${project}/${environment}/app/${parseName(
+      to: `/${account}/${project}/env/${environment}/app/${parseName(
         item
       )}/settings/general`,
       key: 'settings',
@@ -129,7 +129,7 @@ const GridView = ({ items = [], onAction: _ }: IResource) => {
         return (
           <Grid.Column
             key={id}
-            to={`/${account}/${project}/${environment}/app/${id}`}
+            to={`/${account}/${project}/env/${environment}/app/${id}`}
             rows={[
               {
                 key: generateKey(keyPrefix, name + id),
@@ -142,7 +142,7 @@ const GridView = ({ items = [], onAction: _ }: IResource) => {
                         options={[
                           {
                             key: 'apps-resource-extra-action-1',
-                            to: `/${account}/${project}/${environment}/app/${id}/settings/general`,
+                            to: `/${account}/${project}/env/${environment}/app/${id}/settings/general`,
                             icon: <GearSix size={16} />,
                             label: 'Settings',
                             type: 'item',
@@ -245,7 +245,7 @@ const ListView = ({ items = [], onAction }: IResource) => {
                 render: () => <ExtraButton onAction={onAction} item={i} />,
               },
             },
-            to: `/${account}/${project}/${environment}/app/${id}`,
+            to: `/${account}/${project}/env/${environment}/app/${id}`,
           };
         }),
       }}
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/apps/apps-resources.tsx
similarity index 95%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/apps/apps-resources.tsx
index 543c4da5f..9623b538d 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/apps/apps-resources.tsx
@@ -28,9 +28,9 @@ import {
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
-import { handleError } from '~/root/lib/utils/common';
+import { handleError } from '~/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
-import { useReload } from '~/root/lib/client/helpers/reloader';
+import { useReload } from '~/lib/client/helpers/reloader';
 import { useWatchReload } from '~/lib/client/helpers/socket/useWatch';
 import { IEnvironmentContext } from '../_layout';
 
@@ -70,7 +70,7 @@ const ExtraButton = ({ onAction, item }: IExtraButton) => {
       label: 'Settings',
       icon: <GearSix size={iconSize} />,
       type: 'item',
-      to: `/${account}/${project}/${environment}/app/${parseName(
+      to: `/${account}/${project}/env/${environment}/app/${parseName(
         item
       )}/settings/general`,
       key: 'settings',
@@ -131,7 +131,7 @@ const GridView = ({ items = [], onAction: _ }: IResource) => {
         return (
           <Grid.Column
             key={id}
-            to={`/${account}/${project}/${environment}/app/${id}`}
+            to={`/${account}/${project}/env/${environment}/app/${id}`}
             rows={[
               {
                 key: generateKey(keyPrefix, name + id),
@@ -144,7 +144,7 @@ const GridView = ({ items = [], onAction: _ }: IResource) => {
                         options={[
                           {
                             key: 'apps-resource-extra-action-1',
-                            to: `/${account}/${project}/${environment}/app/${id}/settings/general`,
+                            to: `/${account}/${project}/env/${environment}/app/${id}/settings/general`,
                             icon: <GearSix size={16} />,
                             label: 'Settings',
                             type: 'item',
@@ -181,7 +181,7 @@ const ListView = ({ items = [], onAction }: IResource) => {
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
         return (
           <List.Row
-            to={`/${account}/${project}/${environment}/app/${id}`}
+            to={`/${account}/${project}/env/${environment}/app/${id}`}
             key={keyPrefix + name}
             className="!p-3xl"
             columns={[
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/apps/route.tsx
similarity index 96%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/apps/route.tsx
index dcdb33e30..15502d34b 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/apps/route.tsx
@@ -1,16 +1,16 @@
 import { Plus, PlusFill } from '@jengaicons/react';
 import { defer } from '@remix-run/node';
 import { Link, useLoaderData } from '@remix-run/react';
-import { Button } from '~/components/atoms/button.jsx';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import Wrapper from '~/console/components/wrapper';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { parseNodes } from '~/console/server/r-utils/common';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { getPagination, getSearch } from '~/console/server/utils/common';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx } from '~/lib/types/common';
 import { clearAppState } from '~/console/page-components/app-states';
 import { useEffect } from 'react';
+import { Button } from '~/components/atoms/button.js';
 import Tools from './tools';
 import AppsResourcesV2 from './apps-resources-v2';
 
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/tools.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/apps/tools.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/tools.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/apps/tools.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/config.$config/handle.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/config.$config/handle.tsx
similarity index 94%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/config.$config/handle.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/config.$config/handle.tsx
index d64f2f0ce..ebead8f67 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/config.$config/handle.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/config.$config/handle.tsx
@@ -3,9 +3,9 @@ import Popup from '~/components/molecule/popup';
 import { IDialog, IModifiedItem } from '~/console/components/types.d';
 import { ConsoleApiType } from '~/console/server/gql/saved-queries';
 import { parseName } from '~/console/server/r-utils/common';
-import useForm from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { handleError } from '~/root/lib/utils/common';
+import useForm from '~/lib/client/hooks/use-form';
+import Yup from '~/lib/server/helpers/yup';
+import { handleError } from '~/lib/utils/common';
 import { ConfigIn } from '~/root/src/generated/gql/server';
 
 export interface IConfigValue {
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/config.$config/resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/config.$config/resources.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/config.$config/resources.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/config.$config/resources.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/config.$config/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/config.$config/route.tsx
similarity index 97%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/config.$config/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/config.$config/route.tsx
index 87e09a1bb..6e8da1fff 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/config.$config/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/config.$config/route.tsx
@@ -16,8 +16,8 @@ import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { parseName } from '~/console/server/r-utils/common';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
 import { constants } from '~/console/server/utils/constants';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { useReload } from '~/lib/client/helpers/reloader';
+import { IRemixCtx } from '~/lib/types/common';
 import Handle, { updateConfig } from './handle';
 import Resources from './resources';
 import Tools from './tools';
@@ -102,7 +102,7 @@ const ConfigBody = ({ config }: { config: IConfig }) => {
       <Wrapper
         header={{
           title: parseName(config),
-          backurl: `/${account}/${project}/${environment}/cs/configs`,
+          backurl: `/${account}/${project}/env/${environment}/cs/configs`,
           action: Object.keys(modifiedItems).length > 0 && (
             <div className="flex flex-row items-center gap-lg">
               <Button
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/config.$config/tools.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/config.$config/tools.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/config.$config/tools.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/config.$config/tools.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/_index.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/_index.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/_index.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/_layout.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/_layout.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/_layout.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/configs._index/handle-config.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/configs._index/handle-config.tsx
similarity index 92%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/configs._index/handle-config.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/configs._index/handle-config.tsx
index fc4f826ca..9db3ae871 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/configs._index/handle-config.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/configs._index/handle-config.tsx
@@ -4,10 +4,10 @@ import { toast } from '~/components/molecule/toast';
 import { NameIdView } from '~/console/components/name-id-view';
 import { IDialog } from '~/console/components/types.d';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import useForm from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { handleError } from '~/root/lib/utils/common';
+import { useReload } from '~/lib/client/helpers/reloader';
+import useForm from '~/lib/client/hooks/use-form';
+import Yup from '~/lib/server/helpers/yup';
+import { handleError } from '~/lib/utils/common';
 
 const HandleConfig = ({ show, setShow }: IDialog) => {
   const api = useConsoleApi();
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/configs._index/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/configs._index/route.tsx
similarity index 98%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/configs._index/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/configs._index/route.tsx
index 0b6f8cdbd..0b033728f 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/configs._index/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/configs._index/route.tsx
@@ -16,7 +16,7 @@ import {
 } from '~/console/server/utils/auth-utils';
 import { getPagination, getSearch } from '~/console/server/utils/common';
 import { DIALOG_TYPE } from '~/console/utils/commons';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx } from '~/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
 import HandleConfig from './handle-config';
 import Tools from './tools';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/configs._index/tools.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/configs._index/tools.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/configs._index/tools.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/configs._index/tools.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/secrets._index/handle-secret.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/secrets._index/handle-secret.tsx
similarity index 92%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/secrets._index/handle-secret.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/secrets._index/handle-secret.tsx
index f83c7bb72..40a082823 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/secrets._index/handle-secret.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/secrets._index/handle-secret.tsx
@@ -3,10 +3,10 @@ import Popup from '~/components/molecule/popup';
 import { toast } from '~/components/molecule/toast';
 import { IDialog } from '~/console/components/types.d';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import useForm from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { handleError } from '~/root/lib/utils/common';
+import { useReload } from '~/lib/client/helpers/reloader';
+import useForm from '~/lib/client/hooks/use-form';
+import Yup from '~/lib/server/helpers/yup';
+import { handleError } from '~/lib/utils/common';
 import { NameIdView } from '~/console/components/name-id-view';
 
 const HandleSecret = ({ show, setShow }: IDialog) => {
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/secrets._index/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/secrets._index/route.tsx
similarity index 98%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/secrets._index/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/secrets._index/route.tsx
index dab2bc176..8936ee23f 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/secrets._index/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/secrets._index/route.tsx
@@ -16,7 +16,7 @@ import {
 } from '~/console/server/utils/auth-utils';
 import { getPagination, getSearch } from '~/console/server/utils/common';
 import { DIALOG_TYPE } from '~/console/utils/commons';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx } from '~/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
 import HandleSecret from './handle-secret';
 import Tools from './tools';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/secrets._index/tools.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/secrets._index/tools.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/cs+/secrets._index/tools.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/cs+/secrets._index/tools.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/jc+/_index/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/jc+/_index/route.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/jc+/_index/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/jc+/_index/route.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/jc+/scheduledtask/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/jc+/scheduledtask/route.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/jc+/scheduledtask/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/jc+/scheduledtask/route.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/jc+/task/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/jc+/task/route.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/jc+/task/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/jc+/task/route.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/jc+/taskruns/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/jc+/taskruns/route.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/jc+/taskruns/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/jc+/taskruns/route.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/handle-managed-resource.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/handle-managed-resource.tsx
similarity index 97%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/handle-managed-resource.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/handle-managed-resource.tsx
index 7090d960b..0ec56d2cb 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/handle-managed-resource.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/handle-managed-resource.tsx
@@ -7,11 +7,11 @@ import Popup from '~/components/molecule/popup';
 import { IDialogBase } from '~/console/components/types.d';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { ExtractNodeType, parseName } from '~/console/server/r-utils/common';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { NN } from '~/root/lib/types/common';
-import { handleError } from '~/root/lib/utils/common';
+import { useReload } from '~/lib/client/helpers/reloader';
+import useForm, { dummyEvent } from '~/lib/client/hooks/use-form';
+import Yup from '~/lib/server/helpers/yup';
+import { NN } from '~/lib/types/common';
+import { handleError } from '~/lib/utils/common';
 import {
   IMSvTemplate,
   IMSvTemplates,
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource-v2.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx
similarity index 97%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource-v2.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx
index fae6e55c9..9544591bd 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx
@@ -16,9 +16,9 @@ import { IMSvTemplates } from '~/console/server/gql/queries/managed-templates-qu
 import DeleteDialog from '~/console/components/delete-dialog';
 import ResourceExtraAction from '~/console/components/resource-extra-action';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { useReload } from '~/root/lib/client/helpers/reloader';
+import { useReload } from '~/lib/client/helpers/reloader';
 import { useState } from 'react';
-import { handleError } from '~/root/lib/utils/common';
+import { handleError } from '~/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
 import { Link, useParams } from '@remix-run/react';
 import { IManagedResources } from '~/console/server/gql/queries/managed-resources-queries';
@@ -123,7 +123,7 @@ const GridView = ({ items = [], onAction }: IResource) => {
 
 const ListView = ({ items = [], onAction }: IResource) => {
   const { environment, project, account } = useParams();
-  const preUrl = `/${account}/${project}/${environment}/secret/`;
+  const preUrl = `/${account}/${project}/env/${environment}/secret/`;
   return (
     <ListV2.Root
       data={{
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/managed-resources-resource.tsx
similarity index 92%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/managed-resources-resource.tsx
index 1adc7f224..d4b145064 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/managed-resources-resource.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/managed-resources-resource.tsx
@@ -19,9 +19,9 @@ import { IMSvTemplates } from '~/console/server/gql/queries/managed-templates-qu
 import DeleteDialog from '~/console/components/delete-dialog';
 import ResourceExtraAction from '~/console/components/resource-extra-action';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { useReload } from '~/root/lib/client/helpers/reloader';
+import { useReload } from '~/lib/client/helpers/reloader';
 import { useState } from 'react';
-import { handleError } from '~/root/lib/utils/common';
+import { handleError } from '~/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
 import { Link, useParams } from '@remix-run/react';
 import { IManagedResources } from '~/console/server/gql/queries/managed-resources-queries';
@@ -124,7 +124,7 @@ const GridView = ({ items = [], onAction }: IResource) => {
 
 const ListView = ({ items = [], onAction }: IResource) => {
   const { environment, project, account } = useParams();
-  const preUrl = `/${account}/${project}/${environment}/secret/`;
+  const preUrl = `/${account}/${project}/env/${environment}/secret/`;
   return (
     <List.Root>
       {items.map((item, index) => {
@@ -142,16 +142,16 @@ const ListView = ({ items = [], onAction }: IResource) => {
               },
               item.syncedOutputSecretRef
                 ? {
-                  key: generateKey(keyPrefix, 'secret'),
-                  render: () => (
-                    <Button
-                      content="View secrets"
-                      variant="plain"
-                      LinkComponent={Link}
-                      to={`${preUrl}${item.syncedOutputSecretRef?.metadata?.name}`}
-                    />
-                  ),
-                }
+                    key: generateKey(keyPrefix, 'secret'),
+                    render: () => (
+                      <Button
+                        content="View secrets"
+                        variant="plain"
+                        LinkComponent={Link}
+                        to={`${preUrl}${item.syncedOutputSecretRef?.metadata?.name}`}
+                      />
+                    ),
+                  }
                 : {},
               listFlex({ key: 'flex-1' }),
               {
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/route.tsx
similarity index 96%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/route.tsx
index 55f153307..5aa6a4fd3 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/route.tsx
@@ -1,13 +1,13 @@
 import { Plus, PlusFill } from '@jengaicons/react';
 import { defer } from '@remix-run/node';
 import { Link, useLoaderData } from '@remix-run/react';
-import { Button } from '~/components/atoms/button.jsx';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import Wrapper from '~/console/components/wrapper';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { parseNodes } from '~/console/server/r-utils/common';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx } from '~/lib/types/common';
 import fake from '~/root/fake-data-generator/fake';
+import { Button } from '~/components/atoms/button.js';
 import Tools from './tools';
 import ManagedResourceResourcesV2 from './managed-resources-resource-v2';
 
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/tools.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/tools.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/managed-resources/tools.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/managed-resources/tools.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-compute.tsx
similarity index 98%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-compute.tsx
index 50d089180..34c237f94 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-compute.tsx
@@ -12,12 +12,12 @@ import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useMapper } from '~/components/utils';
 import { BottomNavigation } from '~/console/components/commons';
 import { useOutletContext } from '@remix-run/react';
-import { useLog } from '~/root/lib/client/hooks/use-log';
+import { useLog } from '~/lib/client/hooks/use-log';
 import { Checkbox } from '~/components/atoms/checkbox';
 import { useState } from 'react';
 import { Button } from '~/components/atoms/button';
+import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
 import { plans } from './datas';
-import { IProjectContext } from '../../_layout';
 import appInitialFormValues, { mapFormValuesToApp } from './app-utils';
 
 const valueRender = ({
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-config-mount.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-config-mount.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-config-mount.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-detail.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-detail.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-dialogs.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-dialogs.tsx
similarity index 98%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-dialogs.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-dialogs.tsx
index ddec918fd..cb7ab7b73 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-dialogs.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-dialogs.tsx
@@ -17,8 +17,8 @@ import {
   parseName,
   parseNodes,
 } from '~/console/server/r-utils/common';
-import useDebounce from '~/root/lib/client/hooks/use-debounce';
-import { handleError } from '~/root/lib/utils/common';
+import useDebounce from '~/lib/client/hooks/use-debounce';
+import { handleError } from '~/lib/utils/common';
 import { ArrowLeft } from '~/console/components/icons';
 import { IAppDialogValue } from './app-environment';
 import CSComponent, { ICSComponent } from './cs-item';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-mounts.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-environment-mounts.tsx
similarity index 96%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-mounts.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-environment-mounts.tsx
index 1f8ad97eb..54c7bfed3 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-mounts.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-environment-mounts.tsx
@@ -23,12 +23,12 @@ import {
   parseName,
   parseNodes,
 } from '~/console/server/r-utils/common';
-import useDebounce from '~/root/lib/client/hooks/use-debounce';
-import useForm from '~/root/lib/client/hooks/use-form';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
-import Yup from '~/root/lib/server/helpers/yup';
-import { NonNullableString } from '~/root/lib/types/common';
-import { handleError } from '~/root/lib/utils/common';
+import useDebounce from '~/lib/client/hooks/use-debounce';
+import useForm from '~/lib/client/hooks/use-form';
+import { useUnsavedChanges } from '~/lib/client/hooks/use-unsaved-changes';
+import Yup from '~/lib/server/helpers/yup';
+import { NonNullableString } from '~/lib/types/common';
+import { handleError } from '~/lib/utils/common';
 
 export interface IValue {
   refKey: string;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-environment-variables.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment-variables.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-environment-variables.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-environment.tsx
similarity index 96%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-environment.tsx
index 9179ab024..3ce594d7c 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-environment.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-environment.tsx
@@ -5,7 +5,7 @@ import {
   useAppState,
 } from '~/console/page-components/app-states';
 import { BottomNavigation } from '~/console/components/commons';
-import { FadeIn } from '../../../../../../page-components/util';
+import { FadeIn } from '../../../../../../../page-components/util';
 import { EnvironmentVariables } from './app-environment-variables';
 import { ConfigMounts } from './app-config-mount';
 
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-network.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-network.tsx
similarity index 98%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-network.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-network.tsx
index 91606eb07..cc6cea7bc 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-network.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-network.tsx
@@ -7,7 +7,7 @@ import List from '~/console/components/list';
 import NoResultsFound from '~/console/components/no-results-found';
 import { useAppState } from '~/console/page-components/app-states';
 import { BottomNavigation, InfoLabel } from '~/console/components/commons';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
+import { useUnsavedChanges } from '~/lib/client/hooks/use-unsaved-changes';
 import {
   ArrowRight,
   ChevronLeft,
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-review.tsx
similarity index 97%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-review.tsx
index 6b9d00118..44ced01e9 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-review.tsx
@@ -3,9 +3,9 @@ import { useEffect, useState } from 'react';
 import { toast } from '~/components/molecule/toast';
 import { useAppState } from '~/console/page-components/app-states';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import useForm from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { handleError } from '~/root/lib/utils/common';
+import useForm from '~/lib/client/hooks/use-form';
+import Yup from '~/lib/server/helpers/yup';
+import { handleError } from '~/lib/utils/common';
 import { validateType } from '~/root/src/generated/gql/validator';
 import { parseName } from '~/console/server/r-utils/common';
 import { FadeIn } from '~/console/page-components/util';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-utils.ts b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-utils.ts
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-utils.ts
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-utils.ts
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/cs-item.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/cs-item.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/cs-item.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/cs-item.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/datas.ts b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/datas.ts
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/datas.ts
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/datas.ts
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/route.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/route.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-managed-resource/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-managed-resource/_index.tsx
similarity index 98%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/new-managed-resource/_index.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-managed-resource/_index.tsx
index a958a6d3f..305effb57 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-managed-resource/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-managed-resource/_index.tsx
@@ -9,15 +9,15 @@ import {
 import Select from '~/components/atoms/select';
 import { NameIdView } from '~/console/components/name-id-view';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
+import useForm, { dummyEvent } from '~/lib/client/hooks/use-form';
+import Yup from '~/lib/server/helpers/yup';
 import { FormEventHandler, useEffect, useState } from 'react';
 import { IMSvTemplate } from '~/console/server/gql/queries/managed-templates-queries';
 import { Switch } from '~/components/atoms/switch';
 import { NumberInput, TextInput } from '~/components/atoms/input';
-import { handleError } from '~/root/lib/utils/common';
+import { handleError } from '~/lib/utils/common';
 import { titleCase, useMapper } from '~/components/utils';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx } from '~/lib/types/common';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
 import { defer } from '@remix-run/node';
@@ -36,7 +36,7 @@ import {
   BottomNavigation,
   ReviewComponent,
 } from '~/console/components/commons';
-import { IProjectContext } from '../../_layout';
+import { IProjectContext } from '../../../_layout';
 
 export const loader = (ctx: IRemixCtx) => {
   const { project } = ctx.params;
@@ -472,7 +472,7 @@ const App = ({ services }: { services: ExtractNodeType<IProjectMSvs>[] }) => {
   const api = useConsoleApi();
 
   const { project, account, environment } = useParams();
-  const rootUrl = `/${account}/${project}/${environment}/managed-resources`;
+  const rootUrl = `/${account}/${project}/env/${environment}/managed-resources`;
 
   const { currentStep, jumpStep, nextStep } = useMultiStepProgress({
     defaultStep: 1,
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/_index.tsx
similarity index 55%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/_index.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/_index.tsx
index 9a0f1ce6c..05fd15d45 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/_index.tsx
@@ -1,7 +1,7 @@
 import { redirect } from '@remix-run/node';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx } from '~/lib/types/common';
 
 export const loader = async (ctx: IRemixCtx) => {
   const { account, project, environment, router } = ctx.params;
-  return redirect(`/${account}/${project}/${environment}/${router}/routes`);
+  return redirect(`/${account}/${project}/env/${environment}/${router}/routes`);
 };
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/_layout.tsx
similarity index 85%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/_layout.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/_layout.tsx
index b1084d0ca..069895491 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/_layout.tsx
@@ -8,9 +8,9 @@ import { CommonTabs } from '~/console/components/common-navbar-tabs';
 import { IRouter } from '~/console/server/gql/queries/router-queries';
 import { redirect } from '@remix-run/node';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
-import logger from '~/root/lib/client/helpers/log';
+import logger from '~/lib/client/helpers/log';
 import { ensureAccountSet } from '~/console/server/utils/auth-utils';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx } from '~/lib/types/common';
 import { IEnvironmentContext } from '../../_layout';
 
 export interface IRouterContext extends IEnvironmentContext {
@@ -44,10 +44,10 @@ const Tabs = () => {
 
   return (
     <CommonTabs
-      baseurl={`/${account}/${project}/${environment}/router/${router}`}
+      baseurl={`/${account}/${project}/env/${environment}/router/${router}`}
       backButton={{
         label: 'Routers',
-        to: `/${account}/${project}/${environment}/routers`,
+        to: `/${account}/${project}/env/${environment}/routers`,
       }}
       tabs={tabs}
     />
@@ -80,7 +80,7 @@ export const loader = async (ctx: IRemixCtx) => {
       router: data || {},
     };
   } catch (err) {
-    return redirect(`/${account}/${project}/${environment}/routers/`);
+    return redirect(`/${account}/${project}/env/${environment}/routers/`);
   }
 };
 
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/routes/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/routes/_index.tsx
similarity index 98%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/routes/_index.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/routes/_index.tsx
index 38bb08792..701a72740 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/routes/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/routes/_index.tsx
@@ -5,7 +5,7 @@ import Wrapper from '~/console/components/wrapper';
 import { useEffect, useState } from 'react';
 import { uuid } from '~/components/utils';
 import { IRouter } from '~/console/server/gql/queries/router-queries';
-import { NN } from '~/root/lib/types/common';
+import { NN } from '~/lib/types/common';
 import HandleRoute from './handle-route';
 import RouteResources from './route-resources';
 import { IRouterContext } from '../_layout';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/routes/handle-route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/routes/handle-route.tsx
similarity index 92%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/routes/handle-route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/routes/handle-route.tsx
index f19065f70..460369dc2 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/routes/handle-route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/routes/handle-route.tsx
@@ -7,17 +7,17 @@ import {
   parseName,
   parseNodes,
 } from '~/console/server/r-utils/common';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { handleError } from '~/root/lib/utils/common';
+import { useReload } from '~/lib/client/helpers/reloader';
+import useForm, { dummyEvent } from '~/lib/client/hooks/use-form';
+import Yup from '~/lib/server/helpers/yup';
+import { handleError } from '~/lib/utils/common';
 import { IDialogBase } from '~/console/components/types.d';
 import { IRouters } from '~/console/server/gql/queries/router-queries';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import Select from '~/components/atoms/select';
-import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
+import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
 import { useMapper } from '~/components/utils';
-import { NN } from '~/root/lib/types/common';
+import { NN } from '~/lib/types/common';
 import { TextInput } from '~/components/atoms/input';
 import { useEffect, useState } from 'react';
 import { IApps } from '~/console/server/gql/queries/app-queries';
@@ -51,20 +51,20 @@ const Root = (props: IDialog) => {
     useForm({
       initialValues: isUpdate
         ? {
-          path:
-            props.data.path?.[0] === '/'
-              ? props.data.path.substring(1)
-              : props.data.path,
-          app: props.data.app || '',
-          port: `${props.data.port}`,
-          reWrite: false,
-        }
+            path:
+              props.data.path?.[0] === '/'
+                ? props.data.path.substring(1)
+                : props.data.path,
+            app: props.data.app || '',
+            port: `${props.data.port}`,
+            reWrite: false,
+          }
         : {
-          path: '',
-          app: '',
-          port: '',
-          reWrite: false,
-        },
+            path: '',
+            app: '',
+            port: '',
+            reWrite: false,
+          },
       validationSchema: Yup.object({
         path: Yup.string().test(
           'is-valid',
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/routes/route-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/routes/route-resources.tsx
similarity index 98%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/routes/route-resources.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/routes/route-resources.tsx
index 1df8f51ac..cceb8140e 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/routes/route-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/routes/route-resources.tsx
@@ -14,10 +14,10 @@ import ResourceExtraAction, {
 } from '~/console/components/resource-extra-action';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { ExtractNodeType } from '~/console/server/r-utils/common';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import { handleError } from '~/root/lib/utils/common';
+import { useReload } from '~/lib/client/helpers/reloader';
+import { handleError } from '~/lib/utils/common';
 import { IRouter, IRouters } from '~/console/server/gql/queries/router-queries';
-import { NN } from '~/root/lib/types/common';
+import { NN } from '~/lib/types/common';
 import { useParams } from '@remix-run/react';
 import { toast } from '~/components/molecule/toast';
 import HandleRoute from './handle-route';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/routes/tools.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/routes/tools.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/routes/tools.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/routes/tools.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/settings/_index.tsx
similarity index 70%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/_index.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/settings/_index.tsx
index d479d469a..ff4a8cec0 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/settings/_index.tsx
@@ -1,5 +1,5 @@
 import { redirect } from '@remix-run/node';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx } from '~/lib/types/common';
 
 export const loader = async (ctx: IRemixCtx) => {
   return redirect(`general`);
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/settings/_layout.tsx
similarity index 88%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/_layout.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/settings/_layout.tsx
index f077c6fef..f628abc2d 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/settings/_layout.tsx
@@ -1,6 +1,6 @@
 import { Outlet, useOutletContext } from '@remix-run/react';
 import SidebarLayout from '~/console/components/sidebar-layout';
-import { IProjectContext } from '../../../../_layout';
+import { IProjectContext } from '../../../../../_layout';
 
 const Settings = () => {
   const rootContext = useOutletContext<IProjectContext>();
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/general/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/settings/general/route.tsx
similarity index 94%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/general/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/settings/general/route.tsx
index 42bb3cfe9..597aa58b7 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/router+/$router+/settings/general/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/router+/$router+/settings/general/route.tsx
@@ -8,13 +8,13 @@ import {
 } from '~/console/components/common-console-components';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { parseName } from '~/console/server/r-utils/common';
-import useClipboard from '~/root/lib/client/hooks/use-clipboard';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
+import useClipboard from '~/lib/client/hooks/use-clipboard';
+import { useUnsavedChanges } from '~/lib/client/hooks/use-unsaved-changes';
 import Wrapper from '~/console/components/wrapper';
 import DeleteDialog from '~/console/components/delete-dialog';
 import { useState } from 'react';
-import { handleError } from '~/root/lib/utils/common';
-import { useReload } from '~/root/lib/client/helpers/reloader';
+import { handleError } from '~/lib/utils/common';
+import { useReload } from '~/lib/client/helpers/reloader';
 import { IRouterContext } from '../../_layout';
 
 // export const updateProject = async ({
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/routers/_index.tsx
similarity index 96%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/_index.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/routers/_index.tsx
index 1d3938d9d..2111caa5f 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/routers/_index.tsx
@@ -1,7 +1,6 @@
 import { Plus, PlusFill } from '@jengaicons/react';
 import { defer } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
-import { Button } from '~/components/atoms/button.jsx';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import Wrapper from '~/console/components/wrapper';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
@@ -11,9 +10,10 @@ import {
   ensureClusterSet,
 } from '~/console/server/utils/auth-utils';
 import { getPagination, getSearch } from '~/console/server/utils/common';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx } from '~/lib/types/common';
 import { useState } from 'react';
 import fake from '~/root/fake-data-generator/fake';
+import { Button } from '~/components/atoms/button.js';
 import Tools from './tools';
 import HandleRouter from './handle-router';
 import RouterResourcesV2 from './router-resources-V2';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/handle-router.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/routers/handle-router.tsx
similarity index 95%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/handle-router.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/routers/handle-router.tsx
index 39185e2c0..4c73eefa7 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/handle-router.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/routers/handle-router.tsx
@@ -8,17 +8,17 @@ import {
   parseName,
   parseNodes,
 } from '~/console/server/r-utils/common';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { handleError } from '~/root/lib/utils/common';
+import { useReload } from '~/lib/client/helpers/reloader';
+import useForm, { dummyEvent } from '~/lib/client/hooks/use-form';
+import Yup from '~/lib/server/helpers/yup';
+import { handleError } from '~/lib/utils/common';
 import CommonPopupHandle from '~/console/components/common-popup-handle';
 import { IDialogBase } from '~/console/components/types.d';
 import { IRouters } from '~/console/server/gql/queries/router-queries';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { NameIdView } from '~/console/components/name-id-view';
 import Select from '~/components/atoms/select';
-import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
+import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
 import { useAppend, useMapper } from '~/components/utils';
 import { Checkbox } from '~/components/atoms/checkbox';
 import Banner from '~/components/molecule/banner';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/routers/router-resources-V2.tsx
similarity index 97%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/routers/router-resources-V2.tsx
index 33f551003..73c748c36 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/routers/router-resources-V2.tsx
@@ -15,12 +15,12 @@ import {
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
-import { handleError } from '~/root/lib/utils/common';
+import { handleError } from '~/lib/utils/common';
 import { IRouters } from '~/console/server/gql/queries/router-queries';
 import { Link, useParams } from '@remix-run/react';
 import { SyncStatusV2 } from '~/console/components/sync-status';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { useReload } from '~/root/lib/client/helpers/reloader';
+import { useReload } from '~/lib/client/helpers/reloader';
 import { toast } from '~/components/molecule/toast';
 import { Button } from '~/components/atoms/button';
 import Tooltip from '~/components/atoms/tooltip';
@@ -100,7 +100,7 @@ const GridView = ({ items, onAction }: IResource) => {
         return (
           <Grid.Column
             key={id}
-            to={`/${account}/${project}/${environment}/router/${id}/routes`}
+            to={`/${account}/${project}/env/${environment}/router/${id}/routes`}
             rows={[
               {
                 key: generateKey(keyPrefix, name + id),
@@ -214,7 +214,7 @@ const ListView = ({ items, onAction }: IResource) => {
           const { name, id, updateInfo } = parseItem(i);
           const firstDomain = i.spec.domains?.[0];
           return {
-            to: `/${account}/${project}/${environment}/router/${id}/routes`,
+            to: `/${account}/${project}/env/${environment}/router/${id}/routes`,
             columns: {
               name: {
                 render: () => <ListTitle title={name} />,
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/tools.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/routers/tools.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/routers/tools.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/routers/tools.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/secret.$secret/handle.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/secret.$secret/handle.tsx
similarity index 94%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/secret.$secret/handle.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/secret.$secret/handle.tsx
index 279e0e08c..fefb97761 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/secret.$secret/handle.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/secret.$secret/handle.tsx
@@ -3,9 +3,9 @@ import Popup from '~/components/molecule/popup';
 import { IDialog, IModifiedItem } from '~/console/components/types.d';
 import { ConsoleApiType } from '~/console/server/gql/saved-queries';
 import { parseName, parseTargetNs } from '~/console/server/r-utils/common';
-import useForm from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { handleError } from '~/root/lib/utils/common';
+import useForm from '~/lib/client/hooks/use-form';
+import Yup from '~/lib/server/helpers/yup';
+import { handleError } from '~/lib/utils/common';
 import { SecretIn } from '~/root/src/generated/gql/server';
 
 type IDialogValue = {
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/secret.$secret/resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/secret.$secret/resources.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/secret.$secret/resources.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/secret.$secret/resources.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/secret.$secret/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/secret.$secret/route.tsx
similarity index 97%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/secret.$secret/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/secret.$secret/route.tsx
index 55ee2b42f..46971043d 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/secret.$secret/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/secret.$secret/route.tsx
@@ -18,8 +18,8 @@ import {
   ensureClusterSet,
 } from '~/console/server/utils/auth-utils';
 import { constants } from '~/console/server/utils/constants';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { useReload } from '~/lib/client/helpers/reloader';
+import { IRemixCtx } from '~/lib/types/common';
 import { ISecret } from '~/console/server/gql/queries/secret-queries';
 import Handle, { updateSecret } from './handle';
 import Resources from './resources';
@@ -104,7 +104,7 @@ const ConfigBody = ({ secret }: { secret: ISecret }) => {
       <Wrapper
         header={{
           title: parseName(secret),
-          backurl: `/${account}/${project}/${environment}/cs/secrets`,
+          backurl: `/${account}/${project}/env/${environment}/cs/secrets`,
           action: Object.keys(modifiedItems).length > 0 && (
             <div className="flex flex-row items-center gap-lg">
               <Button
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/secret.$secret/tools.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/secret.$secret/tools.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/secret.$secret/tools.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/secret.$secret/tools.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/_layout.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/_layout.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/_layout.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/general/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/general/route.tsx
similarity index 94%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/general/route.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/general/route.tsx
index 7aaee2d2d..a438c46b1 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/general/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/general/route.tsx
@@ -10,14 +10,14 @@ import {
 } from '~/console/components/common-console-components';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { parseName } from '~/console/server/r-utils/common';
-import useClipboard from '~/root/lib/client/hooks/use-clipboard';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
-import { consoleBaseUrl } from '~/root/lib/configs/base-url.cjs';
-import Yup from '~/root/lib/server/helpers/yup';
-import { handleError } from '~/root/lib/utils/common';
+import useClipboard from '~/lib/client/hooks/use-clipboard';
+import useForm, { dummyEvent } from '~/lib/client/hooks/use-form';
+import { useUnsavedChanges } from '~/lib/client/hooks/use-unsaved-changes';
+import { consoleBaseUrl } from '~/lib/configs/base-url.cjs';
+import Yup from '~/lib/server/helpers/yup';
+import { handleError } from '~/lib/utils/common';
 import DeleteDialog from '~/console/components/delete-dialog';
-import { useReload } from '~/root/lib/client/helpers/reloader';
+import { useReload } from '~/lib/client/helpers/reloader';
 import Wrapper from '~/console/components/wrapper';
 import { Checkbox } from '~/components/atoms/checkbox';
 import { InfoLabel } from '~/console/components/commons';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/image-pull-secrets/_index.tsx
similarity index 96%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/_index.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/image-pull-secrets/_index.tsx
index 7c1d7dd9b..b296674a2 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/image-pull-secrets/_index.tsx
@@ -1,7 +1,6 @@
 import { Plus, PlusFill } from '@jengaicons/react';
 import { defer } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
-import { Button } from '~/components/atoms/button.jsx';
 import { LoadingComp, pWrapper } from '~/console/components/loading-component';
 import Wrapper from '~/console/components/wrapper';
 import { GQLServerHandler } from '~/console/server/gql/saved-queries';
@@ -11,8 +10,9 @@ import {
   ensureClusterSet,
 } from '~/console/server/utils/auth-utils';
 import { getPagination, getSearch } from '~/console/server/utils/common';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx } from '~/lib/types/common';
 import { useState } from 'react';
+import { Button } from '~/components/atoms/button.js';
 import Tools from './tools';
 import ImagePullSecretsResources from './image-pull-secrets-resources';
 import HandleImagePullSecret from './handle-image-pull-secret';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/handle-image-pull-secret.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/image-pull-secrets/handle-image-pull-secret.tsx
similarity index 95%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/handle-image-pull-secret.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/image-pull-secrets/handle-image-pull-secret.tsx
index 87087ff3a..6eaa58e34 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/handle-image-pull-secret.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/image-pull-secrets/handle-image-pull-secret.tsx
@@ -8,17 +8,17 @@ import {
   parseName,
   parseNodes,
 } from '~/console/server/r-utils/common';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
-import Yup from '~/root/lib/server/helpers/yup';
-import { handleError } from '~/root/lib/utils/common';
+import { useReload } from '~/lib/client/helpers/reloader';
+import useForm, { dummyEvent } from '~/lib/client/hooks/use-form';
+import Yup from '~/lib/server/helpers/yup';
+import { handleError } from '~/lib/utils/common';
 import CommonPopupHandle from '~/console/components/common-popup-handle';
 import { IDialogBase } from '~/console/components/types.d';
 import { IRouters } from '~/console/server/gql/queries/router-queries';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { NameIdView } from '~/console/components/name-id-view';
 import Select from '~/components/atoms/select';
-import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
+import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
 import { IDomains } from '~/console/server/gql/queries/domain-queries';
 import { useMapper } from '~/components/utils';
 import { IImagePullSecrets } from '~/console/server/gql/queries/image-pull-secrets-queries';
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/image-pull-secrets-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/image-pull-secrets/image-pull-secrets-resources.tsx
similarity index 95%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/image-pull-secrets-resources.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/image-pull-secrets/image-pull-secrets-resources.tsx
index a70c1e27a..0180999b8 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/image-pull-secrets-resources.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/image-pull-secrets/image-pull-secrets-resources.tsx
@@ -19,8 +19,8 @@ import {
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
-import { useReload } from '~/root/lib/client/helpers/reloader';
-import { handleError } from '~/root/lib/utils/common';
+import { useReload } from '~/lib/client/helpers/reloader';
+import { handleError } from '~/lib/utils/common';
 import { Link, useParams } from '@remix-run/react';
 import { IImagePullSecrets } from '~/console/server/gql/queries/image-pull-secrets-queries';
 import HandleImagePullSecret from './handle-image-pull-secret';
@@ -91,7 +91,7 @@ const GridView = ({ items, onAction }: IResource) => {
         return (
           <Grid.Column
             key={id}
-            to={`/${account}/${project}/${environment}/router/${id}/routes`}
+            to={`/${account}/${project}/env/${environment}/router/${id}/routes`}
             rows={[
               {
                 key: generateKey(keyPrefix, name + id),
@@ -130,7 +130,7 @@ const ListView = ({ items, onAction }: IResource) => {
           <List.Row
             key={id}
             className="!p-3xl"
-            to={`/${account}/${project}/${environment}/router/${id}/routes`}
+            to={`/${account}/${project}/env/${environment}/router/${id}/routes`}
             columns={[
               {
                 key: generateKey(keyPrefix, name + id),
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/tools.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/image-pull-secrets/tools.tsx
similarity index 100%
rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/image-pull-secrets/tools.tsx
rename to src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/settings+/image-pull-secrets/tools.tsx
diff --git a/src/apps/console/routes/_main+/$account+/$project+/environments/environment-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/$project+/environments/environment-resources-v2.tsx
index 9202e56ed..04e4c577b 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/environments/environment-resources-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/environments/environment-resources-v2.tsx
@@ -62,7 +62,7 @@ const ExtraButton = ({ item, onAction }: IExtraButton) => {
           label: 'Settings',
           icon: <GearSix size={16} />,
           type: 'item',
-          to: `/${account}/${project}/${parseName(item)}/settings/general`,
+          to: `/${account}/${project}/env/${parseName(item)}/settings/general`,
           key: 'settings',
         },
       ]}
@@ -85,7 +85,7 @@ const GridView = ({ items = [], onAction }: IResource) => {
         return (
           <Grid.Column
             key={id}
-            to={`/${account}/${project}/${id}`}
+            to={`/${account}/${project}/env/${id}`}
             rows={[
               {
                 key: generateKey(keyPrefix, name + id),
@@ -179,7 +179,7 @@ const ListView = ({ items, onAction }: IResource) => {
                 render: () => <ExtraButton item={i} onAction={onAction} />,
               },
             },
-            to: `/${account}/${project}/${id}`,
+            to: `/${account}/${project}/env/${id}`,
           };
         }),
       }}
diff --git a/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx b/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx
index 349e612e9..d2ee3ac1f 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/managed-services/backend-services-resources-V2.tsx
@@ -1,4 +1,4 @@
-import { PencilSimple, Trash } from '@jengaicons/react';
+import { GearSix, PencilSimple, Trash } from '@jengaicons/react';
 import { generateKey, titleCase } from '~/components/utils';
 import {
   ListItem,
@@ -21,7 +21,7 @@ import { useReload } from '~/root/lib/client/helpers/reloader';
 import { useState } from 'react';
 import { handleError } from '~/root/lib/utils/common';
 import { toast } from '~/components/molecule/toast';
-import { useOutletContext, useParams } from '@remix-run/react';
+import { Link, useOutletContext, useParams } from '@remix-run/react';
 import { IProjectMSvs } from '~/console/server/gql/queries/project-managed-services-queries';
 import { SyncStatusV2 } from '~/console/components/sync-status';
 import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
@@ -93,23 +93,38 @@ interface IResource {
   onAction: OnAction;
 }
 
-const GridView = ({ items = [], templates = [], onAction }: IResource) => {
+const GridView = ({ items = [], templates = [], onAction: _ }: IResource) => {
+  const { account, project } = useParams();
   return (
-    <Grid.Root className="!grid-cols-1 md:!grid-cols-3">
+    <Grid.Root className="!grid-cols-1 md:!grid-cols-3" linkComponent={Link}>
       {items.map((item, index) => {
         const { name, id, logo, updateInfo } = parseItem(item, templates);
         const keyPrefix = `${RESOURCE_NAME}-${id}-${index}`;
         return (
           <Grid.Column
             key={id}
+            to={`/${account}/${project}/msvc/${id}/logs-n-metrics`}
             rows={[
               {
-                key: generateKey(keyPrefix, name),
+                key: generateKey(keyPrefix, name + id),
                 render: () => (
                   <ListTitle
                     title={name}
                     subtitle={id}
-                    action={<ExtraButton onAction={onAction} item={item} />}
+                    action={
+                      <ResourceExtraAction
+                        options={[
+                          {
+                            key: 'managed-services-resource-extra-action-1',
+                            to: `/${account}/${project}/msvc/${id}/logs-n-metrics`,
+                            icon: <GearSix size={16} />,
+                            label: 'logs & metrics',
+                            type: 'item',
+                          },
+                        ]}
+                      />
+                    }
+                    // action={<ExtraButton onAction={onAction} item={item} />}
                     avatar={
                       <img src={logo} alt={name} className="w-4xl h-4xl" />
                     }
@@ -134,8 +149,10 @@ const GridView = ({ items = [], templates = [], onAction }: IResource) => {
 };
 
 const ListView = ({ items = [], templates = [], onAction }: IResource) => {
+  const { account, project } = useParams();
   return (
     <ListV2.Root
+      linkComponent={Link}
       data={{
         headers: [
           {
@@ -196,6 +213,7 @@ const ListView = ({ items = [], templates = [], onAction }: IResource) => {
                 render: () => <ExtraButton item={i} onAction={onAction} />,
               },
             },
+            to: `/${account}/${project}/msvc/${id}/logs-n-metrics`,
           };
         }),
       }}
diff --git a/src/apps/console/routes/_main+/$account+/$project+/msvc+/$msv+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/msvc+/$msv+/_layout.tsx
new file mode 100644
index 000000000..bfc979607
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/$project+/msvc+/$msv+/_layout.tsx
@@ -0,0 +1,97 @@
+import {
+  Outlet,
+  useLoaderData,
+  useOutletContext,
+  useParams,
+} from '@remix-run/react';
+import { CommonTabs } from '~/console/components/common-navbar-tabs';
+import { IRemixCtx } from '~/lib/types/common';
+import { LoadingComp, pWrapper } from '~/console/components/loading-component';
+import { ensureAccountSet } from '~/console/server/utils/auth-utils';
+import { GQLServerHandler } from '~/console/server/gql/saved-queries';
+import logger from '~/lib/client/helpers/log';
+import { defer } from '@remix-run/node';
+import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
+import { IProjectMSv } from '~/console/server/gql/queries/project-managed-services-queries';
+
+const ManagedServiceTabs = () => {
+  const { account, project, msv } = useParams();
+  return (
+    <CommonTabs
+      baseurl={`/${account}/${project}/msvc/${msv}`}
+      backButton={{
+        to: `/${account}/${project}/managed-services`,
+        label: 'Managed Services',
+      }}
+      tabs={[
+        {
+          label: 'Logs & Metrics',
+          to: '/logs-n-metrics',
+          value: '/logs-n-metrics',
+        },
+      ]}
+    />
+  );
+};
+
+export const handle = () => {
+  return {
+    navbar: <ManagedServiceTabs />,
+  };
+};
+
+export interface IProjectManagedServiceContext extends IProjectContext {
+  managedService: IProjectMSv;
+}
+
+const MSOutlet = ({
+  managedService: OProjectMSv,
+}: {
+  managedService: IProjectMSv;
+}) => {
+  const rootContext = useOutletContext<IProjectContext>();
+
+  return <Outlet context={{ ...rootContext, managedService: OProjectMSv }} />;
+};
+
+export const loader = async (ctx: IRemixCtx) => {
+  const promise = pWrapper(async () => {
+    ensureAccountSet(ctx);
+    const { msv, project } = ctx.params;
+    try {
+      const { data, errors } = await GQLServerHandler(
+        ctx.request
+      ).getProjectMSv({
+        name: msv,
+        projectName: project,
+      });
+      if (errors) {
+        throw errors[0];
+      }
+      return {
+        managedService: data,
+      };
+    } catch (err) {
+      logger.log(err);
+
+      return {
+        managedService: {} as IProjectMSv,
+        redirect: `../managed-services`,
+      };
+    }
+  });
+  return defer({ promise: await promise });
+};
+
+const ManagedService = () => {
+  const { promise } = useLoaderData<typeof loader>();
+  return (
+    <LoadingComp data={promise}>
+      {({ managedService }) => {
+        return <MSOutlet managedService={managedService} />;
+      }}
+    </LoadingComp>
+  );
+};
+
+export default ManagedService;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/msvc+/$msv+/index.tsx b/src/apps/console/routes/_main+/$account+/$project+/msvc+/$msv+/index.tsx
new file mode 100644
index 000000000..3a3bd1163
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/$project+/msvc+/$msv+/index.tsx
@@ -0,0 +1,5 @@
+import { redirect } from '@remix-run/node';
+
+export const loader = async () => {
+  return redirect(`/logs-n-metrics`);
+};
diff --git a/src/apps/console/routes/_main+/$account+/$project+/msvc+/$msv+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/msvc+/$msv+/logs-n-metrics/route.tsx
new file mode 100644
index 000000000..97484e06c
--- /dev/null
+++ b/src/apps/console/routes/_main+/$account+/$project+/msvc+/$msv+/logs-n-metrics/route.tsx
@@ -0,0 +1,289 @@
+import { useOutletContext } from '@remix-run/react';
+import axios from 'axios';
+import Chart from '~/console/components/charts/charts-client';
+import useDebounce from '~/lib/client/hooks/use-debounce';
+import { useState } from 'react';
+import { dayjs } from '~/components/molecule/dayjs';
+import { parseValue } from '~/console/page-components/util';
+import { ApexOptions } from 'apexcharts';
+import { useDataState } from '~/console/page-components/common-state';
+import { observeUrl } from '~/lib/configs/base-url.cjs';
+import LogComp from '~/lib/client/components/logger';
+import LogAction from '~/console/page-components/log-action';
+import { IProjectManagedServiceContext } from '~/console/routes/_main+/$account+/$project+/msvc+/$msv+/_layout';
+import { parseName } from '~/console/server/r-utils/common';
+import { generatePlainColor } from '~/root/lib/utils/color-generator';
+
+const LogsAndMetrics = () => {
+  const { account, project, managedService } =
+    useOutletContext<IProjectManagedServiceContext>();
+  type tData = {
+    metric: {
+      exported_pod: string;
+    };
+    values: [number, string][];
+  };
+
+  const [data, setData] = useState<{
+    cpu: tData[];
+    memory: tData[];
+  }>({
+    cpu: [],
+    memory: [],
+  });
+
+  const xAxisFormatter = (val: string, __?: number) => {
+    return dayjs((parseValue(val, 0) || 0) * 1000).format('hh:mm A');
+    // return '';
+  };
+
+  const tooltipXAixsFormatter = (val: number) =>
+    dayjs(val * 1000).format('DD/MM/YY hh:mm A');
+
+  const getAnnotations = (
+    {
+      min = '',
+      max = '',
+    }: {
+      min?: string;
+      max?: string;
+    },
+    resType: 'cpu' | 'memory'
+  ) => {
+    const tmin = parseValue(min, 0);
+    const tmax = parseValue(max, 0);
+
+    const unit = resType === 'cpu' ? 'vCPU' : 'MB';
+
+    const k: ApexOptions['annotations'] = {
+      yaxis: [
+        {
+          y: tmin,
+          y2: tmin === tmax ? tmax + 1 : tmax,
+          fillColor: '#33f',
+          borderColor: '#33f',
+          opacity: 0.1,
+          strokeDashArray: 0,
+          borderWidth: 1,
+          label: {
+            style: {
+              fontFamily: 'Inter',
+              fontSize: '14px',
+            },
+            // textAnchor: 'middle',
+            // position: 'center',
+            text:
+              tmin === tmax
+                ? `allocated: ${tmax}${unit}`
+                : `min: ${tmin}${unit} | max: ${tmax}${unit}`,
+          },
+        },
+      ],
+    };
+
+    return k;
+  };
+
+  useDebounce(
+    () => {
+      (async () => {
+        try {
+          const resp = await axios({
+            url: `${observeUrl}/observability/metrics/cpu?cluster_name=${project.clusterName}&tracking_id=${managedService.id}`,
+            method: 'GET',
+            withCredentials: true,
+          });
+
+          setData((prev) => ({
+            ...prev,
+            cpu: resp?.data?.data?.result || [],
+          }));
+
+          // setCpuData(resp?.data?.data?.result[0]?.values || []);
+        } catch (err) {
+          console.error('error1', err);
+        }
+      })();
+      (async () => {
+        try {
+          const resp = await axios({
+            url: `${observeUrl}/observability/metrics/memory?cluster_name=${project.clusterName}&tracking_id=${managedService.id}`,
+            method: 'GET',
+            withCredentials: true,
+          });
+
+          setData((prev) => ({
+            ...prev,
+            memory: resp?.data?.data?.result || [],
+          }));
+        } catch (err) {
+          console.error(err);
+        }
+      })();
+    },
+    1000,
+    []
+  );
+
+  const chartOptions: ApexOptions = {
+    chart: {
+      type: 'line',
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+      redrawOnWindowResize: true,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      width: 2,
+      curve: 'smooth',
+    },
+
+    xaxis: {
+      type: 'datetime',
+      labels: {
+        show: false,
+        formatter: xAxisFormatter,
+      },
+    },
+  };
+
+  const { state } = useDataState<{
+    linesVisible: boolean;
+    timestampVisible: boolean;
+  }>('logs');
+
+  return (
+    <div className="flex flex-col gap-6xl pt-6xl">
+      <div className="gap-6xl items-center flex-col grid sm:grid-cols-2 lg:grid-cols-2">
+        <Chart
+          title="CPU Usage"
+          options={{
+            ...chartOptions,
+            series: [
+              ...data.cpu.map((d) => {
+                return {
+                  name: d.metric.exported_pod,
+                  color: generatePlainColor(d.metric.exported_pod),
+                  data: d.values.map((v) => {
+                    return [v[0], parseFloat(v[1])];
+                  }),
+                };
+              }),
+            ],
+            tooltip: {
+              x: {
+                formatter: tooltipXAixsFormatter,
+              },
+              y: {
+                formatter(val) {
+                  return `${val.toFixed(2)} m`;
+                },
+              },
+            },
+
+            annotations: getAnnotations(
+              managedService.spec?.msvcSpec.serviceTemplate.spec?.resources
+                ?.cpu || {},
+
+              'cpu'
+            ),
+
+            yaxis: {
+              min: 0,
+              max:
+                parseValue(
+                  managedService.spec?.msvcSpec.serviceTemplate.spec?.resources
+                    ?.cpu?.max,
+                  0
+                ) * 1.1,
+
+              floating: false,
+              labels: {
+                formatter: (val) => {
+                  return `${(val / 1000).toFixed(3)} vCPU`;
+                },
+              },
+            },
+          }}
+        />
+
+        <Chart
+          title="Memory Usage"
+          options={{
+            ...chartOptions,
+            series: [
+              ...data.memory.map((d) => {
+                return {
+                  name: d.metric.exported_pod,
+                  color: generatePlainColor(d.metric.exported_pod),
+                  data: d.values.map((v) => {
+                    return [v[0], parseFloat(v[1])];
+                  }),
+                };
+              }),
+            ],
+
+            annotations: getAnnotations(
+              managedService.spec?.msvcSpec.serviceTemplate.spec?.resources
+                ?.cpu || {},
+              'memory'
+            ),
+
+            yaxis: {
+              min: 0,
+              max:
+                parseValue(
+                  managedService.spec?.msvcSpec.serviceTemplate.spec?.resources
+                    ?.cpu?.max,
+                  0
+                ) * 1.1,
+
+              floating: false,
+              labels: {
+                formatter: (val) => `${val.toFixed(0)} MB`,
+              },
+            },
+            tooltip: {
+              x: {
+                formatter: tooltipXAixsFormatter,
+              },
+              y: {
+                formatter(val) {
+                  return `${val.toFixed(2)} MB`;
+                },
+              },
+            },
+          }}
+        />
+      </div>
+
+      <div className="flex-1">
+        <LogComp
+          {...{
+            hideLineNumber: !state.linesVisible,
+            hideTimestamp: !state.timestampVisible,
+            dark: true,
+            width: '100%',
+            height: '70vh',
+            title: 'Logs',
+            actionComponent: <LogAction />,
+            websocket: {
+              account: parseName(account),
+              cluster: project.clusterName || '',
+              trackingId: managedService.id,
+              recordVersion: managedService.recordVersion,
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LogsAndMetrics;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx
index f453ecea9..12d0c27f6 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx
@@ -26,7 +26,6 @@ import {
 } from '~/console/components/commons';
 import { parseName, parseNodes } from '~/console/server/r-utils/common';
 import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
-import { INodepools } from '~/console/server/gql/queries/nodepool-queries';
 import { keyconstants } from '~/console/server/r-utils/key-constants';
 import { IProjectContext } from '../_layout';
 
@@ -468,13 +467,8 @@ const ManagedServiceLayout = () => {
   const rootUrl = `/${account}/${project}/managed-services`;
 
   const { cluster } = useOutletContext<IProjectContext>();
-  console.log('cluster', parseName(cluster));
 
-  const {
-    data: nodepoolData,
-    isLoading: nodepoolLoading,
-    error: nodepoolLoadingError,
-  } = useCustomSwr('/nodepools', async () => {
+  const { data: nodepoolData } = useCustomSwr('/nodepools', async () => {
     return api.listNodePools({ clusterName: parseName(cluster) });
   });
 
@@ -603,7 +597,7 @@ const ManagedServiceLayout = () => {
   }));
 
   const statefulNodepools = nodepools.filter(
-    (np) => np.nodepoolStateType == 'stateful'
+    (np) => np.nodepoolStateType === 'stateful'
   );
 
   useEffect(() => {
diff --git a/src/apps/console/server/gql/queries/cluster-managed-services-queries.ts b/src/apps/console/server/gql/queries/cluster-managed-services-queries.ts
index a03482870..0e1f2536f 100644
--- a/src/apps/console/server/gql/queries/cluster-managed-services-queries.ts
+++ b/src/apps/console/server/gql/queries/cluster-managed-services-queries.ts
@@ -57,7 +57,7 @@ export const clusterManagedServicesQueries = (executor: IExecutor) => ({
       transformer(data: ConsoleGetClusterMSvQuery) {
         return data.infra_getClusterManagedService;
       },
-      vars(_: ConsoleGetClusterMSvQueryVariables) { },
+      vars(_: ConsoleGetClusterMSvQueryVariables) {},
     }
   ),
   createClusterMSv: executor(
@@ -77,7 +77,7 @@ export const clusterManagedServicesQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleCreateClusterMSvMutation) =>
         data.infra_createClusterManagedService,
-      vars(_: ConsoleCreateClusterMSvMutationVariables) { },
+      vars(_: ConsoleCreateClusterMSvMutationVariables) {},
     }
   ),
   updateClusterMSv: executor(
@@ -97,7 +97,7 @@ export const clusterManagedServicesQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleUpdateClusterMSvMutation) =>
         data.infra_updateClusterManagedService,
-      vars(_: ConsoleUpdateClusterMSvMutationVariables) { },
+      vars(_: ConsoleUpdateClusterMSvMutationVariables) {},
     }
   ),
   listClusterMSvs: executor(
@@ -163,7 +163,7 @@ export const clusterManagedServicesQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleListClusterMSvsQuery) =>
         data.infra_listClusterManagedServices,
-      vars(_: ConsoleListClusterMSvsQueryVariables) { },
+      vars(_: ConsoleListClusterMSvsQueryVariables) {},
     }
   ),
   deleteClusterMSv: executor(
@@ -181,7 +181,7 @@ export const clusterManagedServicesQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleDeleteClusterMSvMutation) =>
         data.infra_deleteClusterManagedService,
-      vars(_: ConsoleDeleteClusterMSvMutationVariables) { },
+      vars(_: ConsoleDeleteClusterMSvMutationVariables) {},
     }
   ),
 });
diff --git a/src/apps/console/server/gql/queries/project-managed-services-queries.ts b/src/apps/console/server/gql/queries/project-managed-services-queries.ts
index 400ee27cd..d24e1c8d0 100644
--- a/src/apps/console/server/gql/queries/project-managed-services-queries.ts
+++ b/src/apps/console/server/gql/queries/project-managed-services-queries.ts
@@ -29,6 +29,8 @@ export const projectManagedServicesQueries = (executor: IExecutor) => ({
         $name: String!
       ) {
         core_getProjectManagedService(projectName: $projectName, name: $name) {
+          id
+          recordVersion
           createdBy {
             userEmail
             userId
diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
index cffac0bfe..04e351929 100644
--- a/src/generated/gql/server.ts
+++ b/src/generated/gql/server.ts
@@ -4468,6 +4468,8 @@ export type ConsoleGetProjectMSvQueryVariables = Exact<{
 
 export type ConsoleGetProjectMSvQuery = {
   core_getProjectManagedService?: {
+    id: string;
+    recordVersion: number;
     creationTime: any;
     displayName: string;
     markedForDeletion?: boolean;

From 9d91e774907d4d2ce30b6a99b81567e1c6d2b371 Mon Sep 17 00:00:00 2001
From: nxtcoder36 <mohit0698@gmail.com>
Date: Wed, 20 Mar 2024 15:30:23 +0530
Subject: [PATCH 61/66] Toast message component changed

---
 package.json                                  |  1 -
 pnpm-lock.yaml                                | 13 ----
 .../components/molecule/toast.tsx             | 64 ++++++++++++++-----
 3 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 0672456f3..1837e9a54 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,6 @@
 		"reconnecting-websocket": "^4.4.0",
 		"remix": "^1.19.3",
 		"search-in-json": "^1.0.67",
-		"sonner": "^1.4.3",
 		"swr": "^2.2.4",
 		"use-immer": "^0.9.0",
 		"uuid": "^9.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c9c491125..7ecb5fc85 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -230,9 +230,6 @@ dependencies:
   search-in-json:
     specifier: ^1.0.67
     version: 1.0.67
-  sonner:
-    specifier: ^1.4.3
-    version: 1.4.3(react-dom@18.2.0)(react@18.2.0)
   swr:
     specifier: ^2.2.4
     version: 2.2.4(react@18.2.0)
@@ -9975,16 +9972,6 @@ packages:
       atomic-sleep: 1.0.0
     dev: false
 
-  /sonner@1.4.3(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-SArYlHbkjqRuLiR0iGY2ZSr09oOrxw081ZZkQPfXrs8aZQLIBOLOdzTYxGJB5yIZ7qL56UEPmrX1YqbODwG0Lw==}
-    peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /sort-object-keys@1.1.3:
     resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==}
     dev: true
diff --git a/src/design-system/components/molecule/toast.tsx b/src/design-system/components/molecule/toast.tsx
index 26222cbe7..86945847a 100644
--- a/src/design-system/components/molecule/toast.tsx
+++ b/src/design-system/components/molecule/toast.tsx
@@ -1,12 +1,33 @@
-import { CheckCircle, Info, Warning, WarningCircle } from '@jengaicons/react';
-
-import { Toaster as Container, toast as t, ToastT } from 'sonner';
+import {
+  CheckCircle,
+  Info,
+  Warning,
+  WarningCircle,
+  X,
+} from '@jengaicons/react';
+import {
+  ToastContainer as Container,
+  ToastPosition,
+  toast as t,
+} from 'react-toastify';
 
 export const toast = {
   info: t.info,
   success: t.success,
   error: t.error,
-  warn: t.warning,
+  warn: t.warn,
+};
+
+const classes = {
+  info: 'bg-surface-basic-default text-text-default bodyMd border-border-disabled',
+  error:
+    'bg-surface-basic-default text-text-default bodyMd border-border-disabled',
+  success:
+    'bg-surface-basic-default text-text-default bodyMd border-border-disabled',
+  warning:
+    'bg-surface-basic-default text-text-default bodyMd border-border-disabled',
+  default:
+    'bg-surface-basic-default text-text-default bodyMd border-border-disabled',
 };
 
 const icons = {
@@ -14,25 +35,34 @@ const icons = {
   error: <WarningCircle size={14} />,
   success: <CheckCircle size={14} />,
   warning: <Warning size={14} />,
+  default: null,
 };
 
+const CloseButton = () => (
+  <span className="text-text-default hover:text-text-default/50 h-[24px] flex items-center">
+    <X color="currentColor" size={12} />
+  </span>
+);
+
 interface IToastContainer {
-  position?: ToastT['position'];
+  autoClose?: number | false | undefined;
+  position?: ToastPosition;
 }
-
-export const ToastContainer = ({ position }: IToastContainer) => {
+export const ToastContainer = ({ autoClose, position }: IToastContainer) => {
   return (
     <Container
-      toastOptions={{
-        // unstyled: true,
-        classNames: {
-          toast: 'bg-surface-basic-default',
-          title: 'text-text-default bodyMd-medium',
-          description: 'text-text-default bodyMd',
-        },
-      }}
-      icons={icons}
-      position={position || 'bottom-right'}
+      toastClassName={({ type }: any) =>
+        `z-[9999999999] shadow-popover relative flex items-start gap-xl p-xl mb-xl rounded-md justify-between overflow-hidden cursor-pointer border 
+        ${classes[(type || 'default') as keyof typeof classes]}`
+      }
+      bodyClassName={() =>
+        'text-text-default py-sm bodyMd-medium flex flex-row items-center [&>*]:!w-auto [&>*]:break-all [&>*]:whitespace-break-spaces'
+      }
+      hideProgressBar
+      icon={({ type }) => icons[type]}
+      closeButton={<CloseButton />}
+      position={position || 'top-right'}
+      autoClose={autoClose}
     />
   );
 };

From 7843120cd7461212f78dcb74f08aca6ab98f82a8 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Wed, 20 Mar 2024 15:52:54 +0530
Subject: [PATCH 62/66] fix(app): - adds managed resource as environment in
 create app and in setting of app - minor ui redesign of app environment

---
 gql-queries-generator/doc/queries.graphql     |   1 +
 .../multi-step-progress-wrapper.tsx           |   5 +-
 .../new-app/app-config-mount.tsx              |   7 +-
 .../$environment+/new-app/app-dialogs.tsx     | 100 ++++++++++++------
 .../new-app/app-environment-variables.tsx     |   7 +-
 .../env+/$environment+/new-app/route.tsx      |   2 +
 .../server/gql/queries/secret-queries.ts      |  11 +-
 src/generated/gql/server.ts                   |   1 +
 8 files changed, 96 insertions(+), 38 deletions(-)

diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
index aba522ef2..81c55c57d 100644
--- a/gql-queries-generator/doc/queries.graphql
+++ b/gql-queries-generator/doc/queries.graphql
@@ -1534,6 +1534,7 @@ query consoleListSecrets($projectName: String!, $envName: String!, $search: Sear
         displayName
         stringData
         environmentName
+        isReadyOnly
         immutable
         lastUpdatedBy {
           userEmail
diff --git a/src/apps/console/components/multi-step-progress-wrapper.tsx b/src/apps/console/components/multi-step-progress-wrapper.tsx
index 9f4161f0f..dbafb4854 100644
--- a/src/apps/console/components/multi-step-progress-wrapper.tsx
+++ b/src/apps/console/components/multi-step-progress-wrapper.tsx
@@ -2,6 +2,7 @@ import { Link } from '@remix-run/react';
 import { ReactNode } from 'react';
 import { Button } from '~/components/atoms/button';
 import { ArrowLeft } from '~/console/components/icons';
+import { cn } from '~/components/utils';
 import SplitWrapper from './split-wrapper';
 
 type ITitleSection = {
@@ -29,6 +30,7 @@ interface IProgressWrapper extends ITitleSection {
     content: string;
   };
   fillerImage?: ReactNode;
+  className?: string;
 }
 const MultiStepProgressWrapper = ({
   subTitle,
@@ -37,10 +39,11 @@ const MultiStepProgressWrapper = ({
   backButton,
   fillerImage,
   action,
+  className,
 }: IProgressWrapper) => {
   return (
     <SplitWrapper fillerImage={fillerImage}>
-      <div className="max-w-[568px] flex flex-col gap-7xl">
+      <div className={cn('max-w-[568px] flex flex-col gap-7xl', className)}>
         <div className="flex flex-col gap-xl">
           {backButton && (
             <Button
diff --git a/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-config-mount.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-config-mount.tsx
index 3646b719a..3dd147eee 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-config-mount.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-config-mount.tsx
@@ -299,7 +299,7 @@ export const ConfigMounts = () => {
         className="flex flex-col gap-3xl p-3xl rounded border border-border-default"
       >
         <div className="flex flex-row gap-3xl items-start">
-          <div className="flex-1">
+          <div className="basis-1/3">
             <TextInput
               label="Path"
               size="lg"
@@ -395,6 +395,11 @@ export const ConfigMounts = () => {
                         label="Secrets"
                         type="CLICKABLE"
                       />
+                      <Chip
+                        item={{ name: 'mres' }}
+                        label="Managed resources"
+                        type="CLICKABLE"
+                      />
                     </ChipGroup>
                   </div>
                 )}
diff --git a/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-dialogs.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-dialogs.tsx
index cb7ab7b73..8582c52c3 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-dialogs.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-dialogs.tsx
@@ -42,9 +42,9 @@ const AppDialog = ({
   const [isloading, setIsloading] = useState<boolean>(true);
   const { environment, project } = useParams();
 
-  const [configs, setConfigs] = useState<
-    ExtractNodeType<ISecrets>[] | ExtractNodeType<IConfigs>[]
-  >([]);
+  const [configs, setConfigs] = useState<ExtractNodeType<IConfigs>[]>([]);
+  const [secrets, setSecrets] = useState<ExtractNodeType<ISecrets>[]>([]);
+  const [mres, setMres] = useState<ExtractNodeType<ISecrets>[]>([]);
   const [selectedConfig, setSelectedConfig] = useState<
     (ExtractNodeType<ISecrets> & ExtractNodeType<IConfigs>) | null
   >(null);
@@ -52,6 +52,8 @@ const AppDialog = ({
 
   const reset = () => {
     setConfigs([]);
+    setSecrets([]);
+    setMres([]);
     setIsloading(true);
     setSelectedConfig(null);
     setSelectedKey('');
@@ -68,26 +70,37 @@ const AppDialog = ({
   useDebounce(
     async () => {
       if (
-        !['secret', 'config'].includes(show?.type || '') ||
+        !['secret', 'config', 'mres'].includes(show?.type || '') ||
         !(environment && project)
       ) {
         return;
       }
       try {
         setIsloading(true);
-        let apiCall = api.listConfigs;
-        if (show?.type === 'secret') apiCall = api.listSecrets;
 
-        const { data, errors } = await apiCall({
-          projectName: project,
-          envName: environment,
-          //   pagination: getPagination(ctx),
-          //   search: getSearch(ctx),
-        });
-        if (errors) {
-          throw errors[0];
+        if (show?.type === 'config') {
+          const { data, errors } = await api.listConfigs({
+            projectName: project,
+            envName: environment,
+          });
+          if (errors) {
+            throw errors[0];
+          }
+          setConfigs(parseNodes(data));
+        } else {
+          const { data, errors } = await api.listSecrets({
+            projectName: project,
+            envName: environment,
+          });
+          if (errors) {
+            throw errors[0];
+          }
+          if (show?.type === 'secret') {
+            setSecrets(parseNodes(data).filter((s) => s.isReadyOnly === false));
+          } else {
+            setMres(parseNodes(data).filter((m) => m.isReadyOnly === true));
+          }
         }
-        setConfigs(parseNodes(data));
       } catch (err) {
         handleError(err);
       } finally {
@@ -129,7 +142,9 @@ const AppDialog = ({
               ? selectedConfig?.displayName
               : show?.type === 'config'
               ? 'Select config'
-              : 'Select secret'}
+              : show?.type === 'secret'
+              ? 'Select secret'
+              : 'Select managed resource'}
           </div>
           <div className="bodyMd text-text-strong font-normal">
             {currentStep}/2
@@ -141,20 +156,20 @@ const AppDialog = ({
           <div className="min-h-[40vh]">
             <MultiStep.Root currentStep={currentStep}>
               <MultiStep.Step step={1}>
-                {configs.length > 0 ? (
+                {configs.length > 0 || secrets.length > 0 || mres.length > 0 ? (
                   show?.type === 'config' ? (
                     <ConfigResource
                       items={configs}
                       hasActions={false}
                       onClick={(val) => {
-                        setSelectedConfig(val);
+                        setSelectedConfig({ ...val, isReadyOnly: false });
                         showLoading();
                         onNext();
                       }}
                     />
                   ) : (
                     <SecretResources
-                      items={configs}
+                      items={show?.type === 'secret' ? secrets : mres}
                       hasActions={false}
                       onClick={(val) => {
                         setSelectedConfig(val);
@@ -165,16 +180,30 @@ const AppDialog = ({
                   )
                 ) : (
                   <NoResultsFound
-                    title={
-                      show?.type === 'config'
-                        ? 'No configs are added.'
-                        : 'No secrets are added.'
-                    }
-                    subtitle={
-                      show?.type === 'config'
-                        ? 'Please add configs in Configs and Secrets.'
-                        : 'Please add secrets in Configs and Secrets.'
-                    }
+                    title={(() => {
+                      switch (show?.type) {
+                        case 'config':
+                          return 'Configs not available.';
+                        case 'secret':
+                          return 'Secrets not available.';
+                        case 'mres':
+                          return 'Managed Resources not available.';
+                        default:
+                          return 'Data not available.';
+                      }
+                    })()}
+                    subtitle={(() => {
+                      switch (show?.type) {
+                        case 'config':
+                          return 'Please add in Configs.';
+                        case 'secret':
+                          return 'Please add in Secrets.';
+                        case 'mres':
+                          return 'Please add in Managed Resources.';
+                        default:
+                          return 'Please add in Configs and Secrets.';
+                      }
+                    })()}
                     shadow={false}
                     border={false}
                   />
@@ -247,7 +276,18 @@ const AppDialog = ({
               onSubmit({
                 refKey: sK,
                 refName: parseName(sC),
-                type: show?.type as ICSComponent['type'],
+                // type: show?.type as ICSComponent['type'],
+                type: (() => {
+                  switch (show?.type) {
+                    case 'config':
+                      return 'config';
+                    case 'secret':
+                    case 'mres':
+                      return 'secret';
+                    default:
+                      return 'config';
+                  }
+                })() as ICSComponent['type'],
               });
             }
           }}
diff --git a/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-environment-variables.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-environment-variables.tsx
index 6f98303a1..81f7e94be 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-environment-variables.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-environment-variables.tsx
@@ -341,7 +341,7 @@ export const EnvironmentVariables = () => {
         className="flex flex-col gap-3xl p-3xl rounded border border-border-default"
       >
         <div className="flex flex-row gap-3xl items-start">
-          <div className="flex-1">
+          <div className="basis-1/3">
             <TextInput
               label="Key"
               size="lg"
@@ -439,6 +439,11 @@ export const EnvironmentVariables = () => {
                         label="Secrets"
                         type="CLICKABLE"
                       />
+                      <Chip
+                        item={{ name: 'mres' }}
+                        label="Managed resources"
+                        type="CLICKABLE"
+                      />
                     </ChipGroup>
                   ) : null
                 }
diff --git a/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/route.tsx
index 9dd7fa79f..cb0c7cdbe 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/route.tsx
@@ -13,6 +13,7 @@ import FillerAppEnv from '~/console/assets/app/filler-env';
 import FillerAppNetwork from '~/console/assets/app/filler-network';
 import FillerAppReview from '~/console/assets/app/filler-review';
 import AppCompute from '~/console/page-components/app/compute';
+import { cn } from '~/components/utils';
 import AppDetail from './app-detail';
 import AppEnvironment from './app-environment';
 import AppNetwork from './app-network';
@@ -56,6 +57,7 @@ const AppComp = () => {
         content: 'Back to apps',
         to: '../apps',
       }}
+      className={cn(currentStep === 3 ? 'max-w-[700px]' : '')}
     >
       <MultiStepProgress.Root
         currentStep={currentStep}
diff --git a/src/apps/console/server/gql/queries/secret-queries.ts b/src/apps/console/server/gql/queries/secret-queries.ts
index 220300d8b..57507eb3a 100644
--- a/src/apps/console/server/gql/queries/secret-queries.ts
+++ b/src/apps/console/server/gql/queries/secret-queries.ts
@@ -44,6 +44,7 @@ export const secretQueries = (executor: IExecutor) => ({
               displayName
               stringData
               environmentName
+              isReadyOnly
               immutable
               lastUpdatedBy {
                 userEmail
@@ -77,7 +78,7 @@ export const secretQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleListSecretsQuery) => data.core_listSecrets,
-      vars(_: ConsoleListSecretsQueryVariables) { },
+      vars(_: ConsoleListSecretsQueryVariables) {},
     }
   ),
   createSecret: executor(
@@ -99,7 +100,7 @@ export const secretQueries = (executor: IExecutor) => ({
     {
       transformer: (data: ConsoleCreateSecretMutation) =>
         data.core_createSecret,
-      vars(_: ConsoleCreateSecretMutationVariables) { },
+      vars(_: ConsoleCreateSecretMutationVariables) {},
     }
   ),
 
@@ -137,7 +138,7 @@ export const secretQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleGetSecretQuery) => data.core_getSecret,
-      vars(_: ConsoleGetSecretQueryVariables) { },
+      vars(_: ConsoleGetSecretQueryVariables) {},
     }
   ),
   updateSecret: executor(
@@ -158,7 +159,7 @@ export const secretQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleUpdateSecretMutation) => data,
-      vars(_: ConsoleUpdateSecretMutationVariables) { },
+      vars(_: ConsoleUpdateSecretMutationVariables) {},
     }
   ),
   deleteSecret: executor(
@@ -177,7 +178,7 @@ export const secretQueries = (executor: IExecutor) => ({
     `,
     {
       transformer: (data: ConsoleDeleteSecretMutation) => data,
-      vars(_: ConsoleDeleteSecretMutationVariables) { },
+      vars(_: ConsoleDeleteSecretMutationVariables) {},
     }
   ),
 });
diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
index 04e351929..063718b74 100644
--- a/src/generated/gql/server.ts
+++ b/src/generated/gql/server.ts
@@ -3001,6 +3001,7 @@ export type ConsoleListSecretsQuery = {
         displayName: string;
         stringData?: any;
         environmentName: string;
+        isReadyOnly: boolean;
         immutable?: boolean;
         markedForDeletion?: boolean;
         projectName: string;

From 66c551d5a0c32ea1713b1182bea239e0ffc63bd4 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Wed, 20 Mar 2024 16:32:30 +0530
Subject: [PATCH 63/66] add env mode in environment listing

---
 .../$project+/environments/environment-resources-v2.tsx   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/apps/console/routes/_main+/$account+/$project+/environments/environment-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/$project+/environments/environment-resources-v2.tsx
index 04e4c577b..8ea1467a2 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/environments/environment-resources-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/environments/environment-resources-v2.tsx
@@ -140,6 +140,11 @@ const ListView = ({ items, onAction }: IResource) => {
             name: 'status',
             className: 'flex-1 min-w-[30px] flex items-center justify-center',
           },
+          {
+            render: () => 'Environmet',
+            name: 'environment',
+            className: 'w-[180px]',
+          },
           {
             render: () => 'Updated',
             name: 'updated',
@@ -167,6 +172,9 @@ const ListView = ({ items, onAction }: IResource) => {
               status: {
                 render: () => <SyncStatusV2 item={i} />,
               },
+              environment: {
+                render: () => <ListItem data={i.spec?.routing?.mode} />,
+              },
               updated: {
                 render: () => (
                   <ListItem

From 9f8be9311fba018dfbcde1b01c63f3e5ed930a69 Mon Sep 17 00:00:00 2001
From: Abdhesh Nayak <abdheshnayak@gmail.com>
Date: Thu, 21 Mar 2024 10:04:21 +0530
Subject: [PATCH 64/66] :alien: Backend schema changes matched.

---
 gql-queries-generator/doc/queries.graphql     |  3 --
 .../gql/queries/managed-resources-queries.ts  |  1 -
 .../server/gql/queries/router-queries.ts      |  2 -
 src/generated/gql/sdl.graphql                 | 36 +++++++------
 src/generated/gql/server.ts                   | 50 +++++++++----------
 5 files changed, 40 insertions(+), 52 deletions(-)

diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
index 81c55c57d..359d30c88 100644
--- a/gql-queries-generator/doc/queries.graphql
+++ b/gql-queries-generator/doc/queries.graphql
@@ -1308,7 +1308,6 @@ query consoleListRouters($projectName: String!, $envName: String!, $search: Sear
           }
           routes {
             app
-            lambda
             path
             port
             rewrite
@@ -1406,7 +1405,6 @@ query consoleGetRouter($projectName: String!, $envName: String!, $name: String!)
       }
       routes {
         app
-        lambda
         path
         port
         rewrite
@@ -3382,7 +3380,6 @@ query consoleListManagedResources($projectName: String!, $envName: String!, $sea
         }
         recordVersion
         spec {
-          resourceName
           resourceTemplate {
             apiVersion
             kind
diff --git a/src/apps/console/server/gql/queries/managed-resources-queries.ts b/src/apps/console/server/gql/queries/managed-resources-queries.ts
index 46d245962..1385df710 100644
--- a/src/apps/console/server/gql/queries/managed-resources-queries.ts
+++ b/src/apps/console/server/gql/queries/managed-resources-queries.ts
@@ -152,7 +152,6 @@ export const managedResourceQueries = (executor: IExecutor) => ({
               }
               recordVersion
               spec {
-                resourceName
                 resourceTemplate {
                   apiVersion
                   kind
diff --git a/src/apps/console/server/gql/queries/router-queries.ts b/src/apps/console/server/gql/queries/router-queries.ts
index c5d3557f1..9d178665f 100644
--- a/src/apps/console/server/gql/queries/router-queries.ts
+++ b/src/apps/console/server/gql/queries/router-queries.ts
@@ -149,7 +149,6 @@ export const routerQueries = (executor: IExecutor) => ({
                 }
                 routes {
                   app
-                  lambda
                   path
                   port
                   rewrite
@@ -262,7 +261,6 @@ export const routerQueries = (executor: IExecutor) => ({
             }
             routes {
               app
-              lambda
               path
               port
               rewrite
diff --git a/src/generated/gql/sdl.graphql b/src/generated/gql/sdl.graphql
index af6293ed5..e4d247813 100644
--- a/src/generated/gql/sdl.graphql
+++ b/src/generated/gql/sdl.graphql
@@ -211,7 +211,7 @@ type CloudProviderSecret {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
   metadata: Metadata!
@@ -244,7 +244,7 @@ type Cluster {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -276,7 +276,7 @@ type ClusterManagedService {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -545,7 +545,7 @@ type DomainEntry {
   creationTime: Date!
   displayName: String!
   domainName: String!
-  id: String!
+  id: ID!
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
   recordVersion: Int!
@@ -1407,12 +1407,12 @@ input Github__com___kloudlite___operator___apis___crds___v1__JobVarsIn {
 }
 
 type Github__com___kloudlite___operator___apis___crds___v1__ManagedResourceSpec {
-  resourceName: String
+  resourceNamePrefix: String
   resourceTemplate: Github__com___kloudlite___operator___apis___crds___v1__MresResourceTemplate!
 }
 
 input Github__com___kloudlite___operator___apis___crds___v1__ManagedResourceSpecIn {
-  resourceName: String
+  resourceNamePrefix: String
   resourceTemplate: Github__com___kloudlite___operator___apis___crds___v1__MresResourceTemplateIn!
 }
 
@@ -1509,16 +1509,14 @@ input Github__com___kloudlite___operator___apis___crds___v1__RateLimitIn {
 }
 
 type Github__com___kloudlite___operator___apis___crds___v1__Route {
-  app: String
-  lambda: String
+  app: String!
   path: String!
   port: Int!
   rewrite: Boolean
 }
 
 input Github__com___kloudlite___operator___apis___crds___v1__RouteIn {
-  app: String
-  lambda: String
+  app: String!
   path: String!
   port: Int!
   rewrite: Boolean
@@ -1695,14 +1693,14 @@ input Github__com___kloudlite___operator___pkg___operator__CheckIn {
 }
 
 type Github__com___kloudlite___operator___pkg___operator__CheckMeta {
-  debug: Boolean!
+  debug: Boolean
   description: String
   name: String!
   title: String!
 }
 
 input Github__com___kloudlite___operator___pkg___operator__CheckMetaIn {
-  debug: Boolean!
+  debug: Boolean
   description: String
   name: String!
   title: String!
@@ -1829,7 +1827,7 @@ type HelmRelease {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -3085,7 +3083,7 @@ type Namespace {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -3121,7 +3119,7 @@ type Node {
   apiVersion: String
   clusterName: String!
   creationTime: Date!
-  id: String!
+  id: ID!
   kind: String
   markedForDeletion: Boolean
   metadata: Metadata
@@ -3157,7 +3155,7 @@ type NodePool {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -3217,7 +3215,7 @@ type PersistentVolume {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -3236,7 +3234,7 @@ type PersistentVolumeClaim {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
@@ -3768,7 +3766,7 @@ type VolumeAttachment {
   createdBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   creationTime: Date!
   displayName: String!
-  id: String!
+  id: ID!
   kind: String
   lastUpdatedBy: Github__com___kloudlite___api___common__CreatedOrUpdatedBy!
   markedForDeletion: Boolean
diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
index 063718b74..e9895359c 100644
--- a/src/generated/gql/server.ts
+++ b/src/generated/gql/server.ts
@@ -588,7 +588,7 @@ export type ManagedResourceIn = {
 
 export type Github__Com___Kloudlite___Operator___Apis___Crds___V1__ManagedResourceSpecIn =
   {
-    resourceName?: InputMaybe<Scalars['String']['input']>;
+    resourceNamePrefix?: InputMaybe<Scalars['String']['input']>;
     resourceTemplate: Github__Com___Kloudlite___Operator___Apis___Crds___V1__MresResourceTemplateIn;
   };
 
@@ -702,8 +702,7 @@ export type Github__Com___Kloudlite___Operator___Apis___Crds___V1__RateLimitIn =
   };
 
 export type Github__Com___Kloudlite___Operator___Apis___Crds___V1__RouteIn = {
-  app?: InputMaybe<Scalars['String']['input']>;
-  lambda?: InputMaybe<Scalars['String']['input']>;
+  app: Scalars['String']['input'];
   path: Scalars['String']['input'];
   port: Scalars['Int']['input'];
   rewrite?: InputMaybe<Scalars['Boolean']['input']>;
@@ -1142,7 +1141,7 @@ export type Github__Com___Kloudlite___Operator___Pkg___Operator__CheckIn = {
 };
 
 export type Github__Com___Kloudlite___Operator___Pkg___Operator__CheckMetaIn = {
-  debug: Scalars['Boolean']['input'];
+  debug?: InputMaybe<Scalars['Boolean']['input']>;
   description?: InputMaybe<Scalars['String']['input']>;
   name: Scalars['String']['input'];
   title: Scalars['String']['input'];
@@ -1712,7 +1711,7 @@ export type ConsoleGetProjectQuery = {
       lastReconcileTime?: any;
       checkList?: Array<{
         description?: string;
-        debug: boolean;
+        debug?: boolean;
         name: string;
         title: string;
       }>;
@@ -1771,7 +1770,7 @@ export type ConsoleListProjectsQuery = {
           lastReconcileTime?: any;
           checkList?: Array<{
             description?: string;
-            debug: boolean;
+            debug?: boolean;
             name: string;
             title: string;
           }>;
@@ -1857,7 +1856,7 @@ export type ConsoleListClustersQuery = {
           lastReconcileTime?: any;
           checkList?: Array<{
             description?: string;
-            debug: boolean;
+            debug?: boolean;
             name: string;
             title: string;
           }>;
@@ -1981,7 +1980,7 @@ export type ConsoleGetClusterQuery = {
       lastReconcileTime?: any;
       checkList?: Array<{
         description?: string;
-        debug: boolean;
+        debug?: boolean;
         name: string;
         title: string;
       }>;
@@ -2307,7 +2306,7 @@ export type ConsoleGetEnvironmentQuery = {
       lastReconcileTime?: any;
       checkList?: Array<{
         description?: string;
-        debug: boolean;
+        debug?: boolean;
         name: string;
         title: string;
       }>;
@@ -2386,7 +2385,7 @@ export type ConsoleListEnvironmentsQuery = {
           lastReconcileTime?: any;
           checkList?: Array<{
             description?: string;
-            debug: boolean;
+            debug?: boolean;
             name: string;
             title: string;
           }>;
@@ -2569,7 +2568,7 @@ export type ConsoleGetAppQuery = {
       lastReconcileTime?: any;
       checkList?: Array<{
         description?: string;
-        debug: boolean;
+        debug?: boolean;
         title: string;
         name: string;
       }>;
@@ -2678,7 +2677,7 @@ export type ConsoleListAppsQuery = {
           }>;
           checkList?: Array<{
             description?: string;
-            debug: boolean;
+            debug?: boolean;
             title: string;
             name: string;
           }>;
@@ -2781,8 +2780,7 @@ export type ConsoleListRoutersQuery = {
             rps?: number;
           };
           routes?: Array<{
-            app?: string;
-            lambda?: string;
+            app: string;
             path: string;
             port: number;
             rewrite?: boolean;
@@ -2795,7 +2793,7 @@ export type ConsoleListRoutersQuery = {
           lastReconcileTime?: any;
           checkList?: Array<{
             description?: string;
-            debug: boolean;
+            debug?: boolean;
             name: string;
             title: string;
           }>;
@@ -2867,8 +2865,7 @@ export type ConsoleGetRouterQuery = {
         rps?: number;
       };
       routes?: Array<{
-        app?: string;
-        lambda?: string;
+        app: string;
         path: string;
         port: number;
         rewrite?: boolean;
@@ -2879,7 +2876,7 @@ export type ConsoleGetRouterQuery = {
       isReady: boolean;
       checkList?: Array<{
         description?: string;
-        debug: boolean;
+        debug?: boolean;
         name: string;
         title: string;
       }>;
@@ -3556,7 +3553,7 @@ export type ConsoleListBuildsQuery = {
             lastReadyGeneration?: number;
             lastReconcileTime?: any;
             checkList?: Array<{
-              debug: boolean;
+              debug?: boolean;
               description?: string;
               name: string;
               title: string;
@@ -4266,7 +4263,7 @@ export type ConsoleListBuildRunsQuery = {
           lastReconcileTime?: any;
           checkList?: Array<{
             description?: string;
-            debug: boolean;
+            debug?: boolean;
             name: string;
             title: string;
           }>;
@@ -4339,7 +4336,7 @@ export type ConsoleGetBuildRunQuery = {
       lastReconcileTime?: any;
       checkList?: Array<{
         description?: string;
-        debug: boolean;
+        debug?: boolean;
         name: string;
         title: string;
       }>;
@@ -4499,7 +4496,7 @@ export type ConsoleGetProjectMSvQuery = {
       lastReconcileTime?: any;
       checkList?: Array<{
         description?: string;
-        debug: boolean;
+        debug?: boolean;
         title: string;
         name: string;
       }>;
@@ -4574,7 +4571,7 @@ export type ConsoleListProjectMSvsQuery = {
           lastReconcileTime?: any;
           checkList?: Array<{
             description?: string;
-            debug: boolean;
+            debug?: boolean;
             title: string;
             name: string;
           }>;
@@ -4796,7 +4793,6 @@ export type ConsoleListManagedResourcesQuery = {
           namespace?: string;
         };
         spec: {
-          resourceName?: string;
           resourceTemplate: {
             apiVersion: string;
             kind: string;
@@ -4816,7 +4812,7 @@ export type ConsoleListManagedResourcesQuery = {
           lastReconcileTime?: any;
           checkList?: Array<{
             description?: string;
-            debug: boolean;
+            debug?: boolean;
             name: string;
             title: string;
           }>;
@@ -4889,7 +4885,7 @@ export type ConsoleGetHelmChartQuery = {
       releaseStatus: string;
       checkList?: Array<{
         description?: string;
-        debug: boolean;
+        debug?: boolean;
         title: string;
         name: string;
       }>;
@@ -4945,7 +4941,7 @@ export type ConsoleListHelmChartQuery = {
           releaseStatus: string;
           checkList?: Array<{
             description?: string;
-            debug: boolean;
+            debug?: boolean;
             title: string;
             name: string;
           }>;

From 1221a478450076085f22d7248252bdf81e7d44c3 Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Thu, 21 Mar 2024 10:36:21 +0530
Subject: [PATCH 65/66] WIP app build integration

---
 .../extended-filled-tab-with-container.tsx    |  32 ++++
 .../components/extended-filled-tab.tsx        |  13 +-
 src/apps/console/components/git.tsx           |   6 +-
 .../console/page-components/app-states.tsx    |  39 +++-
 .../app/app-build-integration.tsx             | 110 +++++++++++
 .../console/page-components/app/compute.tsx   |  52 ++---
 .../$project+/$environment+/_layout.tsx       |  61 ++++--
 .../$environment+/new-app/app-detail.tsx      | 181 ++++++++++++++----
 .../$environment+/new-app/app-review.tsx      |  45 ++++-
 .../$project+/new-managed-service/_index.tsx  |   3 +-
 .../_main+/$account+/repo+/$repo+/_layout.tsx |  18 +-
 .../console/server/r-utils/key-constants.js   |   2 +
 12 files changed, 463 insertions(+), 99 deletions(-)
 create mode 100644 src/apps/console/components/extended-filled-tab-with-container.tsx
 create mode 100644 src/apps/console/page-components/app/app-build-integration.tsx

diff --git a/src/apps/console/components/extended-filled-tab-with-container.tsx b/src/apps/console/components/extended-filled-tab-with-container.tsx
new file mode 100644
index 000000000..eb431bb92
--- /dev/null
+++ b/src/apps/console/components/extended-filled-tab-with-container.tsx
@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import ExtendedFilledTab, { IExtendedFilledTab } from './extended-filled-tab';
+
+interface IExtendedFilledTabWithContainer extends IExtendedFilledTab {
+  children?: ReactNode;
+}
+const ExtendedFilledTabWithContainer = ({
+  children,
+  items,
+  value,
+  size,
+  onChange,
+}: IExtendedFilledTabWithContainer) => {
+  return (
+    <div className="flex flex-col rounded border border-border-default bg-surface-basic-default shadow-button overflow-hidden">
+      <div
+        className="py-xl px-3xl flex flex-row
+         items-center bg-surface-basic-subdued"
+      >
+        <ExtendedFilledTab
+          items={items}
+          value={value}
+          size={size}
+          onChange={onChange}
+        />
+      </div>
+      <div className="p-3xl">{children}</div>
+    </div>
+  );
+};
+
+export default ExtendedFilledTabWithContainer;
diff --git a/src/apps/console/components/extended-filled-tab.tsx b/src/apps/console/components/extended-filled-tab.tsx
index ec2967eda..9a1464ead 100644
--- a/src/apps/console/components/extended-filled-tab.tsx
+++ b/src/apps/console/components/extended-filled-tab.tsx
@@ -3,7 +3,7 @@ import Tabs, { ITab } from '~/components/atoms/tabs';
 import { cn } from '~/components/utils';
 import { NonNullableString } from '~/root/lib/types/common';
 
-interface IExtendedFilledTab<T = string> {
+export interface IExtendedFilledTab<T = string> {
   value: string;
   onChange?: (item: T) => void;
   items: ITab<T>[];
@@ -17,13 +17,10 @@ const ExtendedFilledTab = <T,>({
 }: IExtendedFilledTab<T>) => {
   return (
     <div
-      className={cn(
-        'bg-surface-basic-active rounded border border-border-default inline-block w-fit',
-        {
-          'p-lg shadow-button': size === 'md',
-          'p-md': size === 'sm',
-        }
-      )}
+      className={cn('bg-surface-basic-active rounded inline-block w-fit', {
+        'p-lg shadow-button border border-border-default': size === 'md',
+        'p-md': size === 'sm',
+      })}
     >
       <Tabs.Root size="sm" variant="filled" value={value} onChange={onChange}>
         {items.map((item) => (
diff --git a/src/apps/console/components/git.tsx b/src/apps/console/components/git.tsx
index 07591ddd2..cadd8ab48 100644
--- a/src/apps/console/components/git.tsx
+++ b/src/apps/console/components/git.tsx
@@ -208,7 +208,7 @@ const Git = ({
   loginUrls,
 }: IGitRepoSelector) => {
   const [showProviderOverlay, setShowProviderOverlay] = useState(
-    !logins?.providerGithub || !logins?.providerGitlab || false
+    !logins?.providerGithub && !logins?.providerGitlab
   );
 
   const {
@@ -299,7 +299,9 @@ const Git = ({
         }
       }
     });
-    setLoading(false);
+    setTimeout(() => {
+      setLoading(false);
+    }, 200);
   }, []);
 
   useEffect(() => {
diff --git a/src/apps/console/page-components/app-states.tsx b/src/apps/console/page-components/app-states.tsx
index 22283881e..f6af4629a 100644
--- a/src/apps/console/page-components/app-states.tsx
+++ b/src/apps/console/page-components/app-states.tsx
@@ -5,10 +5,10 @@ import { NonNullableString } from '~/root/lib/types/common';
 import {
   AppIn,
   Github__Com___Kloudlite___Operator___Apis___Crds___V1__AppContainerIn as AppSpecContainersIn,
+  BuildIn,
 } from '~/root/src/generated/gql/server';
 import { mapper } from '~/components/utils';
 import { parseNodes } from '~/console/server/r-utils/common';
-// import logger from '~/root/lib/client/helpers/log';
 
 const defaultApp: AppIn = {
   metadata: {
@@ -27,6 +27,28 @@ const defaultApp: AppIn = {
   displayName: '',
 };
 
+const defaultBuild: BuildIn = {
+  name: '',
+  source: {
+    branch: '',
+    provider: 'github',
+    repository: '',
+  },
+  buildClusterName: '',
+  spec: {
+    registry: {
+      repo: {
+        name: '',
+        tags: [],
+      },
+    },
+    resource: {
+      cpu: 500,
+      memoryInMb: 1000,
+    },
+  },
+};
+
 export type ISetState<T = any> = (fn: ((val: T) => T) | T) => void;
 type ISetContainer<T = any> = (fn: ((val: T) => T) | T, index?: number) => void;
 
@@ -45,12 +67,14 @@ interface IappState {
   envPage: createAppEnvPage;
   page: number;
   app: AppIn;
+  buildData?: BuildIn;
 }
 
 export const useAppState = () => {
   const [state, setState] = useContext<ImmerHook<IappState>>(CreateAppContext);
 
-  const { app, page, envPage, activeContIndex, completePages } = state;
+  const { app, page, envPage, activeContIndex, completePages, buildData } =
+    state;
 
   const getContainer = (index: number = activeContIndex) => {
     if (!index) {
@@ -102,6 +126,14 @@ export const useAppState = () => {
     });
   };
 
+  const setBuildData: ISetState<BuildIn> = (fn) => {
+    if (typeof fn === 'function') {
+      setState((s) => ({ ...s, buildData: fn(s.buildData || defaultBuild) }));
+    } else {
+      setState((s) => ({ ...s, buildData: fn }));
+    }
+  };
+
   const setPage: ISetState<number> = (fn) => {
     if (typeof fn === 'function') {
       setState((s) => ({ ...s, page: fn(s.page) }));
@@ -193,6 +225,7 @@ export const useAppState = () => {
       completePages: {},
       envPage: 'environment_variables',
       activeContIndex: 0,
+      buildData: defaultBuild,
     });
   };
 
@@ -245,6 +278,8 @@ export const useAppState = () => {
     getRepoMapper,
     getRepoName,
     getImageTag,
+    setBuildData,
+    buildData,
   };
 };
 
diff --git a/src/apps/console/page-components/app/app-build-integration.tsx b/src/apps/console/page-components/app/app-build-integration.tsx
new file mode 100644
index 000000000..6d1c2af59
--- /dev/null
+++ b/src/apps/console/page-components/app/app-build-integration.tsx
@@ -0,0 +1,110 @@
+import { useOutletContext } from '@remix-run/react';
+import { Checkbox } from '~/components/atoms/checkbox';
+import { TextArea, TextInput } from '~/components/atoms/input';
+import Select from '~/components/atoms/select';
+import Git from '~/console/components/git';
+import KeyValuePair from '~/console/components/key-value-pair';
+import { IGIT_PROVIDERS } from '~/console/hooks/use-git';
+import { IAppContext } from '~/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout';
+import { dummyEvent } from '~/root/lib/client/hooks/use-form';
+
+const AppBuildIntegration = ({
+  values,
+  errors,
+  handleChange,
+}: {
+  values: Record<string, any>;
+  errors: Record<string, any>;
+  handleChange: (key: string) => (e: { target: { value: any } }) => void;
+}) => {
+  const { logins, loginUrls } = useOutletContext<IAppContext>();
+
+  return (
+    <div className="flex flex-col gap-3xl">
+      <Git
+        logins={logins}
+        loginUrls={loginUrls}
+        error={errors?.source}
+        onChange={(git) => {
+          handleChange('source')(
+            dummyEvent({
+              branch: git.branch,
+              repository: git.repo,
+              provider: git.provider,
+            })
+          );
+        }}
+        value={{
+          branch: values.source.branch,
+          repo: values.source.repository,
+          provider: (values.source.provider as IGIT_PROVIDERS) || 'github',
+        }}
+      />
+
+      <Checkbox
+        label="Advance options"
+        checked={values.advanceOptions}
+        onChange={(check) => {
+          handleChange('advanceOptions')(dummyEvent(!!check));
+        }}
+      />
+      {values.advanceOptions && (
+        <div className="flex flex-col gap-3xl">
+          <KeyValuePair
+            size="lg"
+            label="Build args"
+            value={Object.entries(values.buildArgs || {}).map(
+              ([key, value]) => ({ key, value })
+            )}
+            onChange={(_, items) => {
+              handleChange('buildArgs')(dummyEvent(items));
+            }}
+            error={!!errors.buildArgs}
+            message={errors.buildArgs}
+          />
+          <KeyValuePair
+            size="lg"
+            label="Build contexts"
+            value={Object.entries(values.buildContexts || {}).map(
+              ([key, value]) => ({ key, value })
+            )}
+            onChange={(_, items) => {
+              handleChange('buildContexts')(dummyEvent(items));
+            }}
+            error={!!errors.buildContexts}
+            message={errors.buildContexts}
+          />
+          <TextInput
+            size="lg"
+            placeholder="Enter context dir"
+            label="Context dir"
+            value={values.contextDir}
+            onChange={handleChange('contextDir')}
+          />
+          <TextInput
+            size="lg"
+            placeholder="Enter docker file path"
+            label="Docker file path"
+            value={values.dockerfilePath}
+            onChange={handleChange('dockerfilePath')}
+          />
+          <TextArea
+            placeholder="Enter docker file content"
+            label="Docker file content"
+            value={values.dockerfileContent}
+            onChange={handleChange('dockerfileContent')}
+            resize={false}
+            rows="6"
+          />
+          {/* <BuildPlatforms */}
+          {/*   onChange={(data) => { */}
+          {/*     console.log(data); */}
+          {/*   }} */}
+          {/* /> */}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AppBuildIntegration;
diff --git a/src/apps/console/page-components/app/compute.tsx b/src/apps/console/page-components/app/compute.tsx
index 2d8b979eb..2d58188e7 100644
--- a/src/apps/console/page-components/app/compute.tsx
+++ b/src/apps/console/page-components/app/compute.tsx
@@ -16,7 +16,6 @@ import { Checkbox } from '~/components/atoms/checkbox';
 import { useEffect, useState } from 'react';
 import { Button } from '~/components/atoms/button';
 import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
 import { plans } from './datas';
 import appInitialFormValues, { mapFormValuesToApp } from './app-utils';
 
@@ -42,10 +41,6 @@ const valueRender = ({
 };
 
 const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
-  /** ---- Only for edit mode in settings ----* */
-  const { hasChanges } = useUnsavedChanges();
-  /** ---- end ----* */
-
   const { app, setApp, setPage, markPageAsCompleted, getContainer } =
     useAppState();
   const api = useConsoleApi();
@@ -67,26 +62,25 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
     });
   });
 
-  const { values, errors, handleChange, isLoading, submit, resetValues } =
-    useForm({
-      initialValues: appInitialFormValues({
-        app,
-        getContainer,
-      }),
-      validationSchema: Yup.object({
-        pullSecret: Yup.string(),
-        cpuMode: Yup.string().required(),
-        selectedPlan: Yup.string().required(),
-      }),
-      onSubmit: (val) => {
-        setApp((s) =>
-          mapFormValuesToApp({
-            appIn: val,
-            oldAppIn: s,
-          })
-        );
-      },
-    });
+  const { values, errors, handleChange, isLoading, submit } = useForm({
+    initialValues: appInitialFormValues({
+      app,
+      getContainer,
+    }),
+    validationSchema: Yup.object({
+      pullSecret: Yup.string(),
+      cpuMode: Yup.string().required(),
+      selectedPlan: Yup.string().required(),
+    }),
+    onSubmit: (val) => {
+      setApp((s) =>
+        mapFormValuesToApp({
+          appIn: val,
+          oldAppIn: s,
+        })
+      );
+    },
+  });
 
   const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({
     label: val.metadata?.name || '',
@@ -100,14 +94,6 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
     }
   }, [values, mode]);
 
-  // useEffect(() => {
-  //   if (!hasChanges && mode === 'edit') {
-  //     resetValues();
-  //   }
-  // }, [hasChanges, mode]);
-
-  /** ---- end ----* */
-
   return (
     <FadeIn
       onSubmit={(e) => {
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/_layout.tsx
index 133432882..363705149 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/_layout.tsx
@@ -28,27 +28,32 @@ import {
 } from '~/console/server/utils/auth-utils';
 import { SubNavDataProvider } from '~/root/lib/client/hooks/use-create-subnav-action';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
-import { IRemixCtx } from '~/root/lib/types/common';
+import { IRemixCtx, LoaderResult } from '~/root/lib/types/common';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { BreadcrumSlash, tabIconSize } from '~/console/utils/commons';
 import { IEnvironment } from '~/console/server/gql/queries/environment-queries';
 import { cn } from '~/components/utils';
 import { Button } from '~/components/atoms/button';
 import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
-import { handleError } from '~/root/lib/utils/common';
+import logger from '~/root/lib/client/helpers/log';
+import { ILoginUrls, ILogins } from '~/console/server/gql/queries/git-queries';
 import { IProjectContext } from '../_layout';
 
-export interface IEnvironmentContext extends IProjectContext {
-  environment: IEnvironment;
-}
-
 const Environment = () => {
   const rootContext = useOutletContext<IProjectContext>();
-  const { environment, managedTemplates } = useLoaderData();
+  const { environment, managedTemplates, loginUrls, logins } = useLoaderData();
 
   return (
     <SubNavDataProvider>
-      <Outlet context={{ ...rootContext, environment, managedTemplates }} />
+      <Outlet
+        context={{
+          ...rootContext,
+          environment,
+          managedTemplates,
+          loginUrls,
+          logins,
+        }}
+      />
     </SubNavDataProvider>
   );
 };
@@ -244,6 +249,8 @@ export const loader = async (ctx: IRemixCtx) => {
   const { environment, project } = ctx.params;
   ensureAccountSet(ctx);
 
+  let envData: IEnvironment;
+
   try {
     const { data, errors } = await GQLServerHandler(ctx.request).getEnvironment(
       {
@@ -253,15 +260,47 @@ export const loader = async (ctx: IRemixCtx) => {
     );
 
     if (errors) {
-      return handleError(errors[0]);
+      throw errors[0];
     }
 
+    const { data: logins, errors: loginErrors } = await GQLServerHandler(
+      ctx.request
+    ).getLogins({});
+
+    if (loginErrors) {
+      throw loginErrors[0];
+    }
+
+    const { data: loginUrls, errors: dErrors } = await GQLServerHandler(
+      ctx.request
+    ).loginUrls({});
+
+    if (dErrors) {
+      throw dErrors[0];
+    }
+    envData = data;
     return {
-      environment: data || {},
+      loginUrls,
+      logins,
+      environment: envData,
     };
   } catch (err) {
-    return handleError(err);
+    logger.error(err);
+
+    const k: any = {};
+
+    return {
+      logins: k as ILogins,
+      loginUrls: k as ILoginUrls,
+      environment: k as IEnvironment,
+    };
   }
 };
 
+export interface IEnvironmentContext extends IProjectContext {
+  logins: LoaderResult<typeof loader>['logins'];
+  loginUrls: LoaderResult<typeof loader>['loginUrls'];
+  environment: LoaderResult<typeof loader>['environment'];
+}
+
 export default Environment;
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
index 31ac2a8c2..d119c5e4b 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-detail.tsx
@@ -6,14 +6,25 @@ import { FadeIn } from '~/console/page-components/util';
 import { NameIdView } from '~/console/components/name-id-view';
 import { BottomNavigation } from '~/console/components/commons';
 import { registryHost } from '~/lib/configs/base-url.cjs';
-import { useParams } from '@remix-run/react';
+import { useOutletContext, useParams } from '@remix-run/react';
 import RepoSelector from '~/console/page-components/app/components';
+import ExtendedFilledTabWithContainer from '~/console/components/extended-filled-tab-with-container';
+import AppBuildIntegration from '~/console/page-components/app/app-build-integration';
+import { keyconstants } from '~/console/server/r-utils/key-constants';
+import { IEnvironmentContext } from '../_layout';
 
 const AppDetail = () => {
-  const { app, setApp, setPage, markPageAsCompleted, activeContIndex } =
-    useAppState();
+  const {
+    app,
+    setApp,
+    setPage,
+    setBuildData,
+    markPageAsCompleted,
+    activeContIndex,
+  } = useAppState();
 
   const { account } = useParams();
+  const { project } = useOutletContext<IEnvironmentContext>();
 
   const { values, errors, handleChange, handleSubmit, isLoading, setValues } =
     useForm({
@@ -21,21 +32,50 @@ const AppDetail = () => {
         name: parseName(app),
         displayName: app.displayName,
         isNameError: false,
+        imageMode:
+          app.metadata?.annotations?.[keyconstants.appImageMode] || 'default',
         imageUrl: app.spec.containers[activeContIndex]?.image || '',
         manualRepo: '',
+        source: {
+          branch: '',
+          repository: '',
+          provider: '',
+        },
+        advanceOptions: false,
+        buildArgs: {},
+        buildContexts: {},
+        contextDir: '',
+        dockerfilePath: '',
+        dockerfileContent: '',
+        isGitLoading: false,
       },
       validationSchema: Yup.object({
         name: Yup.string().required(),
         displayName: Yup.string().required(),
         imageUrl: Yup.string(),
-        manualRepo: Yup.string().when(['imageUrl'], ([imageUrl], schema) => {
-          const regex = /^(\w+):(\w+)$/;
-
-          if (!imageUrl) {
-            return schema.required().matches(regex, 'Invalid image format');
+        manualRepo: Yup.string().when(
+          ['imageUrl', 'imageMode'],
+          ([imageUrl, imageMode], schema) => {
+            const regex = /^(\w+):(\w+)$/;
+            if (imageMode === 'git') {
+              return schema;
+            }
+            if (!imageUrl) {
+              return schema.required().matches(regex, 'Invalid image format');
+            }
+            return schema;
           }
-          return schema;
-        }),
+        ),
+        imageMode: Yup.string().required(),
+        source: Yup.object()
+          .shape({})
+          .test('is-empty', 'Branch is required.', (v, c) => {
+            // @ts-ignore
+            if (!v?.branch && c.parent.imageMode === 'git') {
+              return false;
+            }
+            return true;
+          }),
       }),
 
       onSubmit: async (val) => {
@@ -46,6 +86,7 @@ const AppDetail = () => {
               ...a.metadata,
               annotations: {
                 ...(a.metadata?.annotations || {}),
+                [keyconstants.appImageMode]: val.imageMode,
               },
               name: val.name,
             },
@@ -54,7 +95,6 @@ const AppDetail = () => {
               ...a.spec,
               containers: [
                 {
-                  ...(a.spec.containers?.[0] || {}),
                   image: val.imageUrl || val.manualRepo,
                   name: 'container-0',
                 },
@@ -62,6 +102,47 @@ const AppDetail = () => {
             },
           };
         });
+
+        if (val.imageMode === 'git') {
+          if (!project.clusterName) {
+            throw new Error('Cluster name is required');
+          }
+          setBuildData({
+            name: `app_build_${val.name}`,
+            buildClusterName: project.clusterName,
+            source: {
+              branch: val.source.branch,
+              provider: val.source.provider === 'github' ? 'github' : 'gitlab',
+              repository: val.source.repository,
+            },
+            spec: {
+              ...{
+                ...(val.advanceOptions
+                  ? {
+                      buildOptions: {
+                        buildArgs: val.buildArgs,
+                        buildContexts: val.buildContexts,
+                        contextDir: val.contextDir,
+                        dockerfileContent: val.dockerfileContent,
+                        dockerfilePath: val.dockerfilePath,
+                        targetPlatforms: [],
+                      },
+                    }
+                  : {}),
+              },
+              registry: {
+                repo: {
+                  name: `app_build_repo_${val.name}`,
+                  tags: ['latest'],
+                },
+              },
+              resource: {
+                cpu: 500,
+                memoryInMb: 1000,
+              },
+            },
+          });
+        }
         setPage(2);
         markPageAsCompleted(1);
       },
@@ -92,34 +173,58 @@ const AppDetail = () => {
           handleChange={handleChange}
           nameErrorLabel="isNameError"
         />
-        <RepoSelector
-          tag={values.imageUrl.split(':')[1]}
-          repo={
-            values.imageUrl
-              .replace(`${registryHost}/${account}/`, '')
-              .split(':')[0]
-          }
-          onClear={() => {
-            setValues((v) => {
-              return {
-                ...v,
-                imageUrl: '',
-                manualRepo: '',
-              };
-            });
+        <ExtendedFilledTabWithContainer
+          value={values.imageMode}
+          onChange={(e) => {
+            handleChange('imageMode')(dummyEvent(e));
           }}
-          textValue={values.manualRepo}
-          onTextChanged={(e) => {
-            handleChange('manualRepo')(e);
-            handleChange('imageUrl')(dummyEvent(''));
-          }}
-          onValueChange={({ repo, tag }) => {
-            handleChange('imageUrl')(
-              dummyEvent(`${registryHost}/${account}/${repo}:${tag}`)
-            );
-          }}
-          error={errors.manualRepo}
-        />
+          items={[
+            { label: 'Select image', value: 'default' },
+            {
+              label: 'Use git',
+              value: 'git',
+            },
+          ]}
+          size="sm"
+        >
+          {values.imageMode === 'default' && (
+            <RepoSelector
+              tag={values.imageUrl.split(':')[1]}
+              repo={
+                values.imageUrl
+                  .replace(`${registryHost}/${account}/`, '')
+                  .split(':')[0]
+              }
+              onClear={() => {
+                setValues((v) => {
+                  return {
+                    ...v,
+                    imageUrl: '',
+                    manualRepo: '',
+                  };
+                });
+              }}
+              textValue={values.manualRepo}
+              onTextChanged={(e) => {
+                handleChange('manualRepo')(e);
+                handleChange('imageUrl')(dummyEvent(''));
+              }}
+              onValueChange={({ repo, tag }) => {
+                handleChange('imageUrl')(
+                  dummyEvent(`${registryHost}/${account}/${repo}:${tag}`)
+                );
+              }}
+              error={errors.manualRepo}
+            />
+          )}
+          {values.imageMode === 'git' && (
+            <AppBuildIntegration
+              values={values}
+              errors={errors}
+              handleChange={handleChange}
+            />
+          )}
+        </ExtendedFilledTabWithContainer>
       </div>
       <BottomNavigation
         primaryButton={{
diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
index 6b9d00118..cb0c2a780 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
@@ -16,7 +16,7 @@ import {
 import { keyconstants } from '~/console/server/r-utils/key-constants';
 
 const AppReview = () => {
-  const { app, setPage, resetState } = useAppState();
+  const { app, buildData, setPage, resetState } = useAppState();
 
   const api = useConsoleApi();
   const navigate = useNavigate();
@@ -29,11 +29,52 @@ const AppReview = () => {
       if (!project || !environment) {
         throw new Error('Project and Environment is required!.');
       }
+
+      let buildId = '';
+      const gitMode =
+        app.metadata?.annotations?.[keyconstants.appImageMode] === 'git';
+
+      if (buildData && gitMode) {
+        try {
+          const { errors, data } = await api.createBuild({
+            build: buildData,
+          });
+
+          if (errors) {
+            throw errors[0];
+          }
+
+          buildId = data.id;
+
+          toast.success('build created successfully');
+        } catch (err) {
+          handleError(err);
+        }
+      }
+
       try {
         const { errors } = await api.createApp({
           envName: environment,
           projectName: project,
-          app,
+          app: {
+            ...app,
+            ...(buildId && gitMode
+              ? {
+                  ciBuildId: buildId,
+                  spec: {
+                    ...app.spec,
+                    containers: [
+                      {
+                        image: `${buildData?.spec.registry.repo.name}:${
+                          buildData?.spec.registry.repo.tags?.[0] || 'latest'
+                        }`,
+                        name: 'container-0',
+                      },
+                    ],
+                  },
+                }
+              : {}),
+          },
         });
         if (errors) {
           throw errors[0];
diff --git a/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx
index f453ecea9..071378380 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx
@@ -26,7 +26,6 @@ import {
 } from '~/console/components/commons';
 import { parseName, parseNodes } from '~/console/server/r-utils/common';
 import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
-import { INodepools } from '~/console/server/gql/queries/nodepool-queries';
 import { keyconstants } from '~/console/server/r-utils/key-constants';
 import { IProjectContext } from '../_layout';
 
@@ -603,7 +602,7 @@ const ManagedServiceLayout = () => {
   }));
 
   const statefulNodepools = nodepools.filter(
-    (np) => np.nodepoolStateType == 'stateful'
+    (np) => np.nodepoolStateType === 'stateful'
   );
 
   useEffect(() => {
diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
index 8100dd6ae..caf263886 100644
--- a/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
+++ b/src/apps/console/routes/_main+/$account+/repo+/$repo+/_layout.tsx
@@ -5,7 +5,13 @@ import {
   useOutletContext,
   useParams,
 } from '@remix-run/react';
-import { ChevronRight, GearSix, GitMerge, Nodeless } from '@jengaicons/react';
+import {
+  ChevronRight,
+  GearSix,
+  GitMerge,
+  NoOps,
+  Nodeless,
+} from '@jengaicons/react';
 import Breadcrum from '~/console/components/breadcrum';
 import { CommonTabs } from '~/console/components/common-navbar-tabs';
 
@@ -69,6 +75,16 @@ const Tabs = () => {
           value: '/builds',
           to: '/builds',
         },
+        {
+          label: (
+            <span className="flex flex-row items-center gap-lg">
+              <NoOps size={iconSize} />
+              Build Runs
+            </span>
+          ),
+          value: '/buildruns',
+          to: '/buildruns',
+        },
         {
           label: (
             <span className="flex flex-row items-center gap-lg">
diff --git a/src/apps/console/server/r-utils/key-constants.js b/src/apps/console/server/r-utils/key-constants.js
index 966ad5f35..f23b37609 100644
--- a/src/apps/console/server/r-utils/key-constants.js
+++ b/src/apps/console/server/r-utils/key-constants.js
@@ -15,4 +15,6 @@ export const keyconstants = {
 
   nodepoolStateType: 'kloudlite.io/ui-pool.app-state-type',
   helmChartRepoPackageId: 'kloudlite.io/helm-chart-repo-package-id',
+
+  appImageMode: 'kloudlite.io/ui-appImageMode',
 };

From eace51e3baf8884323b0d169b92b33f28bea5328 Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Thu, 21 Mar 2024 12:04:42 +0530
Subject: [PATCH 66/66] WIP app build integration

---
 src/apps/console/components/commons.tsx       | 68 +++++++++++++------
 .../app/app-build-integration.tsx             |  3 +-
 .../env+/$environment+/new-app/app-review.tsx | 45 +++++++++---
 .../components/molecule/toast.tsx             |  2 +
 4 files changed, 85 insertions(+), 33 deletions(-)

diff --git a/src/apps/console/components/commons.tsx b/src/apps/console/components/commons.tsx
index 75ecf66bf..98f2f3743 100644
--- a/src/apps/console/components/commons.tsx
+++ b/src/apps/console/components/commons.tsx
@@ -299,41 +299,65 @@ export const ReviewComponent = ({
   );
 };
 
-export const GitDetail = ({
+export const GitDetailRaw = ({
   provider,
   repository,
   branch,
-  onEdit,
 }: {
   provider: IGIT_PROVIDERS;
   repository: string;
   branch: string;
-  onEdit?: (step?: number) => void;
 }) => {
   const gitIconSize = 16;
   return (
-    <ReviewComponent title="Source details" onEdit={() => onEdit?.(1)}>
-      <div className="flex flex-col p-xl  gap-lg rounded border border-border-default flex-1 overflow-hidden">
-        <div className="flex flex-col gap-md">
-          <div className="bodyMd-medium text-text-default">Source</div>
-          <div className="flex flex-row items-center gap-3xl bodySm">
-            <div className="flex flex-row items-center gap-xl">
-              {provider === 'github' ? (
-                <GithubLogoFill size={gitIconSize} />
-              ) : (
-                <GitlabLogoFill size={gitIconSize} />
-              )}
-              <span>
-                {repository.replace('https://', '').replace('.git', '')}
-              </span>
-            </div>
-            <div className="flex flex-row items-center gap-xl">
-              <GitBranchFill size={gitIconSize} />
-              <span>{branch}</span>
-            </div>
+    <div className="flex flex-col p-xl  gap-lg rounded border border-border-default flex-1 overflow-hidden">
+      <div className="flex flex-col gap-md">
+        <div className="bodyMd-medium text-text-default">Source</div>
+        <div className="flex flex-row items-center gap-3xl bodySm">
+          <div className="flex flex-row items-center gap-xl">
+            {provider === 'github' ? (
+              <GithubLogoFill size={gitIconSize} />
+            ) : (
+              <GitlabLogoFill size={gitIconSize} />
+            )}
+            <span>
+              {repository.replace('https://', '').replace('.git', '')}
+            </span>
+          </div>
+          <div className="flex flex-row items-center gap-xl">
+            <GitBranchFill size={gitIconSize} />
+            <span>{branch}</span>
           </div>
         </div>
       </div>
+    </div>
+  );
+};
+
+export const GitDetail = ({
+  provider,
+  repository,
+  branch,
+  onEdit,
+  canEdit,
+}: {
+  provider: IGIT_PROVIDERS;
+  repository: string;
+  branch: string;
+  onEdit?: (step?: number) => void;
+  canEdit?: boolean;
+}) => {
+  return (
+    <ReviewComponent
+      title="Source details"
+      onEdit={() => onEdit?.(1)}
+      canEdit={canEdit}
+    >
+      <GitDetailRaw
+        branch={branch}
+        repository={repository}
+        provider={provider}
+      />
     </ReviewComponent>
   );
 };
diff --git a/src/apps/console/page-components/app/app-build-integration.tsx b/src/apps/console/page-components/app/app-build-integration.tsx
index 6d1c2af59..e33c01088 100644
--- a/src/apps/console/page-components/app/app-build-integration.tsx
+++ b/src/apps/console/page-components/app/app-build-integration.tsx
@@ -1,11 +1,10 @@
 import { useOutletContext } from '@remix-run/react';
 import { Checkbox } from '~/components/atoms/checkbox';
 import { TextArea, TextInput } from '~/components/atoms/input';
-import Select from '~/components/atoms/select';
 import Git from '~/console/components/git';
 import KeyValuePair from '~/console/components/key-value-pair';
 import { IGIT_PROVIDERS } from '~/console/hooks/use-git';
-import { IAppContext } from '~/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout';
+import { IAppContext } from '~/console/routes/_main+/$account+/$project+/env+/$environment+/app+/$app+/_layout';
 import { dummyEvent } from '~/root/lib/client/hooks/use-form';
 
 const AppBuildIntegration = ({
diff --git a/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-review.tsx b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-review.tsx
index b14276c20..e6f37e71b 100644
--- a/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-review.tsx
+++ b/src/apps/console/routes/_main+/$account+/$project+/env+/$environment+/new-app/app-review.tsx
@@ -1,5 +1,5 @@
 import { useNavigate, useParams } from '@remix-run/react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { toast } from '~/components/molecule/toast';
 import { useAppState } from '~/console/page-components/app-states';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
@@ -11,6 +11,8 @@ import { parseName } from '~/console/server/r-utils/common';
 import { FadeIn } from '~/console/page-components/util';
 import {
   BottomNavigation,
+  GitDetail,
+  GitDetailRaw,
   ReviewComponent,
 } from '~/console/components/commons';
 import { keyconstants } from '~/console/server/r-utils/key-constants';
@@ -18,6 +20,8 @@ import { keyconstants } from '~/console/server/r-utils/key-constants';
 const AppReview = () => {
   const { app, buildData, setPage, resetState } = useAppState();
 
+  const gitMode =
+    app.metadata?.annotations?.[keyconstants.appImageMode] === 'git';
   const api = useConsoleApi();
   const navigate = useNavigate();
   const { project, environment } = useParams();
@@ -30,11 +34,14 @@ const AppReview = () => {
         throw new Error('Project and Environment is required!.');
       }
 
+      // create build first if git image is selected
       let buildId = '';
-      const gitMode =
-        app.metadata?.annotations?.[keyconstants.appImageMode] === 'git';
 
       if (buildData && gitMode) {
+        toast.info('Creating build', {
+          toastId: 'app',
+        });
+
         try {
           const { errors, data } = await api.createBuild({
             build: buildData,
@@ -46,13 +53,21 @@ const AppReview = () => {
 
           buildId = data.id;
 
-          toast.success('build created successfully');
+          toast.update('app', {
+            type: 'success',
+            render: 'Build created successfully',
+          });
         } catch (err) {
           handleError(err);
+          return;
         }
       }
 
       try {
+        toast.update('app', {
+          type: 'info',
+          render: 'Creating app',
+        });
         const { errors } = await api.createApp({
           envName: environment,
           projectName: project,
@@ -79,7 +94,10 @@ const AppReview = () => {
         if (errors) {
           throw errors[0];
         }
-        toast.success('created successfully');
+        toast.update('app', {
+          type: 'success',
+          render: 'App created successfully',
+        });
         resetState();
         navigate('../apps');
       } catch (err) {
@@ -107,12 +125,21 @@ const AppReview = () => {
             setPage(1);
           }}
         >
-          <div className="flex flex-col p-xl gap-md rounded border border-border-default">
-            <div className="bodyMd-semibold text-text-default">
-              {app.displayName}
+          <div className="flex flex-col rounded border border-border-default">
+            <div className="flex flex-col p-xl gap-md">
+              <div className="bodyMd-semibold text-text-default">
+                {app.displayName}
+              </div>
+              <div className="bodySm text-text-soft">{parseName(app)}</div>
             </div>
-            <div className="bodySm text-text-soft">{parseName(app)}</div>
           </div>
+          {gitMode && buildData && (
+            <GitDetailRaw
+              branch={buildData?.source.branch}
+              provider={buildData?.source.provider}
+              repository={buildData?.source.repository}
+            />
+          )}
         </ReviewComponent>
 
         <ReviewComponent
diff --git a/src/design-system/components/molecule/toast.tsx b/src/design-system/components/molecule/toast.tsx
index 86945847a..1caf27bb5 100644
--- a/src/design-system/components/molecule/toast.tsx
+++ b/src/design-system/components/molecule/toast.tsx
@@ -16,6 +16,8 @@ export const toast = {
   success: t.success,
   error: t.error,
   warn: t.warn,
+  isActive: t.isActive,
+  update: t.update,
 };
 
 const classes = {