Merge pull request #292 from kloudlite/ui/reg-images

WEB: Regitry Images implementation and webinar oauth login method implemented
kloudlite · Sep 11, 2024 · adf1e1f · adf1e1f
2 parents 12de338 + 7912193
commit adf1e1f
Show file tree

Hide file tree

Showing 39 changed files with 1,269 additions and 306 deletions.
diff --git a/Dockerfile.webinar b/Dockerfile.webinar
@@ -0,0 +1,34 @@
+FROM node:20.8.1-alpine as base
+RUN apk add g++ make py3-pip
+RUN npm i -g pnpm
+WORKDIR /app
+COPY ./package.json ./package.json
+COPY ./pnpm-lock.yaml ./pnpm-lock.yaml
+
+COPY ./src/generated/package.json ./src/generated/package.json
+COPY ./src/generated/plugin/package.json ./src/generated/plugin/package.json
+
+RUN pnpm i
+
+
+# design system
+COPY ./src/design-system/ ./src/design-system/
+WORKDIR /app/src/design-system
+RUN pnpm i -p
+RUN pnpm local:release
+
+# webinar
+WORKDIR /app
+COPY ./src/apps/webinar ./src/apps/webinar
+WORKDIR /app/src/apps/webinar
+RUN pnpm i -p
+RUN pnpm build
+
+FROM node:20.8.1-alpine
+WORKDIR /app
+COPY --from=base /app/src/apps/webinar/.next ./.next
+COPY --from=base /app/src/apps/webinar/public ./public
+COPY --from=base /app/src/apps/webinar/package.json ./package.json
+COPY --from=base /app/src/apps/webinar/node_modules ./node_modules
+
+ENTRYPOINT npm run start
diff --git a/Taskfile.yaml b/Taskfile.yaml
@@ -199,3 +199,23 @@ tasks:
     cmds:
       # - cd ./src/design-system && mkdir -p out && pnpm local:release
       - docker buildx build  . -t {{.tag}} -f Dockerfile.website
+
+  container-build-webinar:
+    preconditions:
+      - sh: '[[ -n "{{.tag}}" ]]'
+        msg: "var tag must have a value"
+    vars:
+      Image: ghcr.io/kloudlite/web/events:{{.tag}}
+    cmds:
+      # - docker buildx build  . -t {{.Image}} -f Dockerfile.webinar
+      - docker build  -t {{.Image}} -f Dockerfile.webinar . 
+
+  container-push-webinar:
+    preconditions:
+      - sh: '[[ -n "{{.tag}}" ]]'
+        msg: "var tag must have a value"
+    vars:
+      Image: ghcr.io/kloudlite/web/events:{{.tag}}
+    cmds:
+      # - docker buildx build -t {{.Image}} --platform linux/amd64 -f Dockerfile.webinar --push .
+      - docker buildx build . -t {{.Image}} --platform linux/amd64 -f Dockerfile.webinar --output=type=image,compression=zstd,force-compression=true,compression-level=12,push=true
diff --git 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
@@ -4464,6 +4464,57 @@ 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 consoleGetRegistryImageUrl($image: String!, $meta: Map!) {
+  core_getRegistryImageURL(image: $image, meta: $meta) {
+    scriptUrl
+    url
+  }
+}
+
+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/lib/types/common.ts b/lib/types/common.ts
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 export type NonNullableString = string & NonNullable<undefined>;
 
-export type MapType<T = string | number | boolean> = {
+export type MapType<T = string | number | Date | boolean> = {
   [key: string]: T | MapType<T>;
 };
 

diff --git a/src/apps/auth/routes/_main+/oauth2.callback.$provider.tsx b/src/apps/auth/routes/_main+/oauth2.callback.$provider.tsx
@@ -1,7 +1,8 @@
-import { useLoaderData, useNavigate, useSearchParams } from '@remix-run/react';
+import { useLoaderData, useNavigate } 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 { getCookie } from '~/root/lib/app-setup/cookies';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import getQueries from '~/root/lib/server/helpers/get-queries';
 import { IRemixCtx } from '~/root/lib/types/common';
@@ -11,10 +12,9 @@ export const decodeState = (str: string) =>
   Buffer.from(str, 'base64url').toString('utf8');
 
 const CallBack = () => {
-  const { query, state, provider, setupAction } = useLoaderData();
+  const { query, state, provider, setupAction, callbackUrl } = useLoaderData();
   const api = useAuthApi();
   const navigate = useNavigate();
-  const [searchParams, _setSearchParams] = useSearchParams();
 
   useDebounce(
     () => {
@@ -70,14 +70,10 @@ const CallBack = () => {
             toast.error(errors[0].message);
             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}`;
+            toast.success('Login Successfull');
+            if (callbackUrl) {
+              getCookie().remove('callback_url');
+              window.location.href = callbackUrl;
               return;
             }
             navigate('/');
@@ -102,6 +98,8 @@ const CallBack = () => {
 
 export const loader = async (ctx: IRemixCtx) => {
   const { provider } = ctx.params;
+  const callbackUrl = getCookie(ctx).get('callback_url');
+
   const queries = getQueries(ctx);
   const {
     state,
@@ -119,6 +117,7 @@ export const loader = async (ctx: IRemixCtx) => {
     query: queries,
     state: queryData?.state || state,
     provider,
+    callbackUrl,
   };
 };
 

diff --git a/src/apps/auth/routes/_providers+/login.tsx b/src/apps/auth/routes/_providers+/login.tsx
@@ -6,12 +6,14 @@ import {
   GoogleLogo,
 } from '@jengaicons/react';
 import { Link, useOutletContext, useSearchParams } from '@remix-run/react';
+import { useEffect } from '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 { getCookie } from '~/root/lib/app-setup/cookies';
 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';
@@ -50,11 +52,7 @@ const LoginWithEmail = () => {
 
         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}`;
+          window.location.href = callback;
           return;
         }
         reloadPage();
@@ -115,6 +113,19 @@ const Login = () => {
   const { githubLoginUrl, gitlabLoginUrl, googleLoginUrl } =
     useOutletContext<IProviderContext>();
   const [searchParams, _setSearchParams] = useSearchParams();
+  const callback = searchParams.get('callback');
+
+  const loginUrl = callback
+    ? `/login?mode=email&callback=${callback}`
+    : `/login?mode=email`;
+
+  useEffect(() => {
+    if (callback) {
+      getCookie().set('callback_url', callback, {
+        expires: new Date(Date.now() + 1000 * 60),
+      });
+    }
+  }, [callback]);
 
   return (
     <Container
@@ -198,7 +209,8 @@ const Login = () => {
             variant="outline"
             content={<span className="bodyLg-medium">Continue with email</span>}
             prefix={<Envelope />}
-            to="/login/?mode=email"
+            // to="/login/?mode=email"
+            to={loginUrl}
             block
             linkComponent={Link}
           />

diff --git 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/compute.tsx b/src/apps/console/page-components/app/compute.tsx
@@ -1,23 +1,17 @@
+import { useEffect, useState } from 'react';
+import { Button } from '~/components/atoms/button';
 import { NumberInput } from '~/components/atoms/input';
+import Select from '~/components/atoms/select';
 import Slider from '~/components/atoms/slider';
+import { BottomNavigation } from '~/console/components/commons';
+import ExtendedFilledTab from '~/console/components/extended-filled-tab';
 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 { FadeIn, parseValue } from '~/console/page-components/util';
-import Select from '~/components/atoms/select';
-import ExtendedFilledTab from '~/console/components/extended-filled-tab';
-import { parseName, parseNodes } from '~/console/server/r-utils/common';
-import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
-import { useConsoleApi } from '~/console/server/gql/api-provider';
-import { useMapper } from '~/components/utils';
-import { BottomNavigation } from '~/console/components/commons';
-import { useOutletContext } from '@remix-run/react';
-import { useEffect, useState } from 'react';
-import { Button } from '~/components/atoms/button';
-import { IEnvironmentContext } from '~/console/routes/_main+/$account+/env+/$environment+/_layout';
+import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
-import { plans } from './datas';
+import Yup from '~/root/lib/server/helpers/yup';
 import appInitialFormValues, { mapFormValuesToApp } from './app-utils';
+import { plans } from './datas';
 
 const valueRender = ({
   label,
@@ -50,25 +44,25 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
     getReadOnlyContainer,
     getContainer,
   } = useAppState();
-  const api = useConsoleApi();
-  const { cluster } = useOutletContext<IEnvironmentContext>();
+  // const api = useConsoleApi();
+  // const { cluster } = useOutletContext<IEnvironmentContext>();
   const [advancedOptions, setAdvancedOptions] = useState(false);
   const { performAction } = useUnsavedChanges();
 
-  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, resetValues } =
     useForm({
@@ -91,10 +85,10 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
       },
     });
 
-  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 || '',
+  // }));
 
   /** ---- Only for edit mode in settings ----* */
   useEffect(() => {
@@ -275,7 +269,7 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
             }}
           />
 
-          {advancedOptions && (
+          {/* {advancedOptions && (
             <Select
               label="Nodepool Name"
               size="lg"
@@ -293,7 +287,7 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
               loading={nodepoolLoading}
               showclear
             />
-          )}
+          )} */}
         </div>
       </div>
       {mode === 'new' && (