xref: /openbmc/webui-vue/src/views/Settings/Network/NetworkInterfaceSettings.vue (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
1<template>
2  <div>
3    <page-section>
4      <b-row>
5        <b-col md="3">
6          <dl>
7            <dt>{{ $t('pageNetwork.linkStatus') }}</dt>
8            <dd>
9              {{ dataFormatter(linkStatus) }}
10            </dd>
11          </dl>
12        </b-col>
13        <b-col md="3">
14          <dl>
15            <dt>{{ $t('pageNetwork.speed') }}</dt>
16            <dd>
17              {{ dataFormatter(linkSpeed) }}
18            </dd>
19          </dl>
20        </b-col>
21      </b-row>
22    </page-section>
23    <page-section :section-title="$t('pageNetwork.interfaceSection')">
24      <b-row>
25        <b-col md="3">
26          <dl>
27            <dt>
28              {{ $t('pageNetwork.fqdn') }}
29            </dt>
30            <dd>
31              {{ dataFormatter(fqdn) }}
32            </dd>
33          </dl>
34        </b-col>
35        <b-col md="3">
36          <dl class="text-nowrap">
37            <dt>
38              {{ $t('pageNetwork.macAddress') }}
39              <b-button
40                variant="link"
41                class="p-1"
42                @click="initMacAddressModal()"
43              >
44                <icon-edit
45                  :title="$t('pageNetwork.modal.editMacAddressTitle')"
46                />
47              </b-button>
48            </dt>
49            <dd>
50              {{ dataFormatter(macAddress) }}
51            </dd>
52          </dl>
53        </b-col>
54      </b-row>
55    </page-section>
56  </div>
57</template>
58
59<script>
60import BVToastMixin from '@/components/Mixins/BVToastMixin';
61import IconEdit from '@carbon/icons-vue/es/edit/16';
62import PageSection from '@/components/Global/PageSection';
63import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
64import { mapState } from 'vuex';
65import { useI18n } from 'vue-i18n';
66import { useModal } from 'bootstrap-vue-next';
67
68export default {
69  name: 'Ipv4Table',
70  components: {
71    IconEdit,
72    PageSection,
73  },
74  mixins: [BVToastMixin, DataFormatterMixin],
75  props: {
76    tabIndex: {
77      type: Number,
78      default: 0,
79    },
80  },
81  setup() {
82    const bvModal = useModal();
83    return { bvModal };
84  },
85  data() {
86    return {
87      $t: useI18n().t,
88      selectedInterface: '',
89      linkStatus: '',
90      linkSpeed: '',
91      fqdn: '',
92      macAddress: '',
93      showMacAddressModal: false,
94    };
95  },
96  computed: {
97    ...mapState('network', ['ethernetData']),
98  },
99  watch: {
100    // Watch for change in tab index
101    tabIndex() {
102      this.getSettings();
103    },
104  },
105  created() {
106    this.getSettings();
107    this.$store.dispatch('network/getEthernetData').finally(() => {
108      // Emit initial data fetch complete to parent component
109      require('@/eventBus').default.$emit(
110        'network-interface-settings-complete',
111      );
112    });
113  },
114  methods: {
115    getSettings() {
116      this.selectedInterface = this.tabIndex;
117      this.linkStatus = this.ethernetData[this.selectedInterface].LinkStatus;
118      this.linkSpeed = this.ethernetData[this.selectedInterface].SpeedMbps;
119      this.fqdn = this.ethernetData[this.selectedInterface].FQDN;
120      this.macAddress = this.ethernetData[this.selectedInterface].MACAddress;
121    },
122    initMacAddressModal() {
123      this.showMacAddressModal = true;
124    },
125  },
126};
127</script>
128