Orbit-System-Manager/index.html at main · ryantr-statinops/Orbit-System-Manager · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Orbit System Manager</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- ============================================================
       TOP BAR
  ============================================================ -->
  <header id="top-bar">
    <div class="top-bar-left">
      <button class="sidebar-toggle" id="toggle-left" title="Toggle left panel">
        <span class="chevron"></span>
      </button>
      <span class="status-indicator">
        <span class="status-dot" id="status-dot"></span>
        <span id="status-text">INITIALIZING...</span>
      </span>
    </div>
    <span class="top-title">ORBIT SYSTEM MANAGER</span>
    <div class="top-bar-right">
      <span class="top-clock" id="clock">00:00:00</span>
      <button class="sidebar-toggle" id="toggle-right" title="Toggle right panel">
        <span class="chevron"></span>
      </button>
    </div>
  </header>

  <!-- ============================================================
       MAIN 3-COLUMN LAYOUT
  ============================================================ -->
  <div id="main-layout">

    <!-- ===== COLUMN 1: DATA VIEWER & PROCESSORS ===== -->
    <aside id="col-left">

      <!-- Environment Monitor -->
      <section class="card">
        <div class="card-header">Environment Monitor</div>
        <div class="stat-row">
          <span class="stat-label">Avg Utilization</span>
          <span class="stat-value" id="cpu-avg">--%</span>
        </div>
        <div class="stat-row">
          <span class="stat-label">Std Dev (&sigma;)</span>
          <span class="stat-value" id="cpu-std">--</span>
        </div>
        <div class="stat-row">
          <span class="stat-label">Variance (&sigma;&sup2;)</span>
          <span class="stat-value" id="cpu-var">--</span>
        </div>
        <div class="stat-bar-track">
          <div class="stat-bar-fill" id="cpu-bar-fill" style="width:0%"></div>
        </div>
      </section>

      <!-- Logical Processors -->
      <section class="card">
        <div class="card-header">Logical Processors</div>
        <div id="core-list"></div>
      </section>

      <!-- Time-Series Boxplot: CPU Load Distribution over Time -->
      <section class="card">
        <div class="card-header">Time-Series &mdash; CPU Load Distribution (1s Blocks)</div>
        <canvas id="boxplot-canvas"></canvas>
      </section>

    </aside>
    <div class="splitter" data-target="left"></div>

    <!-- ===== COLUMN 2: 3D TOPOLOGY CANVAS ===== -->
    <main id="center-canvas">
      <div class="canvas-tags">
        <span class="tag">16 CORES</span>
        <span class="tag">60s WINDOW</span>
        <span class="tag" style="color:#21918c;border-color:#21918c;">VIRIDIS THERMAL</span>
      </div>
    </main>
    <div class="splitter" data-target="right"></div>

    <!-- ===== COLUMN 3: TELEMETRY & DISTRIBUTION ===== -->
    <aside id="col-right">

      <!-- System Memory -->
      <section class="card">
        <div class="card-header">System Memory (RAM)</div>
        <div class="mem-line" id="ram-text">--.-- / 31.8 GB (--%)</div>
        <div class="stat-bar-track ram-bar-track">
          <div class="stat-bar-fill ram-fill" id="ram-bar-fill" style="width:0%"></div>
        </div>
        <div class="chart-label">RAM Usage &mdash; Time Series (30s)</div>
        <canvas id="ram-timeseries-canvas"></canvas>
      </section>

      <!-- GPU Telemetry -->
      <section class="card">
        <div class="card-header">GPU Telemetry</div>
        <div class="gpu-line" id="gpu0-text">GPU 0 (Quadro T1000) &mdash; --&deg;C &mdash; Load: --%</div>
        <div class="gpu-line" id="gpu1-text">GPU 1 (Intel UHD) &mdash; --&deg;C &mdash; Load: --%</div>
        <div class="chart-label">Kernel Density &mdash; GPU Load</div>
        <canvas id="density-canvas"></canvas>
        <div class="chart-label">GPU Load &mdash; Time Series (30s)</div>
        <canvas id="gpu-timeseries-canvas"></canvas>
      </section>

      <!-- Network Speeds -->
      <section class="card">
        <div class="card-header">Network Speeds</div>
        <canvas id="network-canvas"></canvas>
      </section>

    </aside>

  </div>

  <!-- ============================================================
       SCRIPTS — bundled with Rollup (includes Three.js, OrbitControls)
  ============================================================ -->
  <script src="dist/bundle.js"></script>

</body>
</html>