Row.vue

<template>
  <tr>
    <td class="is-word-break-all">
      <!-- This link redirects either to the status or configuration pages depending on the process -->
      <router-link
        v-if="mainLink"
        :to="{ name: mainLink.name, params: { id: processId } }"
        :title="mainLink.title"
      >
        {{ process.name || 'No process name' }}
      </router-link>
      <span
        v-else
        class="has-tooltip-right"
        :data-tooltip="disabledLink"
      >
        {{ process.name || 'No process name' }}
        <i class="icon icon-help has-text-info"></i>
      </span><br />
      <ItemId :item-id="process.id" />
    </td>
    <td class="is-word-break-all">{{ corpus.name ?? process.corpus ?? '—' }}</td>
    <td><StateTag :state="process.state" /></td>
    <td>{{ processMode }}</td>
    <td>
      <abbr v-if="process.created" :title="new Date(process.created).toISOString()">
        {{ ago(new Date(process.created)) }}
      </abbr>
      <template v-if="process.creator">
        <br />
        by {{ process.creator }}
      </template>
    </td>
    <td>
      <template v-if="runtime !== null">
        <template v-if="!process.finished">
          {{ durationText }}
        </template>
        <abbr :title="secondsToTimedelta(runtime)">
          {{ humanTimedelta(runtime) }}
        </abbr>
      </template>
      <em v-else>Not started</em>
    </td>
    <td class="shrink">
      <div class="field has-addons is-pulled-right">
        <p class="control" v-if="canRetry">
          <button
            class="button has-text-info"
            v-on:click="retry"
            :disabled="!hasAdminAccess || null"
            :title="hasAdminAccess ? 'Retry this entire process' : 'An admin access is required to retry this process'"
          >
            Retry
          </button>
        </p>
        <p class="control" v-if="canDelete">
          <button
            class="button has-text-danger"
            v-on:click="deleteModal = hasAdminAccess"
            :disabled="!hasAdminAccess || null"
            :title="hasAdminAccess ? 'Delete this process' : 'An admin access is required to delete this process'"
          >
            Delete
          </button>
        </p>
      </div>
    </td>
  </tr>
  <Modal v-model="deleteModal" title="Delete process">
    <span>
      Are you sure you want to delete process <strong>{{ deleteModalText }}</strong>?
    </span>
    <br />
    <span>This action is irreversible.</span>
    <template v-slot:footer="{ close }">
      <button class="button" v-on:click="close">Cancel</button>
      <button
        class="button is-danger"
        :class="{ 'is-loading': deleteLoading }"
        v-on:click="remove"
      >
        Delete
      </button>
    </template>
  </Modal>
</template>

<script>
import { mapState, mapGetters, mapActions as mapVuexActions } from 'vuex'
import { mapActions } from 'pinia'

import { PROCESS_MODES, PROCESS_FINAL_STATES } from '@/config'
import { ago, errorParser, humanTimedelta, secondsToTimedelta } from '@/helpers'
import { corporaMixin, truncateMixin } from '@/mixins'

import ItemId from '@/components/ItemId.vue'
import StateTag from './StateTag.vue'
import Modal from '@/components/Modal.vue'
import { useNotificationStore } from '@/stores'

export default {
  mixins: [
    corporaMixin,
    truncateMixin
  ],
  components: {
    ItemId,
    StateTag,
    Modal
  },
  emits: ['update'],
  props: {
    processId: {
      type: String,
      required: true
    }
  },
  data: () => ({
    deleteModal: false,
    deleteLoading: false
  }),
  computed: {
    ...mapState('process', ['processes']),
    ...mapGetters('auth', ['isVerified']),
    process () {
      return this.processes[this.processId] || {}
    },
    corpusId () {
      return this.process.corpus || null
    },
    processMode () {
      if (!this.process.mode) return ''
      return PROCESS_MODES[this.process.mode]
    },
    /**
     * Process execution time, in seconds.
     * @type {number | null}
     */
    runtime () {
      const start = this.process.started ? new Date(this.process.started) : null
      /*
       * When the date is invalid, for example when the process is being deleted and the date becomes undefined,
       * instead of throwing an Error or just being null, we get an instance of an "invalid date", whose value
       * is NaN. We just return null instead to be saner.
       */
      if (start === null || isNaN(start.valueOf())) return null

      let end = this.process.finished ? new Date(this.process.finished) : null
      /*
       * When we have a valid `finished` date, we return `finished - started` to show how long the process ran.
       * Otherwise, we will make the current date the end date, and show how long the process has been running for.
       */
      if (end === null || isNaN(end.valueOf())) end = new Date()

      return (end.getTime() - start.getTime()) / 1000
    },
    hasAdminAccess () {
      if (this.corpusId) return this.canAdmin(this.corpus)
      return true
    },
    finishedProcess () {
      return PROCESS_FINAL_STATES.includes(this.process.state)
    },
    canRetry () {
      return this.isVerified && this.finishedProcess
    },
    canDelete () {
      return !['pending', 'running', 'stopping'].includes(this.process.state)
    },
    mainLink () {
      if (this.process.started) {
        return { name: 'process-details', title: 'Go to process status page' }
      }
      if (['dataset', 'workers'].includes(this.process.mode) && this.hasAdminAccess) {
        return { name: 'process-configure', title: 'Configure this process' }
      }
      if (this.process.mode === 'template') {
        return { name: 'process-details', title: "View this template's details" }
      }
      return null
    },
    disabledLink () {
      if (!this.process.started) {
        if (!this.hasAdminAccess) return 'This process is not configured and you do not have admin access to its project'
        else if (!['dataset', 'workers', 'template'].includes(this.process.mode)) return 'This process does not have any tasks and cannot be configured'
      }
      throw new Error('The link should not be disabled!')
    },
    durationText () {
      if (['unscheduled', 'pending'].includes(this.process.state)) return 'Pending for '
      return 'Running for '
    },
    deleteModalText () {
      if (this.process.name?.length > 0) return `${this.truncateShort(this.process.name)} (${this.process.id})`
      return this.process.id
    }
  },
  methods: {
    ...mapVuexActions('process', ['deleteProcess', 'retryProcess']),
    ...mapActions(useNotificationStore, ['notify']),
    async remove () {
      if (this.deleteLoading || !this.hasAdminAccess) return
      this.deleteLoading = true
      try {
        const response = await this.deleteProcess(this.processId)
        if (response.status === 204) this.$emit('update')
        this.deleteModal = false
      } catch (err) {
        this.notify({ type: 'error', text: errorParser(err) })
      } finally {
        this.deleteLoading = false
      }
    },
    async retry () {
      try {
        await this.retryProcess(this.processId)
        this.$emit('update')
      } catch (err) {
        this.notify({ type: 'error', text: errorParser(err) })
      }
    },
    ago,
    humanTimedelta,
    secondsToTimedelta
  }
}
</script>