fix(timeline): truncate long synced bucket names in sidebar (#757)

* fix(timeline): truncate long synced bucket names in sidebar (#682)

Synced bucket names can exceed 137+ characters, making the timeline
sidebar unusable on smaller screens.

Three fixes:
- CSS text-overflow ellipsis as fallback for any long label
- Abbreviate synced names: show 'watcher-name (synced from host)'
  instead of full 'watcher_localhost-synced-from-remotehost'
- Add title tooltip showing full bucket ID on hover
- Fix: use group.id instead of group.content when looking up bucket
  ID for event editing (content now contains display HTML, not raw ID)

* fix(timeline): add proper HTML escaping in abbreviateBucketName to prevent XSS

Author: TimeToBuildBob

src/visualizations/VisTimeline.vue

@@ -28,6 +28,13 @@ div#visualization {
     pointer-events: none;
   }
 
+  .vis-labelset .vis-label .vis-inner {
+    max-width: 250px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .timeline-timeline {
     font-family: sans-serif !important;
 
@@ -224,6 +231,26 @@ export default {
         alert('selected multiple items: ' + JSON.stringify(properties.items));
       }
     },
+    escapeHtml(str: string): string {
+      return str
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    },
+    abbreviateBucketName(bucketId: string): string {
+      // Abbreviate synced bucket names which can be extremely long (#682)
+      // e.g. "aw-watcher-window_host-synced-from-remotehost" -> "aw-watcher-window (synced from remotehost)"
+      const escaped = this.escapeHtml(bucketId);
+      const syncMatch = bucketId.match(/^([^_]+)_.*-synced-from-(.+)$/);
+      if (syncMatch) {
+        return `<span title="${escaped}">${this.escapeHtml(
+          syncMatch[1]
+        )} (synced from ${this.escapeHtml(syncMatch[2])})</span>`;
+      }
+      return `<span title="${escaped}">${escaped}</span>`;
+    },
     ensureUpdate() {
       // Will only run update() if data available and never ran before
       if (!this.updateHasRun) {
@@ -248,7 +275,8 @@ export default {
             );
           }
         }
-        return { id: bucket.id, content: this.showRowLabels ? bucket.id : '' };
+        const label = this.showRowLabels ? this.abbreviateBucketName(bucket.id) : '';
+        return { id: bucket.id, content: label };
       });
 
       // Build items