From ada84b355c3289c53a8b19f56fc4490cb8f6a53b Mon Sep 17 00:00:00 2001 From: Janakarajan Natarajan Date: Tue, 26 Sep 2023 16:19:15 +0000 Subject: [PATCH 1/7] Add support for creating Empty Graphs --- src/html_files/utils.ts | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/src/html_files/utils.ts b/src/html_files/utils.ts index 62a99d97..98d5fe27 100644 --- a/src/html_files/utils.ts +++ b/src/html_files/utils.ts @@ -13,10 +13,12 @@ declare let netstat_raw_data; declare let perf_profile_raw_data; declare let flamegraph_raw_data; +let all_run_keys: Array = new Array(); let key_limits: Map = new Map(); function form_graph_limits(data) { key_limits.clear(); + all_run_keys.length = 0; for (let i = 0; i < data.runs.length; i++) { let key_values = data.runs[i]['key_values']; for (let key in key_values) { @@ -35,6 +37,18 @@ function form_graph_limits(data) { } } } + for (let i = 0; i < data.runs.length; i++) { + let keys = data.runs[i]['keys']; + var prev_all_run_key_index = 0; + for (let j = 0; j < keys.length; j++) { + let key = keys[j]; + if (all_run_keys.indexOf(key) == -1) { + all_run_keys.splice(prev_all_run_key_index, 0, key); + } + prev_all_run_key_index += 1; + } + } + for (let [key, value] of key_limits.entries()) { let extra = (value.high - value.low) * 0.1; value.high += extra; @@ -47,6 +61,25 @@ function form_graph_limits(data) { } } } + +function emptyOrCallback(keys, callback, elem, key, run_data) { + if (keys.indexOf(key) == -1) { + setTimeout(() => { + emptyGraph(elem, key); + }, 0); + } else { + setTimeout(() => { + callback(elem, key, run_data[key]); + }, 0); + } +} +function emptyGraph(elem, key) { + var layout = { + title: `${key} (N/A)`, + } + Plotly.newPlot(elem, [], layout, { frameMargins: 0 }); +} + class RunEntry { run: string; entries: Map; From 71b4bf9e00ede08866eafa2f6482b74132c0f9e5 Mon Sep 17 00:00:00 2001 From: Janakarajan Natarajan Date: Tue, 26 Sep 2023 16:30:00 +0000 Subject: [PATCH 2/7] Add EmptyGraph support for PerfStat --- src/html_files/perf_stat.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/html_files/perf_stat.ts b/src/html_files/perf_stat.ts index 7bf36222..c5abe218 100644 --- a/src/html_files/perf_stat.ts +++ b/src/html_files/perf_stat.ts @@ -7,16 +7,14 @@ function getEvents(run, container_id, keys, run_data) { no_data_div.innerHTML = "No data collected"; addElemToNode(container_id, no_data_div); } else { - var data = keys; - data.forEach(function (value, index, arr) { + for (let i = 0; i < all_run_keys.length; i++) { + let value = all_run_keys[i]; var elem = document.createElement('div'); elem.id = `perfstat-${run}-${value}`; elem.style.float = "none"; addElemToNode(container_id, elem); - setTimeout(() => { - getEvent(run, elem.id, value, run_data[value]); - }, 0); - }) + emptyOrCallback(keys, getEvent, elem, value, run_data); + } } } @@ -34,7 +32,7 @@ function addData(perfstat_data, stat, timediff) { } }) } -function getEvent(run, parent_id, key, run_data) { +function getEvent(elem, key, run_data) { var data = JSON.parse(run_data); var perfstat_datas = []; data.data[0].cpus.forEach(function (value, index, arr) { @@ -49,9 +47,6 @@ function getEvent(run, parent_id, key, run_data) { addData(perfstat_datas, stat, value.time.TimeDiff); }) }); - var elem = document.createElement('div'); - elem.style.float = "none"; - addElemToNode(parent_id, elem); var TESTER = elem; var end_datas = []; perfstat_datas.forEach(function (value, index, arr) { From 67c6cb227644a396fc297611638bd0f648752d00 Mon Sep 17 00:00:00 2001 From: Janakarajan Natarajan Date: Tue, 26 Sep 2023 16:35:05 +0000 Subject: [PATCH 3/7] Add EmptyGraph support for Vmstat --- src/html_files/vmstat.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/html_files/vmstat.ts b/src/html_files/vmstat.ts index bc7f9d26..ff4609eb 100644 --- a/src/html_files/vmstat.ts +++ b/src/html_files/vmstat.ts @@ -1,19 +1,17 @@ let got_vmstat_data = false; function getEntries(run, container_id, keys, run_data) { - var data = keys; - data.forEach(function (value, index, arr) { + for (let i = 0; i < all_run_keys.length; i++) { + let value = all_run_keys[i]; var elem = document.createElement('div'); elem.id = `vmstat-${run}-${value}`; elem.style.float = "none"; addElemToNode(container_id, elem); - setTimeout(() => { - getEntry(run, elem.id, value, run_data[value]); - }, 0); - }) + emptyOrCallback(keys, getEntry, elem, value, run_data); + } } -function getEntry(run, parent_id, key, run_data) { +function getEntry(elem, key, run_data) { var data = JSON.parse(run_data); var x_time = []; var y_data = []; @@ -21,9 +19,6 @@ function getEntry(run, parent_id, key, run_data) { x_time.push(value.time.TimeDiff); y_data.push(value.value); }); - var elem = document.createElement('div'); - elem.style.float = "none"; - addElemToNode(parent_id, elem); var TESTER = elem; var vmstat_data: Partial = { x: x_time, From 50dc4aacd848a6235940834e934da8810a84b4fe Mon Sep 17 00:00:00 2001 From: Janakarajan Natarajan Date: Tue, 26 Sep 2023 16:35:22 +0000 Subject: [PATCH 4/7] Add EmptyGraph support for Netstat --- src/html_files/netstat.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/html_files/netstat.ts b/src/html_files/netstat.ts index 3d9feebb..8021800e 100644 --- a/src/html_files/netstat.ts +++ b/src/html_files/netstat.ts @@ -1,19 +1,17 @@ let got_netstat_data = false; function getNetstatEntries(run, container_id, keys, run_data) { - var data = keys; - data.forEach(function (value, index, arr) { + for (let i = 0; i < all_run_keys.length; i++) { + let value = all_run_keys[i]; var elem = document.createElement('div'); elem.id = `netstat-${run}-${value}`; elem.style.float = "none"; addElemToNode(container_id, elem); - setTimeout(() => { - getNetstatEntry(run, elem.id, value, run_data[value]); - }, 0); - }) + emptyOrCallback(keys, getNetstatEntry, elem, value, run_data); + } } -function getNetstatEntry(run, parent_id, key, run_data) { +function getNetstatEntry(elem, key, run_data) { var data = JSON.parse(run_data); var x_time = []; var y_data = []; @@ -21,9 +19,6 @@ function getNetstatEntry(run, parent_id, key, run_data) { x_time.push(value.time.TimeDiff); y_data.push(value.value); }); - var elem = document.createElement('div'); - elem.style.float = "none"; - addElemToNode(parent_id, elem); var TESTER = elem; var netstat_data: Partial = { x: x_time, From da10921b1537f2f288f811277996b83c62c16ab4 Mon Sep 17 00:00:00 2001 From: Janakarajan Natarajan Date: Tue, 26 Sep 2023 16:35:39 +0000 Subject: [PATCH 5/7] Add EmptyGraph support for Diskstats --- src/html_files/disk_stats.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/html_files/disk_stats.ts b/src/html_files/disk_stats.ts index b2e8647a..a2233b6d 100644 --- a/src/html_files/disk_stats.ts +++ b/src/html_files/disk_stats.ts @@ -1,6 +1,6 @@ let got_disk_stat_data = false; -function getStatValues(run, elem, key, run_data) { +function getStatValues(elem, key, run_data) { var disk_datas = []; var data = JSON.parse(run_data); data.data.forEach(function (v, i, a) { @@ -42,16 +42,14 @@ function getStatValues(run, elem, key, run_data) { } function getStatKeys(run, container_id, mb, keys, run_data) { - var data = keys; - data.forEach(function (value, index, arr) { + for (let i = 0; i < all_run_keys.length; i++) { + let value = all_run_keys[i]; var elem = document.createElement('div'); - elem.id = `disk-stat-${run}-${value.name}`; + elem.id = `disk-stat-${run}-${value}`; elem.style.float = "none"; addElemToNode(container_id, elem); - setTimeout(() => { - getStatValues(run, elem, value, run_data[value]); - }, 0); - }) + emptyOrCallback(keys, getStatValues, elem, value, run_data); + } } function diskStats(mb: boolean) { From 6482644286dc4e5cc5f8626e36b8e22e138f1c44 Mon Sep 17 00:00:00 2001 From: Janakarajan Natarajan Date: Tue, 26 Sep 2023 16:35:56 +0000 Subject: [PATCH 6/7] Add EmptyGraph support for MeminfoData --- src/html_files/meminfo.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/html_files/meminfo.ts b/src/html_files/meminfo.ts index cbafd5ba..2dfd747f 100644 --- a/src/html_files/meminfo.ts +++ b/src/html_files/meminfo.ts @@ -106,16 +106,14 @@ function getMeminfo(elem, key, run_data) { } function getMeminfoKeys(run, container_id, keys, run_data) { - var data = keys; - data.forEach(function (value, index, arr) { + for (let i = 0; i < all_run_keys.length; i++) { + let value = all_run_keys[i]; var elem = document.createElement('div'); - elem.id = `disk-stat-${run}-${value.name}`; + elem.id = `disk-stat-${run}-${value}`; elem.style.float = "none"; addElemToNode(container_id, elem); - setTimeout(() => { - getMeminfo(elem, value, run_data[value]); - }, 0); - }) + emptyOrCallback(keys, getMeminfo, elem, value, run_data); + } } function meminfo() { From b1ae305689e8d5e7143c4964855e15836200674d Mon Sep 17 00:00:00 2001 From: Janakarajan Natarajan Date: Tue, 26 Sep 2023 16:36:25 +0000 Subject: [PATCH 7/7] Add explicit 'charset' for plotlyjs Without this set, we see incorrect rendering in Safari and Chrome. --- src/html_files/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/html_files/index.html b/src/html_files/index.html index 1a0ff479..0cc0b9b1 100644 --- a/src/html_files/index.html +++ b/src/html_files/index.html @@ -87,7 +87,7 @@

Diff:

- +