add test registartion modal

ethpandaops · Aug 9, 2024 · 2dc89ee · 2dc89ee
1 parent dd5696c
commit 2dc89ee
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 16 deletions.
diff --git a/pkg/coordinator/web/handlers/sidebar.go b/pkg/coordinator/web/handlers/sidebar.go
@@ -3,16 +3,17 @@ package handlers
 import "github.com/ethpandaops/assertoor/pkg/coordinator/buildinfo"
 
 type SidebarData struct {
-	ClientCount     uint64         `json:"client_count"`
-	CLReadyCount    uint64         `json:"cl_ready_count"`
-	CLHeadSlot      uint64         `json:"cl_head_slot"`
-	CLHeadRoot      []byte         `json:"cl_head_root"`
-	ELReadyCount    uint64         `json:"el_ready_count"`
-	ELHeadNumber    uint64         `json:"el_head_number"`
-	ELHeadHash      []byte         `json:"el_head_hash"`
-	TestDescriptors []*SidebarTest `json:"tests"`
-	AllTestsActive  bool           `json:"all_tests_active"`
-	Version         string         `json:"version"`
+	ClientCount      uint64         `json:"client_count"`
+	CLReadyCount     uint64         `json:"cl_ready_count"`
+	CLHeadSlot       uint64         `json:"cl_head_slot"`
+	CLHeadRoot       []byte         `json:"cl_head_root"`
+	ELReadyCount     uint64         `json:"el_ready_count"`
+	ELHeadNumber     uint64         `json:"el_head_number"`
+	ELHeadHash       []byte         `json:"el_head_hash"`
+	TestDescriptors  []*SidebarTest `json:"tests"`
+	AllTestsActive   bool           `json:"all_tests_active"`
+	CanRegisterTests bool           `json:"can_register_tests"`
+	Version          string         `json:"version"`
 }
 
 type SidebarTest struct {
@@ -23,9 +24,10 @@ type SidebarTest struct {
 
 func (fh *FrontendHandler) getSidebarData(activeTestID string) *SidebarData {
 	sidebarData := &SidebarData{
-		TestDescriptors: []*SidebarTest{},
-		AllTestsActive:  activeTestID == "*",
-		Version:         buildinfo.GetVersion(),
+		TestDescriptors:  []*SidebarTest{},
+		AllTestsActive:   activeTestID == "*",
+		CanRegisterTests: !fh.securityTrimmed && fh.isAPIEnabled,
+		Version:          buildinfo.GetVersion(),
 	}
 
 	// client pool status

diff --git a/pkg/coordinator/web/static/js/ace-1.5.0/ace.js b/pkg/coordinator/web/static/js/ace-1.5.0/ace.js
diff --git a/pkg/coordinator/web/static/js/ace-1.5.0/mode-yaml.js b/pkg/coordinator/web/static/js/ace-1.5.0/mode-yaml.js
diff --git a/pkg/coordinator/web/static/js/yaml-0.3.0.min.js b/pkg/coordinator/web/static/js/yaml-0.3.0.min.js
diff --git a/pkg/coordinator/web/templates/_layout/layout.html b/pkg/coordinator/web/templates/_layout/layout.html
@@ -56,6 +56,8 @@
 
       <script src="/js/clipboard.min.js"></script>
       <script src="/js/assertoor.js"></script>
+      <script src="/js/ace-1.5.0/ace.js"></script>
+      <script src="/js/yaml-0.3.0.min.js"></script>
       {{ template "js" .Data }}
     </body>
   </html>

diff --git a/pkg/coordinator/web/templates/sidebar/sidebar.html b/pkg/coordinator/web/templates/sidebar/sidebar.html
@@ -41,6 +41,120 @@
         </a>
       </li>
       {{ end }}
+      {{ if .CanRegisterTests }}
+      <li class="nav-item">
+        <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#registerTestModal">
+          <i class="fa fa-circle-plus mx-1"></i> Register Test
+        </a>
+      </li>
+      {{ end }}
     </ul>
   </div>
+  {{ if .CanRegisterTests }}
+  <div class="modal fade modal-xl" id="registerTestModal" tabindex="-1" aria-labelledby="registerTestModalLabel" 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="registerTestModalLabel">Register 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">
+              Playbook URL:
+            </div>
+            <div class="col-8">
+              <input type="text" class="form-control" id="registerTestFile" placeholder="https://.../test.yaml">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-4">
+              Custom Name:
+            </div>
+            <div class="col-8">
+              <input type="text" class="form-control" id="registerTestName">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-12">
+              Custom Config:
+            </div>
+            <div class="col-12 ">
+              <textarea class="form-control" id="registerTestConfig" 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="registerTestButton">Register Test</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript">
+    $(document).ready(function() {
+      var editor = ace.edit("registerTestConfig");
+      editor.session.setMode("ace/mode/yaml");
+
+      window.editor = editor;
+      resetConfigOverrides();
+      $("#registerTestButton").on("click", registerTest);
+
+      function resetConfigOverrides() {
+        editor.setValue("", -1);
+      }
+
+      function registerTest() {
+        var configJson;
+        try {
+          var configYaml = editor.getValue();
+          configJson = YAML.parse(configYaml);
+        } catch(ex) {
+          alert("invalid config yaml: " + ex.toString());
+          return;
+        }
+
+        var testFile = $("#registerTestFile").val();
+        if(!testFile) {
+          alert("playbook link is required");
+          return;
+        }
+
+        var reqPromise = new Promise(function(resolve, reject) {
+          $.ajax({
+            type: "POST",
+            url: "/api/v1/tests/register_external",
+            dataType: "json",
+            async: false,
+            data: JSON.stringify({
+              file: testFile,
+              name: $("#registerTestName").val() || "",
+              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 register test: " + err.toString());
+        });
+      }
+
+    });
+  </script>
+  <style>
+    #registerTestModal .ace_editor {
+      min-height: 300px;
+    }
+
+    </style>
+  {{ end }}
 {{ end }}
diff --git a/pkg/coordinator/web/templates/test/test.html b/pkg/coordinator/web/templates/test/test.html
@@ -79,8 +79,6 @@ <h1 class="modal-title fs-5" id="startTestModalLabel">Start Test</h1>
 {{ 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");
@@ -141,7 +139,7 @@ <h1 class="modal-title fs-5" id="startTestModalLabel">Start Test</h1>
 {{ define "css" }}
 <style>
 #startTestModal .ace_editor {
-  height: 200px;
+  min-height: 300px;
 }
 
 </style>