add runtime log views and standardize status dots

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() {
                     <tr key={variable.id} className="hover:bg-muted/20">
                       <td className="px-4 py-3">
                         <span className="inline-flex items-center gap-2">
-                          <span className={variable.isSecret ? 'block size-2.5 rounded-full bg-amber-400' : 'block size-2.5 rounded-full bg-emerald-400'} />
+                          <span className={`block size-2.5 shrink-0 rounded-full ${variable.isSecret ? statusDotToneClass('amber') : statusDotToneClass('green')}`} />
                           <span className="truncate">{variable.component?.name ?? '-'}</span>
                         </span>
                       </td>
@@ -626,7 +620,7 @@ export function RuntimeConfigPage() {
                     <tr key={rule.id} className="hover:bg-muted/20">
                       <td className="px-4 py-3">
                         <span className="inline-flex items-center gap-2">
-                          <span className="block size-2.5 rounded-full bg-sky-400" />
+                          <span className={`block size-2.5 shrink-0 rounded-full ${statusDotToneClass('blue')}`} />
                           <span className="truncate">{rule.component?.name ?? '-'}</span>
                         </span>
                       </td>