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