Test freshness page should improve the ability to correlating issues from same builder.
[WebKit.git] / Websites / perf.webkit.org / public / v3 / components / freshness-indicator.js
1 class FreshnessIndicator extends ComponentBase {
2     constructor(lastDataPointDuration, testAgeTolerance, summary, url)
3     {
4         super('freshness-indicator');
5         this._lastDataPointDuration = lastDataPointDuration;
6         this._testAgeTolerance = testAgeTolerance;
7         this._url = url;
8         this._highlighted = false;
9
10         this._renderIndicatorLazily = new LazilyEvaluatedFunction(this._renderIndicator.bind(this));
11     }
12
13     update(lastDataPointDuration, testAgeTolerance, url, highlighted)
14     {
15         this._lastDataPointDuration = lastDataPointDuration;
16         this._testAgeTolerance = testAgeTolerance;
17         this._url = url;
18         this._highlighted = highlighted;
19         this.enqueueToRender();
20     }
21
22     didConstructShadowTree()
23     {
24         const container = this.content('container');
25         container.addEventListener('mouseenter', () => this.dispatchAction('select', this));
26         container.addEventListener('mouseleave', () => this.dispatchAction('unselect'));
27     }
28
29     render()
30     {
31         super.render();
32         this._renderIndicatorLazily.evaluate(this._lastDataPointDuration, this._testAgeTolerance, this._url, this._highlighted);
33
34     }
35
36     _renderIndicator(lastDataPointDuration, testAgeTolerance, url, highlighted)
37     {
38         const element = ComponentBase.createElement;
39         if (!lastDataPointDuration) {
40             this.renderReplace(this.content('container'), new SpinnerIcon);
41             return;
42         }
43
44         const hoursSinceLastDataPoint = this._lastDataPointDuration / 3600 / 1000;
45         const testAgeToleranceInHours = testAgeTolerance / 3600 / 1000;
46         const rating = 1 / (1 + Math.exp(Math.log(1.2) * (hoursSinceLastDataPoint - testAgeToleranceInHours)));
47         const hue = Math.round(120 * rating);
48         const brightness = Math.round(30 + 50 * rating);
49         const indicator = element('a', {id: 'cell', href: url, class: highlighted ? 'highlight' : ''});
50
51         indicator.style.backgroundColor = `hsl(${hue}, 100%, ${brightness}%)`;
52         this.renderReplace(this.content('container'), indicator);
53     }
54
55     static htmlTemplate()
56     {
57         return `<div id='container'></div>`;
58     }
59
60     static  cssTemplate()
61     {
62         return `
63             div {
64                 margin-left: 0;
65                 height: 1.8rem;
66                 width: 1.8rem;
67             }
68             a {
69                 display: block;
70                 height:1.6rem;
71                 width:1.6rem;
72                 border: 0.1rem;
73                 border-color: white;
74                 border-style: solid;
75                 padding: 0;
76             }
77
78             a.highlight {
79                 height: 1.4rem;
80                 width: 1.4rem;
81                 border: 0.2rem;
82                 border-style: solid;
83                 border-color: #0099ff;
84             }`;
85     }
86 }
87
88
89 ComponentBase.defineElement('freshness-indicator', FreshnessIndicator);