Blame view
api/dashboard/src/components/OdCard.vue
3.8 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 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
<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>
|