OCPBUGS-32523: [release-4.15] e2e-chart: copy label contents to clipboard when segment is clicked

e2echart/e2e-chart-template.html

@@ -390,6 +390,14 @@ <h5 class="modal-title">Resource</h5>
         return tt
     }
 
+
+    function segmentTooltipFunc(d) {
+        return '<span style="max-inline-size: min-content; display: inline-block;">'
+        + '<strong>' + d.labelVal + '</strong><br/>'
+        + '<strong>From: </strong>' + new Date(d.timeRange[0]).toUTCString() + '<br>'
+        + '<strong>To: </strong>' + new Date(d.timeRange[1]).toUTCString() + '</span>';
+    }
+
     function createTimelineData(timelineVal, timelineData, rawEventIntervals, preconditionFunc, regex) {
         const data = {}
         var now = new Date();
@@ -514,6 +522,9 @@ <h5 class="modal-title">Resource</h5>
         createTimelineData(interestingEvents, timelineGroups[timelineGroups.length - 1].data, eventIntervals, isInterestingOrPathological, regex)
 
         var segmentFunc = function (segment) {
+            // Copy label to clipboard
+            navigator.clipboard.writeText(segment.labelVal);
+
             // for (var i in data) {
             //     if (data[i].group == segment.group) {
             //         var groupdata = data[i].data
@@ -569,7 +580,8 @@ <h5 class="modal-title">Resource</h5>
         maxHeight(10000).
         zColorScale(ordinalScale).
         zoomX([new Date(eventIntervals.items[0].from), new Date(eventIntervals.items[eventIntervals.items.length - 1].to)]).
-        onSegmentClick(segmentFunc)
+        onSegmentClick(segmentFunc).
+        segmentTooltipContent(segmentTooltipFunc)
         (el);
 
 

e2echart/non-spyglass-e2e-chart-template.html

@@ -598,6 +598,13 @@ <h5 class="modal-title">Resource</h5>
         return tt
     }
 
+    function segmentTooltipFunc(d) {
+        return '<span style="max-inline-size: min-content; display: inline-block;">'
+        + '<strong>' + d.labelVal + '</strong><br/>'
+        + '<strong>From: </strong>' + new Date(d.timeRange[0]).toUTCString() + '<br>'
+        + '<strong>To: </strong>' + new Date(d.timeRange[1]).toUTCString() + '</span>';
+    }
+
     function createTimelineData(timelineVal, timelineData, filteredEventIntervals, category) {
         const data = {}
         var now = new Date();
@@ -815,6 +822,8 @@ <h5 class="modal-title">Resource</h5>
         createTimelineData(interestingEvents, timelineGroups[timelineGroups.length - 1].data, filteredEvents, "interesting_events");
 
         var segmentFunc = function (segment) {
+            // Copy label to clipboard
+            navigator.clipboard.writeText(segment.labelVal);
             // for (var i in data) {
             //     if (data[i].group == segment.group) {
             //         var groupdata = data[i].data
@@ -870,7 +879,8 @@ <h5 class="modal-title">Resource</h5>
         maxHeight(10000).
         zColorScale(ordinalScale).
         zoomX([new Date(eventIntervals.items[0].from), new Date(eventIntervals.items[eventIntervals.items.length - 1].to)]).
-        onSegmentClick(segmentFunc)
+        onSegmentClick(segmentFunc).
+        segmentTooltipContent(segmentTooltipFunc)
         (el);