diff --git a/lib/client/components/logger/dummy.ts b/lib/client/components/logger/dummy.ts new file mode 100644 index 000000000..5353047d5 --- /dev/null +++ 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 b/lib/client/components/logger/index.tsx similarity index 95% rename from src/apps/console/components/logger/index.tsx rename to lib/client/components/logger/index.tsx index 1e6670e2b..f38e92fc9 100644 --- a/src/apps/console/components/logger/index.tsx +++ b/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 index 9b01cd669..a6e7e1fa0 100644 --- 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 index 5b532a2f2..81e28e5cc 100644 --- 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 index eb8923696..d4d541d2e 100644 --- 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/src/apps/console/components/color-generator.tsx b/lib/utils/color-generator.tsx similarity index 100% rename from src/apps/console/components/color-generator.tsx rename to lib/utils/color-generator.tsx diff --git a/src/apps/console/components/console-avatar.tsx b/src/apps/console/components/console-avatar.tsx index 25c1fc5e6..52521d213 100644 --- 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 index 911401a26..652f43155 100644 --- 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/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx index 96dcb1cd0..8ea1645d2 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx +++ b/src/apps/console/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 index 3c705c677..319925dec 100644 --- 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 index 6dff890a6..5ddcfce4c 100644 --- 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 index 0480dcedd..6f4b3e22c 100644 --- 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 index 22923be5f..ea949e042 100644 --- 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>;