xref: /aosp_15_r20/development/tools/otagui/src/views/JobDetails.vue (revision 90c8c64db3049935a07c6143d7fd006e26f8ecca) 
1<template>
2  <div v-if="job">
3    <h3>Job. {{ job.id }} {{ job.status }}</h3>
4    <JobConfiguration
5      :job="job"
6      :build-detail="true"
7    />
8    <router-link :to="{name: 'Create'}">
9      <v-btn
10        block
11        @click="updateConfig()"
12      >
13        Reuse this configuration.
14      </v-btn>
15    </router-link>
16    <v-divider class="my-5" />
17    <div>
18      <h3>STDERR</h3>
19      <pre
20        ref="stderr"
21        class="stderr"
22      >
23        {{ job.stderr }}
24        <p ref="stderrBottom" />
25      </pre>
26      <h3>STDOUT</h3>
27      <pre
28        ref="stdout"
29        class="stdout"
30      >
31        {{ job.stdout }}
32        <p ref="stdoutBottom" />
33      </pre>
34    </div>
35    <v-divider class="my-5" />
36    <div class="download">
37      <a
38        v-if="job.status == 'Finished'"
39        :href="download"
40      > Download </a>
41    </div>
42  </div>
43</template>
44
45<script>
46import { ref } from 'vue'
47import ApiService from '../services/ApiService.js'
48import JobConfiguration from '../components/JobConfiguration.vue'
49
50export default {
51  components: {
52    JobConfiguration,
53  },
54  props: {
55    id: {
56      type: String,
57      required: true
58    }
59  },
60  setup() {
61    const stderr = ref()
62    const stdout = ref()
63    const stderrBottom = ref()
64    const stdoutBottom = ref()
65    return { stderr, stdout, stderrBottom, stdoutBottom }
66  },
67  data() {
68    return {
69      job: null,
70      pending_task: null,
71    }
72  },
73  computed: {
74    download() {
75      return ApiService.getDownloadURLForJob(this.job);
76    },
77  },
78  created() {
79    this.updateStatus()
80  },
81  unmounted() {
82    if (this.pending_task) {
83      clearTimeout(this.pending_task);
84      this.pending_task = null;
85    }
86  },
87  methods: {
88    async updateStatus() {
89      // fetch job (by id) and set local job data
90      try {
91        let response = await ApiService.getJobById(this.id)
92        this.job = response.data
93      } catch (err) {
94        console.log(err)
95      }
96      try {
97        await this.$nextTick(() => {
98          this.stderr.scrollTo({
99            top: this.stderrBottom.offsetTop,
100            behavior: 'smooth',
101          })
102          this.stdout.scrollTo({
103            top: this.stdoutBottom.offsetTop,
104            behavior: 'smooth',
105          })
106        })
107      } catch (err) {
108        console.log(err)
109      }
110      if (this.job.status == 'Running') {
111        this.pending_task = setTimeout(this.updateStatus, 1000)
112      }
113    },
114    updateConfig() {
115      this.$store.commit("REUSE_CONFIG", this.job)
116    }
117  },
118}
119</script>
120
121<style scoped>
122.stderr,
123.stdout {
124  overflow: scroll;
125  height: 160px;
126}
127
128.download {
129  margin: auto;
130  text-align: center;
131  font-size: 160%;
132}
133</style>