Merge pull request #286 from kloudlite/update/cluster-status

WEB: Update console, auth and webinar changes

gql-queries-generator/doc/queries.graphql

@@ -739,6 +739,7 @@ query consoleGetEnvironment($name: String!) {
         privateIngressClass
         publicIngressClass
       }
+      suspend
       targetNamespace
     }
     status {
@@ -814,6 +815,7 @@ query consoleListEnvironments($search: SearchEnvironments, $pq: CursorPagination
             privateIngressClass
             publicIngressClass
           }
+          suspend
           targetNamespace
         }
         status {
@@ -3990,6 +3992,51 @@ mutation consoleDeleteImagePullSecrets($name: String!) {
   core_deleteImagePullSecret(name: $name)
 }
 
+query consoleGetImagePullSecret($name: String!) {
+  core_getImagePullSecret(name: $name) {
+    accountName
+    createdBy {
+      userEmail
+      userId
+      userName
+    }
+    creationTime
+    displayName
+    dockerConfigJson
+    environments
+    format
+    id
+    lastUpdatedBy {
+      userEmail
+      userId
+      userName
+    }
+    markedForDeletion
+    metadata {
+      annotations
+      creationTimestamp
+      deletionTimestamp
+      generation
+      labels
+      name
+      namespace
+    }
+    recordVersion
+    registryPassword
+    registryURL
+    registryUsername
+    syncStatus {
+      action
+      error
+      lastSyncedAt
+      recordVersion
+      state
+      syncScheduledAt
+    }
+    updateTime
+  }
+}
+
 query consoleListImagePullSecrets($search: SearchImagePullSecrets, $pq: CursorPaginationIn) {
   core_listImagePullSecrets(search: $search, pq: $pq) {
     edges {

src/apps/auth/components/footer.tsx

@@ -1,14 +1,13 @@
-import { BrandLogo } from '~/components/branding/brand-logo';
 import {
   GithubLogoFill,
   LinkedinLogoFill,
   TwitterNewLogoFill,
 } from '@jengaicons/react';
-import { Button } from '~/components/atoms/button';
 import { Link } from '@remix-run/react';
-import Wrapper from './wrapper';
+import { Button } from '~/components/atoms/button';
+import { BrandLogo } from '~/components/branding/brand-logo';
 import { mainUrl } from '../consts';
-import ThemeSwitcher from './theme-switcher';
+import Wrapper from './wrapper';
 
 const linkedinUrl = 'https://linkedin.com/company/kloudlite-io';
 const gitUrl = 'https://github.com/kloudlite/kloudlite';

src/apps/auth/routes/_main+/oauth2.callback.$provider.tsx

@@ -1,11 +1,11 @@
-import { useNavigate, useLoaderData } from '@remix-run/react';
-import getQueries from '~/root/lib/server/helpers/get-queries';
+import { useLoaderData, useNavigate, useSearchParams } from '@remix-run/react';
+import { useAuthApi } from '~/auth/server/gql/api-provider';
 import { BrandLogo } from '~/components/branding/brand-logo';
 import { toast } from '~/components/molecule/toast';
-import { handleError } from '~/root/lib/utils/common';
-import { IRemixCtx } from '~/root/lib/types/common';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
-import { useAuthApi } from '~/auth/server/gql/api-provider';
+import getQueries from '~/root/lib/server/helpers/get-queries';
+import { IRemixCtx } from '~/root/lib/types/common';
+import { handleError } from '~/root/lib/utils/common';
 
 export const decodeState = (str: string) =>
   Buffer.from(str, 'base64url').toString('utf8');
@@ -14,6 +14,8 @@ const CallBack = () => {
   const { query, state, provider, setupAction } = useLoaderData();
   const api = useAuthApi();
   const navigate = useNavigate();
+  const [searchParams, _setSearchParams] = useSearchParams();
+
   useDebounce(
     () => {
       (async () => {
@@ -69,6 +71,15 @@ const CallBack = () => {
             navigate('/');
           } else {
             toast.success('Login Successful');
+            const callback = searchParams.get('callback');
+            if (callback) {
+              const {
+                data: { email, name },
+              } = await api.whoAmI({});
+              const encodedData = btoa(`email=${email}&name=${name}`);
+              window.location.href = `${callback}?${encodedData}`;
+              return;
+            }
             navigate('/');
           }
         } catch (err) {

src/apps/auth/routes/_providers+/login.tsx

@@ -5,17 +5,17 @@ import {
   GitlabLogoFill,
   GoogleLogo,
 } from '@jengaicons/react';
-import { useSearchParams, Link, useOutletContext } from '@remix-run/react';
+import { Link, useOutletContext, useSearchParams } from '@remix-run/react';
+import { useAuthApi } from '~/auth/server/gql/api-provider';
+import { Button } from '~/components/atoms/button';
 import { PasswordInput, TextInput } from '~/components/atoms/input';
+import { ArrowLeft, ArrowRight } from '~/components/icons';
+import { toast } from '~/components/molecule/toast';
+import { cn } from '~/components/utils';
+import { useReload } from '~/root/lib/client/helpers/reloader';
 import useForm from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
-import { useReload } from '~/root/lib/client/helpers/reloader';
 import { handleError } from '~/root/lib/utils/common';
-import { toast } from '~/components/molecule/toast';
-import { Button } from '~/components/atoms/button';
-import { cn } from '~/components/utils';
-import { useAuthApi } from '~/auth/server/gql/api-provider';
-import { ArrowLeft, ArrowRight } from '~/components/icons';
 import Container from '../../components/container';
 import { IProviderContext } from './_layout';
 
@@ -25,6 +25,7 @@ const CustomGoogleIcon = (props: any) => {
 
 const LoginWithEmail = () => {
   const api = useAuthApi();
+  const [searchParams, _setSearchParams] = useSearchParams();
 
   const reloadPage = useReload();
   const { values, errors, handleChange, handleSubmit, isLoading } = useForm({
@@ -46,6 +47,16 @@ const LoginWithEmail = () => {
           throw _errors[0];
         }
         toast.success('logged in success fully');
+
+        const callback = searchParams.get('callback');
+        if (callback) {
+          const {
+            data: { email, name },
+          } = await api.whoAmI({});
+          const encodedData = btoa(`email=${email}&name=${name}`);
+          window.location.href = `${callback}?userData=${encodedData}`;
+          return;
+        }
         reloadPage();
       } catch (err) {
         handleError(err);

src/apps/console/components/icons.tsx

@@ -135,4 +135,6 @@ export {
   Sliders,
   FileLock,
   StackSimple,
+  Play,
+  Pause,
 } from '@jengaicons/react';

src/apps/console/hooks/use-cluster-status-v2.tsx

@@ -0,0 +1,79 @@
+import { useParams } from '@remix-run/react';
+import {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+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 { IByocClusters } from '../server/gql/queries/byok-cluster-queries';
+import { ExtractNodeType, parseNodes } from '../server/r-utils/common';
+
+type IClusterMap = { [key: string]: ExtractNodeType<IByocClusters> };
+
+const ClusterStatusContext = createContext<{
+  clusters: IClusterMap;
+  setClusters: Dispatch<SetStateAction<IClusterMap>>;
+}>({ clusters: {}, setClusters: () => {} });
+
+const ClusterStatusProvider = ({ children }: { children: ReactNode }) => {
+  const [clusters, setClusters] = useState<IClusterMap>({});
+  const api = useConsoleApi();
+  const [update, setUpdate] = useState(false);
+
+  const { account } = useParams();
+
+  const topic = useCallback(() => {
+    return Object.keys(clusters).map((c) => `account:${account}.cluster:${c}`);
+  }, [clusters])();
+
+  const listCluster = useCallback(async () => {
+    try {
+      const cl = await api.listAllClusters();
+      const parsed = parseNodes(cl.data).reduce((acc, c) => {
+        acc[c.metadata.name] = c;
+        return acc;
+      }, {} as { [key: string]: ExtractNodeType<IByocClusters> });
+      setClusters(parsed);
+      return clusters;
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  }, []);
+
+  useDebounce(
+    () => {
+      listCluster();
+    },
+    3000,
+    [update]
+  );
+
+  useSocketWatch(() => {
+    setUpdate((p) => !p);
+  }, topic);
+
+  return (
+    <ClusterStatusContext.Provider
+      value={useMemo(
+        () => ({ clusters, setClusters }),
+        [clusters, setClusters]
+      )}
+    >
+      {children}
+    </ClusterStatusContext.Provider>
+  );
+};
+
+export default ClusterStatusProvider;
+
+export const useClusterStatusV2 = () => {
+  return useContext(ClusterStatusContext);
+};

src/apps/console/hooks/use-cluster-status.tsx

@@ -2,7 +2,9 @@ import { useCallback, useEffect, useState } from 'react';
 import { useConsoleApi } from '../server/gql/api-provider';
 import { parseNodes } from '../server/r-utils/common';
 
-const findClusterStatus = (item?: { lastOnlineAt?: string }): boolean => {
+export const findClusterStatus = (item?: {
+  lastOnlineAt?: string;
+}): boolean => {
   if (!item || !item.lastOnlineAt) {
     return false;
   }
@@ -13,12 +15,7 @@ const findClusterStatus = (item?: { lastOnlineAt?: string }): boolean => {
   const timeDifference =
     (currentTime.getTime() - lastTime.getTime()) / (1000 * 60);
 
-  switch (true) {
-    case timeDifference <= 2:
-      return true;
-    default:
-      return false;
-  }
+  return timeDifference <= 2;
 };
 
 const useClusterStatus = () => {

src/apps/console/page-components/handle-environment.tsx

@@ -8,6 +8,7 @@ import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
 import { NameIdView } from '../components/name-id-view';
 import { IDialog } from '../components/types.d';
+import { findClusterStatus } from '../hooks/use-cluster-status';
 import { useConsoleApi } from '../server/gql/api-provider';
 import { IEnvironment } from '../server/gql/queries/environment-queries';
 import { parseName, parseNodes } from '../server/r-utils/common';
@@ -42,7 +43,7 @@ const HandleEnvironment = ({ show, setShow }: IDialog<IEnvironment | null>) => {
       const data = parseNodes(byokClusters.data).map((c) => ({
         label: c.displayName,
         value: parseName(c),
-        ready: true,
+        ready: findClusterStatus(c),
         render: () => (
           <ClusterSelectItem label={c.displayName} value={parseName(c)} />
         ),