agola-web/src/components/rundetail.vue

<template>
  <div>
    <div v-if="run != null">
      <div class="run">
        <div :class="runResultClass(run)">
          <div class="run-content">
            <div class="item-content columns">
              <div class="run-title column is-10">
                <span class="run-name">{{run.name}}</span>
                <span
                  class="tag"
                  :class="'is-'+runResultClass(run)"
                >{{ runStatus(run) | capitalize }}</span>
                <span v-if="stillRunning(run)" class="stillrunning tag">Still running</span>
                <span v-if="!stillRunning(run)" class="stillrunning"></span>
              </div>
              <div class="run-actions column is-2 is-pulled-right">
                <div
                  v-if="run.can_restart_from_scratch || run.can_restart_from_failed_tasks"
                  class="dropdown is-right"
                  v-click-outside="() => dropdownActive = false"
                  v-bind:class="{ 'is-active': dropdownActive }"
                >
                  <div class="dropdown-trigger">
                    <button class="button" @click="toggleDropdown()">
                      <span>Restart</span>
                      <span class="icon is-small">
                        <i class="mdi mdi-restart" aria-hidden="true"></i>
                      </span>
                    </button>
                  </div>
                  <div class="dropdown-menu" role="menu">
                    <div class="dropdown-content">
                      <a
                        v-if="run.can_restart_from_scratch"
                        class="dropdown-item"
                        @click="restartRun(run.id, true)"
                      >From start</a>
                      <a
                        v-if="run.can_restart_from_failed_tasks"
                        class="dropdown-item"
                        @click="restartRun(run.id)"
                      >From failed tasks</a>
                    </div>
                  </div>
                </div>
                <button
                  class="button is-danger"
                  v-if="run.phase == 'queued'"
                  @click="cancelRun(run.id)"
                >Cancel</button>
                <button
                  class="button is-danger"
                  v-if="run.phase == 'running'"
                  :disabled="run.stopping"
                  @click="stopRun(run.id)"
                >Stop</button>
              </div>
            </div>
            <div class="item-content columns">
              <div class="commitmessage column">{{run.annotations.message}}</div>
              <div class="source-info column">
                <a :href="run.annotations.commit_link" class="commit" target="_blank">
                  <i class="mdi mdi-source-commit mdi-rotate-90"></i>
                  <span>{{run.annotations.commit_sha.substring(0,8)}}</span>
                </a>
                <a
                  v-if="run.annotations.event_type == 'push'"
                  :href="run.annotations.branch_link"
                  class="commit"
                  target="_blank"
                >
                  <i class="mdi mdi-source-branch"></i>
                  <span>{{run.annotations.branch}}</span>
                </a>
                <a
                  v-else-if="run.annotations.event_type == 'tag'"
                  :href="run.annotations.tag_link"
                  class="commit"
                  target="_blank"
                >
                  <i class="mdi mdi-tag"></i>
                  <span>{{run.annotations.tag}}</span>
                </a>
                <a
                  v-else-if="run.annotations.event_type == 'pull_request'"
                  :href="run.annotations.pull_request_link"
                  class="commit"
                  target="_blank"
                >
                  <i class="mdi mdi-source-pull"></i>
                  <span>PR #{{run.annotations.pull_request_id}}</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="stopRunError" class="message is-danger">
        <div class="message-body">{{ stopRunError }}</div>
      </div>
      <div v-if="cancelRunError" class="message is-danger">
        <div class="message-body">{{ cancelRunError }}</div>
      </div>
      <div v-if="cancelRunError" class="message is-danger">
        <div class="message-body">{{ cancelRunError }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import vClickOutside from "v-click-outside";

import { cancelRun, stopRun, restartRun } from "@/util/data.js";

import { userLocalRunLink, projectRunLink } from "@/util/link.js";

export default {
  name: "RunDetail",
  directives: {
    clickOutside: vClickOutside.directive
  },
  props: {
    ownertype: String,
    ownername: String,
    projectref: Array,
    run: Object
  },
  data() {
    return {
      stopRunError: null,
      cancelRunError: null,
      restartRunError: null,
      dropdownActive: false
    };
  },
  methods: {
    resetErrors() {
      this.stopRunError = null;
      this.cancelRunError = null;
      this.restartRunError = null;
    },
    toggleDropdown() {
      this.dropdownActive = !this.dropdownActive;
    },
    stillRunning(run) {
      return run.result != "unknown" && run.phase == "running";
    },
    runStatus(run) {
      if (run.phase != "finished") return run.phase;
      if (run.result != "unknown") return run.result;
      if (run.stopping) return "stopping";

      return run.result;
    },
    runResultClass(run) {
      let status = this.runStatus(run);

      if (status == "setuperror") return "setuperror";
      if (status == "queued") return "unknown";
      if (status == "cancelled") return "failed";
      if (status == "running") return "running";
      if (status == "stopping") return "failed";
      if (status == "stopped") return "failed";
      if (status == "success") return "success";
      if (status == "failed") return "failed";
      return "unknown";
    },
    taskClass(task) {
      if (task.status == "success") return "success";
      if (task.status == "failed") return "failed";
      if (task.status == "stopped") return "failed";
      if (task.status == "running") return "running";
      return "unknown";
    },
    async stopRun(runid) {
      this.resetErrors();

      let { error } = await stopRun(runid);
      if (error) {
        this.stopRunError = error;
        return;
      }

      this.run.stopping = true;
    },
    async cancelRun(runid) {
      this.resetErrors();

      let { error } = await cancelRun(runid);
      if (error) {
        this.cancelRunError = error;
        return;
      }

      this.run.phase = "cancelled";
    },
    async restartRun(runid, fromStart) {
      this.dropdownActive = false;
      let { data, error } = await restartRun(runid, fromStart);
      if (error) {
        this.restartRunError = error;
        return;
      }

      let runLink;
      if (this.projectref) {
        runLink = projectRunLink(
          this.ownertype,
          this.ownername,
          this.projectref,
          data.id
        );
      } else {
        runLink = userLocalRunLink(this.ownername, data.id);
      }
      this.$router.push(runLink);
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/css/_variables.scss";

.run {
  margin-bottom: 2rem;

  .run-content {
    margin-bottom: 5px;
    border: 1px solid $grey-lighter;
    border-left: 0 solid;
    display: block;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }

  .run-title {
    align-items: center;
    padding-left: 5px;
    margin-bottom: 25px;

    .run-name {
      padding-left: 5px;
      font-size: 1.5rem;
      padding-right: 1rem;
    }

    .success {
      border-left: 0px solid $green;
    }

    .failed {
      border-left: 5px solid $red;
    }

    .running {
      border-left: 5px solid $blue;
    }

    .unknown {
      border-left: 5px solid $grey-lighter;
    }
  }

  .run-actions {
    text-align: right;
  }

  .item-content {
  }

  .success {
    border-left: 5px solid $green;
  }

  .failed {
    border-left: 5px solid $red;
  }

  .running {
    border-left: 5px solid $blue;
  }

  .unknown {
    border-left: 5px solid $grey-lighter;
  }

  .setuperror {
    border-left: 5px solid $yellow;
  }

  .name {
    font-weight: bold;
    cursor: pointer;
  }

  .commitmessage {
  }

  .stillrunning {
  }

  .source-info {
    overflow: hidden;
    white-space: nowrap;

    a {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .commit {
    display: block;
    font-size: 0.8rem;
  }
}
</style>