Blame view
api/dashboard/src/components/MltdCard.vue
3.38 KB
0d8c0f816
initial commit
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<template>
<b-card bg-variant="primary" text-variant="white">
<template v-slot:header>
<b-row>
<b-col class="text-left">
<h4>MLTD</h4>
</b-col>
<b-col class="text-right">
<b-dropdown size="sm" variant="primary" 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="danger"
size="sm"
title="Stop"
@click.stop="stop(row.item.process_id)"
>
<fa icon="stop" />
</b-button>
</template>
</b-table>
<b-row align-h="end">
<b-form-group label-cols="3" label-cols-lg="3" label-size="sm" label="Top Events" label-for="input-sm">
<b-input-group size="sm">
<b-form-input v-model="top" type="number" />
<b-input-group-append>
<b-button variant="info" @click="train">
Get
</b-button>
</b-input-group-append>
</b-input-group>
</b-form-group>
</b-row>
<b-row v-if="topResults.length > 0">
<b-form-tags v-model="topResults" class="mb-2" disabled placeholder=""></b-form-tags>
<h6>Timeframe: {{ topTimeframe }}</h6>
</b-row>
</b-card>
</template>
<script>
import axios from 'axios'
import RunningFor from './RunningFor'
export default {
name: 'MltdCard',
components: {
RunningFor
},
data () {
return {
top: 10,
topResults: [],
topTimeframe: '',
fields: [
{ key: 'process_id', label: 'Process' },
{ key: 'created_at', label: 'Running for' },
{ key: 'actions', label: 'Actions' }
],
items: []
}
},
created () {
this.status()
},
methods: {
async start () {
try {
await axios.get('/v1/mltd/start')
this.status()
this.$toasted.success('MTLD instance started!')
} catch (e) {
this.$toasted.error('There was an error!')
}
},
async status () {
try {
const { data } = await axios.get('/v1/mltd/status')
this.items = data
} catch (e) {
this.$toasted.error('There was an error while fetching running MLTD instances!')
}
},
async stop (pid) {
try {
await axios.get('/v1/mltd/stop/' + pid)
this.status()
this.$toasted.success('MTLD instance stopped!')
} catch (e) {
this.$toasted.error('There was an error!')
}
},
async train () {
try {
const { data } = await axios.get('/v1/mltd/1/' + this.top)
this.topResults = data.important_events
this.topTimeframe = data.timeframe
} catch (e) {
this.$toasted.error('There was an error!')
}
}
}
}
</script>
<style scoped>
</style>
|