-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (118 loc) · 6.58 KB
/
index.html
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
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<meta http-equiv="refresh" content="60">
</head>
<body>
<h1>Resource Monitor</h1>
<header>
<button id="resource-button" class="tab-button">Partitions</button>
<button id="user-button" class="tab-button">Users</button>
<span>Last update: {{ last_update_time }}</span>
</header>
<div id="resource-monitor" class="monitor-container">
<div class="partitions-container">
{% for partition, data in partitions.items() %}
<div class="partition">
<h2>Partition: {{ partition }}</h2>
<span class="resources">Available resources</span>
<div class="storage-bars-container">
<span class="resource-type">GPU ({{ data['gpu_name'] }})</span>
<div class="storage-bar">
<span class="storage-text">{{ data['gpu_free'] }}/{{ data['gpu_total'] }} cards</span>
<div class="storage-fill" style="width: {{ data['gpu_free_percentage'] }}%;"></div>
</div>
<span class="resource-type">CPU</span>
<div class="storage-bar">
<span class="storage-text">{{ data['cpu_free'] }}/{{ data['cpu_total'] }} cores</span>
<div class="storage-fill" style="width: {{ data['cpu_free_percentage'] }}%;"></div>
</div>
<span class="resource-type">RAM</span>
<div class="storage-bar">
<span class="storage-text">{{ data['ram_free'] }}/{{ data['ram_total'] }}GB</span>
<div class="storage-fill" style="width: {{ data['ram_free_percentage'] }}%;"></div>
</div>
</div>
<h3>Node usage:</h3>
<ul>
{% for node, node_data in data['nodes'].items() %}
<span class="node-name">{{ node }}, STATE={{ node_data['state'] }}</span>
<li>
<div class="storage-bars-container">
<span class="resource-type">GPU</span>
<div class="storage-bar-node">
<span class="storage-text">{{ node_data['gpu_allocated'] }}/{{ node_data['gpu_total'] }} cards</span>
<div class="storage-fill-node" style="width: {{ node_data['gpu_allocated_percentage'] }}%;"></div>
</div>
<span class="resource-type">CPU</span>
<div class="storage-bar-node">
<span class="storage-text">{{ node_data['cpu_allocated'] }}/{{node_data['cpu_total']}} cores</span>
<div class="storage-fill-node" style="width: {{node_data['cpu_allocated_percentage'] }}%;"></div>
</div>
<span class="resource-type">RAM</span>
<div class="storage-bar-node">
<span class="storage-text">{{ node_data['ram_allocated'] }}/{{ node_data['ram_total']}}GB</span>
<div class="storage-fill-node" style="width: {{ node_data['ram_allocated_percentage'] }}%;"></div>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
</div>
<div id="user-monitor" class="monitor-container" style="display: none;">
<div class="partitions-container">
{% for d, message in [(users_info, "Top 5 GPU usage"),
(users_with_partial_gpu_usage, "Locking GPUs and partially using them"),
(users_with_no_gpu_usage, "Locking GPUs without using them")]%}
<div class="partition">
<h2>{{message}}</h2>
{% for user, user_data in d.items()%}
<span class="node-name">Username: {{ user }}</span>
<li class="li-users">
<div class="storage-bars-container">
<span class="resource-type">GPU</span>
<span class="storage-text">{{user_data['gpu_allocated']}}
{% if d == users_with_partial_gpu_usage or d == users_with_no_gpu_usage%}
/{{ user_data['gpu_locked'] }}
{% endif %} cards
</span>
<span class="resource-type">CPU</span>
<span class="storage-text">{{ user_data['cpu_allocated']}} cores</span>
<span class="resource-type">RAM</span>
<span class="storage-text">{{ user_data['ram_allocated']}}GB</span>
</div>
</li>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
<script>
// JavaScript code for switching between monitors
document.getElementById("resource-button").addEventListener("click", function () {
document.getElementById("resource-monitor").style.display = "block";
document.getElementById("user-monitor").style.display = "none";
sessionStorage.setItem("activeTab", "resource"); // Store active tab
});
document.getElementById("user-button").addEventListener("click", function () {
document.getElementById("resource-monitor").style.display = "none";
document.getElementById("user-monitor").style.display = "block";
sessionStorage.setItem("activeTab", "user"); // Store active tab
});
// Check and set the active tab on page load
window.addEventListener("load", function () {
const activeTab = sessionStorage.getItem("activeTab");
if (activeTab === "user") {
document.getElementById("user-button").click(); // Trigger click event
} else {
document.getElementById("resource-button").click(); // Default to "Partitions"
}
});
</script>
</body>
</html>