136 lines
3.2 KiB
Vue
136 lines
3.2 KiB
Vue
<template>
|
|
<UiCard title="Devices interfaces" icon="connection" :flat="false">
|
|
<template #headerActions>
|
|
<div class="text-center">
|
|
<v-btn
|
|
@click="$emit('refresh')"
|
|
color="primary"
|
|
outlined
|
|
v-show="!loading"
|
|
>
|
|
Refresh
|
|
</v-btn>
|
|
</div>
|
|
<div class="text-center" v-show="!loading">
|
|
<v-icon size="100" color="primary">mdi-connection</v-icon>
|
|
<br />
|
|
<span class="text-h5 text-center" v-if="!!items">
|
|
{{ deviceName }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
<template #content>
|
|
<div class="text-center">
|
|
<v-progress-circular
|
|
:size="70"
|
|
:width="7"
|
|
color="primary"
|
|
indeterminate
|
|
v-show="loading"
|
|
></v-progress-circular>
|
|
</div>
|
|
<v-divider class="mb-4" v-show="!loading"></v-divider>
|
|
|
|
<div v-if="!!items" v-show="!loading">
|
|
<v-row justify="end">
|
|
<v-col cols="4">
|
|
<v-text-field
|
|
v-if="items.length > 1"
|
|
v-model="search"
|
|
color="secondary"
|
|
append-icon="mdi-magnify"
|
|
label="search an interface..."
|
|
single-line
|
|
hide-details
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-data-table
|
|
hide-default-footer
|
|
class="row-pointer"
|
|
:search="search"
|
|
:headers="headers"
|
|
:items="items"
|
|
:items-per-page="100"
|
|
>
|
|
<template #[`item.is_up`]="{ item }">
|
|
<v-tooltip bottom>
|
|
<template #activator="{ on, attrs }">
|
|
<v-btn
|
|
v-bind="attrs"
|
|
icon
|
|
color="error"
|
|
v-on="on"
|
|
@click="onDelete(item)"
|
|
>
|
|
<v-icon size="65" :color="item.is_up ? 'success' : 'error'">
|
|
mdi-circle-small
|
|
</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>
|
|
<span v-if="item.is_up">IS UP</span>
|
|
<span v-else>IS DOWN</span>
|
|
</span>
|
|
</v-tooltip>
|
|
</template>
|
|
</v-data-table>
|
|
</div>
|
|
</template>
|
|
</UiCard>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
items: {
|
|
type: Array,
|
|
default: null,
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
deviceName: {
|
|
type: String,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
search: "",
|
|
headers: [
|
|
{
|
|
text: "Name",
|
|
value: "name",
|
|
align: "center",
|
|
},
|
|
{
|
|
text: "Description",
|
|
value: "description",
|
|
align: "center",
|
|
},
|
|
{
|
|
text: "Admin status",
|
|
value: "is_enabled",
|
|
align: "center",
|
|
},
|
|
{
|
|
text: "Status",
|
|
value: "is_up",
|
|
align: "center",
|
|
},
|
|
{
|
|
text: "Mac address",
|
|
value: "mac_addresss",
|
|
align: "center",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
mounted() {},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
<style scoped></style>
|