From dad0f34ce41238b7e9de96073470d6fd8a075d49 Mon Sep 17 00:00:00 2001 From: Abdhesh Nayak Date: Thu, 8 Feb 2024 15:27:48 +0530 Subject: [PATCH] :sparkles: Implemented logs and metrics for app (#82) --- .../components/charts/charts-client.tsx | 17 +- src/apps/console/components/charts/charts.tsx | 2 +- src/apps/console/components/logger.tsx | 167 +++++++--- src/apps/console/dummy/data.js | 89 +----- .../console/page-components/common-state.tsx | 75 +++++ src/apps/console/root.tsx | 7 +- .../$workspace+/app+/$app+/logs/route.tsx | 80 ----- .../$workspace+/app+/$app+/logs/tools.tsx | 30 -- .../$environment+/app+/$app+/_index.tsx | 2 +- .../app+/$app+/{route.tsx => _layout.tsx} | 12 +- .../app+/$app+/logs-n-metrics/route.tsx | 288 ++++++++++++++++++ .../$environment+/app+/$app+/logs/route.tsx | 27 -- .../app+/$app+/overview/route.tsx | 158 ---------- .../app+/$app+/settings+/_layout.tsx | 2 +- .../app+/$app+/settings+/advance/route.tsx | 2 +- .../app+/$app+/settings+/compute/route.tsx | 9 +- .../$environment+/apps/apps-resources.tsx | 14 +- .../$repo+/buildruns/buildruns-resources.tsx | 2 +- 18 files changed, 526 insertions(+), 457 deletions(-) create mode 100644 src/apps/console/page-components/common-state.tsx delete mode 100644 src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/route.tsx delete mode 100644 src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/tools.tsx rename src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/{route.tsx => _layout.tsx} (92%) create mode 100644 src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx delete mode 100644 src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs/route.tsx delete mode 100644 src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/overview/route.tsx diff --git a/src/apps/console/components/charts/charts-client.tsx b/src/apps/console/components/charts/charts-client.tsx index d66d25f93..3c8666603 100644 --- a/src/apps/console/components/charts/charts-client.tsx +++ b/src/apps/console/components/charts/charts-client.tsx @@ -11,6 +11,7 @@ const Chart = ( props: { options: ApexOptions; } & { + disabled?: boolean; title?: string; height?: string; width?: string; @@ -43,9 +44,19 @@ const Chart = ( width: width || '100%', }} > - - - +
+
+ {title} +
+
+ +
+
); diff --git a/src/apps/console/components/charts/charts.tsx b/src/apps/console/components/charts/charts.tsx index ff328e036..e2769fb8c 100644 --- a/src/apps/console/components/charts/charts.tsx +++ b/src/apps/console/components/charts/charts.tsx @@ -19,7 +19,7 @@ const ChartServer = ({ options }: { options: ApexOptions }) => { }; }, [ref.current, options]); - return
; + return
; }; export default ChartServer; diff --git a/src/apps/console/components/logger.tsx b/src/apps/console/components/logger.tsx index 3998c24df..e695c99ba 100644 --- a/src/apps/console/components/logger.tsx +++ b/src/apps/console/components/logger.tsx @@ -5,7 +5,7 @@ import Anser from 'anser'; import classNames from 'classnames'; import Fuse from 'fuse.js'; import hljs from 'highlight.js'; -import React, { ReactNode, useEffect, useRef, useState } from 'react'; +import React, { ReactNode, memo, useEffect, useRef, useState } from 'react'; import { ViewportList } from 'react-viewport-list'; import * as sock from 'websocket'; import { dayjs } from '~/components/molecule/dayjs'; @@ -25,6 +25,7 @@ const hoverClassDark = `hover:bg-[#333]`; type ILog = { pod_name: string; + container_name: string; message: string; timestamp: string; }; @@ -47,6 +48,48 @@ interface IHighlightIt { enableHL?: boolean; } +const LoadingComp = memo(() => ( + +
+
+
+
Logs
+ +
+
+
+ +
+
+ + + +
+ + 00 matches + +
+
+
+
+ {Array.from({ length: 20 }).map((_, i) => { + const log = logsMockData[Math.floor(Math.random() * 10)]; + return ( +
+
+
{log}
+
+ ); + })} +
+
+
+ +)); + const getHashId = (str: string) => { let hash = 0; let i; @@ -286,7 +329,8 @@ interface ILogLine { searchText: string; language: string; lines: number; - hideLines?: boolean; + hideLineNumber?: boolean; + hideTimestamp?: boolean; log: ILogWithLineNumber & { searchInf?: ISearchInfProps['searchInf']; }; @@ -301,12 +345,15 @@ const LogLine = ({ searchText, language, lines, - hideLines, + hideLineNumber, + hideTimestamp, dark, }: ILogLine) => { return ( - {!hideLines && ( + {!hideLineNumber && (
- + {!hideTimestamp && ( + + )} { const [searchText, setSearchText] = useState(''); @@ -429,7 +480,7 @@ const LogBlock = ({ })} >
-
{data ? title : 'No logs found'}
+
{data ? title : 'No logs found'}
{actionComponent} @@ -490,6 +541,7 @@ const LogBlock = ({ {(log, index) => { return ( ); @@ -538,7 +590,8 @@ export interface IHighlightJsLog { fontSize?: number; loadingComponent?: ReactNode; actionComponent?: ReactNode; - hideLines?: boolean; + hideLineNumber?: boolean; + hideTimestamp?: boolean; language?: string; solid?: boolean; className?: string; @@ -604,7 +657,8 @@ const useSocketLogs = ({ url, account, cluster, trackingId }: IuseLog) => { setLogs((s) => [ ...s, { - pod_name: `${m.spec.podName}:${m.spec.containerName}`, + pod_name: m.spec.podName, + container_name: m.spec.containerName, message: m.message, timestamp: m.timestamp, }, @@ -699,6 +753,22 @@ const useSocketLogs = ({ url, account, cluster, trackingId }: IuseLog) => { [account, cluster, trackingId, url] ); + useEffect(() => { + const sorted = logs.sort((a, b) => { + const resp = a.pod_name.localeCompare(b.pod_name); + + if (resp === 0) { + return dayjs(a.timestamp).unix() - dayjs(b.timestamp).unix(); + } + + return resp; + }); + + if (JSON.stringify(sorted) !== JSON.stringify(logs)) { + setLogs(sorted); + } + }, [logs]); + return { logs, error, @@ -719,7 +789,8 @@ const LogComp = ({ maxLines, fontSize = 14, actionComponent = null, - hideLines = false, + hideLineNumber = false, + hideTimestamp = false, language = 'accesslog', solid = false, className = '', @@ -752,7 +823,7 @@ const LogComp = ({ } }, [fullScreen]); - const { logs, error, isLoading, subscribed } = useSocketLogs(websocket); + const { logs, error, subscribed } = useSocketLogs(websocket); const [isClientSide, setIsClientSide] = useState(false); @@ -763,32 +834,33 @@ const LogComp = ({ }, []); return isClientSide ? ( - -
- {subscribed && logs.length === 0 && ( -
-
- Connected to logs stream, and waiting for the logs to be - generated. -
+
+ {subscribed && logs.length === 0 && ( +
+
+ Connected to logs stream, and waiting for the logs to be generated.
- )} +
+ )} - {error ? ( - 
{error}
- ) : ( + {!subscribed && logs.length === 0 && } + + {error ? ( + 
{error}
+ ) : ( + logs.length > 0 && ( - )} -
- + ) + )} +
) : (
= (fn: ((val: T) => T) | T) => void; + +const CreateDataContext = createContext(null); + +interface IdataState { + [key: string]: any; +} + +export const useDataState = (key: string) => { + const [state, setState] = + useContext>(CreateDataContext); + const resetState = () => { + setState(() => defaultData); + }; + + return { + state: (state ? state[key] || {} : {}) as T, + setState: (fn: ((val: T) => any) | T) => { + if (typeof fn === 'function') { + setState((draft: IdataState) => { + // @ts-ignore + draft[key] = fn(draft[key] || {}); + }); + } else { + setState((draft: IdataState) => { + draft[key] = fn; + }); + } + }, + resetState, + }; +}; + +export const clearDataState = () => { + if (typeof window === 'undefined') return; + sessionStorage.removeItem(stateName); +}; + +export const DataContextProvider = ({ children }: ChildrenProps) => { + const loadSession = () => { + if (typeof window === 'undefined') return defaultData; + const stateString = + sessionStorage.getItem(stateName) || JSON.stringify(defaultData); + + try { + const data = JSON.parse(stateString); + return data || {}; + } catch (_) { + return {}; + } + }; + const [state, setState] = useImmer(() => { + return loadSession(); + }); + + useEffect(() => { + if (typeof window === 'undefined') return; + sessionStorage.setItem(stateName, JSON.stringify(state || {})); + }, [state]); + + return ( + [state, setState], [state, setState])} + > + {children} + + ); +}; diff --git a/src/apps/console/root.tsx b/src/apps/console/root.tsx index 93548e154..b28c2368d 100644 --- a/src/apps/console/root.tsx +++ b/src/apps/console/root.tsx @@ -3,6 +3,7 @@ import Root, { links as baseLinks } from '~/lib/app-setup/root'; import { ChildrenProps } from '~/components/types'; import authStylesUrl from './styles/index.css'; import highlightCss from './styles/hljs/tokyo-night-dark.min.css'; +import { DataContextProvider } from './page-components/common-state'; export { loader } from '~/lib/app-setup/root.jsx'; export { shouldRevalidate } from '~/lib/app-setup/root.jsx'; @@ -23,7 +24,11 @@ const Layout = ({ children }: ChildrenProps) => { }; const _Root = ({ ...props }) => { - return ; + return ( + + + + ); }; export default _Root; diff --git a/src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/route.tsx b/src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/route.tsx deleted file mode 100644 index 0717ad91d..000000000 --- a/src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/route.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { useOutletContext, useSearchParams } from '@remix-run/react'; -import LogComp from '~/console/components/logger'; -import { NumberInput } from '~/components/atoms/input'; -import { useState } from 'react'; -import useForm from '~/root/lib/client/hooks/use-form'; -import Yup from '~/root/lib/server/helpers/yup'; -import { Button } from '~/components/atoms/button'; -import { useQueryParameters } from '~/root/lib/client/hooks/use-search'; -import { parseName } from '~/console/server/r-utils/common'; -import { IAppContext } from '~/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/route'; - -const ItemList = () => { - const { app } = useOutletContext(); - const [sp] = useSearchParams(); - - const [url] = useState( - `wss://observability.dev.kloudlite.io/observability/logs/app?resource_name=${parseName( - app - )}&resource_namespace=${app.metadata!.namespace}&start_time=${ - sp.get('start') || 1690273382 - }&end_time=${sp.get('end') || 1690532560}` - ); - - const { setQueryParameters } = useQueryParameters(); - - const { values, handleChange, handleSubmit } = useForm({ - initialValues: { - start: sp.get('start') || '1690273382', - end: sp.get('end') || '1690532560', - }, - validationSchema: Yup.object({}), - onSubmit: (val) => { - // @ts-ignore - setQueryParameters(val); - }, - }); - - return ( -
-
Logs Url: {url}
- -
- - -
-
- -
- ); -}; - -export default ItemList; diff --git a/src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/tools.tsx b/src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/tools.tsx deleted file mode 100644 index 1e1db9c82..000000000 --- a/src/apps/console/routes/_main+/$account+/$cluster+/$project+/$scope+/$workspace+/app+/$app+/logs/tools.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { useSearchParams } from '@remix-run/react'; -import { useMemo } from 'react'; -import { toast } from 'react-toastify'; -import CommonTools from '~/console/components/common-tools'; - -const Tools = () => { - const [searchParams] = useSearchParams(); - - const options = useMemo( - () => [ - { - name: 'Status', - type: 'text', - search: false, - dataFetcher: async () => { - return [ - { content: 'Active', value: 'active' }, - { content: 'Freezed', value: 'freezed' }, - { content: 'Archived', value: 'archived' }, - ]; - }, - }, - ], - [searchParams] - ); - - return ; -}; - -export default Tools; diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_index.tsx index dd73de1bb..a5ba0e205 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_index.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_index.tsx @@ -1,5 +1,5 @@ import { redirect } from '@remix-run/node'; export const loader = async () => { - return redirect('overview'); + return redirect('logs-n-metrics'); }; diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout.tsx similarity index 92% rename from src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/route.tsx rename to src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout.tsx index a7f24be71..5f27ee193 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/route.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout.tsx @@ -26,16 +26,10 @@ const ProjectTabs = () => { }} tabs={[ { - label: 'Overview', - to: '/overview', - value: '/overview', + label: 'Logs & Metrics', + to: '/logs-n-metrics', + value: '/logs-n-metrics', }, - { - label: 'Logs', - to: '/logs', - value: '/logs', - }, - { label: 'Settings', to: '/settings/general', 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 new file mode 100644 index 000000000..96dcb1cd0 --- /dev/null +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs-n-metrics/route.tsx @@ -0,0 +1,288 @@ +import { useOutletContext } from '@remix-run/react'; +import axios from 'axios'; +import Chart from '~/console/components/charts/charts-client'; +import useDebounce from '~/root/lib/client/hooks/use-debounce'; +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 { IAppContext } from '../_layout'; + +const LogsAndMetrics = () => { + const { app, project, account } = useOutletContext(); + const [cpuData, setCpuData] = useState([]); + const [memoryData, setMemoryData] = useState([]); + + const xAxisFormatter = (_: string, __?: number) => { + // return dayjs((val || 0) * 1000).format('hh:mm A'); + return ''; + }; + + const tooltipXAixsFormatter = (val: number) => + dayjs(val * 1000).format('DD/MM/YY hh:mm A'); + + useDebounce( + () => { + (async () => { + try { + const resp = await axios({ + url: `https://observe.dev.kloudlite.io/observability/metrics/cpu?cluster_name=${project.clusterName}&tracking_id=${app.id}`, + method: 'GET', + withCredentials: true, + }); + + setCpuData(resp?.data?.data?.result[0]?.values || []); + } catch (err) { + console.error(err); + } + })(); + (async () => { + try { + const resp = await axios({ + url: `https://observe.dev.kloudlite.io/observability/metrics/memory?cluster_name=${project.clusterName}&tracking_id=${app.id}`, + method: 'GET', + withCredentials: true, + }); + + setMemoryData(resp?.data?.data?.result[0]?.values || []); + } catch (err) { + console.error(err); + } + })(); + }, + 1000, + [] + ); + + const chartOptions: ApexOptions = { + chart: { + type: 'area', + zoom: { + enabled: false, + }, + toolbar: { + show: false, + }, + redrawOnWindowResize: true, + }, + dataLabels: { + enabled: false, + }, + stroke: { + curve: 'smooth', + }, + + xaxis: { + type: 'datetime', + labels: { + show: false, + formatter: xAxisFormatter, + }, + }, + }; + + const { state, setState } = useDataState<{ + linesVisible: boolean; + timestampVisible: boolean; + }>('logs'); + + return ( +
+
+ `${val} m`, + }, + }, + }} + /> + + `${val} MB`, + }, + }, + tooltip: { + x: { + formatter: tooltipXAixsFormatter, + }, + y: { + formatter(val) { + return `${val.toFixed(2)} MB`; + }, + }, + }, + }} + /> + + `${val} MB`, + }, + }, + tooltip: { + x: { + formatter: tooltipXAixsFormatter, + }, + y: { + formatter(val) { + return `${val.toFixed(2)} MB`; + }, + }, + }, + }} + /> + + `${val} MB`, + }, + }, + tooltip: { + x: { + formatter: tooltipXAixsFormatter, + }, + y: { + formatter(val) { + return `${val.toFixed(2)} MB`; + }, + }, + }, + }} + /> +
+ +
+ +
{ + setState((s) => ({ ...s, linesVisible: !s.linesVisible })); + }} + className="flex items-center justify-center font-bold text-xl cursor-pointer select-none active:translate-y-[1px] transition-all" + > + + + +
+
{ + setState((s) => ({ + ...s, + timestampVisible: !s.timestampVisible, + })); + }} + className="flex items-center justify-center font-bold text-xl cursor-pointer select-none active:translate-y-[1px] transition-all" + > + + + +
+
+ ), + websocket: { + account: parseName(account), + cluster: project.clusterName || '', + trackingId: app.id, + }, + }} + /> +
+
+ ); +}; + +export default LogsAndMetrics; diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs/route.tsx deleted file mode 100644 index 5369da90c..000000000 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/logs/route.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { useOutletContext } from '@remix-run/react'; -import LogComp from '~/console/components/logger'; -import { parseName } from '~/console/server/r-utils/common'; -import { IAppContext } from '../route'; - -const Overview = () => { - const { app, project, account } = useOutletContext(); - return ( -
- -
- ); -}; - -export default Overview; diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/overview/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/overview/route.tsx deleted file mode 100644 index 25a9185af..000000000 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/overview/route.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import { useOutletContext } from '@remix-run/react'; -import axios from 'axios'; -import Chart from '~/console/components/charts/charts-client'; -import useDebounce from '~/root/lib/client/hooks/use-debounce'; -import { useState } from 'react'; -import { dayjs } from '~/components/molecule/dayjs'; -import { parseValue } from '~/console/page-components/util'; -import { ApexOptions } from 'apexcharts'; -import { IAppContext } from '../route'; - -const Overview = () => { - const { app, project } = useOutletContext(); - const [cpuData, setCpuData] = useState([]); - const [memoryData, setMemoryData] = useState([]); - - useDebounce( - () => { - (async () => { - try { - const resp = await axios({ - url: `https://observe.dev.kloudlite.io/observability/metrics/cpu?cluster_name=${project.clusterName}&tracking_id=${app.id}`, - method: 'GET', - withCredentials: true, - }); - - setCpuData(resp?.data?.data?.result[0]?.values || []); - } catch (err) { - console.error(err); - } - })(); - (async () => { - try { - const resp = await axios({ - url: `https://observe.dev.kloudlite.io/observability/metrics/memory?cluster_name=${project.clusterName}&tracking_id=${app.id}`, - method: 'GET', - withCredentials: true, - }); - - setMemoryData(resp?.data?.data?.result[0]?.values || []); - } catch (err) { - console.error(err); - } - })(); - }, - 1000, - [] - ); - - const chartOptions: ApexOptions = { - chart: { - type: 'area', - zoom: { - enabled: false, - }, - toolbar: { - show: false, - }, - redrawOnWindowResize: true, - }, - dataLabels: { - enabled: false, - }, - stroke: { - curve: 'smooth', - }, - }; - - return ( -
-
- dayjs(val * 1000).format('dd/MM/yy HH:mm'), - }, - y: { - formatter(val) { - return `${val.toFixed(2)} m`; - }, - }, - }, - yaxis: { - min: 0, - max: parseValue(app.spec.containers[0].resourceCpu?.max, 0), - - floating: false, - labels: { - formatter: (val) => `${val} m`, - }, - }, - xaxis: { - type: 'datetime', - labels: { - formatter(_, timestamp) { - return dayjs((timestamp || 0) * 1000).format('hh:mm A'); - }, - }, - }, - }} - /> -
-
- `${val} MB`, - }, - }, - tooltip: { - x: { - formatter: (val) => dayjs(val * 1000).format('dd/MM/yy HH:mm'), - }, - y: { - formatter(val) { - return `${val.toFixed(2)} MB`; - }, - }, - }, - xaxis: { - type: 'datetime', - labels: { - formatter(_, timestamp) { - return dayjs((timestamp || 0) * 1000).format('hh:mm A'); - }, - }, - }, - }} - /> -
-
- ); -}; - -export default Overview; diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx index 5dd8beb07..189b367a8 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/_layout.tsx @@ -19,7 +19,7 @@ import Yup from '~/root/lib/server/helpers/yup'; import { DiffViewer, yamlDump } from '~/console/components/diff-viewer'; import { useReload } from '~/root/lib/client/helpers/reloader'; import { keyconstants } from '~/console/server/r-utils/key-constants'; -import { IAppContext } from '../route'; +import { IAppContext } from '../_layout'; const navItems = [ { label: 'General', value: 'general' }, diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/advance/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/advance/route.tsx index b84298bfd..af52b113c 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/advance/route.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/advance/route.tsx @@ -11,7 +11,7 @@ import { toast } from '~/components/molecule/toast'; import { handleError } from '~/root/lib/utils/common'; import Wrapper from '~/console/components/wrapper'; import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes'; -import { IAppContext } from '../../route'; +import { IAppContext } from '../../_layout'; const SettingAdvance = () => { const { app } = useAppState(); diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx index 507c7277f..4811a8f4a 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx @@ -1,18 +1,13 @@ import { useEffect } from 'react'; -import { - NumberInput, - PasswordInput, - TextInput, -} from '~/components/atoms/input'; +import { NumberInput, TextInput } from '~/components/atoms/input'; import Slider from '~/components/atoms/slider'; -import { TitleBox } from '~/console/components/raw-wrapper'; import { useAppState } from '~/console/page-components/app-states'; import { keyconstants } from '~/console/server/r-utils/key-constants'; import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form'; import Yup from '~/root/lib/server/helpers/yup'; import { InfoLabel } from '~/console/components/commons'; -import { FadeIn, parseValue } from '~/console/page-components/util'; +import { parseValue } from '~/console/page-components/util'; import Select from '~/components/atoms/select'; import ExtendedFilledTab from '~/console/components/extended-filled-tab'; import Wrapper from '~/console/components/wrapper'; diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx index ec5ec9388..2a34133f3 100644 --- a/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx +++ b/src/apps/console/routes/_main+/$account+/$project+/$environment+/apps/apps-resources.tsx @@ -1,14 +1,6 @@ -import { - DotsThreeVerticalFill, - GearSix, - LinkBreak, - Trash, - Link as LinkIcon, -} from '@jengaicons/react'; +import { GearSix, LinkBreak, Link as LinkIcon } from '@jengaicons/react'; import { Link, useOutletContext, useParams } from '@remix-run/react'; -import { IconButton } from '~/components/atoms/button'; -import { cn, generateKey, titleCase } from '~/components/utils'; -import { listRender } from '~/console/components/commons'; +import { generateKey, titleCase } from '~/components/utils'; import { ListItem, ListSecondary, @@ -34,7 +26,7 @@ import { handleError } from '~/root/lib/utils/common'; import { toast } from '~/components/molecule/toast'; import { useReload } from '~/root/lib/client/helpers/reloader'; import { listStatus } from '~/console/components/sync-status'; -import { IAppContext } from '../app+/$app+/route'; +import { IAppContext } from '../app+/$app+/_layout'; const RESOURCE_NAME = 'app'; type BaseType = ExtractNodeType; 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 1bf719c45..b1031a5f6 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 @@ -193,7 +193,7 @@ const ListItem = ({ item }: { item: BaseType }) => { width: '100%', height: '40rem', title: 'Logs', - hideLines: true, + hideLineNumber: true, websocket: { account: parseName(account), cluster: item.clusterName,