Merge pull request #308 from kloudlite/console/changes

WEB: Console changes and ui fixes
kloudlite · Oct 3, 2024 · c405fc9 · c405fc9
2 parents e5387d4 + 437a138
commit c405fc9
Show file tree

Hide file tree

Showing 14 changed files with 271 additions and 190 deletions.
diff --git 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
@@ -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
@@ -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 (
     <Avatar
       color={color || generateColor(name, 'dark')}
       size={size || 'sm'}
-      image={<span style={{ color: 'white' }}>{titleCase(name[0])}</span>}
+      // image={<span style={{ color: 'white' }}>{titleCase(name[0])}</span>}
+      image={
+        isAvatar ? (
+          icon || <EnvIconComponent size={20} />
+        ) : (
+          // <EnvIconComponent size={20} />
+          <span style={{ color: 'white' }}>{titleCase(name[0])}</span>
+        )
+      }
+      className={className}
     />
   );
 };

diff --git 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 (
     <svg
@@ -27,116 +25,157 @@ export const AvatarNotification = ({ size = 16 }: { size?: number }) => {
   );
 };
 
+export const EnvIconComponent = ({ size = 16 }: { size?: number }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.97709 1.69811C5.82539 1.61322 5.64048 1.61322 5.48877 1.69811L0.381816 4.55584C0.223834 4.64424 0.125977 4.81114 0.125977 4.99217V10.7062C0.125977 10.8872 0.223834 11.0541 0.381816 11.1425L5.48877 14.0002C5.64048 14.0851 5.82539 14.0851 5.97709 14.0002L10.3343 11.5621V15.4764C10.3343 15.6574 10.4322 15.8243 10.5901 15.9127L14.8597 18.3019C15.0115 18.3868 15.1964 18.3868 15.3481 18.3019L19.6177 15.9127C19.7757 15.8243 19.8735 15.6574 19.8735 15.4764V10.709C19.8745 10.6597 19.8682 10.6099 19.8541 10.5612C19.8182 10.4362 19.7343 10.3282 19.6177 10.2629L15.3481 7.87376C15.1964 7.78887 15.0115 7.78887 14.8597 7.87376L11.3399 9.84339V5.00472C11.3413 4.94648 11.3326 4.88749 11.313 4.83046C11.2737 4.71558 11.1933 4.61695 11.084 4.55584L5.97709 1.69811ZM9.8223 4.99571L5.73293 2.7074L1.68137 4.97455L5.78948 7.26275H5.7897C5.80297 7.26275 5.81612 7.26327 5.82913 7.26428L9.8223 4.99571ZM1.12598 5.80986L5.2897 8.12903V12.7429L1.12598 10.413V5.80986ZM10.3399 10.413L6.2897 12.6794V8.15274L10.3399 5.85178V10.413ZM18.3559 10.7028L15.1039 8.88305L11.8848 10.6844L15.1686 12.5135L18.3559 10.7028ZM11.3343 11.5224V15.1832L14.6515 17.0395V13.3701L11.3343 11.5224ZM18.8735 15.1832L15.6515 16.9862V13.3892L18.8735 11.5588V15.1832Z"
+      fill="#111827"
+    />
+  </svg>
+);
+
+export const EnvTemplateIconComponent = ({ size = 16 }: { size?: number }) => (
+  <svg
+    width={16}
+    height={12}
+    viewBox="0 0 16 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.37097 0.677429C0.5 0.677429 4.37097 6.00001 0.5 6.00001C4.37097 6.00001 0.5 11.3226 4.37097 11.3226"
+      stroke="#111827"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.6289 0.677429C15.4999 0.677429 11.6289 6.00001 15.4999 6.00001C11.6289 6.00001 15.4999 11.3226 11.6289 11.3226"
+      stroke="#111827"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
 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
diff --git 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<IClustersStatus> };
 
 const ClusterStatusContext = createContext<{
   clusters: IClusterMap;
   setClusters: Dispatch<SetStateAction<IClusterMap>>;
-}>({ clusters: {}, setClusters: () => {} });
+}>({ clusters: {}, setClusters: () => { } });
 
 const ClusterStatusProvider = ({ children }: { children: ReactNode }) => {
   const [clusters, setClusters] = useState<IClusterMap>({});
@@ -40,6 +40,12 @@ const ClusterStatusProvider = ({ children }: { children: ReactNode }) => {
         pagination: {
           first: 500,
         },
+        search: {
+          allClusters: {
+            exact: true,
+            matchType: 'exact',
+          },
+        },
       });
       const parsed = parseNodes(data).reduce((acc, c) => {
         acc[c.metadata.name] = c;
@@ -77,7 +83,7 @@ const ClusterStatusProvider = ({ children }: { children: ReactNode }) => {
       listCluster();
     },
     3000,
-    [update],
+    [update]
   );
 
   useSocketWatch(() => {
@@ -88,7 +94,7 @@ const ClusterStatusProvider = ({ children }: { children: ReactNode }) => {
     <ClusterStatusContext.Provider
       value={useMemo(
         () => ({ 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
@@ -15,7 +15,7 @@ export const findClusterStatus = (item?: {
   const timeDifference =
     (currentTime.getTime() - lastTime.getTime()) / (1000 * 60);
 
-  return timeDifference <= 2;
+  return timeDifference <= 1;
 };
 
 const useClusterStatus = () => {