Skip to content

Commit

Permalink
Merge pull request #13 from ethpandaops/ui-api-actions
Browse files Browse the repository at this point in the history 
Use API on UI
  • Loading branch information
@pk910
pk910 authored Feb 29, 2024
2 parents 7db4f16 + 3e8f0d8 commit 225383f
Show file tree
Hide file tree
Showing 5 changed files with 166 additions and 11 deletions.
2 changes: 2 additions & 0 deletions pkg/coordinator/web/handlers/index.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ type IndexPageTestDescriptor struct {

type TestRunData struct {
RunID uint64 `json:"run_id"`
TestID string `json:"test_id"`
Index uint64 `json:"index"`
Name string `json:"name"`
IsStarted bool `json:"started"`
Expand Down Expand Up @@ -113,6 +114,7 @@ func (fh *FrontendHandler) getIndexPageData() (*IndexPage, error) {
func (fh *FrontendHandler) getTestRunData(idx int, test types.Test) *TestRunData {
testData := &TestRunData{
RunID: test.RunID(),
TestID: test.TestID(),
Index: uint64(idx),
Name: test.Name(),
StartTime: test.StartTime(),
Expand Down
5 changes: 2 additions & 3 deletions pkg/coordinator/web/handlers/test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import (
"github.com/ethpandaops/assertoor/pkg/coordinator/web"
"github.com/gorilla/mux"
"github.com/sirupsen/logrus"
"gopkg.in/yaml.v3"
)

type TestPage struct {
Expand Down Expand Up @@ -110,12 +109,12 @@ func (fh *FrontendHandler) getTestPageData(testID string) (*TestPage, error) {
}

if testConfig.Config != nil {
testCfgYaml, err := yaml.Marshal(testConfig.Config)
testCfgJSON, err := json.Marshal(testConfig.Config)
if err != nil {
return nil, fmt.Errorf("failed marshalling test config: %v", err)
}

pageData.Config = string(testCfgYaml)
pageData.Config = string(testCfgJSON)
}

// test runs
Expand Down
6 changes: 3 additions & 3 deletions pkg/coordinator/web/templates/_layout/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@
<link rel="preload" as="font" href="/webfonts/fa-brands-400.woff2" crossorigin />
<link id="app-style" rel="stylesheet" href="/css/layout.css" />
{{ template "css" .Data }}
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/color-modes.js"></script>
{{ if .ShowSidebar }}
<style>
.main-navigation {
Expand Down Expand Up @@ -51,9 +54,6 @@
</div>
</main>

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/color-modes.js"></script>
<script src="/js/clipboard.min.js"></script>
<script src="/js/assertoor.js"></script>
{{ template "js" .Data }}
Expand Down
119 changes: 114 additions & 5 deletions pkg/coordinator/web/templates/test/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ <h2 class="py-2">{{ .Name }}</h2>
Test ID:
</td>
<td>
{{ .ID }}
{{ .ID }}
</td>
</tr>
<tr>
Expand All @@ -20,18 +20,127 @@ <h2 class="py-2">{{ .Name }}</h2>
</td>
</tr>
</table>

<div class="mt-2 d-flex flex-row" style="max-width: 500px;">
<div class="flex-grow-1">
<h5 class="mt-3 mb-0">Test Runs</h5>
</div>
<div class="mx-2">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#startTestModal">Start Test</button>
</div>
</div>

<!--
<h5 class="mt-3 mb-0">Schedule Execution</h5>
-->
<div class="modal fade modal-xl" id="startTestModal" tabindex="-1" aria-labelledby="startTestModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="startTestModalLabel">Start Test</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body container-fluid">
<div class="row">
<div class="col-4">
Test ID:
</div>
<div class="col-8">
{{ .ID }}
</div>
</div>
<div class="row">
<div class="col-4">
Name:
</div>
<div class="col-8">
{{ .Name }}
</div>
</div>
<div class="row">
<div class="col-12">
Configuration:
</div>
<div class="col-12 ">
<textarea class="form-control" id="testConfigOverrides" rows="3" style="width:100%;height:400px;"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="startTestButton">Start Test</button>
</div>
</div>
</div>
</div>

<h5 class="mt-3 mb-0">Test Runs</h5>
{{ template "test_runs" .Tests }}

</div>
{{ end }}

{{ define "js" }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.6/ace.js" integrity="sha512-gqjFRgajJiZM9GmvHEE7vpzPSL/moP+zxpl4F6lRNJDOI3pb2Tvu8k5vUjAzJKsl0ragzWL0/WasKhR430PkCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/yamljs/0.3.0/yaml.min.js" integrity="sha512-f/K0Q5lZ1SrdNdjc2BO2I5kTx8E5Uw1EU3PhSUB9fYPohap5rPWEmQRCjtpDxNmQB4/+MMI/Cf+nvh1VSiwrTA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$(document).ready(function() {
var editor = ace.edit("testConfigOverrides");
editor.session.setMode("ace/mode/yaml");
var defaultConfigStr = {{ .Config }};
var defaultConfig = defaultConfigStr ? JSON.parse(defaultConfigStr) : {};

window.editor = editor;
resetConfigOverrides();
$("#startTestButton").on("click", startTest);

function resetConfigOverrides() {
var configYaml = YAML.dump(defaultConfig);
if(configYaml == "{}") configYaml = "";
editor.setValue(configYaml, -1);
}

function startTest() {
var configJson;
try {
var configYaml = editor.getValue();
configJson = YAML.parse(configYaml);
} catch(ex) {
alert("invalid config yaml: " + ex.toString());
return;
}

var reqPromise = new Promise(function(resolve, reject) {
$.ajax({
type: "POST",
url: "/api/v1/test_runs/schedule",
dataType: "json",
async: false,
data: JSON.stringify({
test_id: "{{ .ID }}",
config: configJson
}),
success: resolve,
error: reject
});
});

reqPromise.then(function(res) {
if(!res || res.status !== "OK") {
throw res.status;
}
location.reload();
}, function(rsp) {
throw rsp.responseJSON ? rsp.responseJSON.status : rsp.statusText;
}).catch(function(err) {
alert("Could not schedule test: " + err.toString());
});
}

});
</script>
{{ end }}
{{ define "css" }}
<style>
#startTestModal .ace_editor {
height: 200px;
}

</style>
{{ end }}
45 changes: 45 additions & 0 deletions pkg/coordinator/web/templates/test/test_runs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,12 @@
<span class="badge rounded-pill text-bg-secondary">
<i class="far fa-hourglass-half"></i> Pending
</span>
<button type="button" class="btn btn-danger test-cancel-button" data-testid="{{ $test.TestID }}" data-runid="{{ $test.RunID }}">Cancel Test</button>
{{ else if eq $test.Status "running" }}
<span class="badge rounded-pill text-bg-primary">
<i class="far fa-play-circle"></i> Running
</span>
<button type="button" class="btn btn-danger test-cancel-button" data-testid="{{ $test.TestID }}" data-runid="{{ $test.RunID }}">Cancel Test</button>
{{ else if eq $test.Status "success" }}
<span class="badge rounded-pill text-bg-success">
<i class="fas fa-check-circle"></i> Success
Expand Down Expand Up @@ -114,4 +116,47 @@
</tbody>
</table>
</div>
<script type="text/javascript">
$(function() {
$(".test-cancel-button").on("click", function() {
var testId = $(this).data("testid");
var runId = $(this).data("runid");

if(!confirm("Cancel test run " + runId + "?"))
return;

var reqPromise = new Promise(function(resolve, reject) {
$.ajax({
type: "POST",
url: "/api/v1/test_run/" + runId + "/cancel",
dataType: "json",
async: false,
data: JSON.stringify({
test_id: testId
}),
success: resolve,
error: reject
});
});

reqPromise.then(function(res) {
if(!res || res.status !== "OK") {
throw res.status;
}
location.reload();
}, function(rsp) {
throw rsp.responseJSON ? rsp.responseJSON.status : rsp.statusText;
}).catch(function(err) {
alert("Could not cancel test: " + err.toString());
});
});
});
</script>
<style>
.test-cancel-button {
padding: 0 8px;
font-size: 0.9rem;
margin-left: 20px;
}
</style>
{{ end }}

0 comments on commit 225383f

Please sign in to comment.