Skip to content

Migrate the monitor page plot to d3 #1826

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
williamjallen merged 8 commits into from
Dec 11, 2023
Merged

Migrate the monitor page plot to d3 #1826

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5d7ac0c
add d3 timeline plot template and connect it to the monitor page
sbelsk Nov 20, 2023
9e9e1f7
address most review comments: formatting and JS
sbelsk Dec 1, 2023
1fe1d45
use vue ref instead of hardcoded div id in plot component
sbelsk Dec 5, 2023
1236f2b
address remaining review comments
sbelsk Dec 5, 2023
3511445
fix and cleanup the Monitor test
sbelsk Dec 5, 2023
37d840e
Merge branch 'master' into migrate-monitor-to-d3
sbelsk Dec 5, 2023
98f6ff5
fix js style and address further code review suggestions
sbelsk Dec 6, 2023
7f02385
use better Laravel json assertions and fix style units to em
sbelsk Dec 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 28 additions & 22 deletions app/Http/Controllers/MonitorController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,16 +62,12 @@ public function get(): JsonResponse
// Initialize trendline data.
$success_values = [];
$fail_values = [];
$ticks = [];
$num_hours = 0;
for ($timestamp = $begin; $timestamp <= $end; $timestamp += 3600) {
// Truncate this timestamp to the beginning of the hour.
$success_values[$timestamp] = 0;
$fail_values[$timestamp] = 0;
$num_hours++;
if ($num_hours % 6 === 0) {
$ticks[] = $timestamp;
}
}

foreach ($fail_data as $row) {
Expand All @@ -92,33 +88,43 @@ public function get(): JsonResponse
}
}

// Massage data into the format expected by nvd3.
$success_trend = [];
$success_trend['key'] = 'success';
$success_trend['color'] = $palette::Success;
$success_trend['values'] = [];
// Massage data into the expected format
$success_trend = [
'color' => $palette::Success,
'name' => 'Success',
'values' => [],
];
foreach ($success_values as $key => $value) {
$data_point = [$key, $value];
$success_trend['values'][] = $data_point;
$success_trend['values'][] = [
$key,
$value,
];
}

$fail_trend = [];
$fail_trend['key'] = 'fail';
$fail_trend['color'] = $palette::Failure;
$fail_trend['values'] = [];
$fail_trend = [
'color' => $palette::Failure,
'name' => 'Fail',
'values' => [],
];
foreach ($fail_values as $key => $value) {
$data_point = [$key, $value];
$fail_trend['values'][] = $data_point;
$fail_trend['values'][] = [
$key,
$value,
];
}

$time_chart_data = [$success_trend, $fail_trend];

return response()->json([
'backlog_length' => $backlog_length,
'backlog_time' => $backlog_time,
'num_hours' => $num_hours,
'time_chart_data' => $time_chart_data,
'ticks' => $ticks,
'time_chart_data' => [
"data" => [
$success_trend,
$fail_trend,
],
"title" => "Submissions Parsed Over the Past {$num_hours} Hours",
"xLabel" => "Date",
"yLabel" => "# of Submissions",
],
'log_directory' => config('logging.default') === 'stack' ? storage_path('logs') : '',
]);
}
Expand Down
88 changes: 27 additions & 61 deletions resources/js/components/Monitor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,17 @@
<h4 v-if="cdash.backlog_length > 0">
The oldest submission was created {{ cdash.backlog_time }}.
</h4>
<h3 class="center-text">
Submissions parsed over the past {{ cdash.num_hours }} hours
</h3>
<div
id="timechart"
class="row"
>
<div class="col-md-12">
<svg
width="100%"
style="height:375px"
/>
</div>
</div>
<TimelinePlot v-if="plot_data && cdash.time_chart_data"
class="center-text"
:plot-data="plot_data"
:title="cdash.time_chart_data.title"
:x-label="cdash.time_chart_data.xLabel"
:y-label="cdash.time_chart_data.yLabel"
/>
<br>
<p>
Note: Detailed information about submission failures can be found in the CDash logs.<br>
<span v-if="cdash.log_directory.length > 0">
<span v-if="'log_directory' in cdash">
Log files can be found in: <tt>{{ cdash.log_directory }}</tt>
</span>
<span v-else>
Expand All @@ -38,15 +31,21 @@
</template>
<script>
import ApiLoader from './shared/ApiLoader';
import TimelinePlot from './shared/TimelinePlot';
export default {
name: "SubmissionProcessingMonitor",

components: {
TimelinePlot,
},

data () {
return {
// API results.
cdash: {},
loading: true,
errored: false,
plot_data: {},
}
},

Expand All @@ -55,54 +54,21 @@ export default {
},

methods: {
postSetup: function (response) {
var vm = this;
nv.addGraph(function() {
vm.timechart = nv.models.lineChart()
.margin({top: 30, right: 60, bottom: 30, left: 60})
.useInteractiveGuideline(true)
.showLegend(true)
.showYAxis(true)
.showXAxis(true)
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
.showLegend(true);

vm.timechart.xAxis.showMaxMin(false);
vm.timechart_selection = d3.select('#timechart svg').datum(vm.cdash.time_chart_data);
vm.timechart_selection.call(vm.timechart);

vm.timechart_selection
.select(".nv-axislabel")
.style('font-size', '16')
.style('font-weight', 'bold');

vm.timechart.update();
nv.utils.windowResize(vm.timechart.update);

// Only allow whole numbers as y-axis ticks.
const yAxisTicks = vm.timechart.yScale().ticks().filter(Number.isInteger);
vm.timechart.yAxis
.tickValues(yAxisTicks)
.tickFormat(d3.format('d'));
postSetup: function() {

// Format x-axis labels as time.
vm.timechart.xAxis
.showMaxMin(false)
.tickValues(vm.cdash.ticks)
.tickFormat(function(d) {
const formatter = new Intl.DateTimeFormat("en-us", {
month: "short",
day: "numeric",
hour: "numeric",
minute: "numeric",
});
// We multiply by 1,000 to convert from epoch seconds to milliseconds
// since that's what Javascript's Date() constructor expects.
return formatter.format(new Date(d * 1000));
});
vm.timechart.update();
// perform data marshalling before sending data to plot template
const formatted_data = [];
this.cdash.time_chart_data.data.forEach((line) => {
formatted_data.push({
color: line.color,
name: line.name,
values: line.values.map((d) => {
// converts UNIX epoch format from API to JS date object
return { x: new Date(d[0]*1000), y: d[1] };
})
})
});
this.plot_data = formatted_data;
}
},
}
Expand Down
Loading