Skip to content

Commit 11ca41e

Browse files
rinrikorinriko
committed
add v2
1 parent a8f037b commit 11ca41e

File tree

3 files changed

+267
-18
lines changed

3 files changed

+267
-18
lines changed

‎src/script/angular/components/databasetable/changeloadeddataset.html‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
11
<div class="change-loaded-dataset">
2+
<!-- Date Time Filter -->
3+
<div class="date-time-range" style="margin-bottom: 1rem;">
4+
<label>
5+
From:
6+
<input type="datetime-local" ng-model="Dataset.fromTime" />
7+
</label>
8+
<label style="margin-left: 10px;">
9+
To:
10+
<input type="datetime-local" ng-model="Dataset.toTime" />
11+
</label>
12+
</div>
213
<div ng-if="userData.length">
314
<h6>Uploaded Datasets</h6>
415
<ul>
516
<li ng-repeat="dataset in userData track by dataset.id"
617
ng-class="{selected: Dataset.currentDataset.id === dataset.id}">
7-
<a class="dataset" ng-click="selectDataset(dataset)"
8-
ng-disabled="Dataset.currentDataset.id === dataset.id">
18+
<a class="dataset" ng-click="selectDataset(dataset)" ng-disabled="Dataset.currentDataset.id === dataset.id">
919
<i class="fa fa-database"></i>
1020
<strong>{{dataset.name}}</strong>
1121
</a>
@@ -18,13 +28,12 @@ <h6>Explore a Sample Dataset</h6>
1828
<ul class="loaded-dataset-list">
1929
<li ng-repeat="dataset in sampleData track by dataset.id"
2030
ng-class="{selected: Dataset.currentDataset.id === dataset.id}">
21-
<a class="dataset" ng-click="selectDataset(dataset)"
22-
ng-disabled="Dataset.currentDataset.id === dataset.id">
31+
<a class="dataset" ng-click="selectDataset(dataset)" ng-disabled="Dataset.currentDataset.id === dataset.id">
2332
<i class="fa fa-database"></i>
2433
<strong>{{dataset.name}}</strong>
2534
</a>
2635
<strong ng-if="Dataset.currentDataset === dataset">(selected)</strong>
2736
<em ng-if="dataset.description">{{dataset.description}}</em>
2837
</li>
2938
</ul>
30-
</div>
39+
</div>

‎src/script/angular/components/databasetable/dataset.service.js‎

Lines changed: 91 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
'use strict';
2-
2+
/* global console */
3+
/* global d3 */
34
angular.module('hpccApp')
45
.factory('Dataset', function ($http, $q, _, SampleData, Config) {
56
var Dataset = {};
7+
var now = new Date();
8+
Dataset.fromTime = new Date(now.getTime() - 2 * 60 * 60 * 1000);
9+
Dataset.toTime = now;
610

711
// Start with the list of sample datasets
812
var datasets = SampleData;
913

1014
Dataset.datasets = datasets;
1115
// Dataset.dataset = datasets[7];
1216
Dataset.dataset = datasets[0];
13-
Dataset.currentDataset = undefined; // dataset before update
17+
Dataset.currentDataset = undefined; // dataset before update
1418
Dataset.stats = {};
1519
Dataset.type = undefined;
1620

@@ -72,12 +76,16 @@ angular.module('hpccApp')
7276
url: dataset.url,
7377
responseType: 'arraybuffer'
7478
}).then(function (datain) {
75-
var wb = XLSX.read(datain.data, {type: "array"});
79+
var wb = XLSX.read(datain.data, {
80+
type: "array"
81+
});
7682
dataset.values = XLSX.utils.sheet_to_json(wb.Sheets[dataset.selectedOption]);
7783
updateFromData(dataset, dataset.values);
7884
});
7985
} else if (dataset.type === 'csv') {
80-
updatePromise = $http.get(dataset.url, {cache: true}).then(function (response) {
86+
updatePromise = $http.get(dataset.url, {
87+
cache: true
88+
}).then(function (response) {
8189
var data;
8290

8391
// first see whether the data is JSON, otherwise try to parse CSV
@@ -93,8 +101,8 @@ angular.module('hpccApp')
93101
updateFromData(dataset, data);
94102
});
95103

96-
} else {
97-
debugger
104+
} else if (dataset.type === 'json') {
105+
// debugger
98106
updatePromise = d3.json(dataset.url).then(function (response) {
99107
var data;
100108
// first see whether the data is JSON, otherwise try to parse CSV
@@ -103,6 +111,79 @@ angular.module('hpccApp')
103111
Dataset.type = 'json';
104112
}
105113
dataset.values = data;
114+
console.log(data);
115+
updateFromData(dataset, data);
116+
});
117+
} else {
118+
// console.log(Dataset.fromTime, Dataset.toTime)
119+
function transformJobsToQueueStatus(jobDetails) {
120+
const formatSecondsToHHMMSS = (seconds) => {
121+
const h = Math.floor(seconds / 3600);
122+
const m = Math.floor((seconds % 3600) / 60);
123+
const s = seconds % 60;
124+
return [h, m, s].map(v => String(v).padStart(2, '0')).join(':');
125+
};
126+
127+
const now = Math.floor(Date.now() / 1000);
128+
129+
const queue_status = jobDetails.map(job => {
130+
// const now = Math.floor(Date.now() / 1000);
131+
const jobState = (job.job_state && job.job_state[0]) || "UNKNOWN";
132+
const submitTime = job.submit_time || 0;
133+
const startTime = job.start_time || submitTime;
134+
const endTime = job.end_time || now;
135+
const timeLimitSec = (job.time_limit || 0) * 60;
136+
137+
let elapsedTime;
138+
if (["RUNNING", "PENDING"].includes(jobState)) {
139+
elapsedTime = now - startTime;
140+
} else if (["COMPLETED", "FAILED", "CANCELLED", "OUT_OF_MEMORY", "TIMEOUT"].includes(jobState)) {
141+
elapsedTime = endTime - startTime;
142+
} else {
143+
elapsedTime = 0; // fallback
144+
}
145+
146+
const remaining = timeLimitSec - elapsedTime;
147+
148+
return {
149+
ARRAY_JOB_ID: String(job.array_job_id || job.job_id || ''),
150+
CPUS: job.cpus || (job.cpus_per_task || 1) * (job.tasks || 1),
151+
JOBID: String(job.job_id || ''),
152+
MIN_MEMORY: job.memory_per_node ? `${Math.floor(job.memory_per_node / 1024)}M` : "0M",
153+
NAME: job.name || '',
154+
NODELIST: job.nodes || [],
155+
PARTITION: job.partition || '',
156+
START_TIME: startTime,
157+
STATE: jobState,
158+
SUBMIT_TIME: submitTime,
159+
TIME: formatSecondsToHHMMSS(elapsedTime),
160+
TIME_LEFT: jobState === "RUNNING" && timeLimitSec > 0 && remaining > 0 ?
161+
`${Math.floor(remaining / 86400)}-${formatSecondsToHHMMSS(remaining % 86400)}` :
162+
"INVALID",
163+
USER: job.user_name || ''
164+
};
165+
});
166+
167+
return {
168+
queue_status,
169+
timestamp: now
170+
};
171+
}
172+
173+
updatePromise = $http.post(dataset.url, {
174+
start: d3.timeFormat("%Y-%m-%d %H:%M:%S%Z")(Dataset.fromTime),
175+
end: d3.timeFormat("%Y-%m-%d %H:%M:%S%Z")(Dataset.toTime),
176+
interval: "5m",
177+
aggregation: "max",
178+
nodelist: "10.101.93.[1-8]",
179+
metrics: ["Jobs_Info"],
180+
compression: false
181+
}).then(function (response) {
182+
var data = response.data;
183+
Dataset.type = 'json';
184+
dataset.values = transformJobsToQueueStatus(data.job_details)
185+
// dataset.values = data;
186+
console.log("Fetched data:", dataset.values);
106187
updateFromData(dataset, data);
107188
});
108189
}
@@ -123,10 +204,10 @@ angular.module('hpccApp')
123204
});
124205
return updatePromise
125206
}
126-
if (dataset.repeat){
207+
if (dataset.repeat) {
127208
updatePromise = requestUpdate();
128-
Dataset.timer = d3.interval(requestUpdate,dataset.repeat)
129-
}else{
209+
Dataset.timer = d3.interval(requestUpdate, dataset.repeat)
210+
} else {
130211
updatePromise = requestUpdate();
131212
}
132213

@@ -151,4 +232,4 @@ angular.module('hpccApp')
151232
};
152233

153234
return Dataset;
154-
});
235+
});

‎src/script/angular/components/databasetable/sampledata.js‎

Lines changed: 162 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,157 @@ const squeue = {
8484
// return string;
8585
// }
8686
},
87-
color:{
88-
"STATE": d3.scaleOrdinal().domain(["RUNNING","PENDING","COMPLETING"]).range(["#2ca02c","#ff7f0e","#d62728"])
87+
// color:{
88+
// "STATE": d3.scaleOrdinal().domain(["RUNNING","PENDING","COMPLETING"]).range(["#2ca02c","#ff7f0e","#d62728"])
89+
// },
90+
color: {
91+
STATE: d3.scaleOrdinal()
92+
.domain([
93+
"PENDING",
94+
"RUNNING",
95+
"COMPLETED",
96+
"COMPLETING",
97+
"FAILED",
98+
"OUT_OF_MEMORY",
99+
"CANCELLED",
100+
"TIMEOUT"
101+
])
102+
.range([
103+
"#7f7f7f", // PENDING - gray
104+
"#468ae3", // RUNNING - blue
105+
"#2ca02c", // COMPLETED - green
106+
"#2ca02c", // COMPLETING - light blue
107+
"#d62728", // FAILED - red
108+
"#ff7f0e", // OUT_OF_MEMORY - orange
109+
"#000000", // CANCELLED - black
110+
"#59332b" // TIMEOUT - pink
111+
])
112+
},
113+
disableAxis: {"NODELIST": true, "JOBID": true, "ARRAY_JOB_ID": true, "USER": true,
114+
"SUBMIT_TIME": true,
115+
"TIME_LEFT": true,
116+
"START_TIME": true},
117+
axisOrder: {
118+
"NAME": 0,
119+
"WAITING_TIME": 1,
120+
"EXECUTION_TIME":2,
121+
"TIME": 3,
122+
// "TIME_LEFT": 4,
123+
"CPUS": 4,
124+
"MIN_MEMORY": 5,
125+
"PARTITION": 6
126+
},
127+
initAxis: "STATE",
128+
// "TIME":s=>moment.duration(s.replace('-',' '))._milliseconds,
129+
// "TIME_LEFT":s=>moment.duration(s.replace('-',' '))._milliseconds,
130+
}
131+
const h100 = {
132+
definedType: {
133+
"JOBID": "text",
134+
"ARRAY_JOB_ID": "text",
135+
"TIME": "duration",
136+
"TIME_LEFT": "duration",
137+
"START_TIME": "time",
138+
"SUBMIT_TIME": "time",
139+
"WAITING_TIME": "duration",
140+
"EXECUTION_TIME": "duration",
141+
},
142+
preprocess: {
143+
"START_TIME": (s) => s*1000,
144+
"SUBMIT_TIME": (s) => s*1000,
145+
"MIN_MEMORY": (s) => {
146+
const v = s.split(" ")[0].trim();
147+
if (v[v.length - 1] === 'M')
148+
return +v.slice(0, v.length - 1) / 1000
149+
else
150+
return +v.slice(0, v.length - 1)
151+
}
152+
},
153+
customAxis: {
154+
"WAITING_TIME": (d,currentTimestamp) => {
155+
try {
156+
let start = +new Date(d["START_TIME"]*1000);
157+
let delta = (_.isNaN(start)?(+(currentTimestamp)):(start/1000)) - d["SUBMIT_TIME"];
158+
if(_.isNaN(delta))
159+
debugger
160+
let string = '';
161+
const day = Math.floor(delta / 24 / 3600);
162+
if (day) {
163+
string += '' + day + '-';
164+
}
165+
delta -= day * 3600 * 24;
166+
const h = Math.floor(delta / 3600);
167+
if (h > 9)
168+
string += '' + h;
169+
else
170+
string += '0' + h;
171+
delta -= h * 3600;
172+
const m = Math.floor(delta / 60);
173+
if (m > 9)
174+
string += ':' + m;
175+
else
176+
string += ':0' + m;
177+
delta = Math.round(delta - m * 60);
178+
if (delta > 9)
179+
string += ':' + delta;
180+
else
181+
string += ':0' + delta;
182+
return string;
183+
}catch(e){
184+
debugger
185+
return 'N/A'
186+
}
187+
},
188+
// "EXECUTION_TIME": d => {
189+
// let delta = (durationstring2Milisecond(d["TIME"]) +durationstring2Milisecond(d["TIME_LEFT"]))/1000;
190+
// let string = '';
191+
// const day = Math.floor(delta / 24 / 3600);
192+
// if (day) {
193+
// string += '' + day + '-';
194+
// }
195+
// delta -= day * 3600 * 24;
196+
// const h = Math.floor(delta / 3600);
197+
// if (h > 9)
198+
// string += '' + h;
199+
// else
200+
// string += '0' + h;
201+
// delta -= h * 3600;
202+
// const m = Math.floor(delta / 60);
203+
// if (m > 9)
204+
// string += ':' + m;
205+
// else
206+
// string += ':0' + m;
207+
// delta = Math.round(delta - m * 60);
208+
// if (delta > 9)
209+
// string += ':' + delta;
210+
// else
211+
// string += ':0' + delta;
212+
// return string;
213+
// }
214+
},
215+
// color:{
216+
// "STATE": d3.scaleOrdinal().domain(["RUNNING","PENDING","COMPLETING"]).range(["#2ca02c","#ff7f0e","#d62728"])
217+
// },
218+
color: {
219+
STATE: d3.scaleOrdinal()
220+
.domain([
221+
"PENDING",
222+
"RUNNING",
223+
"COMPLETED",
224+
"FAILED",
225+
"OUT_OF_MEMORY",
226+
"CANCELLED",
227+
"TIMEOUT"
228+
])
229+
.range([
230+
"#7f7f7f", // PENDING - gray
231+
"#468ae3", // RUNNING - blue
232+
"#2ca02c", // COMPLETED - green
233+
"#d62728", // FAILED - red
234+
"#ff7f0e", // OUT_OF_MEMORY - orange
235+
"#000000", // CANCELLED - black
236+
"#59332b" // TIMEOUT - pink
237+
])
89238
},
90239
disableAxis: {"NODELIST": true, "JOBID": true, "ARRAY_JOB_ID": true, "USER": true,
91240
"SUBMIT_TIME": true,
@@ -105,7 +254,6 @@ const squeue = {
105254
// "TIME":s=>moment.duration(s.replace('-',' '))._milliseconds,
106255
// "TIME_LEFT":s=>moment.duration(s.replace('-',' '))._milliseconds,
107256
}
108-
109257
angular.module('hpccApp').constant('SampleData', [
110258
{
111259
id: "history",
@@ -127,6 +275,17 @@ angular.module('hpccApp').constant('SampleData', [
127275
type: 'json',
128276
customSetting: squeue,
129277
repeat: 60 * 2 * 1000,
278+
},
279+
{
280+
id: "h100_api",
281+
name: "Real time H100",
282+
url: "http://narumuu.ttu.edu/api/h100/",
283+
description: "",
284+
group: "sample",
285+
formatType: 'json',
286+
type: '',
287+
customSetting: h100,
288+
repeat: 60 * 2 * 1000,
130289
}
131290
]);
132291

0 commit comments

Comments
 (0)