Network settings redesign - interface settings
First commit of the network settings redesign:
- Adds the global network settings section for DHCP settings
- Adds read only hostname, FQDN and MAC address,
modal to edit each will be done seperately
- Removes interface specific sections to refactor in next commit
- Adds tab component to display ethernet data by interface
- Ability to edit, delete and add ipv4 addresses and DNS will
be done in separate commit
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ibb1db6894ee697fec9e6ea1b8312d041c61faaad
diff --git a/src/views/Settings/Network/NetworkInterfaceSettings.vue b/src/views/Settings/Network/NetworkInterfaceSettings.vue
new file mode 100644
index 0000000..bdcba4d
--- /dev/null
+++ b/src/views/Settings/Network/NetworkInterfaceSettings.vue
@@ -0,0 +1,99 @@
+<template>
+ <div>
+ <page-section>
+ <b-row>
+ <b-col md="3">
+ <dl>
+ <dt>{{ $t('pageNetwork.linkStatus') }}</dt>
+ <dd>
+ {{ dataFormatter(linkStatus) }}
+ </dd>
+ </dl>
+ </b-col>
+ <b-col md="3">
+ <dl>
+ <dt>{{ $t('pageNetwork.speed') }}</dt>
+ <dd>
+ {{ dataFormatter(linkSpeed) }}
+ </dd>
+ </dl>
+ </b-col>
+ </b-row>
+ </page-section>
+ <page-section :section-title="$t('pageNetwork.interfaceSection')">
+ <b-row>
+ <b-col md="3">
+ <dl>
+ <dt>{{ $t('pageNetwork.fqdn') }}</dt>
+ <dd>
+ {{ dataFormatter(fqdn) }}
+ </dd>
+ </dl>
+ </b-col>
+ <b-col md="3">
+ <dl class="text-nowrap">
+ <dt>{{ $t('pageNetwork.macAddress') }}</dt>
+ <dd>
+ {{ dataFormatter(macAddress) }}
+ </dd>
+ </dl>
+ </b-col>
+ </b-row>
+ </page-section>
+ </div>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import PageSection from '@/components/Global/PageSection';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import { mapState } from 'vuex';
+
+export default {
+ name: 'Ipv4Table',
+ components: {
+ PageSection,
+ },
+ mixins: [BVToastMixin, DataFormatterMixin],
+ props: {
+ tabIndex: {
+ type: Number,
+ default: 0,
+ },
+ },
+ data() {
+ return {
+ selectedInterface: '',
+ linkStatus: '',
+ linkSpeed: '',
+ fqdn: '',
+ macAddress: '',
+ };
+ },
+ computed: {
+ ...mapState('network', ['ethernetData']),
+ },
+ watch: {
+ // Watch for change in tab index
+ tabIndex() {
+ this.getSettings();
+ },
+ },
+ created() {
+ this.getSettings();
+ this.$store.dispatch('network/getEthernetData').finally(() => {
+ // Emit initial data fetch complete to parent component
+ this.$root.$emit('network-interface-settings-complete');
+ });
+ },
+ methods: {
+ getSettings() {
+ this.selectedInterface = this.tabIndex;
+ this.linkStatus = this.ethernetData[this.selectedInterface].LinkStatus;
+ this.linkSpeed = this.ethernetData[this.selectedInterface].SpeedMbps;
+ this.fqdn = this.ethernetData[this.selectedInterface].FQDN;
+ this.macAddress = this.ethernetData[this.selectedInterface].MACAddress;
+ },
+ },
+};
+</script>