IGNITE-24288 Add system view data to HTML report (#297)

Author: chesnokoff

modules/performance-statistics-ext/report/index.html

@@ -78,6 +78,10 @@
                         <a class="nav-link" data-toggle="tab" href="#computeStatisticsTab" role="tab"
                            aria-selected="false">Tasks and jobs</a>
                     </li>
+                    <li class="nav-item">
+                        <a class="nav-link" data-toggle="tab" href="#systemViewTab" role="tab"
+                           aria-selected="false">System views</a>
+                    </li>
                 </ul>
             </div>
         </nav>
@@ -150,6 +154,15 @@ <h2 class="mt-4">Overall statistics</h2>
                     <h2 class="mt-4">Top of slowest tasks</h2>
                     <table data-toggle="table" id="topSlowComputeTable"></table>
                 </div>
+                <div class="tab-pane fade" id="systemViewTab" role="tabpanel">
+                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+                        <h1 class="h2">System views</h1>
+                    </div>
+                       <select id="sysViewSearchNodes" class="selectpicker" data-live-search="true"></select>
+                    <select id="searchViews" class="selectpicker" data-live-search="true"></select>
+
+                    <div id="systemViewTableDiv"></div>
+                </div>
             </div>
         </main>
     </div>
@@ -186,6 +199,7 @@ <h2 class="mt-4">Top of slowest tasks</h2>
 <script type="text/javascript" src="js/indexQueryTab.js"></script>
 <script type="text/javascript" src="js/txTab.js"></script>
 <script type="text/javascript" src="js/computeTab.js"></script>
+<script type="text/javascript" src="js/systemViewTab.js"></script>
 
 </body>
 </html>

modules/performance-statistics-ext/report/js/systemViewTab.js

@@ -0,0 +1,90 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const sysViewSearchNodesSelect = $('#sysViewSearchNodes');
+const searchViewsSelect = $('#searchViews');
+
+function generateColumns(viewName, nodeId) {
+    const keys = [];
+
+    if (nodeId === "total")
+        keys.push("viewNodeId");
+
+    const hasSchema = Object.values(REPORT_DATA['systemView']).some(nodeData => {
+        if (nodeData[viewName]) {
+            keys.push(...nodeData[viewName]['schema']);
+            return true;
+        }
+        return false;
+    });
+
+    if (!hasSchema)
+        return null;
+
+    return keys.map((key, index) => ({
+        field: index,
+        title: key,
+        sortable: true
+    }));
+}
+
+function generateRows(viewName, nodeId) {
+    if (nodeId !== "total") {
+        const view = REPORT_DATA['systemView'][nodeId][viewName];
+        if (view)
+            return view['data'];
+
+        return [];
+    }
+
+    return Object.entries(REPORT_DATA['systemView']).flatMap(([nodeId, nodeData]) => {
+        if (!nodeData[viewName])
+            return [];
+
+        return nodeData[viewName]['data'].map(row => [nodeId, ...row]);
+    });
+}
+
+function drawSystemViewsTable() {
+    const div = document.getElementById('systemViewTableDiv');
+    div.innerHTML = "";
+
+    const nodeId = sysViewSearchNodesSelect.val();
+    const viewName = searchViewsSelect.val();
+
+    const columns = generateColumns(viewName, nodeId);
+    const rows = generateRows(viewName, nodeId);
+
+    const table = document.createElement('table');
+
+    table.id = 'systemViewTable';
+    div.appendChild(table);
+
+    $(table).bootstrapTable({
+        formatNoMatches: () => `The "${viewName}" system view is empty on node "${nodeId}".`,
+        pagination: true,
+        search: true,
+        columns: columns,
+        data: rows,
+        sortOrder: 'desc'
+    });
+}
+
+buildSelectNodesSystemView(sysViewSearchNodesSelect, drawSystemViewsTable);
+buildSelectSystemViews(searchViewsSelect, drawSystemViewsTable);
+
+drawSystemViewsTable();

modules/performance-statistics-ext/report/js/utils.js

@@ -84,3 +84,22 @@ function buildSelectNodes(el, onSelect) {
 
     el.on('changed.bs.select', onSelect);
 }
+
+/** Builds bootstrap-select for nodes in system view tab. */
+function buildSelectNodesSystemView(el, onSelect) {
+    el.append('<option data-content="<b>All nodes</b>" value="total"/>');
+
+    Object.keys(REPORT_DATA['systemView']).forEach(nodeId =>
+        el.append('<option data-content="' + nodeId + '" value="' + nodeId + '"/>'));
+
+    el.on('changed.bs.select', onSelect);
+}
+
+/** Builds bootstrap-select for system views. */
+function buildSelectSystemViews(el, onSelect) {
+    const views = new Set(Object.values(REPORT_DATA['systemView']).flatMap(nodeData => Object.keys(nodeData)));
+
+    views.forEach(view => el.append('<option data-content="' + view + '" value="' + view + '"/>'));
+
+    el.on('changed.bs.select', onSelect);
+}