1 files changed, 144 insertions, 0 deletions
diff --git a/src/views/_sila/Overview/Inventory/InventoryPciDevices.vue b/src/views/_sila/Overview/Inventory/InventoryPciDevices.vue
new file mode 100644
index 00000000..ff1255ce
--- /dev/null
+++ b/src/views/_sila/Overview/Inventory/InventoryPciDevices.vue
@@ -0,0 +1,144 @@
+<template>
+  <page-section :section-title="$t('pagePci.title')">
+    <b-table
+      responsive="md"
+      show-empty
+      hover
+      :items="items"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+      :busy="isBusy"
+    >
+      <template #cell(expandRow)="row">
+        <b-button
+          v-if="items[row.index].DeviceType !== 'SingleFunction'"
+          variant="link"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+      <template #cell(DeviceName)="data">
+        <span v-if="items[data.index].DeviceType === 'SingleFunction'">
+          {{ data.value }}</span
+        >
+        <span v-else>
+          {{
+            items[data.index].Functions[0].DeviceName
+              ? items[data.index].Functions[0].DeviceName
+              : '--'
+          }}</span
+        >
+      </template>
+      <template #cell(health)>
+        <status-icon :status="statusIcon('OK')" />
+        {{ $t('pagePci.table.health_d') }}
+      </template>
+      <template #cell(deviceClass)="data">
+        <span v-if="items[data.index].DeviceType === 'SingleFunction'">
+          {{ data.value }}</span
+        >
+        <span v-else> {{ items[data.index].Functions[0].deviceClass }}</span>
+      </template>
+      <template #row-details="data">
+        <b-container fluid>
+          <b-row v-for="item in data.item.Functions" :key="item.deviceId">
+            <b-col xs="6">
+              <dl>
+                <dt>{{ $t('pagePci.table.name') }}:</dt>
+                <dd>{{ dataFormatter(item.DeviceName) }}</dd>
+              </dl>
+            </b-col>
+            <b-col xs="6">
+              <dl>
+                <dt>{{ $t('pagePci.table.type') }}:</dt>
+                <dd>{{ dataFormatter(item.deviceClass) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </b-container>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/_sila/Global/PageSection';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import StatusIcon from '@/components/_sila/Global/StatusIcon';
+
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/_ibs/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { PageSection, StatusIcon, IconChevron },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableRowExpandMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+          sortable: false,
+        },
+        {
+          key: 'DeviceName',
+          label: this.$t('pagePci.table.name'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'health',
+          label: this.$t('pagePci.table.health'),
+          formatter: this.dataFormatter,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'deviceClass',
+          label: this.$t('pagePci.table.class'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'DeviceType',
+          label: this.$t('pagePci.table.type'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'manufacturer',
+          label: this.$t('pagePci.table.manufacturer'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+    };
+  },
+
+  computed: {
+    items() {
+      return this.$store.getters['pci/pciDevices'];
+    },
+  },
+
+  created() {
+    return this.$store
+      .dispatch('pci/getDevices')
+      .then(() => {
+        return this.$store.dispatch('pci/getDevicesMembers');
+      })
+      .then(() => {
+        this.$store.dispatch('pci/getFunctionDevices');
+      })
+      .finally(() => {
+        this.$root.$emit('hardware-status-pci-complete');
+        this.isBusy = false;
+      });
+  },
+};
+</script>