Add more pages in the WebUI

webui/src/components/_commons/PanelServers.vue

@@ -0,0 +1,123 @@
+<template>
+  <q-card flat bordered v-bind:class="['panel-servers', {'panel-servers-dense':isDense}]">
+    <q-scroll-area :thumb-style="appThumbStyle" style="height:100%;">
+      <q-card-section>
+        <div class="row items-start no-wrap">
+          <div class="col-3">
+            <div class="text-subtitle2 text-table">Status</div>
+          </div>
+          <div class="col-9">
+            <div class="text-subtitle2 text-table">URL</div>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <div v-for="(server, index) in data.loadBalancer.servers" :key="index">
+        <q-card-section>
+          <div class="row items-center no-wrap">
+            <div class="col-3">
+              <div class="block-right-text">
+                <avatar-state v-if="data.serverStatus" :state="data.serverStatus[server.url || server.address] | status "/>
+                <avatar-state v-if="!data.serverStatus" :state="'DOWN' | status"/>
+              </div>
+            </div>
+            <div class="col-9">
+              <q-chip
+                dense
+                class="app-chip app-chip-rule">
+                {{ server.url || server.address}}
+              </q-chip>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+      </div>
+    </q-scroll-area>
+  </q-card>
+</template>
+
+<script>
+import AvatarState from './AvatarState'
+
+export default {
+  name: 'PanelServers',
+  props: ['data', 'dense'],
+  components: {
+    AvatarState
+  },
+  computed: {
+    isDense () {
+      return this.dense !== undefined
+    }
+  },
+  filters: {
+    status (value) {
+      if (value === 'UP') {
+        return 'positive'
+      }
+      return 'negative'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  @import "../../css/sass/variables";
+
+  .panel-servers {
+    height: 600px;
+    &-dense{
+      height: 400px;
+    }
+    .q-card__section {
+      padding: 12px 24px;
+      + .q-card__section {
+        padding-top: 0;
+      }
+    }
+
+    .block-right-text{
+      height: 32px;
+      line-height: 32px;
+      .q-avatar{
+        float: left;
+      }
+      &-label{
+        font-size: 14px;
+        font-weight: 600;
+        color: $app-text-grey;
+        float: left;
+        margin-left: 10px;
+        text-transform: capitalize;
+        &-enabled {
+          color: $positive;
+        }
+        &-disabled {
+          color: $negative;
+        }
+        &-warning {
+          color: $warning;
+        }
+      }
+    }
+
+    .text-subtitle2 {
+      font-size: 11px;
+      color: $app-text-grey;
+      line-height: 16px;
+      margin-bottom: 4px;
+      text-align: left;
+      letter-spacing: 2px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .text-table {
+      font-size: 14px;
+      font-weight: 700;
+      letter-spacing: normal;
+      text-transform: none;
+    }
+  }
+
+</style>