From cffc0873b933157e1fa8eb9c4aa9f305bcba0dac Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Thu, 10 Oct 2024 17:08:08 +0530 Subject: [PATCH] ui update for image discovery --- gql-queries-generator/doc/queries.graphql | 1 + .../$account+/infra+/vpn-devices/route.tsx | 2 +- .../infra+/vpn-devices/vpn-resources-v2.tsx | 37 ++++-------- .../images/handle-image-discovery.tsx | 59 ++++++++++++++----- .../gql/queries/registry-image-queries.ts | 1 + src/generated/gql/sdl.graphql | 10 ++-- src/generated/gql/server.ts | 10 ++-- 7 files changed, 71 insertions(+), 49 deletions(-) diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql index cf75d802e..97e36d6f0 100644 --- 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 index 3daa97c44..344f0269b 100644 --- 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 index a128f8006..51b4beee6 100644 --- 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; const RESOURCE_NAME = 'global-vpn'; @@ -223,21 +223,6 @@ const ListView = ({ items = [], onDelete, showWgConfig }: IResource) => { ), - // render: () => ( - // - // {parseName(i)}.device.local - // - // } - // 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 index aed43e4be..4cb8bcb5d 100644 --- 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 = ({
{error && ( - + Error while fetching instructions )} @@ -48,6 +50,20 @@ export const RegistryImageInstruction = ({ ) : ( data && (
+
+ + Copy your Webhook Token: + + + } + /> +
- {active === 'url' && ( + + {active === 'script-url' && (
- {data.url && - data.url.map((u) => ( + {data.scriptUrl && + data.scriptUrl.map((u) => ( - Webhook Image Metadata Push Example: + Shell Script Example with Image and Meta + Information: - {data.urlExample} + {data.scriptUrlExample && + data.scriptUrlExample.map((d) => ( + + {d} + + ))}
} />
)} - {active === 'script-url' && ( + {active === 'url' && (
- {data.scriptUrl && - data.scriptUrl.map((u) => ( + {data.url && + data.url.map((u) => ( - Shell Script Example with Image and Meta - Information: - - - {data.scriptUrlExample} + Webhook Image Metadata Push Example: + {data.urlExample && + data.urlExample.map((d) => ( + + {d} + + ))}
} /> diff --git a/src/apps/console/server/gql/queries/registry-image-queries.ts b/src/apps/console/server/gql/queries/registry-image-queries.ts index 741dea94f..1db150f1f 100644 --- 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 index 106581928..7cfa7ad81 100644 --- 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 index 0dba014b3..8936df3a2 100644 --- 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; - scriptUrlExample: Scalars['String']['input']; + scriptUrlExample: Array; url: Array; - urlExample: Scalars['String']['input']; + urlExample: Array; }; export type SearchProjectManagedService = { @@ -6074,8 +6075,9 @@ export type ConsoleGetRegistryImageUrlQuery = { core_getRegistryImageURL: { scriptUrl: Array; url: Array; - urlExample: string; - scriptUrlExample: string; + urlExample: Array; + scriptUrlExample: Array; + klWebhookAuthToken: string; }; };