Merge branch 'v2.1' into master

webui/src/components/_commons/PanelRouterDetails.vue

@@ -27,7 +27,7 @@
             <div class="text-subtitle2">RULE</div>
             <q-chip
               dense
-              class="app-chip app-chip-rule">
+              class="app-chip app-chip-wrap app-chip-rule">
               {{ data.rule }}
             </q-chip>
           </div>
@@ -39,7 +39,7 @@
             <div class="text-subtitle2">NAME</div>
             <q-chip
               dense
-              class="app-chip app-chip-name">
+              class="app-chip app-chip-wrap app-chip-name">
               {{ data.name }}
             </q-chip>
           </div>
@@ -66,7 +66,7 @@
               dense
               clickable
               @click.native="$router.push({ path: `/${protocol}/services/${getServiceId()}`})"
-              class="app-chip app-chip-service">
+              class="app-chip app-chip-wrap app-chip-service">
               {{ data.service }}
             </q-chip>
           </div>

webui/src/components/_commons/PanelServiceDetails.vue

@@ -45,7 +45,7 @@
           </div>
         </div>
       </q-card-section>
-      <q-card-section v-if="data.loadBalancer">
+      <q-card-section v-if="data.loadBalancer && $route.meta.protocol !== 'tcp'">
         <div class="row items-start no-wrap">
           <div class="col">
             <div class="text-subtitle2">Pass Host Header</div>
@@ -54,6 +54,19 @@
         </div>
       </q-card-section>
 
+      <q-card-section v-if="data.loadBalancer.terminationDelay">
+        <div class="row items-start no-wrap">
+          <div class="col">
+            <div class="text-subtitle2">Termination Delay</div>
+            <q-chip
+              dense
+              class="app-chip app-chip-name">
+              {{ data.loadBalancer.terminationDelay }} ms
+            </q-chip>
+          </div>
+        </div>
+      </q-card-section>
+
       <q-separator v-if="sticky" />
       <StickyServiceDetails v-if="sticky" :sticky="sticky" :dense="dense"/>
     </q-scroll-area>

webui/src/components/_commons/ToolBarTable.vue

@@ -26,6 +26,8 @@
 </template>
 
 <script>
+import Helps from '../../_helpers/Helps'
+
 export default {
   name: 'ToolBarTable',
   props: ['status', 'filter'],
@@ -36,6 +38,9 @@ export default {
     return {
     }
   },
+  mounted () {
+    this.routeToState(this.$route)
+  },
   computed: {
     getStatus: {
       get () {
@@ -43,6 +48,7 @@ export default {
       },
       set (newValue) {
         this.$emit('update:status', newValue)
+        this.stateToRoute(this.$route, { status: newValue })
       }
     },
     getFilter: {
@@ -51,11 +57,30 @@ export default {
       },
       set (newValue) {
         this.$emit('update:filter', newValue)
+        this.stateToRoute(this.$route, { filter: newValue })
       }
     }
   },
+  watch: {
+    $route (to, from) {
+      this.routeToState(to)
+    }
+  },
   methods: {
-
+    routeToState (route) {
+      for (const query in route.query) {
+        this.$emit(`update:${query}`, route.query[query])
+      }
+    },
+    stateToRoute (route, values) {
+      this.$router.push({
+        path: route.path,
+        query: Helps.removeEmptyObjects({
+          ...route.query,
+          ...values
+        })
+      })
+    }
   },
   created () {