<commit_before><template>
  <div v-if="job">
    <h3>Job. {{ job.id }} {{ job.status }}</h3>
    <JobConfiguration
      :job="job"
      :build-detail="true"
    />
    <router-link :to="{name: 'Create'}">
      <v-btn
        block
        @click="updateConfig()"
      >
        Reuse this configuration.
      </v-btn>
    </router-link>
    <v-divider class="my-5" />
    <div>
      <h3>STDERR</h3>
      <div
        ref="stderr"
        class="stderr"
      >
        {{ job.stderr }}
        <p ref="stderrBottom" />
      </div>
      <h3>STDOUT</h3>
      <div
        ref="stdout"
        class="stdout"
      >
        {{ job.stdout }}
        <p ref="stdoutBottom" />
      </div>
    </div>
    <v-divider class="my-5" />
    <div class="download">
      <a
        v-if="job.status == 'Finished'"
        :href="download"
      > Download </a>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import ApiService from '../services/ApiService.js'
import JobConfiguration from '../components/JobConfiguration.vue'

export default {
  components: {
    JobConfiguration,
  },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  setup() {
    const stderr = ref()
    const stdout = ref()
    const stderrBottom = ref()
    const stdoutBottom = ref()
    return { stderr, stdout, stderrBottom, stdoutBottom }
  },
  data() {
    return {
      job: null,
    }
  },
  computed: {
    download() {
      return ApiService.getDownloadURLForJob(this.job);
    },
  },
  created() {
    this.updateStatus()
  },
  methods: {
    async updateStatus() {
      // fetch job (by id) and set local job data
      try {
        let response = await ApiService.getJobById(this.id)
        this.job = response.data
      } catch (err) {
        console.log(err)
      }
      try {
        await this.$nextTick(() => {
          this.stderr.scrollTo({
            top: this.stderrBottom.offsetTop,
            behavior: 'smooth',
          })
          this.stdout.scrollTo({
            top: this.stdoutBottom.offsetTop,
            behavior: 'smooth',
          })
        })
      } catch (err) {
        console.log(err)
      }
      if (this.job.status == 'Running') {
        setTimeout(this.updateStatus, 1000)
      }
    },
    updateConfig() {
      this.$store.commit("REUSE_CONFIG", this.job)
    }
  },
}
</script>

<style scoped>
.stderr,<commit_msg>Cancel polling task after component unmount<commit_after><template>
  <div v-if="job">
    <h3>Job. {{ job.id }} {{ job.status }}</h3>
    <JobConfiguration
      :job="job"
      :build-detail="true"
    />
    <router-link :to="{name: 'Create'}">
      <v-btn
        block
        @click="updateConfig()"
      >
        Reuse this configuration.
      </v-btn>
    </router-link>
    <v-divider class="my-5" />
    <div>
      <h3>STDERR</h3>
      <div
        ref="stderr"
        class="stderr"
      >
        {{ job.stderr }}
        <p ref="stderrBottom" />
      </div>
      <h3>STDOUT</h3>
      <div
        ref="stdout"
        class="stdout"
      >
        {{ job.stdout }}
        <p ref="stdoutBottom" />
      </div>
    </div>
    <v-divider class="my-5" />
    <div class="download">
      <a
        v-if="job.status == 'Finished'"
        :href="download"
      > Download </a>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import ApiService from '../services/ApiService.js'
import JobConfiguration from '../components/JobConfiguration.vue'

export default {
  components: {
    JobConfiguration,
  },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  setup() {
    const stderr = ref()
    const stdout = ref()
    const stderrBottom = ref()
    const stdoutBottom = ref()
    return { stderr, stdout, stderrBottom, stdoutBottom }
  },
  data() {
    return {
      job: null,
      pending_task: null,
    }
  },
  computed: {
    download() {
      return ApiService.getDownloadURLForJob(this.job);
    },
  },
  created() {
    this.updateStatus()
  },
  unmounted() {
    if (this.pending_task) {
      clearTimeout(this.pending_task);
      this.pending_task = null;
    }
  },
  methods: {
    async updateStatus() {
      // fetch job (by id) and set local job data
      try {
        let response = await ApiService.getJobById(this.id)
        this.job = response.data
      } catch (err) {
        console.log(err)
      }
      try {
        await this.$nextTick(() => {
          this.stderr.scrollTo({
            top: this.stderrBottom.offsetTop,
            behavior: 'smooth',
          })
          this.stdout.scrollTo({
            top: this.stdoutBottom.offsetTop,
            behavior: 'smooth',
          })
        })
      } catch (err) {
        console.log(err)
      }
      if (this.job.status == 'Running') {
        this.pending_task = setTimeout(this.updateStatus, 1000)
      }
    },
    updateConfig() {
      this.$store.commit("REUSE_CONFIG", this.job)
    }
  },
}
</script>

<style scoped>
.stderr,
{'fraction_non_alphanumeric': 0.15459804508278477, 'fraction_numerical': 0.0047875523638539795, 'mean_word_length': 1.8058198097369893, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 69, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3916623', 'n_tokens_mistral': 1653, 'n_tokens_neox': 1642, 'n_words': 323}