From 8340c4aa0e24e1be8eb3cc66909a4ad5c756eea6 Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Thu, 5 Sep 2024 12:22:07 +0530 Subject: [PATCH 1/6] registry images ui implemented --- fake-data-generator/gen.ts | 2 + gql-queries-generator/doc/queries.graphql | 44 ++++ src/apps/console/components/icons.tsx | 1 + .../console/page-components/app/general.tsx | 91 +++++++- .../env+/$environment+/new-app/app-detail.tsx | 108 +++++++-- .../$account+/new-managed-service/_index.tsx | 19 +- .../_main+/$account+/settings+/_layout.tsx | 5 +- .../settings+/image-pull-secrets/_index.tsx | 17 +- .../settings+/images/images-resources.tsx | 209 ++++++++++++++++++ .../$account+/settings+/images/route.tsx | 74 +++++++ .../$account+/settings+/images/tools.tsx | 29 +++ .../gql/queries/registry-image-queries.ts | 90 ++++++++ src/apps/console/server/gql/saved-queries.ts | 28 +-- src/generated/gql/sdl.graphql | 76 +++++++ src/generated/gql/server.ts | 78 +++++++ 15 files changed, 808 insertions(+), 63 deletions(-) create mode 100644 src/apps/console/routes/_main+/$account+/settings+/images/images-resources.tsx create mode 100644 src/apps/console/routes/_main+/$account+/settings+/images/route.tsx create mode 100644 src/apps/console/routes/_main+/$account+/settings+/images/tools.tsx create mode 100644 src/apps/console/server/gql/queries/registry-image-queries.ts diff --git a/fake-data-generator/gen.ts b/fake-data-generator/gen.ts index 1dedbf824..26d271464 100644 --- a/fake-data-generator/gen.ts +++ b/fake-data-generator/gen.ts @@ -34,6 +34,8 @@ const types: string[] = [ 'ConsoleListGlobalVpnDevicesQuery', 'ConsoleListByokClustersQuery', 'ConsoleListAllClustersQuery', + 'ConsoleListRegistryImagesQuery', + 'ConsoleListImagePullSecretsQuery', ]; async function fake(files: string[], types: string[] = []) { diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql index 566e9f6b6..94f092afb 100644 --- a/gql-queries-generator/doc/queries.graphql +++ b/gql-queries-generator/doc/queries.graphql @@ -4451,6 +4451,50 @@ query consoleListImportedManagedResources($envName: String!, $search: SearchImpo } } +mutation consoleDeleteRegistryImage($image: String!) { + core_deleteRegistryImage(image: $image) +} + +query consoleGetRegistryImage($image: String!) { + core_getRegistryImage(image: $image) { + accountName + creationTime + id + imageName + imageTag + markedForDeletion + meta + recordVersion + updateTime + } +} + +query consoleListRegistryImages($pq: CursorPaginationIn) { + core_listRegistryImages(pq: $pq) { + edges { + cursor + node { + accountName + creationTime + id + imageName + imageTag + markedForDeletion + meta + recordVersion + updateTime + } + } + pageInfo { + endCursor + hasNextPage + hasPrevPage + startCursor + } + totalCount + } +} + query iotconsoleAccountCheckNameAvailability($name: String!) { accounts_checkNameAvailability(name: $name) { result diff --git a/src/apps/console/components/icons.tsx b/src/apps/console/components/icons.tsx index 9cec1d0a5..ebabba279 100644 --- a/src/apps/console/components/icons.tsx +++ b/src/apps/console/components/icons.tsx @@ -137,4 +137,5 @@ export { StackSimple, Play, Pause, + Dockerlogo, } from '@jengaicons/react'; diff --git a/src/apps/console/page-components/app/general.tsx b/src/apps/console/page-components/app/general.tsx index 70715352a..e95f6f2a2 100644 --- a/src/apps/console/page-components/app/general.tsx +++ b/src/apps/console/page-components/app/general.tsx @@ -1,17 +1,22 @@ +import { useParams } from '@remix-run/react'; +import { useCallback, useEffect, useState } from 'react'; +import { Checkbox } from '~/components/atoms/checkbox'; +import { TextInput } from '~/components/atoms/input'; +import Select from '~/components/atoms/select'; +import { BottomNavigation } from '~/console/components/commons'; +import { NameIdView } from '~/console/components/name-id-view'; 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 { 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 { TextInput } from '~/components/atoms/input'; -import { useEffect, useState } from 'react'; -import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes'; -import { constants } from '~/console/server/utils/constants'; import HandleBuild from '~/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds'; +import { useConsoleApi } from '~/console/server/gql/api-provider'; +import { parseName, parseNodes } from '~/console/server/r-utils/common'; import { keyconstants } from '~/console/server/r-utils/key-constants'; -import { Checkbox } from '~/components/atoms/checkbox'; +import { ensureAccountClientSide } from '~/console/server/utils/auth-utils'; +import { constants } from '~/console/server/utils/constants'; +import useForm, { dummyEvent } 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 { handleError } from '~/root/lib/utils/common'; // const ExtraButton = ({ // onNew, @@ -59,6 +64,17 @@ import { Checkbox } from '~/components/atoms/checkbox'; // return ; // }; +const AppSelectItem = ({ label, value }: { label: string; value: string }) => { + return ( +
+
+
{label}
+
{value}
+
+
+ ); +}; + const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => { const { readOnlyApp, @@ -76,6 +92,39 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => { // only for edit mode // const [isEdited, setIsEdited] = useState(!app.ciBuildId); const [showBuildEdit, setShowBuildEdit] = useState(false); + const api = useConsoleApi(); + const params = useParams(); + + const [imageList, setImageList] = useState([]); + const [imageLoaded, setImageLoaded] = useState(false); + + const getRegistryImages = useCallback(async () => { + ensureAccountClientSide(params); + setImageLoaded(true); + try { + const registrayImages = await api.listRegistryImages({}); + const data = parseNodes(registrayImages.data).map((i) => ({ + label: `${i.imageName}:${i.imageTag}`, + value: `${i.imageName}:${i.imageTag}`, + ready: true, + render: () => ( + + ), + })); + setImageList(data); + } catch (err) { + handleError(err); + } finally { + setImageLoaded(false); + } + }, []); + + useEffect(() => { + getRegistryImages(); + }, []); // const api = useConsoleApi(); @@ -254,7 +303,7 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => { /> )}
- { onChange={handleChange('imageUrl')} error={!!errors.imageUrl} message={errors.imageUrl} + /> */} + imageList} + onChange={({ value }) => { + handleChange('imageUrl')(dummyEvent(value)); + }} + showclear + noOptionMessage={ +
+ Search for image or enter image name +
+ } + error={!!errors.imageUrl} + message={errors.imageUrl} + loading={imageLoaded} /> {/* {values.imageMode === 'default' && ( diff --git a/src/apps/console/routes/_main+/$account+/new-managed-service/_index.tsx b/src/apps/console/routes/_main+/$account+/new-managed-service/_index.tsx index 951ff1f3d..332822ff1 100644 --- a/src/apps/console/routes/_main+/$account+/new-managed-service/_index.tsx +++ b/src/apps/console/routes/_main+/$account+/new-managed-service/_index.tsx @@ -75,8 +75,7 @@ const RenderField = ({ onChange={({ target }) => { onChange(`res.${field.name}`)( dummyEvent( - `${parseFloat(target.value) * (field.multiplier || 1)}${ - field.unit + `${parseFloat(target.value) * (field.multiplier || 1)}${field.unit }` ) ); @@ -102,9 +101,8 @@ const RenderField = ({ if (field.inputType === 'Resource') { return (
-
{`${field.label}${ - field.required ? ' *' : '' - }`}
+
{`${field.label}${field.required ? ' *' : '' + }`}
@@ -117,16 +115,14 @@ const RenderField = ({ onChange={({ target }) => { onChange(`res.${field.name}.min`)( dummyEvent( - `${parseFloat(target.value) * (field.multiplier || 1)}${ - field.unit + `${parseFloat(target.value) * (field.multiplier || 1)}${field.unit }` ) ); if (qos) { onChange(`res.${field.name}.max`)( dummyEvent( - `${parseFloat(target.value) * (field.multiplier || 1)}${ - field.unit + `${parseFloat(target.value) * (field.multiplier || 1)}${field.unit }` ) ); @@ -146,8 +142,7 @@ const RenderField = ({ onChange={({ target }) => { onChange(`res.${field.name}.max`)( dummyEvent( - `${parseFloat(target.value) * (field.multiplier || 1)}${ - field.unit + `${parseFloat(target.value) * (field.multiplier || 1)}${field.unit }` ) ); @@ -321,7 +316,7 @@ const FieldView = ({ showclear error={!!errors.clusterName} message={errors.clusterName} - // loading={cIsLoading || byokCIsLoading} + // loading={cIsLoading || byokCIsLoading} /> {/* { loading={nodepoolLoading} showclear /> - )} + )} */}
{mode === 'new' && ( diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/_layout.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/_layout.tsx index f1f694714..d4261ebc0 100644 --- a/src/apps/console/routes/_main+/$account+/env+/$environment+/_layout.tsx +++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/_layout.tsx @@ -15,7 +15,6 @@ import { GearSix, } from '~/console/components/icons'; import HandleScope from '~/console/page-components/handle-environment'; -import { ICluster } from '~/console/server/gql/queries/cluster-queries'; import { IEnvironment } from '~/console/server/gql/queries/environment-queries'; import { ILoginUrls, ILogins } from '~/console/server/gql/queries/git-queries'; import { GQLServerHandler } from '~/console/server/gql/saved-queries'; @@ -30,8 +29,13 @@ import { IAccountContext } from '../../_layout'; const Environment = () => { const rootContext = useOutletContext(); - const { environment, managedTemplates, loginUrls, logins, cluster } = - useLoaderData(); + const { + environment, + managedTemplates, + loginUrls, + logins, + // cluster + } = useLoaderData(); return ( @@ -42,7 +46,7 @@ const Environment = () => { managedTemplates, loginUrls, logins, - cluster, + // cluster, }} /> @@ -308,15 +312,15 @@ export const loader = async (ctx: IRemixCtx) => { throw errors[0]; } - const { data: cData, errors: cErrors } = await GQLServerHandler( - ctx.request - ).getCluster({ - name: data.clusterName, - }); + // const { data: cData, errors: cErrors } = await GQLServerHandler( + // ctx.request + // ).getCluster({ + // name: data.clusterName, + // }); - if (cErrors) { - throw cErrors[0]; - } + // if (cErrors) { + // throw cErrors[0]; + // } const { data: logins, errors: loginErrors } = await GQLServerHandler( ctx.request @@ -339,7 +343,7 @@ export const loader = async (ctx: IRemixCtx) => { loginUrls, logins, environment: envData, - cluster: cData, + // cluster: cData, }; } catch (err) { logger.error(err); @@ -347,7 +351,7 @@ export const loader = async (ctx: IRemixCtx) => { logins: ILogins; loginUrls: ILoginUrls; environment: IEnvironment; - cluster: ICluster; + // cluster: ICluster; }; } }; @@ -356,7 +360,7 @@ export interface IEnvironmentContext extends IAccountContext { logins: LoaderResult['logins']; loginUrls: LoaderResult['loginUrls']; environment: LoaderResult['environment']; - cluster: LoaderResult['cluster']; + // cluster: LoaderResult['cluster']; } export default Environment; diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/apps/apps-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/apps/apps-resources-v2.tsx index e75a9c675..b974f369e 100644 --- a/src/apps/console/routes/_main+/$account+/env+/$environment+/apps/apps-resources-v2.tsx +++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/apps/apps-resources-v2.tsx @@ -239,8 +239,7 @@ const GridView = ({ items = [], onAction: _ }: IResource) => { }; const ListView = ({ items = [], onAction }: IResource) => { - const { environment, account, cluster } = - useOutletContext(); + const { environment, account } = useOutletContext(); const { clusters } = useClusterStatusV2(); const [clusterOnlineStatus, setClusterOnlineStatus] = useState< @@ -306,7 +305,7 @@ const ListView = ({ items = [], onAction }: IResource) => { }, ], rows: items.map((i) => { - const isClusterOnline = clusterOnlineStatus[parseName(cluster)]; + // const isClusterOnline = clusterOnlineStatus[parseName(cluster)]; const { name, id, updateInfo } = parseItem(i); return { @@ -334,9 +333,9 @@ const ListView = ({ items = [], onAction }: IResource) => { return null; } - if (!isClusterOnline) { - return Cluster Offline; - } + // if (!isClusterOnline) { + // return Cluster Offline; + // } return ; }, @@ -399,10 +398,9 @@ const AppsResourcesV2 = ({ items = [] }: Omit) => { } // toast.success('app intercepted successfully'); toast.success( - `${ - intercept - ? 'App Intercepted successfully' - : 'App Intercept removed successfully' + `${intercept + ? 'App Intercepted successfully' + : 'App Intercept removed successfully' }` ); reload(); diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/external-apps/external-app-resource.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/external-apps/external-app-resource.tsx index 63e0b1e4b..6dd3f58ca 100644 --- a/src/apps/console/routes/_main+/$account+/env+/$environment+/external-apps/external-app-resource.tsx +++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/external-apps/external-app-resource.tsx @@ -1,33 +1,33 @@ -import { GearSix, LinkBreak, Repeat } from '~/console/components/icons'; import { Link, useOutletContext, useParams } from '@remix-run/react'; +import { useState } from 'react'; +import { Badge } from '~/components/atoms/badge'; +import Tooltip from '~/components/atoms/tooltip'; +import { toast } from '~/components/molecule/toast'; import { generateKey, titleCase } from '~/components/utils'; +import { CopyContentToClipboard } from '~/console/components/common-console-components'; import { ListItem, ListTitle, } from '~/console/components/console-list-components'; import Grid from '~/console/components/grid'; +import { GearSix, LinkBreak, Repeat } from '~/console/components/icons'; import ListGridView from '~/console/components/list-grid-view'; +import ListV2 from '~/console/components/listV2'; import ResourceExtraAction, { IResourceExtraItem, } from '~/console/components/resource-extra-action'; +import { SyncStatusV2 } from '~/console/components/sync-status'; import { useConsoleApi } from '~/console/server/gql/api-provider'; import { ExtractNodeType, parseName, - parseName as pn, parseUpdateOrCreatedBy, parseUpdateOrCreatedOn, + parseName as pn, } from '~/console/server/r-utils/common'; -import { handleError } from '~/lib/utils/common'; -import { toast } from '~/components/molecule/toast'; 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'; -import { useState } from 'react'; -import { Badge } from '~/components/atoms/badge'; -import { CopyContentToClipboard } from '~/console/components/common-console-components'; -import Tooltip from '~/components/atoms/tooltip'; +import { handleError } from '~/lib/utils/common'; import { NN } from '~/root/lib/types/common'; // import HandleIntercept from './handle-intercept'; import { IExternalApps } from '~/console/server/gql/queries/external-app-queries'; @@ -236,8 +236,11 @@ const GridView = ({ items = [], onAction: _ }: IResource) => { }; const ListView = ({ items = [], onAction }: IResource) => { - const { environment, cluster, account } = - useOutletContext(); + const { + environment, + // cluster, + account, + } = useOutletContext(); return ( {
) : null, }, - service: { - render: () => ( - - ), - }, + // service: { + // render: () => ( + // + // ), + // }, status: { render: () => (
diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx index 4c2bc2ed9..2ae5ae3cf 100644 --- a/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx +++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/managed-resources/managed-resources-resource-v2.tsx @@ -1,4 +1,4 @@ -import { useOutletContext, useParams } from '@remix-run/react'; +import { useParams } from '@remix-run/react'; import { useEffect, useState } from 'react'; import { Badge } from '~/components/atoms/badge'; import { toast } from '~/components/molecule/toast'; @@ -23,15 +23,13 @@ import { IImportedManagedResources } from '~/console/server/gql/queries/imported import { IMSvTemplates } from '~/console/server/gql/queries/managed-templates-queries'; import { ExtractNodeType, - parseName, parseUpdateOrCreatedBy, - parseUpdateOrCreatedOn, + parseUpdateOrCreatedOn } from '~/console/server/r-utils/common'; import { getManagedTemplateLogo } from '~/console/utils/commons'; import { useReload } from '~/lib/client/helpers/reloader'; import { useWatchReload } from '~/lib/client/helpers/socket/useWatch'; import { handleError } from '~/lib/utils/common'; -import { IEnvironmentContext } from '../_layout'; import { ViewSecret } from './handle-managed-resource-v2'; const RESOURCE_NAME = 'managed resource'; @@ -134,7 +132,7 @@ const GridView = ({ items = [], onAction, templates }: IResource) => { }; const ListView = ({ items = [], onAction, templates }: IResource) => { - const { cluster } = useOutletContext(); + // const { cluster } = useOutletContext(); const { clusters } = useClusterStatusV2(); const [clusterOnlineStatus, setClusterOnlineStatus] = useState< @@ -195,7 +193,7 @@ const ListView = ({ items = [], onAction, templates }: IResource) => { ], rows: items.map((i) => { const { name, id, logo, updateInfo } = parseItem(i, templates); - const isClusterOnline = clusterOnlineStatus[parseName(cluster)]; + // const isClusterOnline = clusterOnlineStatus[parseName(cluster)]; return { columns: { @@ -230,9 +228,9 @@ const ListView = ({ items = [], onAction, templates }: IResource) => { }, status: { render: () => { - if (!isClusterOnline) { - return Cluster Offline; - } + // if (!isClusterOnline) { + // return Cluster Offline; + // } if (i.syncStatus?.state === 'UPDATED_AT_AGENT') { return Ready; diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-compute.tsx index 271c04c96..a740c78dd 100644 --- a/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-compute.tsx +++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-compute.tsx @@ -1,22 +1,17 @@ -import { useOutletContext } from '@remix-run/react'; import { useState } from 'react'; import { Button } from '~/components/atoms/button'; import { Checkbox } from '~/components/atoms/checkbox'; import { NumberInput } from '~/components/atoms/input'; import Select from '~/components/atoms/select'; import Slider from '~/components/atoms/slider'; -import { useMapper } from '~/components/utils'; import { BottomNavigation } from '~/console/components/commons'; import ExtendedFilledTab from '~/console/components/extended-filled-tab'; import { useAppState } from '~/console/page-components/app-states'; import { FadeIn, parseValue } from '~/console/page-components/util'; import { useConsoleApi } from '~/console/server/gql/api-provider'; -import { parseName, parseNodes } from '~/console/server/r-utils/common'; -import useCustomSwr from '~/lib/client/hooks/use-custom-swr'; import { useLog } from '~/lib/client/hooks/use-log'; import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form'; import Yup from '~/root/lib/server/helpers/yup'; -import { IEnvironmentContext } from '../_layout'; import appInitialFormValues, { mapFormValuesToApp } from './app-utils'; import { plans } from './datas'; @@ -45,23 +40,23 @@ const AppCompute = () => { const { app, setApp, setPage, markPageAsCompleted, getContainer } = useAppState(); const api = useConsoleApi(); - const { cluster } = useOutletContext(); + // const { cluster } = useOutletContext(); 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 { + // 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 } = useForm({ initialValues: appInitialFormValues({ @@ -83,10 +78,10 @@ const AppCompute = () => { }, }); - const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({ - label: val.metadata?.name || '', - value: val.metadata?.name || '', - })); + // const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({ + // label: val.metadata?.name || '', + // value: val.metadata?.name || '', + // })); useLog(values.selectionMode); @@ -253,7 +248,7 @@ const AppCompute = () => { }} /> - {advancedOptions && ( + {/* {advancedOptions && (