flightlesssomething/templates/benchmark.tmpl
2024-07-29 22:27:31 +03:00

203 lines
6.8 KiB
Cheetah

{{template "header.tmpl" .}}
<link rel="stylesheet" href="/static/css/benchmark.css">
<div class="d-flex justify-content-between align-items-center">
<h2>Benchmark #{{ .benchmark.ID }}</h2>
<div>
{{if eq .benchmark.UserID .userID }}
<a class="btn btn-danger me-2" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="fa-solid fa-trash"></i> Delete</a>
{{end}}
<a class="btn btn-secondary" href="/benchmark/{{ .benchmark.ID }}/download" target="_blank" title="Reconstruct MangoHud-like CSV files"><i class="fa-solid fa-download"></i> Download</a>
</div>
</div>
<div class="text-center">
<h5><b>{{ .benchmark.Title }}</b></h5>
<p>{{ .benchmark.Description }}</p>
<p><small>Submitted <b>{{ .benchmark.CreatedAtHumanized }}</b> by <b><a href="/user/{{ .benchmark.User.ID }}">{{ .benchmark.User.Username }}</a></b></small></p>
</div>
<div class="row">
<div class="col-12">
<h5 class="text-center" style="font-size: 16px; font-weight: bold;">Specifications</h5>
<div class="table-responsive">
<table class="table table-sm table-bordered table-nowrap">
<thead>
<tr>
<th scope="col">Label</th>
<th scope="col">OS</th>
<th scope="col">GPU</th>
<th scope="col">CPU</th>
<th scope="col">RAM</th>
<th scope="col">OS specific</th>
</tr>
</thead>
<tbody>
{{- range .benchmarkData }}
<tr>
<th scope="row">{{ .Label }}</th>
<td>{{ .SpecOS }}</td>
<td>{{ .SpecGPU }}</td>
<td>{{ .SpecCPU }}</td>
<td>{{ .SpecRAM }}</td>
<td>{{ .SpecLinuxKernel }} {{ .SpecLinuxScheduler }}</td>
</tr>
{{- end }}
</tbody>
</table>
</div>
</div>
</div>
<div id="fpsChart" style="height:250pt;"></div>
<div id="frameTimeChart" style="height:250pt;"></div>
<div class="accordion" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button id="hideAdditionalMetricsBtn" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Additional metrics
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div id="cpuLoadChart" style="height:250pt;"></div>
<div id="gpuLoadChart" style="height:250pt;"></div>
<div id="cpuTempChart" style="height:250pt;"></div>
<div id="gpuTempChart" style="height:250pt;"></div>
<div id="gpuCoreClockChart" style="height:250pt;"></div>
<div id="gpuMemClockChart" style="height:250pt;"></div>
<div id="gpuVRAMUsedChart" style="height:250pt;"></div>
<div id="gpuPowerChart" style="height:250pt;"></div>
<div id="ramUsedChart" style="height:250pt;"></div>
<div id="swapUsedChart" style="height:250pt;"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="cpuLoadSummaryChart" style="height:250pt;"></div>
</div>
<div class="col-md-6">
<div id="gpuLoadSummaryChart" style="height:250pt;"></div>
</div>
</div>
<div id="minMaxAvgChart" style="height:500pt;"></div>
<div id="avgChart" style="height:250pt;"></div>
<div id="densityChart" style="height:250pt;"></div>
<div id="sdvChart" style="height:400pt;"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script>
var fpsDataArrays = [
{{- range .benchmarkData }}
{ label: '{{ .Label }}', data: {{ .DataFPS }} },
{{- end }}
];
var frameTimeDataArrays = [
{{- range .benchmarkData }}
{ label: '{{ .Label }}', data: {{ .DataFrameTime }} },
{{- end }}
];
var cpuLoadDataArrays = [
{{- range .benchmarkData }}
{ label: '{{ .Label }}', data: {{ .DataCPULoad }} },
{{- end }}
];
var gpuLoadDataArrays = [
{{- range .benchmarkData }}
{ label: '{{ .Label }}', data: {{ .DataGPULoad }} },
{{- end }}
];
var cpuTempDataArrays = [
{{- range .benchmarkData }}
{ label: '{{ .Label }}', data: {{ .DataCPUTemp }} },
{{- end }}
];
var gpuTempDataArrays = [
{{- range .benchmarkData }}
{ label: '{{ .Label }}', data: {{ .DataGPUTemp }} },
{{- end }}
];
var gpuCoreClockDataArrays = [
{{- range .benchmarkData }}
{ label: '{{ .Label }}', data: {{ .DataGPUCoreClock }} },
{{- end }}
];
var gpuMemClockDataArrays = [
{{- range .benchmarkData }}
{ label: '{{ .Label }}', data: {{ .DataGPUMemClock }} },
{{- end }}
];
var gpuVRAMUsedDataArrays = [
{{- range .benchmarkData }}
{ label: '{{ .Label }}', data: {{ .DataGPUVRAMUsed }} },
{{- end }}
];
var gpuPowerDataArrays = [
{{- range .benchmarkData }}
{ label: '{{ .Label }}', data: {{ .DataGPUPower }} },
{{- end }}
];
var ramUsedDataArrays = [
{{- range .benchmarkData }}
{ label: '{{ .Label }}', data: {{ .DataRAMUsed }} },
{{- end }}
];
var swapUsedDataArrays = [
{{- range .benchmarkData }}
{ label: '{{ .Label }}', data: {{ .DataSwapUsed }} },
{{- end }}
];
</script>
<script src="/static/js/benchmark.js"></script>
{{if eq .benchmark.UserID .userID }}
<div class="modal" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete confirmation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this benchmark?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No, cancel</button>
<form hx-delete="/benchmark/{{ .benchmark.ID }}" >
<button type="submit" class="btn btn-primary">Yes, delete</button>
</form>
</div>
</div>
</div>
</div>
{{end}}
{{template "footer.tmpl" .}}