ui update for image discovery

kloudlite · Oct 10, 2024 · cffc087 · cffc087
1 parent 4ef412a
commit cffc087
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 49 deletions.
diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
@@ -4496,6 +4496,7 @@ query consoleGetRegistryImageUrl {
     url
     urlExample
     scriptUrlExample
+    klWebhookAuthToken
   }
 }
 

diff --git a/src/apps/console/routes/_main+/$account+/infra+/vpn-devices/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/vpn-devices/route.tsx
@@ -108,7 +108,7 @@ const Devices = () => {
                     onClick={() => {
                       setVisible(true);
                     }}
-                  // LinkComponent={Link}
+                    // LinkComponent={Link}
                   />
                 ),
               }}

diff --git a/src/apps/console/routes/_main+/$account+/infra+/vpn-devices/vpn-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/infra+/vpn-devices/vpn-resources-v2.tsx
@@ -1,6 +1,9 @@
-import { Eye, Trash } from '~/console/components/icons';
 import { Link, useOutletContext, useParams } from '@remix-run/react';
+import { useState } from 'react';
+import { Button } from '~/components/atoms/button';
+import { toast } from '~/components/molecule/toast';
 import { generateKey, titleCase } from '~/components/utils';
+import { CopyContentToClipboard } from '~/console/components/common-console-components';
 import { CopyButton, listRender } from '~/console/components/commons';
 import ConsoleAvatar from '~/console/components/console-avatar';
 import {
@@ -10,28 +13,25 @@ import {
   ListTitleV2,
   listClass,
 } from '~/console/components/console-list-components';
+import DeleteDialog from '~/console/components/delete-dialog';
 import Grid from '~/console/components/grid';
+import { Eye, Trash } from '~/console/components/icons';
 import ListGridView from '~/console/components/list-grid-view';
+import ListV2 from '~/console/components/listV2';
 import ResourceExtraAction from '~/console/components/resource-extra-action';
+import { ShowWireguardConfig } from '~/console/page-components/handle-console-devices';
+import { IAccountContext } from '~/console/routes/_main+/$account+/_layout';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { IGlobalVpnDevices } from '~/console/server/gql/queries/global-vpn-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 ListV2 from '~/console/components/listV2';
-import { IGlobalVpnDevices } from '~/console/server/gql/queries/global-vpn-queries';
-import { useState } from 'react';
-import { Button } from '~/components/atoms/button';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useReload } from '~/root/lib/client/helpers/reloader';
-import DeleteDialog from '~/console/components/delete-dialog';
-import { toast } from '~/components/molecule/toast';
 import { handleError } from '~/root/lib/utils/common';
-import { CopyContentToClipboard } from '~/console/components/common-console-components';
-import { ShowWireguardConfig } from '~/console/page-components/handle-console-devices';
 
 type BaseType = ExtractNodeType<IGlobalVpnDevices>;
 const RESOURCE_NAME = 'global-vpn';
@@ -223,21 +223,6 @@ const ListView = ({ items = [], onDelete, showWgConfig }: IResource) => {
                     <DeviceHostView hostName={`${parseName(i)}.device.local`} />
                   </div>
                 ),
-                // render: () => (
-                //   <ListItem
-                //     noTooltip
-                //     data={
-                //       <CopyButton
-                //         title={
-                //           <span className="text-sm">
-                //             {parseName(i)}.device.local
-                //           </span>
-                //         }
-                //         value={`${parseName(i)}.device.local`}
-                //       />
-                //     }
-                //   />
-                // ),
               },
               ip: {
                 render: () => (

diff --git a/src/apps/console/routes/_main+/$account+/settings+/images/handle-image-discovery.tsx b/src/apps/console/routes/_main+/$account+/settings+/images/handle-image-discovery.tsx
@@ -1,9 +1,11 @@
 import { useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { Button } from '~/components/atoms/button';
+import { Chip } from '~/components/atoms/chips';
 import Banner from '~/components/molecule/banner';
 import Popup from '~/components/molecule/popup';
 import CodeView from '~/console/components/code-view';
+import { CopyContentToClipboard } from '~/console/components/common-console-components';
 import ExtendedFilledTab from '~/console/components/extended-filled-tab';
 import { LoadingPlaceHolder } from '~/console/components/loading';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
@@ -39,7 +41,7 @@ export const RegistryImageInstruction = ({
       <Popup.Content>
         <form className="flex flex-col gap-2xl">
           {error && (
-            <span className="bodyMd-medium text-text-strong">
+            <span className="flex justify-center items-center bodyMd-medium text-text-strong">
               Error while fetching instructions
             </span>
           )}
@@ -48,6 +50,20 @@ export const RegistryImageInstruction = ({
           ) : (
             data && (
               <div className="flex flex-col gap-xl">
+                <div className="flex flex-row  gap-lg">
+                  <span className="bodySm-semibold text-sm py-md">
+                    Copy your Webhook Token:
+                  </span>
+                  <Chip
+                    item={{ name: 'web token' }}
+                    label={
+                      <CopyContentToClipboard
+                        content={data.klWebhookAuthToken}
+                        toastMessage="Webhook token copied successfully."
+                      />
+                    }
+                  />
+                </div>
                 <ExtendedFilledTab
                   value={active}
                   onChange={setActive}
@@ -60,10 +76,11 @@ export const RegistryImageInstruction = ({
                     { label: 'cURL Command', to: 'url', value: 'url' },
                   ]}
                 />
-                {active === 'url' && (
+
+                {active === 'script-url' && (
                   <div className="flex flex-col gap-3xl">
-                    {data.url &&
-                      data.url.map((u) => (
+                    {data.scriptUrl &&
+                      data.scriptUrl.map((u) => (
                         <CodeView
                           key={u}
                           preClassName="!overflow-none text-wrap break-words"
@@ -77,18 +94,27 @@ export const RegistryImageInstruction = ({
                       body={
                         <div className="flex flex-col gap-md">
                           <span className="bodyMd-medium">
-                            Webhook Image Metadata Push Example:
+                            Shell Script Example with Image and Meta
+                            Information:
                           </span>
-                          <span className="bodyMd">{data.urlExample}</span>
+                          {data.scriptUrlExample &&
+                            data.scriptUrlExample.map((d) => (
+                              <span
+                                className="font-mono text-text-default"
+                                key={d}
+                              >
+                                {d}
+                              </span>
+                            ))}
                         </div>
                       }
                     />
                   </div>
                 )}
-                {active === 'script-url' && (
+                {active === 'url' && (
                   <div className="flex flex-col gap-3xl">
-                    {data.scriptUrl &&
-                      data.scriptUrl.map((u) => (
+                    {data.url &&
+                      data.url.map((u) => (
                         <CodeView
                           key={u}
                           preClassName="!overflow-none text-wrap break-words"
@@ -102,12 +128,17 @@ export const RegistryImageInstruction = ({
                       body={
                         <div className="flex flex-col gap-md">
                           <span className="bodyMd-medium">
-                            Shell Script Example with Image and Meta
-                            Information:
-                          </span>
-                          <span className="bodyMd">
-                            {data.scriptUrlExample}
+                            Webhook Image Metadata Push Example:
                           </span>
+                          {data.urlExample &&
+                            data.urlExample.map((d) => (
+                              <span
+                                className="font-mono text-text-default"
+                                key={d}
+                              >
+                                {d}
+                              </span>
+                            ))}
                         </div>
                       }
                     />

diff --git a/src/apps/console/server/gql/queries/registry-image-queries.ts b/src/apps/console/server/gql/queries/registry-image-queries.ts
@@ -64,6 +64,7 @@ export const registryImagesQueries = (executor: IExecutor) => ({
           url
           urlExample
           scriptUrlExample
+          klWebhookAuthToken
         }
       }
     `,

diff --git a/src/generated/gql/sdl.graphql b/src/generated/gql/sdl.graphql
@@ -3886,17 +3886,19 @@ type RegistryImagePaginatedRecords {
 }
 
 type RegistryImageURL {
+  klWebhookAuthToken: String!
   scriptUrl: [String!]!
-  scriptUrlExample: String!
+  scriptUrlExample: [String!]!
   url: [String!]!
-  urlExample: String!
+  urlExample: [String!]!
 }
 
 input RegistryImageURLIn {
+  klWebhookAuthToken: String!
   scriptUrl: [String!]!
-  scriptUrlExample: String!
+  scriptUrlExample: [String!]!
   url: [String!]!
-  urlExample: String!
+  urlExample: [String!]!
 }
 
 type RemoteLogin {

diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts
@@ -1701,10 +1701,11 @@ export type RegistryImageIn = {
 };
 
 export type RegistryImageUrlIn = {
+  klWebhookAuthToken: Scalars['String']['input'];
   scriptUrl: Array<Scalars['String']['input']>;
-  scriptUrlExample: Scalars['String']['input'];
+  scriptUrlExample: Array<Scalars['String']['input']>;
   url: Array<Scalars['String']['input']>;
-  urlExample: Scalars['String']['input'];
+  urlExample: Array<Scalars['String']['input']>;
 };
 
 export type SearchProjectManagedService = {
@@ -6074,8 +6075,9 @@ export type ConsoleGetRegistryImageUrlQuery = {
   core_getRegistryImageURL: {
     scriptUrl: Array<string>;
     url: Array<string>;
-    urlExample: string;
-    scriptUrlExample: string;
+    urlExample: Array<string>;
+    scriptUrlExample: Array<string>;
+    klWebhookAuthToken: string;
   };
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -4496,6 +4496,7 @@ query consoleGetRegistryImageUrl { @@
         url
         urlExample
         scriptUrlExample
+        klWebhookAuthToken
       }
     }
@@ Expand Down @@