Changeset 247168 in webkit

Timestamp:

Jul 5, 2019 12:19:28 PM (5 years ago)

Author:

Dewei Zhu

Message:

Test freshness page should expose revision information for latest build on tooltip.
​https://bugs.webkit.org/show_bug.cgi?id=199483

Reviewed by Ryosuke Niwa.

Added latest build revision information on test freshness page tooltip.

• public/v3/pages/test-freshness-page.js: Add build revision information on tooltip.

(TestFreshnessPage.prototype.didConstructShadowTree):
(TestFreshnessPage.prototype._fetchTestResults):
(TestFreshnessPage.prototype.render):
(TestFreshnessPage.prototype._renderTooltip):
(TestFreshnessPage.cssTemplate):

Location:

trunk/Websites/perf.webkit.org

Files:

• ChangeLog (modified) (1 diff)
• public/v3/pages/test-freshness-page.js (modified) (10 diffs)

trunk/Websites/perf.webkit.org/ChangeLog

@@ +1 @@
+2019-07-03  Dewei Zhu  <dewei_zhu@apple.com>
+
+        Test freshness page should expose revision information for latest build on tooltip.
+        https://bugs.webkit.org/show_bug.cgi?id=199483
+
+        Reviewed by Ryosuke Niwa.
+
+        Added latest build revision information on test freshness page tooltip.
+
+        * public/v3/pages/test-freshness-page.js: Add build revision information on tooltip.
+        (TestFreshnessPage.prototype.didConstructShadowTree):
+        (TestFreshnessPage.prototype._fetchTestResults):
+        (TestFreshnessPage.prototype.render):
+        (TestFreshnessPage.prototype._renderTooltip):
+        (TestFreshnessPage.cssTemplate):
+
 2019-06-26  Dewei Zhu  <dewei_zhu@apple.com>
 

trunk/Websites/perf.webkit.org/public/v3/pages/test-freshness-page.js

@@ -20 +20 @@
     didConstructShadowTree()
     {
-        const tooltipContainer = this.content('tooltip-container');
-        tooltipContainer.addEventListener('mouseenter', () => {
+        const tooltipTable = this.content('tooltip-table');
+        tooltipTable.addEventListener('mouseenter', () => {
             this._hoveringTooltip = true;
             this.enqueueToRender();
         });
-        tooltipContainer.addEventListener('mouseleave', () => {
+        tooltipTable.addEventListener('mouseleave', () => {
             this._hoveringTooltip = false;
             this.enqueueToRender();
@@ -90 +90 @@
 
                     let timeForLatestBuild = startTime;
-                    let lastBuildLink = null;
+                    let lastBuild = null;
                     let builder = null;
+                    let commitSetOfLastPoint = null;
                     const lastPoint = currentTimeSeries.lastPoint();
                     if (lastPoint) {
@@ -102 +103 @@
                             if (build.buildTime().getTime() >= timeForLatestBuild) {
                                 timeForLatestBuild = build.buildTime().getTime();
-                                lastBuildLink = build.url();
+                                lastBuild = build;
                                 builder = build.builder();
                             }
                         }
+                        commitSetOfLastPoint = lastPoint.commitSet();
                     }
 
                     lastDataPointByMetric.set(metric, {time: timeForLatestBuild, hasCurrentDataPoint: !!lastPoint,
-                        lastBuildLink, builder});
+                        lastBuild, builder, commitSetOfLastPoint});
                     this.enqueueToRender();
                 });
@@ -123 +125 @@
 
         let buildSummaryForCurrentlyHighlightedIndicator = null;
-        let buildLinkForCurrentlyHighlightedIndicator = null;
+        let buildForCurrentlyHighlightedIndicator = null;
+        let commitSetForCurrentHighlightedIndicator = null;
         const builderForCurrentlyHighlightedIndicator = this._currentlyHighlightedIndicator ? this._builderByIndicator.get(this._currentlyHighlightedIndicator) : null;
         for (const [platform, lastDataPointByMetric] of this._lastDataPointByConfiguration.entries()) {
@@ -137 +140 @@
                 if (this._currentlyHighlightedIndicator && this._currentlyHighlightedIndicator === indicator) {
                     buildSummaryForCurrentlyHighlightedIndicator = summary;
-                    buildLinkForCurrentlyHighlightedIndicator = lastDataPoint.lastBuildLink;
+                    buildForCurrentlyHighlightedIndicator = lastDataPoint.lastBuild;
+                    commitSetForCurrentHighlightedIndicator = lastDataPoint.commitSetOfLastPoint;
                 }
                 this._builderByIndicator.set(indicator, lastDataPoint.builder);
@@ -143 +147 @@
             }
         }
-        this._renderTooltipLazily.evaluate(this._currentlyHighlightedIndicator, this._hoveringTooltip, buildSummaryForCurrentlyHighlightedIndicator, buildLinkForCurrentlyHighlightedIndicator);
-    }
-
-    _renderTooltip(indicator, hoveringTooltip, buildSummary, buildLink)
+        this._renderTooltipLazily.evaluate(this._currentlyHighlightedIndicator, this._hoveringTooltip, buildSummaryForCurrentlyHighlightedIndicator, buildForCurrentlyHighlightedIndicator, commitSetForCurrentHighlightedIndicator);
+    }
+
+    _renderTooltip(indicator, hoveringTooltip, buildSummary, build, commitSet)
     {
         if (!indicator || !buildSummary) {
-            this.content('tooltip-container').style.display = hoveringTooltip ? null : 'none';
+            this.content('tooltip-table').style.display = hoveringTooltip ? null : 'none';
             return;
         }
         const element = ComponentBase.createElement;
+        const link = ComponentBase.createLink;
 
         const rect = indicator.element().getBoundingClientRect();
-        const tooltipContainer = this.content('tooltip-container');
-        tooltipContainer.style.display = null;
-
-        const tooltipContainerComputedStyle = getComputedStyle(tooltipContainer);
+        const tooltipTable = this.content('tooltip-table');
+        tooltipTable.style.display = null;
+
+        const tooltipContainerComputedStyle = getComputedStyle(tooltipTable);
         const containerMarginTop = parseFloat(tooltipContainerComputedStyle.paddingTop);
         const containerMarginLeft = parseFloat(tooltipContainerComputedStyle.marginLeft);
 
-        tooltipContainer.style.position = 'absolute';
-        tooltipContainer.style.top = rect.top - (tooltipContainer.offsetHeight + containerMarginTop)  + 'px';
-        tooltipContainer.style.left = rect.left + rect.width / 2 - tooltipContainer.offsetWidth / 2 + containerMarginLeft + 'px';
-
-        this.renderReplace(tooltipContainer, [element('p', buildSummary), buildLink ? element('a', {href: buildLink}, 'Latest Build') : []]);
+        tooltipTable.style.position = 'absolute';
+        tooltipTable.style.top = rect.top - (tooltipTable.offsetHeight + containerMarginTop)  + 'px';
+        tooltipTable.style.left = rect.left + rect.width / 2 - tooltipTable.offsetWidth / 2 + containerMarginLeft + 'px';
+
+        let tableContent = [element('tr', element('td', {colspan: 2}, buildSummary))];
+        if (commitSet.repositories().length)
+            tableContent.push(element('tr', element('th', {colspan: 2}, 'Latest build information')));
+
+        tableContent.push(Repository.sortByNamePreferringOnesWithURL(commitSet.repositories()).map((repository) => {
+            const commit = commitSet.commitForRepository(repository);
+            return element('tr', [
+                element('td', repository.name()),
+                element('td', commit.url() ? link(commit.label(), commit.label(), commit.url(), true) : commit.label())
+            ]);
+        }));
+
+        if (build) {
+            const url = build.url();
+            const buildNumber = build.buildNumber();
+            tableContent.push(element('tr', [
+                element('td', 'Build'),
+                element('td', {colspan: 2}, [
+                    url ? link(buildNumber, build.label(), url, true) : buildNumber
+                ]),
+            ]));
+        }
+
+        this.renderReplace(tooltipTable,  tableContent);
     }
 
@@ -218 +246 @@
     static htmlTemplate()
     {
-        return `<section class="page-with-heading"><div id="tooltip-container"></div><table id="test-health"></table></section>`;
+        return `<section class="page-with-heading"><table id="tooltip-table"></table><table id="test-health"></table></section>`;
     }
 
@@ -309 +337 @@
                 border-top: calc(1.6rem - 1px) solid transparent;
             }
-            #tooltip-container {
+            #tooltip-table {
                 width: 22rem;
-                height: 2rem;
                 background-color: #34495E;
                 opacity: 0.9;
@@ -319 +346 @@
                 z-index: 1;
                 text-align: center;
-            }
-            #tooltip-container::after {
+                display: inline-table;
+                color: white;
+            }
+            #tooltip-table td {
+                overflow: hidden;
+                max-width: 22rem;
+                text-overflow: ellipsis;
+            }
+            #tooltip-table::after {
                 content: " ";
                 position: absolute;
@@ -330 +364 @@
                 border-color: #34495E transparent transparent transparent;
             }
-            #tooltip-container p {
-                color: white;
-                margin: 0;
-            }
-            #tooltip-container a {
+            #tooltip-table a {
                 color: #B03A2E;
                 font-weight: bold;