| <!DOCTYPE html> |
| <html> |
| <head> |
| <link type="text/css" rel="stylesheet" href="/dashboard/static/base.css"> |
| <link rel="import" href="/components/polymer/polymer.html"> |
| <link rel="import" href="/components/paper-button/paper-button.html"> |
| |
| <link rel="import" href="/dashboard/elements/select-menu.html"> |
| <link rel="import" href="/dashboard/elements/alerts-table.html"> |
| <link rel="import" href="/dashboard/elements/overlay-message.html"> |
| <link rel="import" href="/dashboard/elements/quick-log.html"> |
| <link rel="import" href="/dashboard/static/alerts.html"> |
| |
| <title>Chrome Performance Alerts</title> |
| <script> |
| 'use strict'; |
| var ANOMALY_LIST = {{anomaly_list | safe}}; |
| var STOPPAGE_ALERT_LIST = {{stoppage_alert_list | safe}}; |
| var SHERIFF_LIST = {{sheriff_list | safe}}; |
| var XSRF_TOKEN = '{{xsrf_token}}'; |
| var NUM_ANOMALIES = {{num_anomalies | safe}}; |
| </script> |
| <style> |
| body { |
| align-items: center; |
| -webkit-align-items: center; |
| } |
| |
| .center { |
| margin: auto; |
| padding: 10px; |
| } |
| |
| /* The action bar contains the graph button and triage button. */ |
| #action-bar { |
| margin-top: 20px; |
| width: 100%; |
| } |
| |
| /* The content container contains everything below the sheriff select menu. */ |
| #content { |
| display: inline-flex; |
| display: -webkit-inline-flex; |
| flex-direction: column; |
| -webkit-flex-direction: column; |
| align-items: flex-start; |
| -webkit-align-items: flex-start; |
| } |
| |
| /* This class indicates a button toggled on (e.g. show improvements). */ |
| .alert-togglebutton { |
| float: right; |
| margin-left: 4px; |
| margin-right: 4px; |
| } |
| |
| #auto-triage-log { |
| padding: 15px 0 15px 0; |
| } |
| |
| #message-bar { |
| top: 26px; |
| } |
| |
| #anomaly-table, #stoppage-alert-table { |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body> |
| {% include 'nav.html' %} |
| <h1>Chrome Performance Alerts</h1> |
| <overlay-message id="message-bar"></overlay-message> |
| <div id="content"> |
| <div id="action-bar"> |
| <select-menu id="sheriff-select"></select-menu> |
| <paper-button raised noink id="improvements-toggle" |
| class="alert-togglebutton">Show improvements</paper-button> |
| <paper-button raised noink id="triaged-toggle" |
| class="alert-togglebutton">Show triaged</paper-button> |
| </div> |
| {% if have_anomalies %} |
| <h2>Performance alerts</h2> |
| <p id='num-alerts'></p> |
| <script> |
| 'use strict'; |
| var numAlertsElement = document.getElementById('num-alerts'); |
| var numAlerts = NUM_ANOMALIES; |
| numAlertsElement.innerText = numAlerts + ( |
| numAlerts == 1 ? ' alert.' : ' alerts.'); |
| document.title += ' (' + numAlerts + ')'; |
| </script> |
| <alerts-table id="anomaly-table" xsrfToken="{{xsrf_token | safe}}"> |
| </alerts-table> |
| {% endif %} |
| {% if have_stoppage_alerts %} |
| <h2>Data stoppage alerts</h2> |
| <alerts-table id="stoppage-alert-table" xsrfToken="{{xsrf_token | safe}}"> |
| </alerts-table> |
| {% endif %} |
| {% if not have_anomalies and not have_stoppage_alerts %} |
| <h2 class="center">All alerts triaged!</h2> |
| <img class="center" src="http://thecatapi.com/api/images/get?api_key=MjUzMDQ&category=space&size=small"> |
| {% endif %} |
| <quick-log id="auto-triage-log" xsrfToken="{{xsrf_token | safe}}" |
| style="width:100%; display:block;"></quick-log> |
| </div> |
| {% include 'analytics.html' %} |
| </body> |
| </html> |
