@@ -18,12 +46,24 @@ defineProps<{
Esc νμ
λ«κΈ°
+
- π₯οΈ CPU: 12%
- πΎ RAM: 512MB / 4GB
- π DB Pool: {{ dbConnections }}/20 Active
- π¬ Outbox Queue: 0 Pending
- β‘ Hangfire Jobs: Healthy
+
+ π₯οΈ CPU: {{ currentMetrics.cpuUsagePct }}%
+
+
+ πΎ RAM: {{ currentMetrics.ramUsageMb }}MB / {{ Math.round(currentMetrics.ramTotalMb / 1024) }}GB
+
+
+ π DB Pool: {{ currentMetrics.dbActiveConnections }}/{{ currentMetrics.dbMaxConnections }} Active
+
+
+ π¬ Outbox Queue: {{ currentMetrics.outboxPendingCount }} Pending
+
+
+ β‘ Hangfire Jobs: {{ currentMetrics.hangfireStatus }}
+
+ π‘ Live OpenTelemetry stream
@@ -58,7 +98,7 @@ defineProps<{
}
.live-telemetry-bar {
- background: #1E293B;
+ background: #0F172A;
color: #94A3B8;
padding: 4px 16px;
border-radius: 4px;
@@ -66,7 +106,21 @@ defineProps<{
display: flex;
gap: 16px;
align-items: center;
+ border: 1px solid #1E293B;
}
-.telemetry-item strong { color: #F1F5F9; }
+.telemetry-item strong { color: #F1F5F9; margin-left: 2px; }
+.telemetry-item.normal strong { color: #38BDF8; }
+.telemetry-item.warning strong { color: #F59E0B; }
+.telemetry-item.critical strong { color: #EF4444; }
+
+.telemetry-tag {
+ margin-left: auto;
+ font-size: 0.65rem;
+ font-weight: 700;
+ color: #10B981;
+ background: rgba(16, 185, 129, 0.1);
+ padding: 1px 6px;
+ border-radius: 3px;
+}
diff --git a/src/frontend/src/composables/useSystemSettings.ts b/src/frontend/src/composables/useSystemSettings.ts
index 576606fe..b42c8551 100644
--- a/src/frontend/src/composables/useSystemSettings.ts
+++ b/src/frontend/src/composables/useSystemSettings.ts
@@ -1,5 +1,5 @@
-// useSystemSettings.ts - Real Operational Engine Dataset Ingestion
-import { ref, computed, onMounted } from 'vue'
+// useSystemSettings.ts - Real Operational Engine Dataset & Live Telemetry Stream
+import { ref, computed, onMounted, onUnmounted } from 'vue'
export interface AuditLog {
timestamp: string;
@@ -22,11 +22,20 @@ export interface SettingItem {
maker_checker: 'APPROVED' | 'PENDING' | 'REJECTED';
attachments?: string[];
audit_history?: AuditLog[];
- // μ€μΈ‘ ννΈ μ΄μ μ§ν
market_value_krw?: number;
return_pct?: number;
}
+export interface TelemetryMetrics {
+ cpuUsagePct: number;
+ ramUsageMb: number;
+ ramTotalMb: number;
+ dbActiveConnections: number;
+ dbMaxConnections: number;
+ outboxPendingCount: number;
+ hangfireStatus: 'Healthy' | 'Degraded' | 'Critical';
+}
+
export function useSystemSettings() {
const activeDomain = ref<'ALL' | 'OMS' | 'WMS' | 'ERP'>('ALL');
const searchKeyword = ref('');
@@ -46,9 +55,31 @@ export function useSystemSettings() {
const pingMs = ref(4);
const isBatchRunning = ref(false);
const batchProgress = ref(0);
- const dbConnections = ref(4);
const aiRecommendation = ref