From de6194b334218862c72b39379c36f2746f495d17 Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Thu, 3 Oct 2024 14:06:26 +0530 Subject: [PATCH] fixes: - cluster status of different account in environment showing correct - environment listing ui update - clone environment in template mode --- Taskfile.yaml | 1 + gql-queries-generator/doc/queries.graphql | 4 +- .../console/components/console-avatar.tsx | 18 +- src/apps/console/components/icons.tsx | 225 ++++++++++-------- .../console/components/template-avatar.tsx | 24 -- .../console/hooks/use-cluster-status-v2.tsx | 15 +- src/apps/console/hooks/use-cluster-status.tsx | 2 +- .../environments/clone-environment.tsx | 64 +++-- .../environments/environment-resources-v2.tsx | 60 ++++- .../infra+/clusters/cluster-resources-v2.tsx | 23 +- .../server/gql/queries/cluster-queries.ts | 7 +- src/design-system/components/atoms/avatar.tsx | 22 +- src/generated/gql/sdl.graphql | 1 + src/generated/gql/server.ts | 2 + 14 files changed, 277 insertions(+), 191 deletions(-) delete mode 100644 src/apps/console/components/template-avatar.tsx diff --git a/Taskfile.yaml b/Taskfile.yaml index 23616353e..1e3ea9eca 100644 --- a/Taskfile.yaml +++ b/Taskfile.yaml @@ -11,6 +11,7 @@ tasks: BASE_URL=dev.kloudlite.io COOKIE_DOMAIN=".dev.kloudlite.io" GATEWAY_URL="http://gateway-api.kloudlite.svc.cluster.local:3000" + export COOKIE_DOMAIN=".dev.kloudlite.io" case {{.app}} in "auth") PORT=4000 diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql index c6a113d12..2ff24dfb0 100644 --- a/gql-queries-generator/doc/queries.graphql +++ b/gql-queries-generator/doc/queries.graphql @@ -395,8 +395,8 @@ query consoleGetCluster($name: String!) { } } -query consoleListClusterStatus($pagination: CursorPaginationIn) { - infra_listBYOKClusters(pagination: $pagination) { +query consoleListClusterStatus($search: SearchCluster, $pagination: CursorPaginationIn) { + infra_listBYOKClusters(search: $search, pagination: $pagination) { edges { node { lastOnlineAt diff --git a/src/apps/console/components/console-avatar.tsx b/src/apps/console/components/console-avatar.tsx index 52521d213..040bfbdc0 100644 --- a/src/apps/console/components/console-avatar.tsx +++ b/src/apps/console/components/console-avatar.tsx @@ -1,21 +1,37 @@ import { Avatar } from '~/components/atoms/avatar'; import { titleCase } from '~/components/utils'; import generateColor from '~/root/lib/utils/color-generator'; +import { EnvIconComponent } from './icons'; const ConsoleAvatar = ({ name, color, size, + isAvatar = false, + icon, + className, }: { name: string; color?: string; size?: string; + isAvatar?: boolean; + icon?: React.ReactNode; + className?: string; }) => { return ( {titleCase(name[0])}} + // image={{titleCase(name[0])}} + image={ + isAvatar ? ( + icon || + ) : ( + // + {titleCase(name[0])} + ) + } + className={className} /> ); }; diff --git a/src/apps/console/components/icons.tsx b/src/apps/console/components/icons.tsx index 9012767e9..95d2fb23b 100644 --- a/src/apps/console/components/icons.tsx +++ b/src/apps/console/components/icons.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - export const AvatarNotification = ({ size = 16 }: { size?: number }) => { return ( { ); }; +export const EnvIconComponent = ({ size = 16 }: { size?: number }) => ( + + + +); + +export const EnvTemplateIconComponent = ({ size = 16 }: { size?: number }) => ( + + + + +); + export { - Warning, - WarningCircleFill, - Domain, + AWSlogoFill, + ArrowClockwise, + ArrowCounterClockwise, + ArrowFatDown as ArrowDown, ArrowLeftLgFill as ArrowLeft, + ArrowLineDown, ArrowRightLgFill as ArrowRight, ArrowFatUp as ArrowUp, - ArrowFatDown as ArrowDown, + ArrowsClockwise, + ArrowsCounterClockwise, ArrowsDownUp, - Plus, - Trash, - PencilLine as Pencil, - PencilSimple, - GithubLogoFill, - GitlabLogoFill, - GitBranchFill, - Users, + BackingServices, + BellFill, + Buildings, + CalendarCheckFill, + CaretDownFill, Check, + CheckCircle, + CheckCircleFill, + ChecksFill as Checks, + ChevronDown, ChevronLeft, ChevronRight, - X, - SmileySad, - InfoFill, - CheckCircleFill, - WarningFill, - WarningOctagonFill, - LockSimple, - XCircleFill, - LockSimpleOpen, - MinusCircle, - Search, - ArrowsCounterClockwise, - ArrowClockwise, - Copy, - GearSix, - QrCode, - WireGuardlogo, + ChevronUp, ChevronUpDown, - ChevronDown, - Buildings, - Project, - InfraAsCode, - Container, - File, - TreeStructure, + Circle, + CircleFill, + CircleNotch, + CircleWavyCheckFill, CirclesFour, - BackingServices, - VirtualMachine, + Clock, + CodeSimpleFill, + Container, + Copy, + CopySimple, + Cpu, + Crosshair, Database, - ArrowsClockwise, - Info, + Dockerlogo, + Domain, + DotsSix, + DotsThreeOutlineFill, + DotsThreeVerticalFill, + DownloadSimple, + Eye, + EyeSlash, Fan, - WarningCircle, - ChecksFill as Checks, - CircleNotch, - Circle, - CircleFill, - Spinner, + File, + FileLock, + GearFill, + GearSix, + GitBranch, + GitBranchFill, + GitMerge, + GithubLogoFill, + GitlabLogoFill, Globe, - ShieldCheck, + GoogleCloudlogo, + HamburgerFill, + HouseLine, + Info, + InfoFill, + InfraAsCode, + Link, + LinkBreak, + List, + ListBullets, + ListDashes, + ListNumbers, + LockSimple, + LockSimpleOpen, + MinusCircle, NoOps, Nodeless, - GitMerge, + Note, + Pause, + PencilLine as Pencil, PencilLine, - AWSlogoFill, - GoogleCloudlogo, - ArrowCounterClockwise, - CopySimple, - DotsThreeVerticalFill, - CaretDownFill, + PencilSimple, + Play, + PlugsConnected, + Plus, + Project, + QrCode, Question, - ListBullets, - ChevronUp, - List, - SquaresFour, - Smiley, - ArrowLineDown, - Clock, - ListNumbers, - DotsSix, - SignOut, Repeat, - LinkBreak, - Link, - Eye, - Cpu, - Crosshair, - HouseLine, - CircleWavyCheckFill, - DownloadSimple, - GitBranch, + Search, + ShieldCheck, + SignOut, + Sliders, + Smiley, + SmileySad, + Spinner, + SquaresFour, + StackSimple, Tag, - CodeSimpleFill, TerminalWindow, - DotsThreeOutlineFill, - GearFill, - HamburgerFill, - XFill, - EyeSlash, - CheckCircle, - CalendarCheckFill, - PlugsConnected, - ListDashes, - BellFill, + Trash, + TreeStructure, UserCircle, - Sliders, - FileLock, - StackSimple, - Play, - Pause, - Dockerlogo, - Note, + Users, + VirtualMachine, + Warning, + WarningCircle, + WarningCircleFill, + WarningFill, + WarningOctagonFill, + WireGuardlogo, + X, + XCircleFill, + XFill } from '@jengaicons/react'; + diff --git a/src/apps/console/components/template-avatar.tsx b/src/apps/console/components/template-avatar.tsx deleted file mode 100644 index db4e79d08..000000000 --- a/src/apps/console/components/template-avatar.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Avatar } from '~/components/atoms/avatar'; -import { titleCase } from '~/components/utils'; -import generateColor from '~/root/lib/utils/color-generator'; - -const TemplateAvatar = ({ - name, - color, - size, -}: { - name: string; - color?: string; - size?: string; -}) => { - return ( - {titleCase(name)}} - isTemplate - /> - ); -}; - -export default TemplateAvatar; diff --git a/src/apps/console/hooks/use-cluster-status-v2.tsx b/src/apps/console/hooks/use-cluster-status-v2.tsx index 6b9475e1b..92c7da33b 100644 --- a/src/apps/console/hooks/use-cluster-status-v2.tsx +++ b/src/apps/console/hooks/use-cluster-status-v2.tsx @@ -13,15 +13,15 @@ import { import { useSocketWatch } from '~/root/lib/client/helpers/socket/useWatch'; import useDebounce from '~/root/lib/client/hooks/use-debounce'; import { useConsoleApi } from '../server/gql/api-provider'; -import { ExtractNodeType, parseNodes } from '../server/r-utils/common'; import { IClustersStatus } from '../server/gql/queries/cluster-queries'; +import { ExtractNodeType, parseNodes } from '../server/r-utils/common'; type IClusterMap = { [key: string]: ExtractNodeType }; const ClusterStatusContext = createContext<{ clusters: IClusterMap; setClusters: Dispatch>; -}>({ clusters: {}, setClusters: () => {} }); +}>({ clusters: {}, setClusters: () => { } }); const ClusterStatusProvider = ({ children }: { children: ReactNode }) => { const [clusters, setClusters] = useState({}); @@ -40,7 +40,14 @@ const ClusterStatusProvider = ({ children }: { children: ReactNode }) => { pagination: { first: 500, }, + search: { + allClusters: { + exact: true, + matchType: 'exact', + }, + }, }); + console.log('data===', data); const parsed = parseNodes(data).reduce((acc, c) => { acc[c.metadata.name] = c; return acc; @@ -77,7 +84,7 @@ const ClusterStatusProvider = ({ children }: { children: ReactNode }) => { listCluster(); }, 3000, - [update], + [update] ); useSocketWatch(() => { @@ -88,7 +95,7 @@ const ClusterStatusProvider = ({ children }: { children: ReactNode }) => { ({ clusters, setClusters }), - [clusters, setClusters], + [clusters, setClusters] )} > {children} diff --git a/src/apps/console/hooks/use-cluster-status.tsx b/src/apps/console/hooks/use-cluster-status.tsx index a825a5066..842ff8161 100644 --- a/src/apps/console/hooks/use-cluster-status.tsx +++ b/src/apps/console/hooks/use-cluster-status.tsx @@ -15,7 +15,7 @@ export const findClusterStatus = (item?: { const timeDifference = (currentTime.getTime() - lastTime.getTime()) / (1000 * 60); - return timeDifference <= 2; + return timeDifference <= 1; }; const useClusterStatus = () => { diff --git a/src/apps/console/routes/_main+/$account+/environments/clone-environment.tsx b/src/apps/console/routes/_main+/$account+/environments/clone-environment.tsx index 2a82309e7..400750b97 100644 --- a/src/apps/console/routes/_main+/$account+/environments/clone-environment.tsx +++ b/src/apps/console/routes/_main+/$account+/environments/clone-environment.tsx @@ -1,5 +1,6 @@ /* eslint-disable react/destructuring-assignment */ import { useCallback, useEffect, useState } from 'react'; +import Radio from '~/components/atoms/radio'; import Select from '~/components/atoms/select'; import Popup from '~/components/molecule/popup'; import { toast } from '~/components/molecule/toast'; @@ -22,23 +23,6 @@ import { handleError } from '~/root/lib/utils/common'; type IDialog = IDialogBase>; -// const ClusterSelectItem = ({ -// label, -// value, -// }: { -// label: string; -// value: string; -// }) => { -// return ( -//
-//
-//
{label}
-//
{value}
-//
-//
-// ); -// }; - const Root = (props: IDialog) => { const { isUpdate, setVisible } = props; const api = useConsoleApi(); @@ -84,6 +68,7 @@ const Root = (props: IDialog) => { initialValues: { name: '', displayName: '', + radioType: 'compute', environmentRoutingMode: false, isNameError: false, clusterName: '', @@ -102,7 +87,8 @@ const Root = (props: IDialog) => { ? 'public' : 'private', destinationEnvName: val.name, - clusterName: val.clusterName, + clusterName: + val.radioType === 'template' ? '' : val.clusterName || '', sourceEnvName: parseName(props.data), }); if (e) { @@ -151,25 +137,31 @@ const Root = (props: IDialog) => { nameErrorLabel="isNameError" /> - clusterList} + onChange={({ value }) => { + handleChange('clusterName')(dummyEvent(value)); + }} + error={!!errors.clusterName} + message={errors.clusterName} + /> + )} {/* { // setClusterOnlineStatus(states); // }, [clusters]); + useEffect(() => { + console.log('my clus===', clusters); + }, [clusters]); + return ( { subtitle={id} avatar={ i.clusterName === '' ? ( - // - + } + className="border border-dashed !bg-surface-basic-subdued " + /> ) : ( - + } + /> ) } /> + //
+ // } + // className="border border-dashed !bg-surface-basic-subdued " + // /> + // ) : ( + // } + // /> + // ) + // } + // /> + // {i.clusterName === '' && ( + // + // )} + //
), }, cluster: { 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 3bc45a4cb..675fd0666 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 @@ -218,7 +218,7 @@ const GetByokClusterMessage = ({ (currentTime.getTime() - lastTime.getTime()) / (1000 * 60); switch (true) { - case timeDifference <= 2: + case timeDifference <= 1: return (
Attached Compute @@ -242,7 +242,7 @@ const GetSyncStatus = ({ lastOnlineAt }: { lastOnlineAt: string }) => { (currentTime.getTime() - lastTime.getTime()) / (1000 * 60); switch (true) { - case timeDifference <= 2: + case timeDifference <= 1: return ( {
); - case timeDifference > 2: + case timeDifference > 1: return ( { ); default: return ( - - {lastOnlineAt} - - } - > -
- Offline -
- +
+ Offline +
); } }; diff --git a/src/apps/console/server/gql/queries/cluster-queries.ts b/src/apps/console/server/gql/queries/cluster-queries.ts index 277d76fbb..711e36dce 100644 --- a/src/apps/console/server/gql/queries/cluster-queries.ts +++ b/src/apps/console/server/gql/queries/cluster-queries.ts @@ -511,8 +511,11 @@ export const clusterQueries = (executor: IExecutor) => ({ ), listClusterStatus: executor( gql` - query listCluster($pagination: CursorPaginationIn) { - infra_listBYOKClusters(pagination: $pagination) { + query Infra_listBYOKClusters( + $search: SearchCluster + $pagination: CursorPaginationIn + ) { + infra_listBYOKClusters(search: $search, pagination: $pagination) { edges { node { lastOnlineAt diff --git a/src/design-system/components/atoms/avatar.tsx b/src/design-system/components/atoms/avatar.tsx index d769ac6d5..d2dfed591 100644 --- a/src/design-system/components/atoms/avatar.tsx +++ b/src/design-system/components/atoms/avatar.tsx @@ -8,6 +8,7 @@ const colors = { four: ['fill-icon-critical', 'text-icon-critical'], five: ['fill-icon-secondary', 'text-icon-secondary'], six: ['fill-icon-primary', 'text-icon-primary'], + seven: ['basic-surface-subdued', 'text-icon-default'], dark: ['fill-text-soft', 'text-text-soft'], }; @@ -18,6 +19,8 @@ type AvatarColors = | 'three' | 'four' | 'five' + | 'six' + | 'seven' | 'dark' | (string & NonNullable); @@ -27,6 +30,7 @@ export interface IAvatar { image?: ReactNode; dot?: boolean; isTemplate?: boolean; + className?: string; } export const AvatarBase = ({ @@ -35,13 +39,14 @@ export const AvatarBase = ({ image, dot, isTemplate = false, + className, }: IAvatar) => { const isExternal = !Object.keys(colors).includes(color); return (
{ +export const Avatar = ({ + size, + color, + image, + dot, + isTemplate, + className, +}: IAvatar) => { return ( { image={image} dot={dot} isTemplate={isTemplate} + className={className} /> ); }; diff --git a/src/generated/gql/sdl.graphql b/src/generated/gql/sdl.graphql index 71fcce554..beaccaba7 100644 --- a/src/generated/gql/sdl.graphql +++ b/src/generated/gql/sdl.graphql @@ -3993,6 +3993,7 @@ input SearchBuilds { } input SearchCluster { + allClusters: MatchFilterIn cloudProviderName: MatchFilterIn isReady: MatchFilterIn region: MatchFilterIn diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts index 796ff340d..edfe04752 100644 --- a/src/generated/gql/server.ts +++ b/src/generated/gql/server.ts @@ -327,6 +327,7 @@ export type K8s__Io___Api___Core___V1__PersistentVolumeClaimPhase = | 'Pending'; export type SearchCluster = { + allClusters?: InputMaybe; cloudProviderName?: InputMaybe; isReady?: InputMaybe; region?: InputMaybe; @@ -2126,6 +2127,7 @@ export type ConsoleGetClusterQuery = { }; export type ConsoleListClusterStatusQueryVariables = Exact<{ + search?: InputMaybe; pagination?: InputMaybe; }>;