fix URL displayed (#833)

* fix the inconsistency in the truncation length of the URL displayed on the inspector page

* fix the inconsistency in the truncation length of the URL displayed on the inspector page

* fix the url displayed on the inspector page

frontend/src/views/inspector/FlowList.vue

@@ -98,7 +98,7 @@
 
       <template v-slot:item.request="{ item }">
         <v-row class="my-0 ml-0 mr-1">
-          <span class="flow-list-item-url">
+          <span class="flow-list-item-url" :style="{maxWidth:urlMaxWidth+'px'}">
             <span>{{ item.request.scheme }}</span>
             <span v-if="item.request.scheme">://</span>
 
@@ -193,6 +193,8 @@ export default {
   },
   data () {
     return {
+      urlMaxWidth:0,
+      resizeObserver:null,
       tableSize: {
         width: 0,
         height: 0,
@@ -272,13 +274,17 @@ export default {
       }, 1000)
   },
   mounted () {
+    this.initResizeObserver();
     // The maximum number of clicks per second is limited to 4 times. 
     // Too high click frequency may cause jumping if the refresh is not timely
     this.debouncedKeyboardSelectFlow = debounce(this.keyboardSelctFlow, 250);
     document.addEventListener('keydown', this.debouncedKeyboardSelectFlow);
   },
   beforeDestroy () {
     document.removeEventListener('keydown', this.debouncedKeyboardSelectFlow);
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
   },
   destroyed () {
     this.$io.removeListener('action', this.resetRefreshGapTime)
@@ -331,6 +337,32 @@ export default {
       this.refreshGapTime = 1
       this.lastRefreshTime = 1
     },
+    initResizeObserver() {
+      const tableWrapper = this.$el.querySelector('.v-data-table__wrapper');
+      if (tableWrapper) {
+        const debouncedCalculateUrlMaxWidth = debounce((width) => {
+          this.calculateUrlMaxWidth(width);
+        }, 250);
+        this.resizeObserver = new ResizeObserver(entries => {
+          for (let entry of entries) {
+            debouncedCalculateUrlMaxWidth(entry.contentRect.width);
+          }
+        });
+        this.resizeObserver.observe(tableWrapper);
+      }
+    },
+    calculateUrlMaxWidth(tableWidth){
+      /* widths of fixed columns
+      source: 105px
+      method: 60px
+      status: 50px
+      start_time: 70px
+      duration: 70px
+      size: 70px
+      */
+      const otherColumnsWidth=105+60+50+70+70+70;
+      this.urlMaxWidth=tableWidth-otherColumnsWidth
+    },
     onTableResize () {
       const height = window.innerHeight - 44 - 40 - 12 - 26 - 7 - 1 - 8 - 32 - 12 - 12 - 28
       /* reset table height
@@ -593,7 +625,6 @@ export default {
 .flow-list-item-url {
   display: inline-block;
   word-break: keep-all;
-  max-width: 900px;
   width: calc(100% - 100px);
   white-space: nowrap;
   overflow: hidden;

lyrebird/version.py

@@ -1,3 +1,3 @@
-IVERSION = (2, 25, 3)
+IVERSION = (2, 25, 4)
 VERSION = ".".join(str(i) for i in IVERSION)
 LYREBIRD = "Lyrebird " + VERSION