Merge pull request #94 from kloudlite/fix/update-router-listing

KLO-117 : Add domain names in router details and listing screen
kloudlite · Feb 20, 2024 · 9318593 · 9318593
2 parents 44db1d3 + dfc1a6c
commit 9318593
Show file tree

Hide file tree

Showing 5 changed files with 894 additions and 3,523 deletions.
diff --git a/.github/workflows/build-container.yaml b/.github/workflows/build-container.yaml
@@ -25,14 +25,14 @@ jobs:
         app:
           - auth
           - console
-          - website
+          #- website
         include:
           - app: auth
             dockerFile: Dockerfile
           - app: console
             dockerFile: Dockerfile
-          - app: website
-            dockerFile: Dockerfile.devdoc
+          #- app: website
+            #dockerFile: Dockerfile.devdoc
 
     runs-on: ubuntu-latest
     name: Deploy to Docker Image

diff --git a/src/apps/console/components/console-list-components.tsx b/src/apps/console/components/console-list-components.tsx
@@ -1,143 +1,186 @@
-import { ReactNode } from 'react';
+import {ReactNode, useState} from 'react';
 import Tooltip from '~/components/atoms/tooltip';
-import { cn } from '~/components/utils';
+import {cn, titleCase} from '~/components/utils';
+import {CopyrightFill, CopySimple} from "@jengaicons/react";
+import useClipboard from "~/lib/client/hooks/use-clipboard";
+import {toast} from "~/components/molecule/toast";
 
 interface IBase {
-  className?: string;
-  action?: ReactNode;
+    className?: string;
+    action?: ReactNode;
 }
 
 const BaseStyle = 'flex flex-row items-center gap-xl';
 
 const ListSecondary = ({
-  className,
-  action,
-  title,
-  avatar,
-  subtitle,
-}: {
-  className?: string;
-  action?: ReactNode;
-  title?: ReactNode;
-  subtitle?: ReactNode;
-  avatar?: ReactNode;
+                           className,
+                           action,
+                           title,
+                           avatar,
+                           subtitle,
+                       }: {
+    className?: string;
+    action?: ReactNode;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    avatar?: ReactNode;
 }) => {
-  return (
-    <div className={cn(BaseStyle, className)}>
-      <div className="flex flex-row items-center gap-xl flex-1 truncate">
-        {avatar}
-        <div className="flex flex-col gap-sm flex-1 truncate">
-          {title && (
-            <div className="bodySm truncate text-text-soft pulsable">
-              {title}
-            </div>
-          )}
+    return (
+        <div className={cn(BaseStyle, className)}>
+            <div className="flex flex-row items-center gap-xl flex-1 truncate">
+                {avatar}
+                <div className="flex flex-col gap-sm flex-1 truncate">
+                    {title && (
+                        <div className="bodySm truncate text-text-soft pulsable">
+                            {title}
+                        </div>
+                    )}
 
-          {subtitle && (
-            <div className="bodyMd-medium truncate pulsable">{subtitle}</div>
-          )}
+                    {subtitle && (
+                        <div className="bodyMd-medium truncate pulsable">{subtitle}</div>
+                    )}
+                </div>
+            </div>
+            {action}
         </div>
-      </div>
-      {action}
-    </div>
-  );
+    );
 };
 
 const ListBody = ({
-  data,
-  className = '',
-  action,
-}: {
-  data: ReactNode;
+                      data,
+                      className = '',
+                      action,
+                  }: {
+    data: ReactNode;
 } & IBase) => {
-  return (
-    <div
-      className={cn('bodyMd text-text-strong truncate', BaseStyle, className)}
-    >
-      <div className="flex-1 truncate pulsable">{data}</div>
-      {action}
-    </div>
-  );
+    return (
+        <div
+            className={cn('bodyMd text-text-strong truncate', BaseStyle, className)}
+        >
+            <div className="flex-1 truncate pulsable">{data}</div>
+            {action}
+        </div>
+    );
 };
 
 const ListItem = ({
-  data,
-  subtitle,
-  className = '',
-  action,
-}: {
-  data?: ReactNode;
-  subtitle?: ReactNode;
+                      data,
+                      subtitle,
+                      className = '',
+                      action,
+                  }: {
+    data?: ReactNode;
+    subtitle?: ReactNode;
 } & IBase) => {
-  return (
-    <div className={cn(BaseStyle, className)}>
-      <div className="flex flex-col flex-1 truncate">
-        {data && (
-          <div className="flex-1 bodyMd-medium text-text-strong truncate pulsable">
-            {data}
-          </div>
-        )}
-        {subtitle && (
-          <div className="pulsable bodyMd text-text-soft truncate">
-            {subtitle}
-          </div>
-        )}
-      </div>
-      {action}
-    </div>
-  );
+    return (
+        <div className={cn(BaseStyle, className)}>
+            <div className="flex flex-col flex-1 truncate">
+                {data && (
+                    <div className="flex-1 bodyMd-medium text-text-strong truncate pulsable">
+                        {data}
+                    </div>
+                )}
+                {subtitle && (
+                    <div className="pulsable bodyMd text-text-soft truncate">
+                        {subtitle}
+                    </div>
+                )}
+            </div>
+            {action}
+        </div>
+    );
 };
 
 const ListTitle = ({
-  className,
-  action,
-  title,
-  avatar,
-  subtitle,
-}: {
-  className?: string;
-  action?: ReactNode;
-  title?: ReactNode;
-  subtitle?: ReactNode;
-  avatar?: ReactNode;
+                       className,
+                       action,
+                       title,
+                       avatar,
+                       subtitle,
+                   }: {
+    className?: string;
+    action?: ReactNode;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    avatar?: ReactNode;
 }) => {
-  return (
-    <div className={cn(BaseStyle, className)}>
-      <div className="flex flex-row items-center gap-xl flex-1 truncate">
-        {avatar}
-        <div className="flex flex-col gap-sm flex-1 truncate">
-          {title && (
-            <div className="bodyMd-semibold text-text-default truncate pulsable">
-              <Tooltip.Root
-                className="!w-fit !max-w-fit"
-                side="top"
-                content={<div className="bodySm text-text-strong">{title}</div>}
-              >
-                <span className="w-fit">{title}</span>
-              </Tooltip.Root>
+    return (
+        <div className={cn(BaseStyle, className)}>
+            <div className="flex flex-row items-center gap-xl flex-1 truncate">
+                {avatar}
+                <div className="flex flex-col gap-sm flex-1 truncate">
+                    {title && (
+                        <div className="bodyMd-semibold text-text-default truncate pulsable">
+                            <Tooltip.Root
+                                className="!w-fit !max-w-fit"
+                                side="top"
+                                content={<div className="bodySm text-text-strong">{title}</div>}
+                            >
+                                <span className="w-fit">{title}</span>
+                            </Tooltip.Root>
+                        </div>
+                    )}
+
+                    {subtitle && (
+                        <div className="bodySm text-text-soft truncate pulsable">
+                            {subtitle}
+                        </div>
+                    )}
+                </div>
             </div>
-          )}
+            {action}
+        </div>
+    );
+};
+
+const ListDomainItem = ({
+                        data,
+                        value,
+                    }: {
+    data: ReactNode;
+    value: string;
+}) => {
+    const [_, setCopyIcon] = useState(<CopySimple/>);
+    const {copy} = useClipboard({
+        onSuccess: () => {
+            setTimeout(() => {
+                setCopyIcon(<CopyrightFill/>);
+                toast.success(`${titleCase("domain name")} copied successfully`);
+            }, 1000);
+            // toast.success('Copied to clipboard');
+        },
+    });
 
-          {subtitle && (
-            <div className="bodySm text-text-soft truncate pulsable">
-              {subtitle}
+    return (
+        <div
+            onClick={(event) => {
+                event.preventDefault()
+                copy(value);
+            }}
+            className="flex flex-row gap-md items-center select-none group cursor-pointer"
+        >
+            <div className="flex flex-col flex-1">
+                {data && (
+                    <div className="bodyMd-medium text-text-soft truncate pulsable">
+                        {data}
+                    </div>
+                )}
             </div>
-          )}
+            <span className="invisible group-hover:visible">
+                <CopySimple size={10}/>
+            </span>
         </div>
-      </div>
-      {action}
-    </div>
-  );
+    );
 };
 
-const listFlex = ({ key }: { key: string }) => ({
-  key,
-  className: 'basis-full',
-  render: () => <div />,
+const listFlex = ({key}: { key: string }) => ({
+    key,
+    className: 'basis-full',
+    render: () => <div/>,
 });
 
 const listClass = {
-  title: 'w-[180px] min-w-[180px] max-w-[180px] mr-2xl',
-  author: 'w-[180px] min-w-[180px] max-w-[180px]',
+    title: 'w-[180px] min-w-[180px] max-w-[180px] mr-2xl',
+    author: 'w-[180px] min-w-[180px] max-w-[180px]',
 };
-export { ListBody, ListItem, ListTitle, ListSecondary, listFlex, listClass };
+export {ListBody, ListItem, ListTitle, ListSecondary, listFlex, ListDomainItem, listClass};
diff --git a/...apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx b/...apps/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources.tsx
@@ -5,7 +5,7 @@ import {
   ListItem,
   ListTitle,
   listClass,
-  listFlex,
+  listFlex, ListDomainItem,
 } from '~/console/components/console-list-components';
 import DeleteDialog from '~/console/components/delete-dialog';
 import Grid from '~/console/components/grid';
@@ -26,6 +26,7 @@ import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import { toast } from '~/components/molecule/toast';
 import HandleRouter from './handle-router';
+import {CopyButton} from "~/console/components/commons";
 
 const RESOURCE_NAME = 'domain';
 type BaseType = ExtractNodeType<IRouters>;
@@ -104,6 +105,21 @@ const GridView = ({ items, onAction }: IResource) => {
                   />
                 ),
               },
+              {
+                key: generateKey(keyPrefix, name),
+                className: listClass.author,
+                render: () => (
+                    item.spec.domains.map((domain) => {
+                      return (
+                          <ListDomainItem
+                              key={generateKey(keyPrefix, id + domain)}
+                              data={domain}
+                              value={domain}
+                          />
+                      )
+                    })
+                ),
+              },
               {
                 key: generateKey(keyPrefix, updateInfo.author),
                 render: () => (
@@ -141,6 +157,20 @@ const ListView = ({ items, onAction }: IResource) => {
                 render: () => <ListTitle title={name} />,
               },
               status,
+              {
+                key: generateKey(keyPrefix, name),
+                render: () => (
+                    item.spec.domains.map((domain) => {
+                      return (
+                          <ListDomainItem
+                              key={generateKey(keyPrefix, id + domain)}
+                              data={domain}
+                              value={domain}
+                          />
+                      )
+                    })
+                ),
+              },
               listFlex({ key: 'flex-1' }),
               {
                 key: generateKey(keyPrefix, updateInfo.author),

diff --git a/src/generated/gql/sdl.graphql b/src/generated/gql/sdl.graphql
@@ -2927,6 +2927,7 @@ type Mutation {
   infra_updateHelmRelease(clusterName: String!, release: HelmReleaseIn!): HelmRelease
   infra_updateNodePool(clusterName: String!, pool: NodePoolIn!): NodePool
   infra_updateProviderSecret(secret: CloudProviderSecretIn!): CloudProviderSecret
+  infra_upgradeHelmKloudliteAgent(clusterName: String!): Boolean!
   oAuth_addLogin(code: String!, provider: String!, state: String!): Boolean!
   oAuth_login(code: String!, provider: String!, state: String): Session!
 }