fix(webui): fix table width if long URLs are present

Author: marle3003

webui/src/components/dashboard/http/Requests.vue

@@ -6,6 +6,7 @@ import { usePrettyHttp } from '@/composables/http'
 import { Modal, Tooltip } from 'bootstrap'
 import RegexInput from '@/components/RegexInput.vue'
 import { getRouteName, useDashboard } from '@/composables/dashboard';
+import { usePrettyText } from '@/composables/usePrettyText'
 
 const props = defineProps({
     serviceName: { type: String, required: false},
@@ -29,12 +30,15 @@ const { dashboard } = useDashboard()
 const { events: data, close } = dashboard.value.getEvents('http', ...labels.value)
 const { format, duration } = usePrettyDates()
 const { formatStatusCode } = usePrettyHttp()
+const { adaptiveTruncate } = usePrettyText()
 const { services, close: closeServices } = dashboard.value.getServices('http', true);
 const dialogRef = useTemplateRef('dialogRef')
 let dialog: Modal | undefined;
 const urlValue = useTemplateRef<ComponentPublicInstance<typeof RegexInput>>('urlValue');
 const requestHeaderValueRefs = ref<any[]>([])
 const responseHeaderValueRefs = ref<any[]>([])
+const urlCell = useTemplateRef<HTMLElement>('urlCell');
+const dynamicLimit = ref(80);
 type CheckboxFilter = 'Not' | 'Single' | 'Multi'
 interface Filter {
     service: MultiFilterItem
@@ -81,6 +85,14 @@ const filter = reactive<Filter>({
     }
 )
 
+const updateLimit = () => {
+  if (urlCell.value) {
+    const width = urlCell.value.offsetWidth;
+    dynamicLimit.value = Math.floor(width / 9);
+  }
+};
+
+const observer = new ResizeObserver(updateLimit);
 onMounted(() => {
     dialog = Modal.getOrCreateInstance(dialogRef.value!);
     const s = localStorage.getItem(`http-requests-${getFilterCacheKey()}`)
@@ -92,6 +104,9 @@ onMounted(() => {
     tooltipTriggerList.forEach(el => new Tooltip(el, {
         trigger: 'hover'
     }))
+    if (urlCell.value) {
+        observer.observe(urlCell.value);
+    }
 })
 
 function goToRequest(event: ServiceEvent, openInNewTab = false){
@@ -323,6 +338,7 @@ const method = computed({
 onUnmounted(() => {
     close()
     closeServices()
+    observer.disconnect()
 })
 function showDialog() {
     dialog?.show()
@@ -590,7 +606,7 @@ function mergeDeep<T>(target: T, source: Partial<T>): T {
                         <tr>
                             <th v-if="hasDeprecatedRequests" scope="col" class="text-center" style="width: 5px;"></th>
                             <th scope="col" class="text-left col-1">Method</th>
-                            <th scope="col" class="text-left col">URL</th>
+                            <th scope="col" class="text-left col" ref="urlCell">URL</th>
                             <th scope="col" class="text-center col-1">Status Code</th>
                             <th scope="col" class="text-center col-2">Time</th>
                             <th scope="col" class="text-center col-1">Duration</th>
@@ -608,7 +624,7 @@ function mergeDeep<T>(target: T, source: Partial<T>): T {
                             </td>
                             <td>
                                 <router-link @click.stop class="row-link" :to="{ name: getRouteName('httpRequest').value, params: {id: event.id} }">
-                                    {{ eventData(event).request.url }}
+                                    {{ adaptiveTruncate(eventData(event).request.url, dynamicLimit) }}
                                 </router-link>
                             </td>
                             <td class="text-center">{{ formatStatusCode(eventData(event).response.statusCode.toString()) }}</td>