From 44c0672028a106d1d0eeb2512a9f7af209705a16 Mon Sep 17 00:00:00 2001
From: Yin Zhang <yinzz@google.com>
Date: Mon, 18 Mar 2024 12:55:04 -0700
Subject: [PATCH] Internal Changes

PiperOrigin-RevId: 616919400
---
 .../tf_trace_viewer/tf-trace-viewer.html      | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/plugin/trace_viewer/tf_trace_viewer/tf-trace-viewer.html b/plugin/trace_viewer/tf_trace_viewer/tf-trace-viewer.html
index ef65d572..febf47d9 100644
--- a/plugin/trace_viewer/tf_trace_viewer/tf-trace-viewer.html
+++ b/plugin/trace_viewer/tf_trace_viewer/tf-trace-viewer.html
@@ -140,6 +140,14 @@
     overflow-wrap: anywhere;
   }
 
+  a.button {
+    padding: 1px 6px;
+    border: 1px outset buttonborder;
+    border-radius: 3px;
+    color: buttontext;
+    background-color: buttonface;
+    text-decoration: none;
+  }
 </style>
 
 <div class="no-webcomponents-container hidden">
@@ -288,6 +296,7 @@
       _replaceModel: {type: Boolean, value: true},
       _hosts: {type: Array, value: []},
       _showFilterForm: {type: Boolean, value: true},
+      _enableTrimmedSessionCreation: {type: Boolean, value: false},
     },
 
     ready: function() {
@@ -348,6 +357,9 @@
           this._resolution = Number(value);
         } else if (key === 'enable_filter') {
           this._showFilterForm = !(value === 'false');
+        } else if (key === 'enable_trim') {
+          console.log('1111 setting enable trim to true...')
+          this._enableTrimmedSessionCreation = true;
         }
       }.bind(this));
 
@@ -430,6 +442,19 @@
       }
     },
 
+    createTrimmedSessionButton: function(event) {
+      // Contract: using start and duration field in the event object
+      const startTimeNs = Math.round(event.start * 10**6);
+      const endTimeNs = Math.round(startTimeNs + event.duration * 10**6);
+      // Constract: example traceDataUrl: /trace_viewer.json?session_id=narges-8993794330573677829&hosts=uybui3
+      const traceViewerLink = new URL(window.location.origin + this.traceDataUrl);
+      const host = traceViewerLink.searchParams.get('hosts').split(',')[0];
+      const trimmedSessionLink = new URL(`${window.top.location.origin}/trimmed_session?session_id=${this._sessionId}&host=${host}&range_start_ns=${startTimeNs}&range_end_ns=${endTimeNs}`);
+      const trimmedSessionCreationLinkElement = document.createElement('div');
+      trimmedSessionCreationLinkElement.innerHTML = `Create session trimmed on ${event.title}: <a href="${trimmedSessionLink.href}" target="_blank" class="button">Create</a>`;
+      this._eventDetails.appendChild(trimmedSessionCreationLinkElement);
+    },
+
     createCrossToolLink: function(toolName, toolLabel, params, text) {
       const toolLink =
             new URL(`${window.location.origin}/${toolName}/${this._sessionId}`);
@@ -580,6 +605,9 @@
                 event.args['group_id'];
           this._eventDetails.appendChild(traceViewerStepLinkElement);
         }
+        if (this._sessionId && this._enableTrimmedSessionCreation) {
+          this.createTrimmedSessionButton(event);
+        }
       }
     },