1<template> 2 <page-section :section-title="$t('pageNetwork.ipv4')"> 3 <b-row> 4 <b-col> 5 <h3 class="h5"> 6 {{ $t('pageNetwork.ipv4Addresses') }} 7 </h3> 8 </b-col> 9 </b-row> 10 <b-table 11 responsive="md" 12 hover 13 :fields="ipv4TableFields" 14 :items="form.ipv4TableItems" 15 :empty-text="$t('global.table.emptyMessage')" 16 class="mb-0" 17 show-empty 18 > 19 <template #cell(actions)="{ item }"> 20 <table-row-action 21 v-for="(action, actionIndex) in item.actions" 22 :key="actionIndex" 23 :value="action.value" 24 :title="action.title" 25 :enabled="action.enabled" 26 @click-table-action="onIpv4TableAction(action, $event, index)" 27 > 28 <template #icon> 29 <icon-edit v-if="action.value === 'edit'" /> 30 <icon-trashcan v-if="action.value === 'delete'" /> 31 </template> 32 </table-row-action> 33 </template> 34 </b-table> 35 </page-section> 36</template> 37 38<script> 39import BVToastMixin from '@/components/Mixins/BVToastMixin'; 40import IconEdit from '@carbon/icons-vue/es/edit/20'; 41import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; 42import PageSection from '@/components/Global/PageSection'; 43import TableRowAction from '@/components/Global/TableRowAction'; 44import { mapState } from 'vuex'; 45 46export default { 47 name: 'Ipv4Table', 48 components: { 49 IconEdit, 50 IconTrashcan, 51 PageSection, 52 TableRowAction, 53 }, 54 mixins: [BVToastMixin], 55 props: { 56 tabIndex: { 57 type: Number, 58 default: 0, 59 }, 60 }, 61 data() { 62 return { 63 form: { 64 ipv4TableItems: [], 65 }, 66 actions: [ 67 { 68 value: 'edit', 69 title: this.$t('global.action.edit'), 70 }, 71 { 72 value: 'delete', 73 title: this.$t('global.action.delete'), 74 }, 75 ], 76 ipv4TableFields: [ 77 { 78 key: 'Address', 79 label: this.$t('pageNetwork.table.ipAddress'), 80 }, 81 { 82 key: 'Gateway', 83 label: this.$t('pageNetwork.table.gateway'), 84 }, 85 { 86 key: 'SubnetMask', 87 label: this.$t('pageNetwork.table.subnet'), 88 }, 89 { 90 key: 'AddressOrigin', 91 label: this.$t('pageNetwork.table.addressOrigin'), 92 }, 93 { key: 'actions', label: '', tdClass: 'text-right' }, 94 ], 95 }; 96 }, 97 computed: { 98 ...mapState('network', ['ethernetData']), 99 }, 100 watch: { 101 // Watch for change in tab index 102 tabIndex() { 103 this.getIpv4TableItems(); 104 }, 105 }, 106 created() { 107 this.getIpv4TableItems(); 108 this.$store.dispatch('network/getEthernetData').finally(() => { 109 // Emit initial data fetch complete to parent component 110 this.$root.$emit('network-table-ipv4-complete'); 111 }); 112 }, 113 methods: { 114 getIpv4TableItems() { 115 const index = this.tabIndex; 116 const addresses = this.ethernetData[index].IPv4Addresses || []; 117 this.form.ipv4TableItems = addresses.map((ipv4) => { 118 return { 119 Address: ipv4.Address, 120 SubnetMask: ipv4.SubnetMask, 121 Gateway: ipv4.Gateway, 122 AddressOrigin: ipv4.AddressOrigin, 123 actions: [ 124 { 125 value: 'edit', 126 title: this.$t('pageNetwork.table.editIpv4'), 127 enabled: false, 128 }, 129 { 130 value: 'delete', 131 title: this.$t('pageNetwork.table.deleteIpv4'), 132 enabled: false, 133 }, 134 ], 135 }; 136 }); 137 }, 138 onIpv4TableAction(action, row) { 139 if (action === 'delete') { 140 this.form.ipv4TableItems.splice(row, 1); 141 // TODO: delete row in store 142 } 143 }, 144 }, 145}; 146</script> 147