Added router priority to webui's list and detail page

webui/src/components/_commons/MainTable.vue

@@ -6,9 +6,12 @@
           <tr class="table-header">
             <th
               v-for="column in columns"
-              v-bind:class="`text-${column.align}`"
-              v-bind:key="column.name">
+              v-bind:class="getColumn(column.name).sortable ? `text-${column.align} cursor-pointer`: `text-${column.align}`"
+              v-bind:key="column.name"
+              @click="getColumn(column.name).sortable ? onSortClick(column.name) : null">
               {{ column.label }}
+              <i v-if="currentSort === column.name" class="material-icons">{{currentSortDir === 'asc' ? 'arrow_drop_down' : 'arrow_drop_up'}}</i>
+              <i v-else style="opacity: 0" class="material-icons">{{currentSortDir === 'asc' ? 'arrow_drop_down' : 'arrow_drop_up'}}</i>
             </th>
           </tr>
         </thead>
@@ -27,9 +30,19 @@
                   v-bind:is="getColumn(column.name).component"
                   v-bind="getColumn(column.name).fieldToProps(row)"
                 >
-                  <template v-if="getColumn(column.name).content">
+                  <template v-if="getColumn(column.name).content && column.name !== 'priority'">
                     {{ getColumn(column.name).content(row) }}
                   </template>
+                  <template v-if="getColumn(column.name).content && column.name === 'priority'">
+                      <div>
+                        {{ getColumn(column.name).content(row).short }}
+                      </div>
+                      <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
+                        <div class="priority-tooltip">
+                          {{ getColumn(column.name).content(row).long }}
+                        </div>
+                      </q-tooltip>
+                  </template>
                 </component>
               </td>
               <td
@@ -72,6 +85,12 @@ export default {
     QSpinnerDots,
     QPageScroller
   },
+  data () {
+    return {
+      currentSort: 'name',
+      currentSortDir: 'asc'
+    }
+  },
   methods: {
     getColumn (columnName) {
       return this.columns.find(c => c.name === columnName) || {}
@@ -80,6 +99,14 @@ export default {
       this.onLoadMore({ page: index })
         .then(() => done())
         .catch(() => done(true))
+    },
+    onSortClick (s) {
+      if (s === this.currentSort) {
+        this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc'
+      }
+      this.currentSort = s
+      this.$emit('update:currentSort', s)
+      this.$emit('update:currentSortDir', this.currentSortDir)
     }
   }
 }
@@ -127,4 +154,8 @@ export default {
     font-size: 14px;
     font-weight: 600;
   }
+
+  .priority-tooltip{
+    font-size: larger;
+  }
 </style>

webui/src/components/_commons/PanelRouterDetails.vue

@@ -73,6 +73,18 @@
           </div>
         </div>
       </q-card-section>
+      <q-card-section v-if="data.priority">
+        <div class="row items-start no-wrap">
+          <div class="col">
+            <div class="text-subtitle2">PRIORITY</div>
+            <q-chip
+              dense
+              class="app-chip app-chip-entry-points">
+              {{ data.priority }}
+            </q-chip>
+          </div>
+        </div>
+      </q-card-section>
       <q-card-section v-if="data.error">
         <div class="row items-start no-wrap">
           <div class="col">