From c1b1f92c25103dedd8c88948bf5d90785f194d1f Mon Sep 17 00:00:00 2001
From: Marco Braga <mrbraga@redhat.com>
Date: Mon, 25 Sep 2023 03:08:54 -0300
Subject: [PATCH] review report html and threasholds

---
 data/templates/report/report.html | 467 ++++++++++++------------------
 internal/opct/report/checks.go    |   2 +-
 internal/opct/report/report.go    |  17 +-
 3 files changed, 196 insertions(+), 290 deletions(-)

diff --git a/data/templates/report/report.html b/data/templates/report/report.html
index 309e3522..32f13430 100644
--- a/data/templates/report/report.html
+++ b/data/templates/report/report.html
@@ -71,7 +71,8 @@
         <!-- OPCT side nav menu -->
         <div class="col-2" id="nav-col">
           <div class="list-group">
-            <a href="#" v-on:click="changeContent('summary')" class="list-group-item list-group-item-action">Summary</a>
+            <!-- <a href="#" v-on:click="changeContent('summary')" class="list-group-item list-group-item-action">Summary</a> -->
+            <a href="#" v-on:click="changeMenu('summary')" class="list-group-item list-group-item-action">Summary</a>
             <a href="#" v-on:click="changeMenu('checks')" class="list-group-item list-group-item-action">Checks
               [[ if .Summary.Alerts.Checks ]]
               <span class= "badge bg-[[ .Summary.Alerts.Checks ]] float-right">[[ .Summary.Alerts.ChecksMessage ]]</span>
@@ -106,10 +107,6 @@
             <a class="list-group-item list-group-item-action disabled">Suite Upgrade</a>
             <a class="list-group-item list-group-item-action disabled">Plugin Artifacts</a>
 
-            <!-- TODO: parse CRD controlplane.operator.openshift.io/v1alpha1 PodNetworkConnectivityCheck
-            Must-gather: pod_network_connectivity_check/podnetworkconnectivitychecks.yaml
-            <a class="list-group-item list-group-item-action disabled">Network</a> -->
-
             <!-- TODO: parse firing alerts
             <a class="list-group-item list-group-item-action disabled">Monitoring</a>  -->
 
@@ -127,50 +124,11 @@
         </div>
         <!-- OPCT content -->
         <div class="col-10">
-          <div v-if="currentMenu == 'default'">
-            <div id="main-content" class="overflow-auto"><span v-html="currentContent"></span></div>
-          </div>
-          <div v-if="currentMenu != 'default'">
-            <div id="main-content" class="overflow-auto"><span v-html="menuTitle"></span></div>
-            <div id="main-content" class="overflow-auto"><span v-html="menuBody"></span></div>
-            <div v-if="tableItems.length">
-              <!-- <b-container fluid> -->
-                <!-- Main table element -->
-                <b-table
-                  :items="tableItems"
-                  :fields="tableFields"
-                  :current-page="tableCurrentPage"
-                  :per-page="tablePerPage"
-                  :filter="tableFilter"
-                  :filter-included-fields="tableFilterOn"
-                  :sort-by.sync="tableSortBy"
-                  :sort-desc.sync="tableSortDesc"
-                  :sort-direction="tableSortDirection"
-                  stacked="md"
-                  show-empty
-                  small
-                >
-
-                <template #cell(actions)="row">
-                  <b-button size="sm" @click="info(row.item, row.index, $event.target)" class="mr-1">
-                    Info modal
-                  </b-button>
-                  <b-button size="sm" @click="row.toggleDetails">
-                    {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
-                  </b-button>
-                </template>
-
-                <template #row-details="row">
-                  <b-card>
-                    <ul>
-                      <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
-                    </ul>
-                  </b-card>
-                </template>
-              </b-table>
-              <!-- </b-container> -->
-            </div>
+          <div v-if="isLoading">
+            <div>Loading... ({{ loadingMessage }})</div>
           </div>
+          <div id="main-content" class="overflow-auto"><span v-html="menuTitle"></span></div>
+          <div id="main-content" class="overflow-auto"><span v-html="menuBody"></span></div>
         </div>
       </div>
     </div>
@@ -204,99 +162,6 @@
     </div>
 <!-- Tab END CAMGI -->
 
-<!-- DATA Start -->
-<data id="summary-data">
-
-  <h1>Summary</h1>
-  <hr/>
-  <dl>
-
-    <dt class="text-light bg-secondary ps-1 mb-1">Tests</dt>
-    <dd>
-      <table class="table table-sm table-striped font-monospace">
-        <tbody>
-          <tr>
-            <th scope="col">Result file</th>
-            <td>[[ .Summary.Tests.Archive ]] [[ if .Summary.Tests.ArchiveDiff ]](diff [[ .Summary.Tests.ArchiveDiff ]])[[end]]</td>
-          </tr>
-        </tbody>
-      </table>
-      <table class="table table-sm table-striped font-monospace">
-        <thead>
-          <tr>
-            <th scope="col">Plugin Name</th>
-            <!-- <th scope="col">Completed</th> -->
-            <th scope="col">Status</th>
-            <th scope="col">Total</th>
-            <th scope="col">Passed</th>
-            <th scope="col">Failed</th>
-            <th scope="col">Timeout</th>
-            <th scope="col">Skipped</th>
-            <th scope="col">FilterSuite</th>
-            <th scope="col">FilterBaseline</th>
-            <th scope="col">FilterFailedPrio</th>
-          </tr>
-        </thead>
-        <tbody>
-[[ range $plugin := .Provider.Plugins]]
-          <tr>
-            <td> [[ $plugin.Name ]]</td>
-            <!-- <td> [[ $plugin.Stat.Completed ]]</td> -->
-            <td> [[ $plugin.Stat.Status ]]</td>
-            <td> [[ $plugin.Stat.Total ]]</td>
-            <td> [[ $plugin.Stat.Passed ]]</td>
-            <td> [[ $plugin.Stat.Failed ]]</td>
-            <td> [[ $plugin.Stat.Timeout ]]</td>
-            <td> [[ $plugin.Stat.Skipped ]]</td>
-            <td> [[ $plugin.Stat.FilterSuite ]]</td>
-            <td> [[ $plugin.Stat.FilterBaseline ]]</td>
-            <td> [[ $plugin.Stat.FilterFailedPrio ]]</td>
-          </tr>
-[[end]]
-        </tbody>
-      </table>
-
-    </dd>
-    
-    <dt class="text-light bg-secondary ps-1 mb-1">Cluster</dt>
-    <dd>
-      <table class="table table-sm table-striped font-monospace">
-        <tbody>
-          <tr>
-            <th scope="col">OpenShift version</th>
-            <td>[[ .Provider.Version.OpenShift.Desired ]]</td>
-          </tr>
-          <tr>
-            <th scope="col">Kubernetes version</th>
-            <td>[[ .Provider.Version.Kubernetes ]]</td>
-          </tr>
-        </tbody>
-      </table>
-    </dd>
-    
-    <dt class="text-light bg-secondary ps-2 mb-2">Infrastructure</dt>
-    <dd>
-      <table class="table table-sm table-striped font-monospace">
-        <thead>
-          <tr>
-            <th scope="col">PlatformType</th>
-            <th scope="col">Name</th>
-            <th scope="col">Infra Topology</th>
-            <th scope="col">ControlPlaneTopology</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td> [[ .Provider.Infra.PlatformType ]]</td>
-            <td> [[ .Provider.Infra.Name ]]</td>
-            <td> [[ .Provider.Infra.Topology ]]</td>
-            <td> [[ .Provider.Infra.ControlPlaneTopology ]]</td>
-          </tr>
-        </tbody>
-      </table>
-    </dd>
-  </dl>
-</data>
 <!-- Scripts -->
 
 <script>
@@ -346,29 +211,16 @@ <h1>Summary</h1>
         currentMenu: 'default',
         menuTitle: '',
         menuBody: '',
-        tablePageTitle: '',
-        tableItems: [],
-        tableFields: [],
-        tableCurrentPage: 1,
-        tablePerPage: 10000,
-        tableFilter: null,
-        tableFilterOn: [],
-        tableSortBy: '',
-        tableSortDesc: false,
-        tableSortDirection: 'asc',
+        isLoading: true,
+        loadingMessage: '',
       };
     },
     methods: {
       changeContent: function(target) {
-        console.log(target)
         this.currentMenu = 'default'
         let newdata = document.getElementById(target + '-data')
         this.currentContent = newdata.innerHTML
       },
-      whatFormat() {
-        console.log(this.report);
-        console.log(typeof this.report);
-      },
       downloadReport() {
         let text = JSON.stringify(this.report);
         let filename = this.report.provider.tests.archive + ".json";
@@ -394,6 +246,8 @@ <h1>Summary</h1>
         axios.get('opct-report.json')
           .then(resp => { 
                 this.report = resp.data;
+                this.isLoading = false;
+                app_opct.changeMenu('summary').click();
           })
           .catch(error => {
             console.log("Error fetching opct-report.json");
@@ -405,6 +259,10 @@ <h1>Summary</h1>
         this.changeMenuCleanup();
         console.log("changeMenu " + this.currentMenu)
         switch (m) {
+        case "summary":
+          console.log("menu summary selected");
+          this.changeMenuSummary();
+        break;
         case "suite-errors":
           console.log("menu suite-errors selected");
           this.changeMenuSuiteError();
@@ -442,111 +300,149 @@ <h1>Summary</h1>
       changeMenuCleanup() {
         this.menuTitle = '';
         this.menuBody = '';
-        this.tableItems = [];
-        this.tableFields = [];
+      },
+      createTableRevHTML(table=[]) {
+        htmlTable = `<table class="table table-sm table-striped font-monospace"><tbody>`
+        for (let i in table.data) {
+          htmlTable += `<tr>`
+          fieldsDyn = new Map(Object.entries(table.data[i])).keys();
+          for (let h of fieldsDyn) {
+            htmlTable += `<th scope="col">`+ h +`</th>`
+            htmlTable += `<td>`+ table.data[i][h] +`</td>`
+          }
+          htmlTable += `<tr>`
+        }
+        htmlTable += `</tbody></table>`
+        return htmlTable
+      },
+      getTotalCounter(errors=[]) {
+        for (let e in errors) {
+          console.log(e)
+          if (e == "total") {
+            return errors[e]
+          }
+        }
+      },
+      changeMenuSummary() {
+        this.menuTitle = `<h1>Summary</h1><hr/>`
+        if (this.isLoading == true) {
+          return
+        }
+        this.menuBody += `<dt class="text-light bg-secondary ps-1 mb-1"> Cluster </dt>`
+        this.menuBody += `<table class="table table-sm table-striped font-monospace">
+          <tbody><tr><th scope="col">Result file</th><td>`+ this.archiveName +`</td></tr></tbody></table>`
+        dataCluster = [
+          {
+            "OpenShift:": this.report.provider.version.openshift.desired,
+            "Kubernetes:": this.report.provider.version.kubernetes
+          },
+          {
+            "PlatformType:": this.report.provider.infra.platformType,
+            "NetworkType:": this.report.provider.infra.networkType
+          },
+          {
+            "InfraID:": this.report.provider.infra.name,
+            "ClusterID:": this.report.provider.version.openshift.clusterID
+          },
+          {
+            "Topology:": this.report.provider.infra.topology,
+            "ControlPlaneTopology:": this.report.provider.infra.controlPlaneTopology
+          }
+        ]
+        this.menuBody += this.createTableRevHTML(table={data: dataCluster});
+
+        // Section: Tests summary
+        this.menuBody += `<dt class="text-light bg-secondary ps-1 mb-1"> Tests </dt>`
+        dataP = []
+        dataP.push(this.getPluginStat("05-openshift-cluster-upgrade")[0])
+        dataP.push(this.getPluginStat("10-openshift-kube-conformance")[0])
+        dataP.push(this.getPluginStat("20-openshift-conformance-validated")[0])
+        dataP.push(this.getPluginStat("99-openshift-artifacts-collector")[0])
+        const pluginHeaders = new Map(Object.entries(dataP[0]));
+        let tbPluginsRes = {
+          data: dataP,
+          fields: pluginHeaders.keys(),
+          fieldMap: {}
+        }
+        this.menuBody += this.createTableHTML(table=tbPluginsRes);
+
+        this.menuBody += `<dt class="text-light bg-secondary ps-1 mb-1"> Overall counters </dt>`
+        dataPerf = [
+          {
+            "Cluster status:": this.report.provider.version.openshift.overallStatus,
+            "etcd slow req(avg):": this.report.provider.mustGatherInfo.ErrorEtcdLogs.FilterRequestSlowAll.all.StatMean,
+            "Errors Workloads": this.getTotalCounter(this.errorCountersWorkload.errors),
+          },
+          {
+            "Failed checks:": this.report.checks.failures.length,
+            "etcd slow req(max):": this.report.provider.mustGatherInfo.ErrorEtcdLogs.FilterRequestSlowAll.all.StatMax,
+            "Errors Suite": this.errorCountersSuite.counters.total,
+          },
+          {
+            "Network Outages:": this.report.provider.mustGatherInfo.PodNetworkChecks.TotalOutages,
+            "etcd slow req(>1s):": this.report.provider.mustGatherInfo.ErrorEtcdLogs.FilterRequestSlowAll.all.Buckets["1000-inf"],
+            "Errors etcd": this.getTotalCounter(this.report.provider.mustGatherInfo.ErrorEtcdLogs.ErrorCounters),
+          },
+        ]
+        this.menuBody += this.createTableRevHTML(table={data: dataPerf});
       },
       changeMenuSuiteError() {
         this.menuTitle = `<h1>Suite Errors</h1>`
         this.menuBody = this.pageHeadline
         this.menuBody += "<p>Error Counters extracted from logs of end-to-end tests."
-        // TODO: move the tables to use createTable()
-        this.menuBody += `
-<dl>
-  <dt class="text-light bg-secondary ps-1 mb-1">Error Pattern Counters</dt>
-    <dd>
-      <table class="table table-sm table-striped font-monospace">
-        <thead>
-          <tr>
-            <th scope="col">Error Pattern</th>
-            <th scope="col">Counter</th>
-          </tr>
-        </thead>
-        <tbody>`
-          const errorsC = new Map(Object.entries(this.errorCountersSuite.counters));
-          for (let kerror of errorsC.keys()) {
-            this.menuBody += `<tr><td>`+ kerror + `</td>`
-            this.menuBody += `<td>`+ this.errorCountersSuite.counters[kerror] + `</td></tr>`
-          }
-          this.menuBody += `
-        </tbody>
-      </table>
-    </dd>
-  </dl>
-<dl><dt class="text-light bg-secondary ps-1 mb-1">Tests by Error Pattern</dt></dl>`
 
-        let fieldsDefined = false;
-        for (let test of this.errorCountersSuite.tests) {
-          if (fieldsDefined !== false) {
-            for (let tk of test.keys()) {
-              this.tableFields.push({key: tk, label: tk, sortable: true})
-            }
-            fieldsDefined = true;
-          }
-          this.tableItems.push(test);
+        // Table: Errors by pattern
+        if (this.errorCountersSuite.counters !== undefined) {
+          table = this.extractErrorCountersToTable(this.errorCountersSuite.counters)
+          table.header = "Error Pattern Counters"
+          this.menuBody += this.createTableHTML(table=table);
+        }
+
+        // Table: Errors by tests
+        let tbErrorsTests = {
+          header: "Tests by Error Pattern",
+          data: this.errorCountersSuite.tests,
+          headline: "",
+          fields: ["Name", "ID", "Pattern", "Count"],
+          fieldMap: {}
         }
+        this.menuBody += this.createTableHTML(table=tbErrorsTests);
       },
       changeMenuWorkloadError() {
         this.menuTitle = `<h1>Workload Errors</h1>`
         this.menuBody = this.pageHeadline
         this.menuBody += "<p>Error Counters extracted from must-gather.</>"
-        // TODO: move the tables to use createTable()
-        this.menuBody += `
-<dl>
-  <dt class="text-light bg-secondary ps-1 mb-1">Error Counters by Pattern</dt>
-    <dd>
-      <table class="table table-sm table-striped font-monospace">
-        <thead>
-          <tr>
-            <th scope="col">Error Pattern</th>
-            <th scope="col">Counter</th>
-          </tr>
-        </thead>
-        <tbody>`
-          const errorsC = new Map(Object.entries(this.errorCountersWorkload.errors));
-          for (let kerror of errorsC.keys()) {
-            this.menuBody += `<tr><td>`+ kerror + `</td>`
-            this.menuBody += `<td>`+ this.errorCountersWorkload.errors[kerror] + `</td></tr>`
-          }
-          this.menuBody += `
-        </tbody>
-      </table>
-    </dd>
-  </dl>`
 
-          this.menuBody += `
-<dl>
-  <dt class="text-light bg-secondary ps-1 mb-1">Error Counters by Namespace</dt>
-    <dd>
-      <table class="table table-sm table-striped font-monospace">
-        <thead>
-          <tr>
-            <th scope="col">Error Pattern</th>
-            <th scope="col">Counter</th>
-          </tr>
-        </thead>
-        <tbody>`
-          const errorsN = new Map(Object.entries(this.errorCountersWorkload.namespace));
-          for (let ns of errorsN.keys()) {
-            this.menuBody += `<tr><td>`+ ns + `</td>`
-            this.menuBody += `<td>`+ this.errorCountersWorkload.namespace[ns] + `</td></tr>`
-          }
-          this.menuBody += `
-        </tbody>
-      </table>
-    </dd>
-  </dl>`
+        // Table: Errors by pattern
+        if (this.errorCountersWorkload.errors !== undefined) {
+          table = this.extractErrorCountersToTable(this.errorCountersWorkload.errors)
+          table.header = "Error Counters on workloads (pod logs)"
+          this.menuBody += this.createTableHTML(table=table);
+        }
 
-        this.menuBody += `<dl><dt class="text-light bg-secondary ps-1 mb-1">Error Counters by Pod and Pattern</dt></dl>`
-        let fieldsDefined = false;
-        for (let test of this.errorCountersWorkload.logs) {
-          if (fieldsDefined !== false) {
-            for (let tk of test.keys()) {
-              this.tableFields.push({key: tk, label: tk, sortable: true})
-            }
-            fieldsDefined = true;
-          }
-          this.tableItems.push(test);
+        // Table: Errors by namespace
+        let tbErrorsNS = {
+          header: "Error counter by Namespace",
+          data: [],
+          headline: "",
+          fields: ["Pattern", "Counter"],
+          fieldMap: {}
         }
+        const errorsN = new Map(Object.entries(this.errorCountersWorkload.namespace));
+        for (let ns of errorsN.keys()) {
+          tbErrorsNS.data.push({"Pattern": ns, "Counter": this.errorCountersWorkload.namespace[ns]})
+        }
+        this.menuBody += this.createTableHTML(table=tbErrorsNS);
+
+        // Table: Errors by pods
+        let tbErrorsPods = {
+          header: "Error Counters by Pod and Pattern",
+          data: this.errorCountersWorkload.logs,
+          headline: "",
+          fields: ["Name", "Pattern", "Count"],
+          fieldMap: {}
+        }
+        this.menuBody += this.createTableHTML(table=tbErrorsPods);
       },
       changeMenuChecks() {
         this.menuTitle = `<h1>Checks</h1>`
@@ -785,37 +681,39 @@ <h1>Summary</h1>
         return table
       },
       extractErrorCountersETCDLogsToTable(header, ErrorEtcdLogs) {
-        this.menuBody += `<p>Filter Bucket</p>`
-        // FilterRequestSlowAll (Bucket)
-        if (ErrorEtcdLogs.FilterRequestSlowAll !== undefined) {
-          table = this.extractErrorEtcdLogByAggBucketToTable(ErrorEtcdLogs.FilterRequestSlowAll)
-          table.header = header + " (FilterRequestSlowAll by Bucket)"
-          this.menuBody += this.createTableHTML(table=table);
-        }
-        // FilterRequestSlowHour (Bucket)
-        if (ErrorEtcdLogs.FilterRequestSlowHour !== undefined) {
-          table = this.extractErrorEtcdLogByAggBucketToTable(ErrorEtcdLogs.FilterRequestSlowHour)
-          table.header = header + " (FilterRequestSlowHour by Bucket)"
-          this.menuBody += this.createTableHTML(table=table);
-        }
-        this.menuBody += `<p>Filter Stat</p>`
+        this.menuBody += `<p>View Stat/Counters (All)</p>`
         // FilterRequestSlowAll (Stat)
         if (ErrorEtcdLogs.FilterRequestSlowAll !== undefined) {
           table = this.extractErrorEtcdLogByAggStatToTable(ErrorEtcdLogs.FilterRequestSlowAll)
           table.header = header + " (FilterRequestSlowAll by Stat)"
           this.menuBody += this.createTableHTML(table=table);
         }
+        this.menuBody += `<p>View Bucket (All)</p>`
+        // FilterRequestSlowAll (Bucket)
+        if (ErrorEtcdLogs.FilterRequestSlowAll !== undefined) {
+          table = this.extractErrorEtcdLogByAggBucketToTable(ErrorEtcdLogs.FilterRequestSlowAll)
+          table.header = header + " (FilterRequestSlowAll by Bucket)"
+          this.menuBody += this.createTableHTML(table=table);
+        }
+        this.menuBody += `<p>View Stat/Counters (Hourly)</p>`
         // FilterRequestSlowHour (Stat)
         if (ErrorEtcdLogs.FilterRequestSlowHour !== undefined) {
           table = this.extractErrorEtcdLogByAggStatToTable(ErrorEtcdLogs.FilterRequestSlowHour)
           table.header = header + " (FilterRequestSlowHour by Stat)"
           this.menuBody += this.createTableHTML(table=table);
         }
+        this.menuBody += `<p>View Bucket (Hourly)</p>`
+        // FilterRequestSlowHour (Bucket)
+        if (ErrorEtcdLogs.FilterRequestSlowHour !== undefined) {
+          table = this.extractErrorEtcdLogByAggBucketToTable(ErrorEtcdLogs.FilterRequestSlowHour)
+          table.header = header + " (FilterRequestSlowHour by Bucket)"
+          this.menuBody += this.createTableHTML(table=table);
+        }
       },
       changeMenuETCD() {
         this.menuTitle = `<h1>etcd information</h1>`
         this.menuBody = this.pageHeadline
-        this.menuBody += "<p>Information extracted from etcd logs</>"
+        this.menuBody += "<p>Information extracted from etcd logs.</>"
 
         // TODO#1 create checks / summary in the top of page
         // TODO#2 implement checks rules
@@ -824,14 +722,12 @@ <h1>Summary</h1>
           table.header = "Counters for error pattern in etcd logs"
           this.menuBody += this.createTableHTML(table=table);
         }
-
         this.menuBody += `<h2>Aggregated Logs for etcd pods</h2>`
         if (this.report.provider.mustGatherInfo.ErrorEtcdLogs !== undefined) {
           this.extractErrorCountersETCDLogsToTable(
             "Aggregated pod logs 'apply request took too long'",
             this.report.provider.mustGatherInfo.ErrorEtcdLogs)
         }
-
         // by pod
         for (let i in this.report.provider.mustGatherInfo.NamespaceErrors) {
           if (this.report.provider.mustGatherInfo.NamespaceErrors[i].ErrorEtcdLogs !== undefined) {
@@ -944,7 +840,9 @@ <h1>Summary</h1>
       },
       createTableHTML(table=this.defaultTable) {
         htmlTable = `<dl>`
-        htmlTable += `<dt class="text-light bg-secondary ps-1 mb-1">`+ table.header +`</dt>`
+        if (table.header !== undefined) {
+          htmlTable += `<dt class="text-light bg-secondary ps-1 mb-1">`+ table.header +`</dt>`
+        }
         if (table.headline !== undefined) {
           htmlTable += table.headline
         }
@@ -1040,33 +938,25 @@ <h1>Summary</h1>
         }
       },
     },
-// Go template: default data source
-[[ if not .Setup.Frontend.EmbedData ]]
-    created(){
-        this.fetchReport()
-    },
-[[ end ]]
     computed: {
-// Go template: forcing to embed the datasource to prevent CORS (not default)
-[[ if .Setup.Frontend.EmbedData ]]
-      report() {
-        return JSON.parse([[ .Raw ]])
-      },
-[[ end ]]
-pageHeadline() {
+      archiveName() {
         let archive = this.report.summary.tests.archive.split('/')
-        console.log(archive[archive.length-1])
+        // get the file name (with path)
         archive = archive[archive.length-1]
-        if (this.report.summary.tests.archiveDiff != undefined) {
+        if (this.report.summary.tests.archiveDiff !== undefined) {
           let diff = this.report.summary.tests.archiveDiff.split('/')
           diff = diff[diff.length-1]
-          archive += archive + "(diff " + diff + ")"
+          archive = archive + " (diff " + diff + ")"
         }
+        return archive
+      },
+      pageHeadline() {
         let openshift = "OpenShift[" + this.report.provider.version.openshift.desired +"]"
         let k8s = "Kubernetes["+ this.report.provider.version.kubernetes +"]"
         let platformType = "PlatformType["+ this.report.provider.infra.platformType +"]"
         headline = "|> "+ openshift +" "+ k8s +" "+ platformType
-        headline += "<p>|> "+ archive +"</p>"
+        headline += "<p>|> "+ this.archiveName +"</p>"
+        headline += '<hr/>'
         return headline
       },
       errorCountersSuite() {
@@ -1142,12 +1032,25 @@ <h1>Summary</h1>
         counters.namespace = this.rankMapByValue(counters.namespace)
         return counters
       },
+// Go template: forcing to embed the datasource to prevent CORS (not default)
+[[ if .Setup.Frontend.EmbedData ]]
+      report() {
+        return JSON.parse([[ .Raw ]])
+      },
+    }
+[[ else ]]
+// Go template: default data source
+    },
+    created(){
+      this.loadingMessage = '/opct-report.json'
+      this.fetchReport()
     }
+[[ end ]]
   })
 
   /* main */
   document.getElementById("tabDefault").click();
-  app_opct.changeContent('summary')
+  app_opct.changeMenu('summary')
 </script>
 
 </body>
diff --git a/internal/opct/report/checks.go b/internal/opct/report/checks.go
index 725997c2..f238b437 100644
--- a/internal/opct/report/checks.go
+++ b/internal/opct/report/checks.go
@@ -259,7 +259,7 @@ func NewCheckSummary(re *Report) *CheckSummary {
 			// "Acceptable" are relative, we are trying to observe the baselines and set
 			// a "good" value considering a healthy cluster.
 			total := re.Provider.MustGatherInfo.ErrorCounters["total"]
-			if total > 25000 {
+			if total > 30000 {
 				log.Debugf("Check Failed: OPCT-007: want[<=25000] got[%d]", total)
 				return CheckResultFail
 			}
diff --git a/internal/opct/report/report.go b/internal/opct/report/report.go
index 6adb65f0..ecfabe1b 100644
--- a/internal/opct/report/report.go
+++ b/internal/opct/report/report.go
@@ -47,7 +47,7 @@ type ReportResult struct {
 	HasValidBaseline bool                     `json:"hasValidBaseline"`
 	MustGatherInfo   *mustgather.MustGather   `json:"mustGatherInfo,omitempty"`
 	ErrorCounters    *archive.ErrorCounter    `json:"errorCounters,omitempty"`
-	Runtime          *ReportSummaryRuntime    `json:"runtime,omitempty"`
+	Runtime          *ReportRuntime           `json:"runtime,omitempty"`
 }
 
 type ReportSummary struct {
@@ -57,12 +57,9 @@ type ReportSummary struct {
 	Headline string                `json:"headline"`
 }
 
-// TODO: get info about OPCT exec (total time, plugins, etc)
 type ReportSummaryRuntime struct {
-	ServerLogs   []*archive.RuntimeInfoItem `json:"serverLogs,omitempty"`
-	ServerConfig []*archive.RuntimeInfoItem `json:"serverConfig,omitempty"`
-	OpctConfig   []*archive.RuntimeInfoItem `json:"opctConfig,omitempty"`
-	Timers       metrics.Timers             `json:"timers,omitempty"`
+	Timers  metrics.Timers    `json:"timers,omitempty"`
+	Plugins map[string]string `json:"plugins,omitempty"`
 }
 
 type ReportSummaryTests struct {
@@ -169,6 +166,12 @@ type ReportSetupFrontend struct {
 	EmbedData bool
 }
 
+type ReportRuntime struct {
+	ServerLogs   []*archive.RuntimeInfoItem `json:"serverLogs,omitempty"`
+	ServerConfig []*archive.RuntimeInfoItem `json:"serverConfig,omitempty"`
+	OpctConfig   []*archive.RuntimeInfoItem `json:"opctConfig,omitempty"`
+}
+
 func (re *Report) Populate(cs *summary.ConsolidatedSummary) error {
 	cs.Timers.Add("report-populate")
 	re.Summary = &ReportSummary{
@@ -309,7 +312,7 @@ func (re *Report) populateSource(rs *summary.ResultSummary) error {
 
 	// Runtime
 	if reResult.Runtime == nil {
-		reResult.Runtime = &ReportSummaryRuntime{}
+		reResult.Runtime = &ReportRuntime{}
 	}
 	if rs.Sonobuoy != nil && rs.Sonobuoy.MetaRuntime != nil {
 		reResult.Runtime.ServerLogs = rs.Sonobuoy.MetaRuntime