flightlesssomething/templates/benchmark.tmpl

{{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>
    <label for="spikeThreshold" style="color: #FFFFFF;">Ignore Spike Threshold (%):</label>
    <input type="range" id="spikeThreshold" name="spikeThreshold" min="5" max="150" value="50" oninput="updateSpikesChart(this.value)">
    <span id="spikeThresholdValue" style="color: #FFFFFF;">50%</span>
    <div id="spikesChart" style="height:250pt;"></div>
</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" .}}