/
_id.vue
60 lines (58 loc) · 1.75 KB
/
_id.vue
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
<style scoped>
</style>
<template>
<v-card v-if="currentInstance">
<v-toolbar flat>
<v-toolbar-title class="grey--text text--darken-4">{{currentInstance.serviceModule.displayName}}</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat color="red" @click="removeInstance({ id })" nuxt :to="'/instances/'">
Delete
</v-btn>
</v-toolbar>
<v-tabs slider-color="primary">
<v-tab ripple nuxt :to="baseURL + '/status'">
Status
</v-tab>
<v-tab ripple nuxt :to="baseURL + '/configuration'">
Configuration
</v-tab>
<v-tab ripple nuxt :to="baseURL + '/logs'">
Logs
</v-tab>
<v-tab ripple nuxt :to="baseURL + '/threads'">
Threads
</v-tab>
<v-tab ripple nuxt :to="baseURL + '/users'">
Users
</v-tab>
</v-tabs>
<nuxt-child :currentInstance="currentInstance" />
</v-card>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'nuxt-property-decorator'
import { namespace } from 'vuex-class'
import axios from 'axios'
import ServiceInstance from '../../types/ServiceInstance'
import * as actions from '../../store/modules/services/actions.types'
const servicesModule = namespace('services')
@Component({})
export default class InstanceByID extends Vue {
@servicesModule.Getter('instances') instances: ServiceInstance[]
@servicesModule.Action(actions.REMOVE_INSTANCE) removeInstance
id: string
async asyncData({ params }) {
return {
...params,
baseURL: `/instances/${params.id}`,
}
}
get currentInstance(): ServiceInstance | undefined {
if (isNaN(this.id as any)) {
return undefined
}
return this.instances.find(i => i.id === parseInt(this.id, undefined))
}
}
</script>