<!-- Copyright 2020 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
     http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->

<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-button/paper-button.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;
      }

      a {
        text-decoration: none;
      }

      app-header {
        background-color: #2ba4ad;
        color: #fff;
      }

      paper-button {
        font-weight: normal;
        font-size: 14px;
        -webkit-font-smoothing: antialiased;
      }

      paper-button.green:hover {
        background-color: var(--paper-green-400);
      }

      paper-button.green {
        background-color: var(--paper-green-500);
        color: white;
      }

      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;
      }

      .icon-success {
        color: var(--paper-green-500);
        margin-right: 0.2em;
      }

      .icon-waiting {
        color: var(--paper-yellow-500);
        margin-right: 0.2em;
      }

      .projects {
        min-width: 10em;
      }

      .log {
        width: 80%;
        display: inline;
      }

      .buildHistory {
        margin: 20px 0;
      }

      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="[[!isSuccessful(project)]]">
                    <iron-icon class="icon-error" icon="icons:error"></iron-icon>
                  </template>
                  <template is="dom-if" if="[[!project.history.length]]">
                    <iron-icon class="icon-waiting" icon="icons:error"></iron-icon>
                  </template>
                  [[project.name]]
                </div>
                <template is="dom-if" if="[[project.history.length]]">
                 <div secondary title$="Last built [[toLocalDate(project.finish_time)]]">
                    Last built [[toLocalDate(project.history.0.finish_time)]]
                 </div>
                </template>
                <template is="dom-if" if="[[!project.history.length]]">
                  <div secondary title$="Not built yet">
                    Not built yet
                  </div>
                </template>
              </paper-item-body>
            </paper-item>
          </template>
        </div>
      </paper-card>
      <paper-card class="log">
        <div class="card-content">
          <template is="dom-if" if="[[!project]]">
            Select a project to see logs.
          </template>
          <template is="dom-if" if="[[build_history.length]]">
            Last Successful build:
            <template is="dom-if" if="[[last_successful_build]]">
              <paper-button raised on-click="onLastBuildSuccessful" class="green">
                [[getLocalDate(last_successful_build.finish_time)]]
              </paper-button>
            </template>
            <template is="dom-if" if="[[!last_successful_build]]">
              None yet.
            </template>
              <div class="buildHistory">
                Build History: <br>
                <template is="dom-repeat" items="[[build_history]]" as="history">
                  <paper-button raised on-click="onBuildHistory">
                    <template is="dom-if" if="[[history.success]]">
                      <iron-icon class="icon-success" icon="icons:done"></iron-icon>
                    </template>
                    <template is="dom-if" if="[[!history.success]]">
                      <iron-icon class="icon-error" icon="icons:error"></iron-icon>
                    </template>
                    [[getLocalDate(history.finish_time)]]
                  </paper-button>
                </template>
              </div>
              <template is="dom-if" if=[[!finish_time]]>
              <pre>Select a build to see logs.</pre>
            </template>
              <template is="dom-if" if="[[finish_time]]">
                <a href="/log-[[build_id]].txt" target="_blank" tabindex="-1">
                  <paper-button raised>
                    Open in new tab
                    <iron-icon icon="icons:link"></iron-iron>
                  </paper-button>
                </a>
                <pre>Finish Time : [[finish_time]]</pre>
              </template>
          </template>
          <template is="dom-if" if="[[loading_log]]">
            Loading...
          </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" 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,
          },
          finish_time: {
            type: String,
            value: '',
          }
        }
      }
      static get observers() {
        return ["_routeChanged(route.*)"]
      }

      _routeChanged() {
        if(!this.routeData.project_name)
          this.project = "";
        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
        }
        this.project = this.getProjectByName(this.routeData.project_name);
        this.build_history = this.project.history;
        if (this.project['last_successful_build']){
          this.last_successful_build = this.project.last_successful_build;
        } else{
          this.last_successful_build = "";
        }
        this.log = "";
        this.finish_time = "";
      }

      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;
        }
      }

      requestLog() {
        var ajax = this.$.logxhr;
        ajax.url = "/log-" + this.build_id + ".txt";
        ajax.generateRequest();
        this.loading_log = true;
        this.log = "";
        this.finish_time = this.toLocalDate(this.finish_time);
      }

      onLastBuildSuccessful(e) {
        this.build_id = this.last_successful_build.build_id
        this.finish_time = this.last_successful_build.finish_time
        this.requestLog()
      }

      onBuildHistory(e) {
        this.build_id = e.model.history.build_id
        this.finish_time = e.model.history.finish_time
        this.requestLog()
      }

      showLog(log) {
        return log !== "";
      }

      showTabs() {
        return this.tab_count !== 0;
      }

      toLocalDate(str) {
        let date = new Date(str);
        let ds = date.toString();
        let timezone = ds.substring(ds.indexOf("("));
        return date.toLocaleString() + " " + timezone;
      }

      pad(n) {
        return n<10 ? '0'+n : n;
      }

      getLocalDate(str) {
        let date = new Date(str);
        return date.toLocaleString()
      }

      isSuccessful(project) {
        return (!project.history.length || project.history[0].success)
      }
    }

    window.customElements.define(BuildStatus.is, BuildStatus)
  </script>
</dom-module>