| <link rel="import" href="../../bower_components/polymer/polymer-element.html"> |
| <link rel="import" href="../../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html"> |
| <link rel="import" href="../../bower_components/app-layout/app-drawer/app-drawer.html"> |
| <link rel="import" href="../../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html"> |
| <link rel="import" href="../../bower_components/app-layout/app-header/app-header.html"> |
| <link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html"> |
| <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html"> |
| <link rel="import" href="../../bower_components/paper-item/paper-item.html"> |
| <link rel="import" href="../../bower_components/paper-item/paper-item-body.html"> |
| <link rel="import" href="../../bower_components/paper-card/paper-card.html"> |
| <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html"> |
| <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> |
| <link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> |
| <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> |
| <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html"> |
| <link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html"> |
| <link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html"> |
| <link rel="import" href="../../bower_components/app-route/app-location.html"> |
| <link rel="import" href="../../bower_components/app-route/app-route.html"> |
| |
| <dom-module id="build-status"> |
| <template> |
| <app-location route="{{route}}" use-hash-as-path></app-location> |
| <app-route route="{{route}}" |
| pattern=":project_name" |
| data="{{routeData}}"> |
| </app-route> |
| <style is="custom-style" include="iron-flex iron-flex-alignment"> |
| <style> |
| .paper-item-link { |
| color: inherit; |
| text-decoration: none; |
| } |
| |
| app-header { |
| background-color: #2ba4ad; |
| color: #fff; |
| } |
| |
| paper-card { |
| margin: 0.5em; |
| } |
| |
| paper-item { |
| cursor: pointer; |
| } |
| |
| paper-tabs { |
| -webkit-font-smoothing: antialiased; |
| width: 100%; |
| margin-bottom: 1px; |
| height: 40px; |
| } |
| |
| :host { |
| display: block; |
| } |
| |
| .icon-error { |
| color: #e83030; |
| margin-right: 0.2em; |
| } |
| |
| .projects { |
| min-width: 10em; |
| } |
| |
| .log { |
| width: 80%; |
| display: inline; |
| } |
| |
| pre { |
| white-space: pre-wrap; |
| } |
| </style> |
| <app-header reveals> |
| <app-toolbar> |
| <div main-title>OSS-Fuzz build status</div> |
| <div><small>(Updated every 30 minutes)</small></div> |
| </app-toolbar> |
| </app-header> |
| <div class="layout horizontal"> |
| <paper-card class="projects"> |
| <div class="card-tabs"> |
| <paper-tabs selected="fuzzing" id="build_type" attr-for-selected="type" on-click="onChanged"> |
| <paper-tab type="fuzzing">Fuzzing Builds</paper-tab> |
| <paper-tab type="coverage">Coverage Builds</paper-tab> |
| </paper-tabs> |
| </div> |
| <div class="card-content"> |
| <template is="dom-repeat" items="[[status.projects]]" as="project"> |
| <paper-item on-tap="onTap"> |
| <paper-item-body two-line> |
| <div> |
| <template is="dom-if" if="[[!project.success]]"> |
| <iron-icon class="icon-error" icon="icons:error"></iron-icon> |
| </template> |
| [[project.name]] |
| </div> |
| <div secondary title$="Last built [[toLocalDate(project.finish_time)]]"> |
| Last built [[toLocalDate(project.finish_time)]] |
| </div> |
| </paper-item-body> |
| </paper-item> |
| </template> |
| </div> |
| </paper-card> |
| <paper-card class="log"> |
| <div class="card-content"> |
| <template is="dom-if" if="[[showMessage(loading_log, log)]]"> |
| Select a project to see logs. |
| </template> |
| <template is="dom-if" if="[[loading_log]]"> |
| Loading... |
| </template> |
| <template is="dom-if" if="[[showLog(log)]]"> |
| <a href="/log-[[build_id]].txt" tabindex="-1"> |
| <iron-icon icon="icons:link"></iron-iron> |
| </a> |
| </template> |
| <pre>[[log]]</pre> |
| </div> |
| </paper-card> |
| </div> |
| <iron-ajax id="status_fuzzing" auto handle-as="json" url="/status.json" on-response="onResponseForFuzzing"></iron-ajax> |
| <iron-ajax id="status_coverage" auto handle-as="json" url="/status-coverage.json" on-response="onResponseForCoverage"></iron-ajax> |
| <iron-ajax id="logxhr" auto handle-as="text" on-response="onLogResponse"></iron-ajax> |
| </template> |
| |
| <script> |
| /** @polymerElement */ |
| class BuildStatus extends Polymer.Element { |
| static get is() { return 'build-status'; } |
| static get properties() { |
| return { |
| log: { |
| type: String, |
| value: '' |
| }, |
| loading_log: { |
| type: Boolean, |
| value: false |
| } |
| }; |
| } |
| static get observers() { |
| return [ |
| '_routeChanged(route.*)' |
| ]; |
| } |
| |
| _routeChanged() { |
| if (!this.status || !this.routeData.project_name) { |
| // If our status json is loaded and there is a project_name specified |
| // in the URL, we can proceed to load that project's log. |
| return; |
| } |
| var project = this.getProjectByName(this.routeData.project_name); |
| |
| this.$.logxhr.url = "/log-" + project.build_id + ".txt"; |
| this.build_id = project.build_id; |
| this.log = ''; |
| this.loading_log = true; |
| } |
| |
| getProjectByName(project_name) { |
| return this.status.projects.find(p => p.name === project_name); |
| } |
| |
| onResponseForFuzzing(e) { |
| this.status_fuzzing = e.detail.response; |
| if (!this.status) { |
| // Show status of the fuzzing builds by default. |
| this.status = this.status_fuzzing; |
| // Manually invoke a _routeChanged call, in order to load the log for |
| // someone going directly to a project's URL. |
| this._routeChanged(); |
| } |
| } |
| |
| onResponseForCoverage(e) { |
| this.status_coverage = e.detail.response; |
| } |
| |
| onLogResponse(e) { |
| this.log = e.detail.response; |
| this.loading_log = false; |
| } |
| |
| onTap(e) { |
| // Change the route, this should auto-magically update the url in the |
| // browser and invoke the _routeChanged method. |
| this.set('route.path', e.model.project.name); |
| } |
| |
| onChanged(e) { |
| if (this.$.build_type.selected == 'coverage') { |
| this.status = this.status_coverage |
| } else { |
| this.status = this.status_fuzzing |
| } |
| } |
| |
| showMessage(loading_log, log) { |
| return !loading_log && log === ''; |
| } |
| |
| showLog(log) { |
| return log !== ''; |
| } |
| |
| toLocalDate(str) { |
| let date = new Date(str); |
| let ds = date.toString(); |
| let timezone = ds.substring(ds.indexOf("(")); |
| return date.toLocaleString() + " " + timezone; |
| } |
| }; |
| |
| window.customElements.define(BuildStatus.is, BuildStatus); |
| </script> |
| </dom-module> |
