<template>
  <b-card bg-variant="success" text-variant="white">
    <template v-slot:header>
      <b-row>
        <b-col class="text-left">
          <h5>OD</h5>
        </b-col>
        <b-col class="text-right">
          <b-dropdown size="sm" variant="success" no-caret right>
            <template v-slot:button-content>
              <fa icon="cogs" />
            </template>
            <b-dropdown-item @click="start">
              Start new instance
            </b-dropdown-item>
          </b-dropdown>
        </b-col>
      </b-row>
    </template>
    <b-table v-if="items.length > 0" :fields="fields" :items="items" thead-class="text-white" tbody-class="text-white">
      <template v-slot:cell(created_at)="row">
        <running-for :date="new Date(row.item.created_at)" class="red">
          <template slot-scope="int">
            {{ int.minutes }} Minutes and {{ int.seconds }} Seconds
          </template>
        </running-for>
      </template>
      <template v-slot:cell(actions)="row">
        <b-button variant="secondary"
                  size="sm"
                  title="Analyze"
                  @click.stop="showPcapModal(row.item.process_id)"
        >
          <fa icon="search" />
        </b-button>
        <b-button variant="danger"
                  size="sm"
                  class="ml-2"
                  title="Stop"
                  @click.stop="stop(row.item.process_id)"
        >
          <fa icon="stop" />
        </b-button>
      </template>
    </b-table>
    <b-modal
      ref="pcap-modal"
      title="Upload PCAP"
      ok-title="Upload"
      ok-variant="primary"
      cancel-variant="muted"
      size="lg"
      @ok="upload"
    >
      <b-form autocomplete="off">
        <b-form-file
          v-model="file"
          :state="Boolean(file)"
          accept=".pcap"
          placeholder="Choose a file or drop it here..."
          drop-placeholder="Drop file here..."
        ></b-form-file>
      </b-form>
    </b-modal>
  </b-card>
</template>

<script>
import axios from 'axios'
import RunningFor from './RunningFor'

export default {
  name: 'OdCard',
  components: {
    RunningFor
  },
  data () {
    return {
      file: null,
      fields: [
        { key: 'process_id', label: 'Process' },
        { key: 'created_at', label: 'Running for' },
        { key: 'actions', label: 'Actions' }
      ],
      analyzePid: '',
      items: []
    }
  },
  created () {
    this.status()
  },
  methods: {
    async start () {
      try {
        await axios.get('/v1/od/start')
        this.status()
        this.$toasted.success('OD instance started!')
      } catch (e) {
        this.$toasted.error('There was an error!')
      }
    },
    async status () {
      try {
        const { data } = await axios.get('/v1/od/status')
        this.items = data
      } catch (e) {
        this.$toasted.error('There was an error while fetching running OD instances!')
      }
    },
    showPcapModal (pid) {
      this.analyzePid = pid
      this.$refs['pcap-modal'].show()
    },
    async stop (pid) {
      try {
        await axios.get('/v1/od/stop/' + pid)
        this.status()
        this.$toasted.success('OD instance stopped!')
      } catch (e) {
        this.$toasted.error('There was an error!')
      }
    },
    async upload () {
      const formData = new FormData()
      formData.append('file', this.file)
      await axios.post('/v1/od/analyze/' + this.analyzePid,
        formData,
        {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
      ).then(() => {
        this.file = null
        this.analyzePid = ''
        this.$toasted.success('PCAP uploaded successfully!')
      })
      .catch(() => {
        this.$toasted.error('There was an error while uploading the PCAP file!')
      })
    }
  }
}
</script>

<style scoped>

</style>