Merge pull request #76 from OpenDataServices/mw/ui-improvements

Mw/UI improvements
OpenDataServices · Mar 11, 2021 · f4b9809 · f4b9809
2 parents 3d60adc + 9fe2026
commit f4b9809
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 8 deletions.
diff --git a/standards_lab/ui/templates/home.html b/standards_lab/ui/templates/home.html
@@ -9,6 +9,7 @@ <h1>Welcome to Open Standards Lab</h1>
      for more information.</p>
   <p>Select from available projects {% if EDIT_MODE %}or create a new project{% endif %}.</p>
 
+  {% if projects %}
   <div class="card mb-4">
     <div class="card-body">
       <h5 class="card-title">Available Projects</h5>
@@ -19,6 +20,7 @@ <h5 class="card-title">Available Projects</h5>
       </ul>
     </div>
   </div>
+  {% endif %}
 
   {% if EDIT_MODE %}
   <div class="card">

diff --git a/standards_lab/ui/templates/project.html b/standards_lab/ui/templates/project.html
@@ -26,7 +26,7 @@ <h2 class="card-title">Project Settings</h2>
       <p>Owner: <code>{{ownThisProject}}</code><br />
       Modified: <code>{{project.modified}}</code></p>
       <div class="form-group">
-        <label for="project-name-input">Project Name</label>
+        <label for="project-name-input">Name</label>
         <input type="text" id="project-name-input" class="form-control form-control-lg" style="width: 100%" v-model="project.name" v-on:keyup="unsavedChanges = true" >
         <small v-bind:class="{ 'text-danger': !validProjectName }">Accepted characters are A-Z, a-z, 0-9 , - and _ </small>
       </div>
@@ -150,12 +150,38 @@ <h2 class="card-title">Data</h2>
       <textarea class="form-control" style="width:100%; min-height: 40vh" v-else v-model="jsonEditorData"></textarea>
 
       <button class="btn btn-primary mt-2" v-on:click="uploadUpdatedProjectData(jsonEditorData, jsonEditorDataFileName, 'data')">Save</button>
-      <button class="btn btn-primary mt-2" v-on:click="startProcess('cove')">Test the data</button>
-      <a class="btn btn-primary mt-2" target="_blank" v-bind:href="projectCoveResultsUrl" v-if="displayResults">Results</a>
     </div>
 
   </div>
 
+
+
+  <div class="card mb-3" v-bind:class="{ maximise: maximiseDataEditor }">
+    <div class="card-body">
+      <h2 class="card-title">Test</h2>
+      <p>Test the data with the configuration and schema</p>
+
+      <div class="row">
+        <div class="col">
+          <button class="btn btn-primary mt-2" v-on:click="startProcess('cove')" v-bind:disabled="spinner == 'test'">Start Test</button>
+          <div v-show="spinner == 'test'" class="spinner-border m-2" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+
+        <div class="col">
+          <p v-if="testResults">Test Results Summary</p>
+          <div v-if="testResults" v-for="(test, fileName) in testResults">
+            <p class="alert alert-warning" v-if="test.result.status != 'SUCCESS'">Something went wrong testing the data {{test.result.error}}</p>
+            <p v-else><strong>{{fileName}}</strong> validation errors: {{test.result.context.validation_errors_count}}</p>
+          </div>
+          <a class="mt-2" target="_blank" v-bind:href="projectCoveResultsUrl" v-if="testResults">View Result Details</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
   </div>
 
 </div>
@@ -165,7 +191,6 @@ <h2 class="card-title">Data</h2>
 <script>
   var projectApiUrl = "{% url "api:project-config" view.kwargs.project_name %}";
   var projectCoveResultsUrl = "{% url "ui:cove-results" view.kwargs.project_name %}";
-  var displayResults = false;
   var csrfmiddlewaretoken_value = "{{ csrf_token }}";
   var initialProject = undefined;
   var ownThisProject = false;
@@ -204,6 +229,9 @@ <h2 class="card-title">Data</h2>
         maximiseDataEditor: false,
 
         unsavedChanges: false,
+
+        testResults: false,
+        testResultsPollerTimer: undefined,
       }
     },
 
@@ -213,6 +241,8 @@ <h2 class="card-title">Data</h2>
 
       this.ownThisProject = ownThisProject;
 
+      this.getProcessResults("cove");
+
       setInterval(async () => {
 
         let project = await this.getProjectProperties();
@@ -410,8 +440,56 @@ <h2 class="card-title">Data</h2>
         body: JSON.stringify({ action: "start", processName: processName}),
         }).then(response => response.json()).then(result => {
           console.log(result);
+          /* poll for results */
+          this.getProcessResults(processName);
         });
-      this.displayResults = true;
+    },
+
+    /* Gets process results if they exist */
+    getProcessResults: async function(processName){
+      console.log("doing get process");
+      this.testResults = undefined;
+
+        let response = await fetch(projectApiUrl + '/process');
+        let responseJson = await response.json();
+
+        let isWorking = false;
+        let isFinished = false;
+
+        for (testedItem in responseJson[processName]){
+          let status = responseJson[processName][testedItem].rq_status;
+          /* Any of these states mean the process is working */
+          isWorking = (status == 'queued' || status == 'started' || status == 'deferred');
+          /* We wait for all results to have finished */
+          if (isWorking){
+            break;
+          }
+
+          /* this shouldn't be reached unless isWorking is false */
+          isFinished = (status == 'finished');
+        }
+
+        if (!isWorking && isFinished){
+          clearTimeout(this.testResultsPollerTimer);
+          this.testResults = responseJson[processName];
+          this.testResultsPollerTimer = undefined;
+          this.spinner = undefined;
+        }
+
+        /* we are idle and have no results from any processes to show */
+        if (!isWorking && !isFinished){
+          clearTimeout(this.testResultsPollerTimer);
+          this.testResultsPollerTimer = undefined;
+          this.spinner = undefined;
+        }
+
+        /* We are working on processing */
+        if (isWorking && !this.testResultsPollerTimer){
+          this.spinner = 'test';
+          this.testResultsPollerTimer = setTimeout(() => {
+            this.getProcessResults(processName);
+          }, 2000);
+      }
     },
 
   } /* end methods */

diff --git a/standards_lab/ui/views.py b/standards_lab/ui/views.py
@@ -62,9 +62,10 @@ def get_context_data(self, **kwargs):
             return Http404
 
         # Render the lib-cove-web results snippets
+        context["cove_results_pages"] = []
+        cove = processor.cove.monitor(context["project"])
+
         try:
-            context["cove_results_pages"] = []
-            cove = processor.cove.monitor(context["project"])
 
             for file_result in cove:
                 snippet_context = cove[file_result]["result"]["context"]
@@ -82,6 +83,8 @@ def get_context_data(self, **kwargs):
                 )
 
         except KeyError:
-            return {"results": "expired"}
+            context["error"] = "Results Expired"
+        finally:
+            return context
 
         return context