1 files changed, 72 insertions, 0 deletions
diff --git a/src/views/_sila/PciDevices/PciDevices.vue b/src/views/_sila/PciDevices/PciDevices.vue
new file mode 100644
index 00000000..76453a3a
--- /dev/null
+++ b/src/views/_sila/PciDevices/PciDevices.vue
@@ -0,0 +1,72 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <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"
+      >
+      </b-table>
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/_sila/Global/PageTitle';
+import PageSection from '@/components/_sila/Global/PageSection';
+
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+
+export default {
+  components: { PageTitle, PageSection },
+  mixins: [DataFormatterMixin, LoadingBarMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'id',
+          label: this.$t('pagePci.table.id'),
+          formatter: this.dataFormatter,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'name',
+          label: this.$t('pagePci.table.name'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'type',
+          label: this.$t('pagePci.table.type'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'manufacturer',
+          label: this.$t('pagePci.table.manufacturer'),
+          formatter: this.dataFormatter,
+        },
+      ],
+    };
+  },
+
+  computed: {
+    items() {
+      return this.$store.getters['pci/pciDevices'];
+    },
+  },
+
+  created() {
+    this.startLoader();
+    this.$store.dispatch('pci/getDevices').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+  },
+};
+</script>