Dynamically create table header

MozillaSecurity · Nov 2, 2021 · db2a2f4 · db2a2f4
1 parent 70fb917
commit db2a2f4
Showing 1 changed file with 25 additions and 125 deletions.
diff --git a/server/frontend/src/components/Crashes/List.vue b/server/frontend/src/components/Crashes/List.vue
@@ -150,121 +150,17 @@
         <thead>
           <tr>
             <th
-              v-on:click.exact="sortBy('id')"
-              v-on:click.ctrl.exact="addSort('id')"
-              :class="{
-                active: sortKeys.includes('id') || sortKeys.includes('-id'),
-              }"
-            >
-              ID
-            </th>
-            <th
-              v-on:click.exact="sortBy('created')"
-              v-on:click.ctrl.exact="addSort('created')"
-              :class="{
-                active:
-                  sortKeys.includes('created') || sortKeys.includes('-created'),
-              }"
-            >
-              Date Added
-            </th>
-            <th
-              v-on:click.exact="sortBy('bucket')"
-              v-on:click.ctrl.exact="addSort('bucket')"
-              :class="{
-                active:
-                  sortKeys.includes('bucket') || sortKeys.includes('-bucket'),
-              }"
-            >
-              Bucket
-            </th>
-            <th
-              v-on:click.exact="sortBy('shortSignature')"
-              v-on:click.ctrl.exact="addSort('shortSignature')"
-              :class="{
-                active:
-                  sortKeys.includes('shortSignature') ||
-                  sortKeys.includes('-shortSignature'),
-              }"
-            >
-              Short Signature
-            </th>
-            <th
-              v-on:click.exact="sortBy('crashAddress')"
-              v-on:click.ctrl.exact="addSort('crashAddress')"
-              :class="{
-                active:
-                  sortKeys.includes('crashAddress') ||
-                  sortKeys.includes('-crashAddress'),
-              }"
-            >
-              Crash Address
-            </th>
-            <th
-              v-on:click.exact="sortBy('testcase__quality')"
-              v-on:click.ctrl.exact="addSort('testcase__quality')"
-              :class="{
-                active:
-                  sortKeys.includes('testcase__quality') ||
-                  sortKeys.includes('-testcase__quality'),
-              }"
-            >
-              Test Status
-            </th>
-            <th
-              v-on:click.exact="sortBy('product__name')"
-              v-on:click.ctrl.exact="addSort('product__name')"
-              :class="{
-                active:
-                  sortKeys.includes('product__name') ||
-                  sortKeys.includes('-product__name'),
-              }"
-            >
-              Product
-            </th>
-            <th
-              v-on:click.exact="sortBy('product__version')"
-              v-on:click.ctrl.exact="addSort('product__version')"
-              :class="{
-                active:
-                  sortKeys.includes('product__version') ||
-                  sortKeys.includes('-product__version'),
-              }"
-            >
-              Version
-            </th>
-            <th
-              v-on:click.exact="sortBy('platform__name')"
-              v-on:click.ctrl.exact="addSort('platform__name')"
-              :class="{
-                active:
-                  sortKeys.includes('platform__name') ||
-                  sortKeys.includes('-platform__name'),
-              }"
-            >
-              Platform
-            </th>
-            <th
-              v-on:click.exact="sortBy('os__name')"
-              v-on:click.ctrl.exact="addSort('os__name')"
-              :class="{
-                active:
-                  sortKeys.includes('os__name') ||
-                  sortKeys.includes('-os__name'),
-              }"
-            >
-              OS
-            </th>
-            <th
-              v-on:click.exact="sortBy('tool__name')"
-              v-on:click.ctrl.exact="addSort('tool__name')"
+              v-for="(column, index) in columns"
+              :key="index"
+              v-on:click.exact="sortBy(column.sortKey)"
+              v-on:click.ctrl.exact="addSort(column.sortKey)"
               :class="{
                 active:
-                  sortKeys.includes('tool__name') ||
-                  sortKeys.includes('-tool__name'),
+                  sortKeys.includes(column.sortKey) ||
+                  sortKeys.includes(`-${column.sortKey}`),
               }"
             >
-              Tool
+              {{ column.desc }}
             </th>
           </tr>
         </thead>
@@ -298,19 +194,7 @@ import Row from "./Row.vue";
 import HelpJSONQueryPopover from "../HelpJSONQueryPopover.vue";
 
 const pageSize = 100;
-const validSortKeys = [
-  "bucket",
-  "crashAddress",
-  "created",
-  "id",
-  "os__name",
-  "platform__name",
-  "product__name",
-  "product__version",
-  "shortSignature",
-  "testcase__quality",
-  "tool__name",
-];
+
 const validFilters = {
   bucket: "Bucket",
   client__name: "Client name",
@@ -325,6 +209,21 @@ const validFilters = {
   tool__name: "Tool",
   tool__name__contains: "Tool (sub-string match)",
 };
+
+const columns = [
+  { desc: "ID", sortKey: "id" },
+  { desc: "Date Added", sortKey: "created" },
+  { desc: "Bucket", sortKey: "bucket" },
+  { desc: "Short Signature", sortKey: "shortSignature" },
+  { desc: "Crash Address", sortKey: "crashAddress" },
+  { desc: "Test Status", sortKey: "testcase__quality" },
+  { desc: "Product", sortKey: "product__name" },
+  { desc: "Version", sortKey: "product__version" },
+  { desc: "Platform", sortKey: "platform__name" },
+  { desc: "OS", sortKey: "os__name" },
+  { desc: "Tool", sortKey: "tool__name" },
+];
+
 const defaultSortKey = "-id";
 
 export default {
@@ -350,6 +249,7 @@ export default {
     advancedQueryError: "",
     advancedQueryStr: "",
     canUnshowBucketed: true,
+    columns: columns,
     crashes: null,
     currentEntries: "?",
     currentPage: 1,
@@ -379,7 +279,7 @@ export default {
       if (Object.prototype.hasOwnProperty.call(hash, "sort")) {
         const sortKeys = hash.sort.split(",").filter((key) => {
           const realKey = key.startsWith("-") ? key.substring(1) : key;
-          if (validSortKeys.includes(realKey)) {
+          if (columns.some((c) => c.sortKey === realKey)) {
             return true;
           }
           // eslint-disable-next-line no-console