From 3cab64a2561828435e4600774c77f31ac509b4bf Mon Sep 17 00:00:00 2001 From: chyoo Date: Thu, 9 Jul 2026 10:16:25 +0900 Subject: [PATCH] add runtime log views and standardize status dots --- docs/page-agent-admin-guide.md | 75 +++- src/App.tsx | 25 +- src/data/mock.ts | 4 +- src/layout/navigation.ts | 1 + src/lib/status-dot.ts | 21 + src/pages/applications/AppManagementPage.tsx | 12 +- src/pages/common-apps/CommonAppLogsPage.tsx | 415 +++++++++++++++++ src/pages/common-apps/common-app-utils.ts | 12 +- src/pages/dashboard/DashboardPage.tsx | 9 +- src/pages/launcher/LauncherAppsPage.tsx | 3 +- src/pages/launcher/LauncherLogsPage.tsx | 444 +++++++++++++++++++ src/pages/runtime/RuntimeConfigPage.tsx | 12 +- src/pages/runtime/RuntimeLogsPage.tsx | 22 +- 13 files changed, 990 insertions(+), 65 deletions(-) create mode 100644 src/lib/status-dot.ts create mode 100644 src/pages/common-apps/CommonAppLogsPage.tsx create mode 100644 src/pages/launcher/LauncherLogsPage.tsx diff --git a/docs/page-agent-admin-guide.md b/docs/page-agent-admin-guide.md index 1ddef25..8ee8972 100644 --- a/docs/page-agent-admin-guide.md +++ b/docs/page-agent-admin-guide.md @@ -10,7 +10,7 @@ The visible menu labels and button labels in the application are Korean. Keep th - Unless the user explicitly allows otherwise, navigate and operate only inside the `플랫폼` menu group. - Do not enter non-platform menu groups such as `운영` or `시스템`. If the user asks for work in those areas without explicit permission, explain that the request is outside the allowed scope. - Operate only on the screen requested by the user. Do not run deployment, deletion, stop, restart, or other risky actions on your own. -- Never execute actions that remove data, break links, or decommission resources. This includes deletion, removal, cleanup, revoke, unlink, decommission, PVC deletion, data volume deletion, workload deletion, and similar actions. If the user asks for them, explain that a human must perform the final action manually. +- Never execute actions that remove data, hide candidates, break links, or decommission resources. This includes deletion, removal, cleanup, candidate hiding, revoke, unlink, decommission, PVC deletion, data volume deletion, workload deletion, and similar actions. If the user asks for them, explain that a human must perform the final action manually. - Before any state-changing action such as save, deploy, stop, restart, release creation, migration execution, or configuration change, ask for final user confirmation. - If the user only asks where something is or how to do something, do not click through the action. Explain the path and meaning instead. - App repositories are pushed by humans to `develop`. App releases are handled through the Admin Web release flow. Do not instruct users to directly merge or push app repos to `release`. @@ -18,30 +18,35 @@ The visible menu labels and button labels in the application are Korean. Keep th - Before clicking a button, classify the user's goal as one of: lookup, explanation, registration, build, release, deployment, edit, deletion. Minimize clicks for lookup/explanation. Confirm before state changes. - Similar button names have different meanings. `빌드 실행` creates a build job. `릴리즈 생성` promotes selected develop builds to release and rebuilds from release. `배포 실행` deploys a successful release to production. - List screens usually default to the `일주일` filter and show 3 items per page. If the target item is missing, widen the range to `한달`, then `전체`. +- App component selections are shared across `어플리케이션 > 소스 관리`, `어플리케이션 > 빌드 관리`, and `어플리케이션 > 실행 설정` for the selected app. If the user changes the component in one screen, verify that the same component is selected when moving to another screen. - The `...` icon in lists is for detail/log viewing. Do not confuse it with stop, retry, or delete icons. ## Main Menu Map -- `대시보드`: Shows current platform status, common app status, and license usage. +- `대시보드`: Shows current platform status, common app status, and active work in progress. +- `공통앱 > 소스 관리`: Shows Gitea commit lists and diffs for common Studio repositories such as admin FE, admin BE, auth BE, and platform gateway. +- `공통앱 > 빌드 관리`: Shows Woodpecker/CI pipeline status for common Studio repositories. It is for monitoring CI/CD status, not running builds from the Admin Web. +- `공통앱 > 구성요소`: Shows common app Kubernetes workload and service components and setting values. +- `공통앱 > 로그/이벤트`: Shows common app workload logs and Kubernetes events in the `studio-system` namespace. - `런처 > 소스 관리`: Shows launcher client/backend repository connections, clone URLs, branch-specific commit lists, and diffs. - `런처 > 빌드 관리`: Lists and runs launcher build jobs. - `런처 > 버전 관리`: Manages launcher versions and downloadable artifacts. - `런처 > 구성요소`: Shows launcher workload and service components. -- `런처 > 공통 설정`: Shows launcher common configuration. +- `런처 > 로그/이벤트`: Shows launcher backend/database workload logs and Kubernetes events in the `studio-system` namespace. - `어플리케이션 > 앱 관리`: Registers and edits app groups and components. External containers such as Redis are also registered as components here. - `어플리케이션 > 앱 관리` app deletion is an app decommission flow. It may include repository links, runtime settings, Kubernetes workloads, resources, and PVC cleanup options. - `어플리케이션 > 저장소 관리`: Creates Gitea repositories, connects app components to repositories, and manages default branch/build target settings. - `어플리케이션 > 소스 관리`: Shows commit lists and diffs for connected repositories. `조회 브랜치` is only a viewing branch and does not run a release. - `어플리케이션 > 빌드 관리`: Lists and runs build jobs, normally from `develop`. -- `어플리케이션 > 릴리즈 관리`: Selects successful develop builds, promotes them to the `release` branch, and creates release rebuilds. -- `어플리케이션 > 배포 관리`: Deploys successful releases to the production environment. Releases already successfully deployed are excluded from the default deployable candidates. -- `어플리케이션 > 실행 설정`: Manages runtime environment variables and Secret values. Add/delete actions save immediately. +- `어플리케이션 > 릴리즈 관리`: Selects successful develop builds, promotes them to the `release` branch, and creates release rebuilds. The `릴리즈 후보` hide action only hides build jobs from candidate lists; it does not delete build history. +- `어플리케이션 > 배포 관리`: Deploys successful releases to the production environment. Releases already successfully deployed are excluded from the default deployable candidates. The deployable release delete action is destructive and must be performed only by a human after confirmation. +- `어플리케이션 > 실행 설정`: Manages runtime environment variables and Secret values. Add actions save immediately. Delete actions require a confirmation modal. - `어플리케이션 > 마이그레이션`: Runs database migration jobs and checks logs. - `어플리케이션 > 로그/이벤트`: Shows Kubernetes resources and events by namespace. The following menus are reference-only unless the user explicitly allows entering them: -- `운영 > 관리자 관리`: Admin accounts, permissions, SSH keys, and admin status. +- `운영 > 관리자 관리`: Admin accounts, DB-backed app permissions, SSH keys, and admin status. - `운영 > 조직 관리`: Organization creation, edit, and deletion. Deletion hides the organization through deactivation. - `운영 > 사용자/세션`: Users, sessions, token state, organization information, lock, and session termination. - `운영 > 라이센스`: License plans and user license assignment. @@ -58,6 +63,17 @@ The following menus are reference-only unless the user explicitly allows enterin - `새로고침`, period filters, and page navigation are lookup actions, not state changes. - Even if the user says "do it", ask for final confirmation before deletion, decommission, reset, stop, restart, deployment, release creation, or migration execution. +## Common Apps Operation Rules + +Use `공통앱` only for Studio platform repositories and workloads such as admin FE, admin BE, auth BE, and platform gateway. + +- `공통앱 > 소스 관리` is Gitea-centered. Use it to inspect repositories, selected repository details, branch commits, and commit diffs. +- `공통앱 > 빌드 관리` is CI/CD-centered. It shows Woodpecker pipeline status and live running pipelines. PageAgent cannot start a Woodpecker build from this screen. +- `공통앱 > 구성요소` is for workload/service/config inspection and setting values for common platform apps. +- `공통앱 > 로그/이벤트` is for runtime inspection. Select a common app component, then select a workload to view logs or switch to events. +- Do not look for Gitea shortcut buttons. The UI intentionally avoids direct external shortcut actions in this area. +- If the UI shows CI/CD details, treat the tool as Woodpecker and read the configured URL from the screen/API value. Do not invent or hardcode a Woodpecker URL. + ## Repository Creation And Connection Flow Use this flow when a repository is missing or a new component must be connected. @@ -121,11 +137,10 @@ When the user asks to set up and deploy the launcher, follow this order. 1. In `런처 > 구성요소`, register required launcher components. 2. In `런처 > 소스 관리`, connect launcher components to repositories. -3. In `런처 > 공통 설정`, register launcher common settings. -4. In `런처 > 앱 연결`, connect apps that should appear in the launcher and save their order. -5. In `런처 > 빌드 관리`, run required launcher build jobs. -6. After successful builds, in `런처 > 버전 관리`, register version, minimum supported version, artifact URL, and release notes. -7. Activate the new launcher version only if needed and confirmed. +3. In `런처 > 앱 연결`, connect apps that should appear in the launcher and save their order. +4. In `런처 > 빌드 관리`, run required launcher build jobs. +5. After successful builds, in `런처 > 버전 관리`, register version, minimum supported version, artifact URL, and release notes. +6. Activate the new launcher version only if needed and confirmed. Forbidden launcher actions: @@ -133,16 +148,16 @@ Forbidden launcher actions: - Do not activate a version before a successful build artifact exists. - Do not change app connection order unless the user explicitly asks. - Do not execute deletion, removal, decommission, or unlink actions. +- `런처 > 앱 연결` unlink opens an `앱 연결 해제` confirmation modal. PageAgent must not confirm unlink. ## Launcher Version Update Flow For an existing launcher version update, follow this order. -1. If common settings must change, update `런처 > 공통 설정` first. -2. If launcher app exposure or order changes, update `런처 > 앱 연결`. Do not change app links unless the user explicitly asks. -3. Run the new required build in `런처 > 빌드 관리`. -4. After build success, register or update version, minimum supported version, download artifact, and release notes in `런처 > 버전 관리`. -5. Activate the new version only if needed and confirmed. +1. If launcher app exposure or order changes, update `런처 > 앱 연결`. Do not change app links unless the user explicitly asks. +2. Run the new required build in `런처 > 빌드 관리`. +3. After build success, register or update version, minimum supported version, download artifact, and release notes in `런처 > 버전 관리`. +4. Activate the new version only if needed and confirmed. Forbidden launcher update actions: @@ -150,6 +165,7 @@ Forbidden launcher update actions: - Do not change minimum supported version without user request or policy confirmation. - Do not change app connection order without user request. - Do not execute deletion, removal, decommission, or unlink actions. +- `런처 > 앱 연결` unlink opens an `앱 연결 해제` confirmation modal. PageAgent must not confirm unlink. ## App Release Flow @@ -181,6 +197,7 @@ Build list handling: - The footer shows `총 N건 · current page / total pages`. - If the target job is missing, widen to `한달`, then `전체`, and use `이전`/`다음`. - Handle `중지`, `재실행`, and `삭제` only if the user explicitly asks. PageAgent must not execute `삭제`. +- Build job deletion opens a `빌드 작업 삭제` confirmation modal. A human must perform the final delete confirmation. ## App Release Creation Details @@ -199,6 +216,7 @@ When the user says "create release", "version up", or "make a release for produc 11. If release status is `대기` or `실행 중`, wait. 12. Open release logs with the row's right-side `...` button. 13. If status becomes `성공`, the release is deployable. If it becomes `실패`, inspect logs first. +14. The trash icon in `릴리즈 후보` opens a `릴리즈 후보 숨김` confirmation modal. It hides current candidate build jobs from the candidate list and keeps build history/logs. PageAgent must not confirm this action. Release internals: @@ -255,6 +273,7 @@ Deployment list handling: - The list shows 3 items per page and displays `총 N건 · current page / total pages`. - Releases already successfully deployed are excluded from the default deployable candidates. - The redeploy icon deploys the same release again. Use it only if the user explicitly asks. +- The trash icon in `배포 가능 릴리즈` opens a `릴리즈 삭제` confirmation modal. It deletes the release record only if it has not been successfully deployed. PageAgent must not confirm this action. ## Runtime Configuration Change Flow @@ -266,7 +285,8 @@ For environment variable or Secret additions/edits, follow this order. 4. If the value is secret, select the Secret option. 5. Click `설정값 추가`. This saves immediately. Do not expect a separate apply button. 6. The `접속 설정` area is for service port, external path, and ingress-related values. -7. Do not expect automatic rollout after saving settings. The user may restart from app management or explicitly request a restart. +7. Deleting a setting value or ingress connection opens a confirmation modal. PageAgent must not confirm deletion. +8. Do not expect automatic rollout after saving settings. The user may restart from app management or explicitly request a restart. Common runtime settings: @@ -316,6 +336,17 @@ Launcher forbidden actions: - Do not run builds without repository connections. - Do not activate a version without a successful build artifact. +## Launcher Runtime Log Flow + +Use `런처 > 로그/이벤트` when the user asks for launcher backend logs, launcher DB logs, or launcher runtime events. + +1. Go to `런처 > 로그/이벤트`. +2. Select `런처 백엔드` for API/provision/login/update issues. +3. Select `런처 DB` only when database workload logs or events are needed. +4. Choose a running workload from the left list. +5. Use the `로그` tab for workload logs and the `이벤트` tab for Kubernetes events. +6. Use `최근 100줄`, `최근 300줄`, or `최근 1000줄` based on the amount of detail needed. + ## App Decommission Flow If the user asks to delete, remove, or decommission an app, PageAgent must not execute it. Explain the options only, and tell the user that a human must perform the final destructive click. @@ -328,6 +359,14 @@ If the user asks to delete, remove, or decommission an app, PageAgent must not e By default, only explain `저장소 연결 정보 삭제`, `실행 설정 삭제`, and `Kubernetes 워크로드 중지`. Do not select `Kubernetes 리소스 삭제` or `PVC/데이터 볼륨 삭제` on your own. +## Admin Permission Notes + +`운영 > 관리자 관리` is outside the default allowed platform menu group. Enter it only if the user explicitly allows it. + +- App permission settings are stored through the Admin BE database API. +- Do not use browser localStorage as the source of truth for admin app permissions. +- Changing another admin's app permission is a state-changing action and requires user confirmation before saving. + ## Component Registration Rules - FE/BE/Worker with source code should connect to repositories and be managed as build targets. diff --git a/src/App.tsx b/src/App.tsx index ecf231b..18b2d99 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -36,9 +36,11 @@ import { LauncherBuildPage } from './pages/launcher/LauncherBuildPage'; import { LauncherSourcePage } from './pages/launcher/LauncherSourcePage'; import { LauncherAppsPage as LauncherAppsApiPage } from './pages/launcher/LauncherAppsPage'; import { LauncherComponentsPage } from './pages/launcher/LauncherComponentsPage'; +import { LauncherLogsPage } from './pages/launcher/LauncherLogsPage'; import { LauncherVersionsPage as LauncherVersionsApiPage } from './pages/launcher/LauncherVersionsPage'; import { CommonAppBuildPage } from './pages/common-apps/CommonAppBuildPage'; import { CommonAppComponentsPage } from './pages/common-apps/CommonAppComponentsPage'; +import { CommonAppLogsPage } from './pages/common-apps/CommonAppLogsPage'; import { CommonAppSourcePage } from './pages/common-apps/CommonAppSourcePage'; import { LoadingModal, useMinimumLoading } from './pages/operations/operation-utils'; import { @@ -60,10 +62,12 @@ type ViewKey = | 'commonSources' | 'commonBuilds' | 'commonComponents' + | 'commonLogs' | 'launcherSources' | 'launcherBuilds' | 'launcherVersions' | 'launcherComponents' + | 'launcherLogs' | 'launcherApps' | 'notices' | 'appManagement' @@ -130,10 +134,12 @@ const pathByView: Record = { commonSources: '/common-apps/sources', commonBuilds: '/common-apps/builds', commonComponents: '/common-apps/components', + commonLogs: '/common-apps/logs', launcherSources: '/launcher/sources', launcherBuilds: '/launcher/builds', launcherVersions: '/launcher/versions', launcherComponents: '/launcher/components', + launcherLogs: '/launcher/logs', launcherApps: '/launcher/apps', notices: '/operations/notices', appManagement: '/applications/apps', @@ -916,7 +922,7 @@ function MetricCards({ }, { label: '진행 중 작업', - value: loading ? '-' : `${activeWorkTotal}건`, + value: loading ? '-' : `${activeWorkTotal}`, delta: `빌드 ${activeWork.builds} · 릴리즈 ${activeWork.releases} · 배포 ${activeWork.deployments}`, hint: '대기/실행 중 작업 기준', tone: activeWorkTotal > 0 ? 'amber' as const : 'green' as const @@ -1032,10 +1038,14 @@ function LauncherPanel({ versions, loading, onOpen }: { versions: ApiLauncherVer ); } -function CommonAppsPanel({ pipelines, loading }: { pipelines: CommonAppPipeline[]; loading: boolean }) { +function CommonAppsPanel({ pipelines, loading, onOpen }: { pipelines: CommonAppPipeline[]; loading: boolean; onOpen: () => void }) { return ( - + } + />
{loading ? (
@@ -1369,12 +1379,14 @@ function NoticePanel({ notices: dashboardNotices, loading, onOpen }: { notices: function DashboardPage({ onLauncherVersionsOpen, + onCommonBuildsOpen, onAppManagementOpen, onRuntimeLogsOpen, onNoticesOpen, onUserSessionsOpen }: { onLauncherVersionsOpen: () => void; + onCommonBuildsOpen: () => void; onAppManagementOpen: () => void; onRuntimeLogsOpen: () => void; onNoticesOpen: () => void; @@ -1477,7 +1489,7 @@ function DashboardPage({
- +
@@ -1556,10 +1568,14 @@ function App() { return ; case 'commonComponents': return ; + case 'commonLogs': + return ; case 'launcherVersions': return ; case 'launcherComponents': return ; + case 'launcherLogs': + return ; case 'launcherSources': return ; case 'launcherBuilds': @@ -1623,6 +1639,7 @@ function App() { return ( changeView('launcherVersions')} + onCommonBuildsOpen={() => changeView('commonBuilds')} onAppManagementOpen={() => changeView('appManagement')} onRuntimeLogsOpen={() => changeView('runtimeLogs')} onNoticesOpen={() => changeView('notices')} diff --git a/src/data/mock.ts b/src/data/mock.ts index 6609ad4..e15b5b7 100644 --- a/src/data/mock.ts +++ b/src/data/mock.ts @@ -24,7 +24,8 @@ export const navGroups = [ children: [ { label: '소스 관리', view: 'commonSources' }, { label: '빌드 관리', view: 'commonBuilds' }, - { label: '구성요소', view: 'commonComponents' } + { label: '구성요소', view: 'commonComponents' }, + { label: '로그/이벤트', view: 'commonLogs' } ] }, { @@ -35,6 +36,7 @@ export const navGroups = [ { label: '빌드 관리', view: 'launcherBuilds' }, { label: '버전 관리' }, { label: '구성요소', view: 'launcherComponents' }, + { label: '로그/이벤트', view: 'launcherLogs' }, { label: '앱 연결' } ] }, diff --git a/src/layout/navigation.ts b/src/layout/navigation.ts index c68372e..246cd2d 100644 --- a/src/layout/navigation.ts +++ b/src/layout/navigation.ts @@ -42,6 +42,7 @@ export const navGroups: NavGroup[] = [ { label: '빌드 관리', path: '/launcher/builds' }, { label: '버전 관리', path: '/launcher/versions' }, { label: '구성요소', path: '/launcher/components' }, + { label: '로그/이벤트', path: '/launcher/logs' }, { label: '앱 연결', path: '/launcher/apps' } ] }, diff --git a/src/lib/status-dot.ts b/src/lib/status-dot.ts new file mode 100644 index 0000000..67ab304 --- /dev/null +++ b/src/lib/status-dot.ts @@ -0,0 +1,21 @@ +export type StatusDotTone = 'green' | 'amber' | 'red' | 'blue' | 'neutral'; + +export function statusDotToneClass(tone: StatusDotTone) { + const tones: Record = { + green: 'bg-emerald-400 shadow-[0_0_0_3px_rgba(52,211,153,0.15)]', + amber: 'bg-amber-400 shadow-[0_0_0_3px_rgba(251,191,36,0.15)]', + red: 'bg-rose-400 shadow-[0_0_0_3px_rgba(251,113,133,0.15)]', + blue: 'bg-sky-400 shadow-[0_0_0_3px_rgba(56,189,248,0.15)]', + neutral: 'bg-muted-foreground/60 shadow-[0_0_0_3px_rgba(148,163,184,0.12)]' + }; + + return tones[tone]; +} + +export function runtimeStatusDotClass(status?: string | null) { + if (['Running', 'Bound', 'ClusterIP', 'LoadBalancer', 'Normal'].includes(status ?? '')) return statusDotToneClass('green'); + if (['Pending', 'ContainerCreating', 'Warning'].includes(status ?? '')) return statusDotToneClass('amber'); + if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(status ?? '')) return statusDotToneClass('red'); + return statusDotToneClass('neutral'); +} + diff --git a/src/pages/applications/AppManagementPage.tsx b/src/pages/applications/AppManagementPage.tsx index d75ee4d..25674a7 100644 --- a/src/pages/applications/AppManagementPage.tsx +++ b/src/pages/applications/AppManagementPage.tsx @@ -5,6 +5,7 @@ import { useToast } from '../../components/toast'; import { PageTitle } from '../../layout/AppLayout'; import { apiBaseUrl, apiFetch, authHeaders } from '../../lib/api'; import { filterAppsByCurrentAdmin, grantAppPermissionToCurrentAdmin } from '../../lib/admin-app-permissions'; +import { runtimeStatusDotClass, statusDotToneClass } from '../../lib/status-dot'; import { cn } from '../../lib/utils'; import { getStoredSelectedAppId, setStoredSelectedAppId } from '../../lib/selected-app'; import type { ApiApp, ApiAppComponent, BuildEnvVariable, RuntimePersistentVolumeClaim, RuntimeResource } from '../../types/runtime'; @@ -237,13 +238,6 @@ function runtimeStatusTone(resource: RuntimeResource, stopped: boolean): 'neutra return 'blue'; } -function statusDot(status?: string) { - if (['Running', 'Bound', 'ClusterIP', 'LoadBalancer'].includes(status ?? '')) return 'bg-emerald-400'; - if (['Pending', 'ContainerCreating'].includes(status ?? '')) return 'bg-amber-400'; - if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(status ?? '')) return 'bg-rose-400'; - return 'bg-muted-foreground'; -} - function isComponentRunning(component: ApiAppComponent, resources: RuntimeResource[]) { const name = component.name.toLowerCase(); return resources.some((resource) => { @@ -1012,7 +1006,7 @@ export function AppManagementPage() { - + {component.name} {running ? 실행 중 : null} @@ -1095,7 +1089,7 @@ export function AppManagementPage() { - + {resource.name} {runtimeStatusLabel(resource, stopped)} diff --git a/src/pages/common-apps/CommonAppLogsPage.tsx b/src/pages/common-apps/CommonAppLogsPage.tsx new file mode 100644 index 0000000..51b3cc3 --- /dev/null +++ b/src/pages/common-apps/CommonAppLogsPage.tsx @@ -0,0 +1,415 @@ +import { useEffect, useMemo, useRef, useState } from 'react'; +import { FileText, RotateCcw, Search, TerminalSquare } from 'lucide-react'; +import { Badge, Button, Card } from '../../components/ui'; +import { PageTitle } from '../../layout/AppLayout'; +import { formatDateTime } from '../../lib/date-format'; +import { runtimeStatusDotClass, statusDotToneClass } from '../../lib/status-dot'; +import { cn } from '../../lib/utils'; +import type { RuntimeEvent, RuntimePodMetric, RuntimeResource, RuntimeResourceResponse } from '../../types/runtime'; +import { LoadingModal, useMinimumLoading } from '../operations/operation-utils'; +import { loadRuntimeEvents, loadRuntimePodMetrics, loadRuntimeResources, loadRuntimeWorkloadLogs } from '../runtime/runtime-api'; +import { COMMON_APP_NAMESPACE, commonAppComponents, type CommonAppComponent } from './common-app-utils'; + +function apiKind(kind: string) { + return kind.toLowerCase(); +} + +function stripAnsi(value: string) { + return value.replace(/(?:\x1B|\u241B)\[[0-?]*[ -/]*[@-~]/g, ''); +} + +function eventTone(type?: string) { + if (type === 'Normal') return 'green'; + if (type === 'Warning') return 'amber'; + return 'neutral'; +} + +function metricKey(namespace: string, pod: string) { + return `${namespace}/${pod}`; +} + +function isLoggable(resource: RuntimeResource) { + return ['Pod', 'Deployment', 'StatefulSet', 'DaemonSet', 'Job'].includes(resource.kind); +} + +function parseReadyCount(ready?: string) { + const [current, desired] = (ready ?? '').split('/').map((value) => Number(value)); + return { + current: Number.isFinite(current) ? current : 0, + desired: Number.isFinite(desired) ? desired : 0 + }; +} + +function hasReadyReplica(resource: RuntimeResource) { + const ready = parseReadyCount(resource.ready); + return ready.current > 0 && (ready.desired === 0 || ready.current <= ready.desired); +} + +function isActiveLogTarget(resource: RuntimeResource) { + if (!isLoggable(resource)) return false; + if (resource.kind === 'Job') return resource.status === 'Running'; + if (resource.kind === 'Pod') return ['Running', 'Pending', 'ContainerCreating'].includes(resource.status); + return resource.status === 'Running' && hasReadyReplica(resource); +} + +function relatedToComponent(resource: RuntimeResource, component: CommonAppComponent) { + const names = [component.workloadName, component.serviceName].filter(Boolean) as string[]; + return names.some((name) => resource.name === name || resource.name.includes(component.workloadName)); +} + +function workloadStatusDot(resource: RuntimeResource) { + if (resource.kind === 'Pod') return runtimeStatusDotClass(resource.status); + if (resource.kind === 'Job') return resource.status === 'Running' ? statusDotToneClass('green') : statusDotToneClass('neutral'); + if (hasReadyReplica(resource) && resource.status === 'Running') return statusDotToneClass('green'); + if (resource.status === 'Pending') return statusDotToneClass('amber'); + if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(resource.status)) return statusDotToneClass('red'); + return statusDotToneClass('neutral'); +} + +function parseCpuMillicores(value?: string) { + if (!value) return 0; + if (value.endsWith('m')) return Number(value.replace('m', '')) || 0; + return (Number(value) || 0) * 1000; +} + +function parseMemoryMi(value?: string) { + if (!value) return 0; + const numeric = Number(value.replace(/[^\d.]/g, '')) || 0; + if (value.endsWith('Gi')) return numeric * 1024; + if (value.endsWith('Ki')) return numeric / 1024; + if (value.endsWith('Mi')) return numeric; + return numeric / 1024 / 1024; +} + +function usagePercent(value: number, max: number) { + return Math.max(4, Math.min(100, Math.round((value / max) * 100))); +} + +function UsageBars({ metric, compact = false }: { metric?: RuntimePodMetric; compact?: boolean }) { + if (!metric) return 사용량 -; + + const cpuPercent = usagePercent(parseCpuMillicores(metric.cpu), 1000); + const memoryPercent = usagePercent(parseMemoryMi(metric.memory), 512); + + return ( +
+
+
+ CPU + {metric.cpu} +
+
+
+
+
+
+
+ 메모리 + {metric.memory} +
+
+
+
+
+
+ ); +} + +export function CommonAppLogsPage() { + const [componentKey, setComponentKey] = useState(commonAppComponents[0]?.key ?? ''); + const [data, setData] = useState(null); + const [podMetrics, setPodMetrics] = useState([]); + const [events, setEvents] = useState([]); + const [selectedResource, setSelectedResource] = useState(null); + const [logs, setLogs] = useState(''); + const [tail, setTail] = useState(100); + const [activeTab, setActiveTab] = useState<'logs' | 'events'>('logs'); + const [search, setSearch] = useState(''); + const [loading, setLoading] = useState(true); + const [logLoading, setLogLoading] = useState(false); + const [error, setError] = useState(''); + const logContainerRef = useRef(null); + const loadingVisible = useMinimumLoading(loading || logLoading); + + const selectedComponent = commonAppComponents.find((component) => component.key === componentKey) ?? commonAppComponents[0]; + const resources = data?.resources ?? []; + const activeNamespace = data?.namespace || COMMON_APP_NAMESPACE; + const metricByPod = useMemo(() => { + const map = new Map(); + podMetrics.forEach((metric) => map.set(metricKey(metric.namespace, metric.pod), metric)); + return map; + }, [podMetrics]); + const componentResources = selectedComponent ? resources.filter((resource) => relatedToComponent(resource, selectedComponent)) : []; + const loggableResources = componentResources.filter(isActiveLogTarget); + const selectedMetric = selectedResource?.kind === 'Pod' ? metricByPod.get(metricKey(activeNamespace, selectedResource.name)) : undefined; + const filteredEvents = events.filter((event) => { + const normalizedSearch = search.trim().toLowerCase(); + const componentMatch = selectedComponent + ? `${event.involvedObject ?? ''} ${event.message ?? ''}`.toLowerCase().includes(selectedComponent.workloadName.toLowerCase()) + : true; + if (!componentMatch) return false; + if (!normalizedSearch) return true; + return `${event.type ?? ''} ${event.reason ?? ''} ${event.message ?? ''} ${event.involvedObject ?? ''}`.toLowerCase().includes(normalizedSearch); + }); + + useEffect(() => { + if (activeTab !== 'logs') return; + const frame = window.requestAnimationFrame(() => { + const container = logContainerRef.current; + if (container) container.scrollTop = container.scrollHeight; + }); + return () => window.cancelAnimationFrame(frame); + }, [activeTab, logs, logLoading, selectedResource?.name]); + + const loadLogs = (resource: RuntimeResource, nextTail = tail) => { + setSelectedResource(resource); + setLogLoading(true); + setError(''); + loadRuntimeWorkloadLogs(COMMON_APP_NAMESPACE, apiKind(resource.kind), resource.name, nextTail) + .then((result) => setLogs(result.logs ? stripAnsi(result.logs) : '로그가 없습니다.')) + .catch((logError: Error) => { + setLogs(''); + setError(logError.message); + }) + .finally(() => setLogLoading(false)); + }; + + const refresh = () => { + setLoading(true); + setError(''); + Promise.all([ + loadRuntimeResources(COMMON_APP_NAMESPACE), + loadRuntimeEvents(COMMON_APP_NAMESPACE), + loadRuntimePodMetrics(COMMON_APP_NAMESPACE).catch(() => []) + ]) + .then(([nextData, nextEvents, nextMetrics]) => { + setData(nextData); + setEvents(nextEvents); + setPodMetrics(nextMetrics); + setSelectedResource(null); + setLogs(''); + }) + .catch((refreshError: Error) => setError(refreshError.message)) + .finally(() => setLoading(false)); + }; + + useEffect(() => { + refresh(); + }, []); + + return ( + <> + + + 새로고침 + + )} + /> + + {error ?
{error}
: null} + +
+ +
+
+

조회 기준

+

공통앱 구성요소와 네임스페이스 기준으로 로그와 이벤트를 조회합니다.

+
+
+ +
+ 네임스페이스 + {COMMON_APP_NAMESPACE} +
+
+
+ + +
+ +
+
+

워크로드

+

실행 중인 로그 대상을 선택합니다.

+
+ 총 {loggableResources.length}개 +
+
+ {loggableResources.length === 0 ? ( +
+ 실행 중인 로그 대상이 없습니다. +
+ ) : loggableResources.map((resource) => { + const selected = selectedResource?.kind === resource.kind && selectedResource?.name === resource.name; + const metric = resource.kind === 'Pod' ? metricByPod.get(metricKey(activeNamespace, resource.name)) : undefined; + return ( + + ); + })} +
+ + + +
+
+ + +
+ {activeTab === 'logs' ? ( +
+ + +
+ ) : ( +
+ + setSearch(event.target.value)} + /> +
+ )} +
+ + {activeTab === 'logs' ? ( +
+
+
+
+ 대상 {selectedResource ? `${selectedResource.kind}/${selectedResource.name}` : '-'} +
+ {selectedResource ? ( +
+
+ +
+
+

Ready

+

{selectedResource.ready}

+
+
+

재시작

+

{selectedResource.restarts ?? 0}

+
+
+ ) : null} +
+
+ {selectedResource ? ( + 
+                    {logLoading ? '로그를 불러오는 중입니다...' : logs || '로그가 없습니다.'}
+
+ ) : ( +
+ 왼쪽에서 워크로드를 선택하면 로그가 표시됩니다. +
+ )} +
+ ) : ( +
+ + + + + + + + + + + + + {filteredEvents.length === 0 ? ( + + ) : null} + {filteredEvents.map((event, index) => ( + + + + + + + + + ))} + +
TypeReasonObjectMessageCountLast
표시할 이벤트가 없습니다.
{event.type ?? '-'}{event.reason ?? '-'}{event.involvedObject ?? '-'}{event.message ?? '-'}{event.count ?? '-'}{formatDateTime(event.lastTimestamp || event.firstTimestamp)}
+
+ )} + +
+
+ + + ); +} diff --git a/src/pages/common-apps/common-app-utils.ts b/src/pages/common-apps/common-app-utils.ts index f1f8fca..264a2ea 100644 --- a/src/pages/common-apps/common-app-utils.ts +++ b/src/pages/common-apps/common-app-utils.ts @@ -1,3 +1,5 @@ +import { statusDotToneClass } from '../../lib/status-dot'; + export const COMMON_APP_NAMESPACE = 'studio-system'; export type CommonAppComponent = { @@ -84,11 +86,11 @@ export function pipelineStatusTone(status?: string | null): 'green' | 'amber' | export function pipelineStatusDotClass(status?: string | null) { const value = (status ?? '').toLowerCase(); - if (['success', 'succeeded', 'passed'].includes(value)) return 'bg-emerald-400 shadow-[0_0_0_3px_rgba(52,211,153,0.15)]'; - if (['running', 'started'].includes(value)) return 'bg-sky-400 shadow-[0_0_0_3px_rgba(56,189,248,0.15)]'; - if (['pending', 'queued', 'blocked', 'created'].includes(value)) return 'bg-amber-400 shadow-[0_0_0_3px_rgba(251,191,36,0.15)]'; - if (['failure', 'failed', 'error', 'killed', 'declined'].includes(value)) return 'bg-rose-400 shadow-[0_0_0_3px_rgba(251,113,133,0.15)]'; - return 'bg-muted-foreground/60'; + if (['success', 'succeeded', 'passed'].includes(value)) return statusDotToneClass('green'); + if (['running', 'started'].includes(value)) return statusDotToneClass('blue'); + if (['pending', 'queued', 'blocked', 'created'].includes(value)) return statusDotToneClass('amber'); + if (['failure', 'failed', 'error', 'killed', 'declined'].includes(value)) return statusDotToneClass('red'); + return statusDotToneClass('neutral'); } export function isActivePipelineStatus(status?: string | null) { diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx index de5bbf1..84294e4 100644 --- a/src/pages/dashboard/DashboardPage.tsx +++ b/src/pages/dashboard/DashboardPage.tsx @@ -1,9 +1,9 @@ -import { Activity, Boxes, FileKey, RefreshCw } from 'lucide-react'; +import { Activity, Boxes, ChevronRight, FileKey } from 'lucide-react'; import { useEffect, useMemo, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import { Badge, Button, Card, CardHeader } from '../../components/ui'; import { PageTitle } from '../../layout/AppLayout'; import { apiRequest } from '../../lib/api'; -import { cn } from '../../lib/utils'; type CommonAppPipeline = { id: string; @@ -43,6 +43,7 @@ async function loadCommonAppPipelines(): Promise { } export function DashboardPage() { + const navigate = useNavigate(); const [commonApps, setCommonApps] = useState([]); const [commonAppsLoading, setCommonAppsLoading] = useState(true); const [commonAppsFailed, setCommonAppsFailed] = useState(false); @@ -113,8 +114,8 @@ export function DashboardPage() { title="공통앱" description="공통앱의 최근 빌드 상태를 확인합니다." action={ - } /> diff --git a/src/pages/launcher/LauncherAppsPage.tsx b/src/pages/launcher/LauncherAppsPage.tsx index f5f901f..9e1a0ca 100644 --- a/src/pages/launcher/LauncherAppsPage.tsx +++ b/src/pages/launcher/LauncherAppsPage.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'; import { Badge, Button, Card, CardHeader, Modal } from '../../components/ui'; import { useToast } from '../../components/toast'; import { PageTitle } from '../../layout/AppLayout'; +import { statusDotToneClass } from '../../lib/status-dot'; import { LoadingModal, useMinimumLoading } from '../operations/operation-utils'; import { createLauncherAppLink, @@ -226,7 +227,7 @@ export function LauncherAppsPage() { {link.displayOrder || index + 1}

- + {link.displayName || link.app.name}

diff --git a/src/pages/launcher/LauncherLogsPage.tsx b/src/pages/launcher/LauncherLogsPage.tsx new file mode 100644 index 0000000..f5d335c --- /dev/null +++ b/src/pages/launcher/LauncherLogsPage.tsx @@ -0,0 +1,444 @@ +import { useEffect, useMemo, useRef, useState } from 'react'; +import { FileText, RotateCcw, Search, TerminalSquare } from 'lucide-react'; +import { Badge, Button, Card } from '../../components/ui'; +import { PageTitle } from '../../layout/AppLayout'; +import { formatDateTime } from '../../lib/date-format'; +import { runtimeStatusDotClass, statusDotToneClass } from '../../lib/status-dot'; +import { cn } from '../../lib/utils'; +import type { RuntimeEvent, RuntimePodMetric, RuntimeResource, RuntimeResourceResponse } from '../../types/runtime'; +import { LoadingModal, useMinimumLoading } from '../operations/operation-utils'; +import { loadRuntimeEvents, loadRuntimePodMetrics, loadRuntimeResources, loadRuntimeWorkloadLogs } from '../runtime/runtime-api'; + +const LAUNCHER_NAMESPACE = 'studio-system'; + +type LauncherLogComponent = { + key: string; + name: string; + description: string; + kind: 'Deployment' | 'StatefulSet'; + workloadName: string; + serviceName: string; +}; + +const launcherLogComponents: LauncherLogComponent[] = [ + { + key: 'launcher-be', + name: '런처 백엔드', + description: '로그인, 앱 목록, 업데이트, handoff API를 제공하는 서버입니다.', + kind: 'Deployment', + workloadName: 'studio-launcher-be', + serviceName: 'studio-launcher-be' + }, + { + key: 'launcher-db', + name: '런처 DB', + description: '런처 앱, 버전, 사용자 앱 권한 데이터를 저장합니다.', + kind: 'StatefulSet', + workloadName: 'studio-launcher-db', + serviceName: 'studio-launcher-db' + } +]; + +function apiKind(kind: string) { + return kind.toLowerCase(); +} + +function stripAnsi(value: string) { + return value.replace(/(?:\x1B|\u241B)\[[0-?]*[ -/]*[@-~]/g, ''); +} + +function eventTone(type?: string) { + if (type === 'Normal') return 'green'; + if (type === 'Warning') return 'amber'; + return 'neutral'; +} + +function metricKey(namespace: string, pod: string) { + return `${namespace}/${pod}`; +} + +function parseReadyCount(ready?: string) { + const [current, desired] = (ready ?? '').split('/').map((value) => Number(value)); + return { + current: Number.isFinite(current) ? current : 0, + desired: Number.isFinite(desired) ? desired : 0 + }; +} + +function hasReadyReplica(resource: RuntimeResource) { + const ready = parseReadyCount(resource.ready); + return ready.current > 0 && (ready.desired === 0 || ready.current <= ready.desired); +} + +function isLoggable(resource: RuntimeResource) { + return ['Pod', 'Deployment', 'StatefulSet', 'DaemonSet', 'Job'].includes(resource.kind); +} + +function isActiveLogTarget(resource: RuntimeResource) { + if (!isLoggable(resource)) return false; + if (resource.kind === 'Job') return resource.status === 'Running'; + if (resource.kind === 'Pod') return ['Running', 'Pending', 'ContainerCreating'].includes(resource.status); + return resource.status === 'Running' && hasReadyReplica(resource); +} + +function relatedToComponent(resource: RuntimeResource, component: LauncherLogComponent) { + return resource.name === component.workloadName + || resource.name === component.serviceName + || resource.name.includes(component.workloadName); +} + +function workloadStatusDot(resource: RuntimeResource) { + if (resource.kind === 'Pod') return runtimeStatusDotClass(resource.status); + if (resource.kind === 'Job') return resource.status === 'Running' ? statusDotToneClass('green') : statusDotToneClass('neutral'); + if (hasReadyReplica(resource) && resource.status === 'Running') return statusDotToneClass('green'); + if (resource.status === 'Pending') return statusDotToneClass('amber'); + if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(resource.status)) return statusDotToneClass('red'); + return statusDotToneClass('neutral'); +} + +function parseCpuMillicores(value?: string) { + if (!value) return 0; + if (value.endsWith('m')) return Number(value.replace('m', '')) || 0; + return (Number(value) || 0) * 1000; +} + +function parseMemoryMi(value?: string) { + if (!value) return 0; + const numeric = Number(value.replace(/[^\d.]/g, '')) || 0; + if (value.endsWith('Gi')) return numeric * 1024; + if (value.endsWith('Ki')) return numeric / 1024; + if (value.endsWith('Mi')) return numeric; + return numeric / 1024 / 1024; +} + +function usagePercent(value: number, max: number) { + return Math.max(4, Math.min(100, Math.round((value / max) * 100))); +} + +function UsageBars({ metric, compact = false }: { metric?: RuntimePodMetric; compact?: boolean }) { + if (!metric) return 사용량 -; + + const cpuPercent = usagePercent(parseCpuMillicores(metric.cpu), 1000); + const memoryPercent = usagePercent(parseMemoryMi(metric.memory), 512); + + return ( +

+
+
+ CPU + {metric.cpu} +
+
+
+
+
+
+
+ 메모리 + {metric.memory} +
+
+
+
+
+
+ ); +} + +export function LauncherLogsPage() { + const [componentKey, setComponentKey] = useState(launcherLogComponents[0]?.key ?? ''); + const [data, setData] = useState(null); + const [podMetrics, setPodMetrics] = useState([]); + const [events, setEvents] = useState([]); + const [selectedResource, setSelectedResource] = useState(null); + const [logs, setLogs] = useState(''); + const [tail, setTail] = useState(100); + const [activeTab, setActiveTab] = useState<'logs' | 'events'>('logs'); + const [search, setSearch] = useState(''); + const [loading, setLoading] = useState(true); + const [logLoading, setLogLoading] = useState(false); + const [error, setError] = useState(''); + const logContainerRef = useRef(null); + const loadingVisible = useMinimumLoading(loading || logLoading); + + const selectedComponent = launcherLogComponents.find((component) => component.key === componentKey) ?? launcherLogComponents[0]; + const resources = data?.resources ?? []; + const activeNamespace = data?.namespace || LAUNCHER_NAMESPACE; + const metricByPod = useMemo(() => { + const map = new Map(); + podMetrics.forEach((metric) => map.set(metricKey(metric.namespace, metric.pod), metric)); + return map; + }, [podMetrics]); + const componentResources = selectedComponent ? resources.filter((resource) => relatedToComponent(resource, selectedComponent)) : []; + const loggableResources = componentResources.filter(isActiveLogTarget); + const selectedMetric = selectedResource?.kind === 'Pod' ? metricByPod.get(metricKey(activeNamespace, selectedResource.name)) : undefined; + const filteredEvents = events.filter((event) => { + const normalizedSearch = search.trim().toLowerCase(); + const componentText = `${event.involvedObject ?? ''} ${event.message ?? ''}`.toLowerCase(); + const componentMatch = selectedComponent ? componentText.includes(selectedComponent.workloadName.toLowerCase()) : true; + if (!componentMatch) return false; + if (!normalizedSearch) return true; + return `${event.type ?? ''} ${event.reason ?? ''} ${event.message ?? ''} ${event.involvedObject ?? ''}`.toLowerCase().includes(normalizedSearch); + }); + + useEffect(() => { + if (activeTab !== 'logs') return; + const frame = window.requestAnimationFrame(() => { + const container = logContainerRef.current; + if (container) container.scrollTop = container.scrollHeight; + }); + return () => window.cancelAnimationFrame(frame); + }, [activeTab, logs, logLoading, selectedResource?.name]); + + const loadLogs = (resource: RuntimeResource, nextTail = tail) => { + setSelectedResource(resource); + setLogLoading(true); + setError(''); + loadRuntimeWorkloadLogs(LAUNCHER_NAMESPACE, apiKind(resource.kind), resource.name, nextTail) + .then((result) => setLogs(result.logs ? stripAnsi(result.logs) : '로그가 없습니다.')) + .catch((logError: Error) => { + setLogs(''); + setError(logError.message); + }) + .finally(() => setLogLoading(false)); + }; + + const refresh = () => { + setLoading(true); + setError(''); + Promise.all([ + loadRuntimeResources(LAUNCHER_NAMESPACE), + loadRuntimeEvents(LAUNCHER_NAMESPACE), + loadRuntimePodMetrics(LAUNCHER_NAMESPACE).catch(() => []) + ]) + .then(([nextData, nextEvents, nextMetrics]) => { + setData(nextData); + setEvents(nextEvents); + setPodMetrics(nextMetrics); + setSelectedResource(null); + setLogs(''); + }) + .catch((refreshError: Error) => setError(refreshError.message)) + .finally(() => setLoading(false)); + }; + + useEffect(() => { + refresh(); + }, []); + + return ( + <> + + + 새로고침 + + )} + /> + + {error ?
{error}
: null} + +
+ +
+
+

조회 기준

+

런처 구성요소와 네임스페이스 기준으로 로그와 이벤트를 조회합니다.

+
+
+ +
+ 네임스페이스 + {LAUNCHER_NAMESPACE} +
+
+
+ + +
+ +
+
+

워크로드

+

실행 중인 로그 대상을 선택합니다.

+
+ 총 {loggableResources.length}개 +
+
+ {loggableResources.length === 0 ? ( +
+ 실행 중인 로그 대상이 없습니다. +
+ ) : loggableResources.map((resource) => { + const selected = selectedResource?.kind === resource.kind && selectedResource?.name === resource.name; + const metric = resource.kind === 'Pod' ? metricByPod.get(metricKey(activeNamespace, resource.name)) : undefined; + return ( + + ); + })} +
+ + + +
+
+ + +
+ {activeTab === 'logs' ? ( +
+ + +
+ ) : ( +
+ + setSearch(event.target.value)} + /> +
+ )} +
+ + {activeTab === 'logs' ? ( +
+
+
+
+ 대상 {selectedResource ? `${selectedResource.kind}/${selectedResource.name}` : '-'} +
+ {selectedResource ? ( +
+
+ +
+
+

Ready

+

{selectedResource.ready}

+
+
+

재시작

+

{selectedResource.restarts ?? 0}

+
+
+ ) : null} +
+
+ {selectedResource ? ( + 
+                    {logLoading ? '로그를 불러오는 중입니다...' : logs || '로그가 없습니다.'}
+
+ ) : ( +
+ 왼쪽에서 워크로드를 선택하면 로그가 표시됩니다. +
+ )} +
+ ) : ( +
+ + + + + + + + + + + + + {filteredEvents.length === 0 ? ( + + ) : null} + {filteredEvents.map((event, index) => ( + + + + + + + + + ))} + +
TypeReasonObjectMessageCountLast
표시할 이벤트가 없습니다.
{event.type ?? '-'}{event.reason ?? '-'}{event.involvedObject ?? '-'}{event.message ?? '-'}{event.count ?? '-'}{formatDateTime(event.lastTimestamp || event.firstTimestamp)}
+
+ )} + +
+
+ + + ); +} diff --git a/src/pages/runtime/RuntimeConfigPage.tsx b/src/pages/runtime/RuntimeConfigPage.tsx index 8b35e11..628455d 100644 --- a/src/pages/runtime/RuntimeConfigPage.tsx +++ b/src/pages/runtime/RuntimeConfigPage.tsx @@ -5,6 +5,7 @@ import { useToast } from '../../components/toast'; import { PageTitle } from '../../layout/AppLayout'; import { formatDateTime } from '../../lib/date-format'; import { getStoredSelectedAppId, getStoredSelectedComponentId, selectedComponentChangedEventName, setStoredSelectedAppId, setStoredSelectedComponentId } from '../../lib/selected-app'; +import { statusDotToneClass } from '../../lib/status-dot'; import type { ApiApp, ApiAppComponent, RuntimeEnvProfile, RuntimeEnvVariable, RuntimeIngressRule, RuntimeResource } from '../../types/runtime'; import { LoadingModal, useMinimumLoading } from '../operations/operation-utils'; import { @@ -40,13 +41,6 @@ function getWorkloadKind(kind: string) { return ''; } -function statusDot(status?: string) { - if (['Running', 'Bound', 'ClusterIP', 'LoadBalancer'].includes(status ?? '')) return 'bg-emerald-400'; - if (['Pending', 'ContainerCreating'].includes(status ?? '')) return 'bg-amber-400'; - if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(status ?? '')) return 'bg-rose-400'; - return 'bg-muted-foreground'; -} - function isStopped(resource: RuntimeResource) { return resource.ready.endsWith('/0'); } @@ -520,7 +514,7 @@ export function RuntimeConfigPage() { - + {variable.component?.name ?? '-'} @@ -626,7 +620,7 @@ export function RuntimeConfigPage() { - + {rule.component?.name ?? '-'} diff --git a/src/pages/runtime/RuntimeLogsPage.tsx b/src/pages/runtime/RuntimeLogsPage.tsx index dd4e739..1e95c64 100644 --- a/src/pages/runtime/RuntimeLogsPage.tsx +++ b/src/pages/runtime/RuntimeLogsPage.tsx @@ -4,18 +4,12 @@ import { Badge, Button, Card } from '../../components/ui'; import { PageTitle } from '../../layout/AppLayout'; import { formatDateTime } from '../../lib/date-format'; import { getStoredSelectedAppId, setStoredSelectedAppId } from '../../lib/selected-app'; +import { runtimeStatusDotClass, statusDotToneClass } from '../../lib/status-dot'; import { cn } from '../../lib/utils'; import type { ApiApp, RuntimeEvent, RuntimePodMetric, RuntimeResource, RuntimeResourceResponse } from '../../types/runtime'; import { LoadingModal, useMinimumLoading } from '../operations/operation-utils'; import { loadApps, loadRuntimeEvents, loadRuntimePodMetrics, loadRuntimeResources, loadRuntimeWorkloadLogs } from './runtime-api'; -function statusDot(status?: string) { - if (['Running', 'Bound', 'ClusterIP', 'LoadBalancer', 'Normal'].includes(status ?? '')) return 'bg-emerald-400'; - if (['Pending', 'ContainerCreating', 'Warning'].includes(status ?? '')) return 'bg-amber-400'; - if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(status ?? '')) return 'bg-rose-400'; - return 'bg-muted-foreground'; -} - function eventTone(type?: string) { if (type === 'Normal') return 'green'; if (type === 'Warning') return 'amber'; @@ -59,12 +53,12 @@ function isActiveLogTarget(resource: RuntimeResource) { } function workloadStatusDot(resource: RuntimeResource) { - if (resource.kind === 'Pod') return statusDot(resource.status); - if (resource.kind === 'Job') return resource.status === 'Running' ? 'bg-emerald-400' : 'bg-muted-foreground'; - if (hasReadyReplica(resource) && resource.status === 'Running') return 'bg-emerald-400'; - if (resource.status === 'Pending') return 'bg-amber-400'; - if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(resource.status)) return 'bg-rose-400'; - return 'bg-muted-foreground'; + if (resource.kind === 'Pod') return runtimeStatusDotClass(resource.status); + if (resource.kind === 'Job') return resource.status === 'Running' ? statusDotToneClass('green') : statusDotToneClass('neutral'); + if (hasReadyReplica(resource) && resource.status === 'Running') return statusDotToneClass('green'); + if (resource.status === 'Pending') return statusDotToneClass('amber'); + if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(resource.status)) return statusDotToneClass('red'); + return statusDotToneClass('neutral'); } function metricKey(namespace: string, pod: string) { @@ -311,7 +305,7 @@ export function RuntimeLogsPage() { onClick={() => loadLogs(resource)} >
- + {resource.name}