Merge branch 'release-v1.0.2' into features/console

Signed-off-by: Bikash <[email protected]>
kloudlite · Feb 14, 2024 · 3680f38 · 3680f38
2 parents ed7e7d6 + cecf0b9
commit 3680f38
Show file tree

Hide file tree

Showing 13 changed files with 88 additions and 29 deletions.
diff --git a/lib/client/components/logger/dummy.ts b/lib/client/components/logger/dummy.ts
@@ -0,0 +1,12 @@
+export const logsMockData = [
+  'nnQhCA0QTSuukrRA',
+  '0dlRACNaaPWkx3hBmZNksKoR',
+  '9BLDLfyAHeCTjoUgLshkJ9eWpqfUkLEf',
+  'TaJLEEhzWZvd6wt74fWe9oH9G7rhuzRO0ZZDFH49',
+  'o2Znr1VqxwlnFcyOe8S78z1HXrwIUcrnGdpXoEj2smsD6d',
+  '5EIOShSO5vqfRojDxuRzdr0S5ILjQ65TuMEm7o6Q75maqJqKCnAj9L',
+  'wfS7vAAvVY5BGhku2HE9Xnc7tF8wjH913u0i0f2JbOvXuvibfsFtbYnzC9ghk',
+  'eBfcNEUnIcTDceQGc3jAoZdOno977hMQ5Hfd8LNrrnm9ZVnZpQyMl5Hf3FbTqthhIMdvzs',
+  'jInteYIHeEBT7ZMKnNUbACPPs7YAUdnzegotEOzWkexdT1reZbzASBkb0LCx4k048gj2kUznyRvea45',
+  'SQpMBRSCEvC2EWIq2eQ21ljhQkx7hi3t9WNgMpLI0vuaeaUTTcIDXYPqorSJUiGmvQ9R1uQ0x9O0z0fVCNvGYehoaAEYp',
+];
diff --git a/src/apps/console/components/logger/index.tsx → lib/client/components/logger/index.tsx b/src/apps/console/components/logger/index.tsx → lib/client/components/logger/index.tsx
@@ -5,7 +5,16 @@ import Anser from 'anser';
 import classNames from 'classnames';
 import Fuse from 'fuse.js';
 import hljs from 'highlight.js';
-import React, { ReactNode, memo, useEffect, useRef, useState } from 'react';
+import React, {
+  ReactNode,
+  createContext,
+  memo,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { ViewportList } from 'react-viewport-list';
 import { dayjs } from '~/components/molecule/dayjs';
 import {
@@ -14,9 +23,38 @@ import {
 } from '~/root/lib/client/helpers/search-filter';
 import useClass from '~/root/lib/client/hooks/use-class';
 import { useSocketLogs } from '~/root/lib/client/helpers/socket/useSockLogs';
-import { generatePlainColor } from '../color-generator';
-import Pulsable from '../pulsable';
-import { logsMockData } from '../../dummy/data';
+import { generatePlainColor } from '~/root/lib/utils/color-generator';
+
+import ReactPulsable from 'react-pulsable';
+import { ChildrenProps } from '~/components/types';
+import { logsMockData } from './dummy';
+
+const pulsableContext = createContext(false);
+
+export const usePulsableLoading = () => {
+  return useContext(pulsableContext);
+};
+
+const Pulsable = ({
+  children,
+  isLoading,
+}: ChildrenProps & { isLoading: boolean }) => {
+  return (
+    <pulsableContext.Provider value={useMemo(() => isLoading, [isLoading])}>
+      <ReactPulsable
+        config={{
+          bgColors: {
+            light: 'rgba(161, 161, 170, 0.2)',
+            medium: 'rgba(161, 161, 170, 0.3)',
+          },
+        }}
+        isLoading={isLoading}
+      >
+        {children}
+      </ReactPulsable>
+    </pulsableContext.Provider>
+  );
+};
 
 export type ILog = {
   podName: string;
@@ -694,7 +732,7 @@ const LogComp = ({
               </div>
               <div className="flex flex-col items-center justify-center flex-1">
                 <div className="headingMd">
-                  No logs produced in the last 3 hours.
+                  (only last 3 hours logs) fetching logs...
                 </div>
               </div>
             </div>

diff --git a/lib/client/helpers/socket/context.tsx b/lib/client/helpers/socket/context.tsx
@@ -15,7 +15,7 @@ import { socketUrl } from '~/root/lib/configs/base-url.cjs';
 
 type IFor = 'logs' | 'resource-update';
 
-interface ISocketResp<T = any> {
+export interface ISocketResp<T = any> {
   type: 'response' | 'error' | 'info';
   for: IFor;
   message: string;

diff --git a/lib/client/helpers/socket/useSockLogs.tsx b/lib/client/helpers/socket/useSockLogs.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
-import { useSubscribe } from './context';
+import { dayjs } from '~/components/molecule/dayjs';
+import { ISocketResp, useSubscribe } from './context';
+import { ILog } from '../../components/logger';
 
 interface IuseLog {
   account: string;
@@ -8,6 +10,7 @@ interface IuseLog {
 }
 
 export const useSocketLogs = ({ account, cluster, trackingId }: IuseLog) => {
+  const [logs, setLogs] = useState<ISocketResp<ILog>[]>([]);
   const { responses, subscribed, errors } = useSubscribe(
     {
       for: 'logs',
@@ -33,8 +36,24 @@ export const useSocketLogs = ({ account, cluster, trackingId }: IuseLog) => {
     }
   }, []);
 
+  useEffect(() => {
+    const sorted = responses.sort((a, b) => {
+      const resp = b.data.podName.localeCompare(a.data.podName);
+
+      if (resp === 0) {
+        return dayjs(a.data.timestamp).unix() - dayjs(b.data.timestamp).unix();
+      }
+
+      return resp;
+    });
+
+    if (JSON.stringify(sorted) !== JSON.stringify(logs)) {
+      setLogs(sorted);
+    }
+  }, [responses]);
+
   return {
-    logs: responses,
+    logs,
     errors,
     isLoading,
     subscribed,

diff --git a/lib/configs/base-url.cjs b/lib/configs/base-url.cjs
@@ -87,6 +87,7 @@ const baseUrls = () => {
     baseUrl: bUrl,
     githubAppName: 'kloudlite-dev',
     socketUrl: `wss://websocket.${bUrl}`,
+    observeUrl: `https://observe.${bUrl}`,
   };
 };
 
@@ -99,6 +100,7 @@ const defaultConfig = {
   githubAppName: baseUrls().githubAppName,
   socketUrl: baseUrls().socketUrl,
   registryHost: baseUrls().registryHost,
+  observeUrl: baseUrls().observeUrl,
   getServerEnv,
   getClientEnv,
 };

diff --git a/...ps/console/components/color-generator.tsx → lib/utils/color-generator.tsx b/...ps/console/components/color-generator.tsx → lib/utils/color-generator.tsx
diff --git a/src/apps/console/components/console-avatar.tsx b/src/apps/console/components/console-avatar.tsx
@@ -1,6 +1,6 @@
 import { Avatar } from '~/components/atoms/avatar';
 import { titleCase } from '~/components/utils';
-import generateColor from './color-generator';
+import generateColor from '~/root/lib/utils/color-generator';
 
 const ConsoleAvatar = ({
   name,

diff --git a/src/apps/console/dummy/data.js b/src/apps/console/dummy/data.js
@@ -720,16 +720,3 @@ export const dummyData = {
     },
   ],
 };
-
-export const logsMockData = [
-  'nnQhCA0QTSuukrRA',
-  '0dlRACNaaPWkx3hBmZNksKoR',
-  '9BLDLfyAHeCTjoUgLshkJ9eWpqfUkLEf',
-  'TaJLEEhzWZvd6wt74fWe9oH9G7rhuzRO0ZZDFH49',
-  'o2Znr1VqxwlnFcyOe8S78z1HXrwIUcrnGdpXoEj2smsD6d',
-  '5EIOShSO5vqfRojDxuRzdr0S5ILjQ65TuMEm7o6Q75maqJqKCnAj9L',
-  'wfS7vAAvVY5BGhku2HE9Xnc7tF8wjH913u0i0f2JbOvXuvibfsFtbYnzC9ghk',
-  'eBfcNEUnIcTDceQGc3jAoZdOno977hMQ5Hfd8LNrrnm9ZVnZpQyMl5Hf3FbTqthhIMdvzs',
-  'jInteYIHeEBT7ZMKnNUbACPPs7YAUdnzegotEOzWkexdT1reZbzASBkb0LCx4k048gj2kUznyRvea45',
-  'SQpMBRSCEvC2EWIq2eQ21ljhQkx7hi3t9WNgMpLI0vuaeaUTTcIDXYPqorSJUiGmvQ9R1uQ0x9O0z0fVCNvGYehoaAEYp',
-];
diff --git a/...nsole/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx b/...nsole/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx
@@ -6,12 +6,13 @@ import { useState } from 'react';
 import { dayjs } from '~/components/molecule/dayjs';
 import { parseValue } from '~/console/page-components/util';
 import { ApexOptions } from 'apexcharts';
-import LogComp from '~/console/components/logger';
 import { parseName } from '~/console/server/r-utils/common';
 import { Clock, ListNumbers } from '@jengaicons/react';
 import { cn } from '~/components/utils';
 import { useDataState } from '~/console/page-components/common-state';
+import { observeUrl } from '~/root/lib/configs/base-url.cjs';
 import { IAppContext } from '../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const LogsAndMetrics = () => {
   const { app, project, account } = useOutletContext<IAppContext>();
@@ -31,7 +32,7 @@ const LogsAndMetrics = () => {
       (async () => {
         try {
           const resp = await axios({
-            url: `https://observe.dev.kloudlite.io/observability/metrics/cpu?cluster_name=${project.clusterName}&tracking_id=${app.id}`,
+            url: `${observeUrl}/observability/metrics/cpu?cluster_name=${project.clusterName}&tracking_id=${app.id}`,
             method: 'GET',
             withCredentials: true,
           });
@@ -44,7 +45,7 @@ const LogsAndMetrics = () => {
       (async () => {
         try {
           const resp = await axios({
-            url: `https://observe.dev.kloudlite.io/observability/metrics/memory?cluster_name=${project.clusterName}&tracking_id=${app.id}`,
+            url: `${observeUrl}/observability/metrics/memory?cluster_name=${project.clusterName}&tracking_id=${app.id}`,
             method: 'GET',
             withCredentials: true,
           });

diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/nodepools/nodepool-resources.tsx
@@ -29,7 +29,6 @@ import { Link, useOutletContext } from '@remix-run/react';
 import { IStatus, listRender } from '~/console/components/commons';
 import { listStatus } from '~/console/components/sync-status';
 import AnimateHide from '~/components/atoms/animate-hide';
-import LogComp from '~/console/components/logger';
 import { ISetState } from '~/console/page-components/app-states';
 import { Button } from '~/components/atoms/button';
 import { dayjs } from '~/components/molecule/dayjs';
@@ -39,6 +38,7 @@ import {
   findNodePlanWithSpec,
 } from './nodepool-utils';
 import { IAccountContext } from '../../../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const RESOURCE_NAME = 'nodepool';
 type BaseType = ExtractNodeType<INodepools>;

diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/np.$nodepool/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/np.$nodepool/route.tsx
@@ -16,12 +16,12 @@ import {
   parseUpdateOrCreatedBy,
   parseUpdateOrCreatedOn,
 } from '~/console/server/r-utils/common';
-import LogComp from '~/console/components/logger';
 import { renderCloudProvider } from '~/console/utils/commons';
 import { CommonTabs } from '~/console/components/common-navbar-tabs';
 import { DetailItem } from '~/console/components/commons';
 import { INodepool } from '~/console/server/gql/queries/nodepool-queries';
 import { IAccountContext } from '../../../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const ClusterTabs = () => {
   const { account, cluster } = useParams();

diff --git a/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/$cluster+/overview+/logs-n-metrics/route.tsx
@@ -3,12 +3,12 @@ import Chart from '~/console/components/charts/charts-client';
 import { useState } from 'react';
 import { dayjs } from '~/components/molecule/dayjs';
 import { ApexOptions } from 'apexcharts';
-import LogComp from '~/console/components/logger';
 import { parseName } from '~/console/server/r-utils/common';
 import { Clock, ListNumbers } from '@jengaicons/react';
 import { cn } from '~/components/utils';
 import { useDataState } from '~/console/page-components/common-state';
 import { IClusterContext } from '../../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const LogsAndMetrics = () => {
   const { cluster, account } = useOutletContext<IClusterContext>();

diff --git a/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx b/src/apps/console/routes/_main+/$account+/repo+/$repo+/buildruns/buildruns-resources.tsx
@@ -16,7 +16,6 @@ import {
 import { useOutletContext } from '@remix-run/react';
 import { IBuildRuns } from '~/console/server/gql/queries/build-run-queries';
 import AnimateHide from '~/components/atoms/animate-hide';
-import LogComp from '~/console/components/logger';
 import { Button } from '~/components/atoms/button';
 import {
   CheckCircleFill,
@@ -27,6 +26,7 @@ import {
 } from '@jengaicons/react';
 import dayjs from 'dayjs';
 import { IAccountContext } from '../../../_layout';
+import LogComp from '~/root/lib/client/components/logger';
 
 const RESOURCE_NAME = 'build run';
 type BaseType = ExtractNodeType<IBuildRuns>;