Fix a little global components

Issue: SILABMC-191

11 files changed, 1990 insertions, 0 deletions

diff --git a/src/views/_sila/Overview/Inventory/Inventory.vue b/src/views/_sila/Overview/Inventory/Inventory.vue
new file mode 100644
index 00000000..41258597
--- /dev/null
+++ b/src/views/_sila/Overview/Inventory/Inventory.vue
@@ -0,0 +1,195 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+
+    <!-- Service indicators -->
+    <service-indicator />
+
+    <!-- Quicklinks section -->
+    <page-section :section-title="$t('pageInventory.quicklinkTitle')">
+      <b-row class="w-75">
+        <b-col v-for="column in quicklinkColumns" :key="column.id" xl="4">
+          <div v-for="item in column" :key="item.id">
+            <b-link
+              :href="item.href"
+              :data-ref="item.dataRef"
+              @click.prevent="scrollToOffset"
+            >
+              {{ item.linkText }}
+            </b-link>
+          </div>
+        </b-col>
+      </b-row>
+    </page-section>
+
+    <!-- System table -->
+    <table-system ref="system" />
+
+    <!-- BMC manager table -->
+    <table-bmc-manager ref="bmc" />
+
+    <!-- Chassis table -->
+    <table-chassis ref="chassis" />
+
+    <!-- DIMM slot table -->
+    <table-dimm-slot ref="dimms" />
+
+    <!-- Fans table -->
+    <table-fans ref="fans" />
+
+    <!-- Power supplies table -->
+    <table-power-supplies ref="powerSupply" />
+
+    <!-- Processors table -->
+    <table-processors ref="processors" />
+
+    <!-- Assembly table -->
+    <table-assembly ref="assembly" />
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/_sila/Global/PageTitle';
+import ServiceIndicator from './InventoryServiceIndicator';
+import TableSystem from './InventoryTableSystem';
+import TablePowerSupplies from './InventoryTablePowerSupplies';
+import TableDimmSlot from './InventoryTableDimmSlot';
+import TableFans from './InventoryTableFans';
+import TableBmcManager from './InventoryTableBmcManager';
+import TableChassis from './InventoryTableChassis';
+import TableProcessors from './InventoryTableProcessors';
+import TableAssembly from './InventoryTableAssembly';
+import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import PageSection from '@/components/_sila/Global/PageSection';
+import JumpLinkMixin from '@/components/_sila/Mixins/JumpLinkMixin';
+import { chunk } from 'lodash';
+
+export default {
+  components: {
+    PageTitle,
+    ServiceIndicator,
+    TableDimmSlot,
+    TablePowerSupplies,
+    TableSystem,
+    TableFans,
+    TableBmcManager,
+    TableChassis,
+    TableProcessors,
+    TableAssembly,
+    PageSection,
+  },
+  mixins: [LoadingBarMixin, JumpLinkMixin],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if user navigates away from page
+    // before requests complete
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      links: [
+        {
+          id: 'system',
+          dataRef: 'system',
+          href: '#system',
+          linkText: this.$t('pageInventory.system'),
+        },
+        {
+          id: 'bmc',
+          dataRef: 'bmc',
+          href: '#bmc',
+          linkText: this.$t('pageInventory.bmcManager'),
+        },
+        {
+          id: 'chassis',
+          dataRef: 'chassis',
+          href: '#chassis',
+          linkText: this.$t('pageInventory.chassis'),
+        },
+        {
+          id: 'dimms',
+          dataRef: 'dimms',
+          href: '#dimms',
+          linkText: this.$t('pageInventory.dimmSlot'),
+        },
+        {
+          id: 'fans',
+          dataRef: 'fans',
+          href: '#fans',
+          linkText: this.$t('pageInventory.fans'),
+        },
+        {
+          id: 'powerSupply',
+          dataRef: 'powerSupply',
+          href: '#powerSupply',
+          linkText: this.$t('pageInventory.powerSupplies'),
+        },
+        {
+          id: 'processors',
+          dataRef: 'processors',
+          href: '#processors',
+          linkText: this.$t('pageInventory.processors'),
+        },
+        {
+          id: 'assembly',
+          dataRef: 'assembly',
+          href: '#assembly',
+          linkText: this.$t('pageInventory.assemblies'),
+        },
+      ],
+    };
+  },
+  computed: {
+    quicklinkColumns() {
+      // Chunk links array to 3 array's to display 3 items per column
+      return chunk(this.links, 3);
+    },
+  },
+  created() {
+    console.log(123456, process.env.VUE_APP_ENV_NAME);
+    this.startLoader();
+    const bmcManagerTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-bmc-manager-complete', () => resolve());
+    });
+    const chassisTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-chassis-complete', () => resolve());
+    });
+    const dimmSlotTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-dimm-slot-complete', () => resolve());
+    });
+    const fansTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-fans-complete', () => resolve());
+    });
+    const powerSuppliesTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-power-supplies-complete', () =>
+        resolve()
+      );
+    });
+    const processorsTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-processors-complete', () => resolve());
+    });
+    const serviceIndicatorPromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-service-complete', () => resolve());
+    });
+    const systemTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-system-complete', () => resolve());
+    });
+    const assemblyTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-assembly-complete', () => resolve());
+    });
+    // Combine all child component Promises to indicate
+    // when page data load complete
+    Promise.all([
+      bmcManagerTablePromise,
+      chassisTablePromise,
+      dimmSlotTablePromise,
+      fansTablePromise,
+      powerSuppliesTablePromise,
+      processorsTablePromise,
+      serviceIndicatorPromise,
+      systemTablePromise,
+      assemblyTablePromise,
+    ]).finally(() => this.endLoader());
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/Inventory/InventoryServiceIndicator.vue b/src/views/_sila/Overview/Inventory/InventoryServiceIndicator.vue
new file mode 100644
index 00000000..b4531be7
--- /dev/null
+++ b/src/views/_sila/Overview/Inventory/InventoryServiceIndicator.vue
@@ -0,0 +1,76 @@
+<template>
+  <page-section
+    :section-title="$t('pageInventory.systemIndicator.sectionTitle')"
+  >
+    <div class="form-background pl-4 pt-4 pb-1">
+      <b-row>
+        <b-col sm="6" md="3">
+          <dl>
+            <dt>{{ $t('pageInventory.systemIndicator.powerStatus') }}</dt>
+            <dd>
+              {{ $t(powerStatus) }}
+            </dd>
+          </dl>
+        </b-col>
+        <b-col sm="6" md="3">
+          <dl>
+            <dt>
+              {{ $t('pageInventory.systemIndicator.identifyLed') }}
+            </dt>
+            <dd>
+              <b-form-checkbox
+                id="identifyLedSwitchService"
+                v-model="systems.locationIndicatorActive"
+                data-test-id="inventoryService-toggle-identifyLed"
+                switch
+                @change="toggleIdentifyLedSwitch"
+              >
+                <span v-if="systems.locationIndicatorActive">
+                  {{ $t('global.status.on') }}
+                </span>
+                <span v-else>{{ $t('global.status.off') }}</span>
+              </b-form-checkbox>
+            </dd>
+          </dl>
+        </b-col>
+      </b-row>
+    </div>
+  </page-section>
+</template>
+<script>
+import PageSection from '@/components/_sila/Global/PageSection';
+import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
+
+export default {
+  components: { PageSection },
+  mixins: [BVToastMixin],
+  computed: {
+    systems() {
+      let systemData = this.$store.getters['system/systems'][0];
+      return systemData ? systemData : {};
+    },
+    serverStatus() {
+      return this.$store.getters['global/serverStatus'];
+    },
+    powerStatus() {
+      if (this.serverStatus === 'unreachable') {
+        return `global.status.off`;
+      }
+      return `global.status.${this.serverStatus}`;
+    },
+  },
+  created() {
+    this.$store.dispatch('system/getSystem').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-service-complete');
+    });
+  },
+  methods: {
+    toggleIdentifyLedSwitch(state) {
+      this.$store
+        .dispatch('system/changeIdentifyLedState', state)
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableAssembly.vue b/src/views/_sila/Overview/Inventory/InventoryTableAssembly.vue
new file mode 100644
index 00000000..9c284533
--- /dev/null
+++ b/src/views/_sila/Overview/Inventory/InventoryTableAssembly.vue
@@ -0,0 +1,153 @@
+<template>
+  <page-section :section-title="$t('pageInventory.assemblies')">
+    <b-table
+      sort-icon-left
+      no-sort-reset
+      hover
+      responsive="md"
+      :items="items"
+      :fields="fields"
+      show-empty
+      :empty-text="$t('global.table.emptyMessage')"
+      :busy="isBusy"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandAssembly"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Toggle identify LED -->
+      <template #cell(identifyLed)="row">
+        <b-form-checkbox
+          v-if="hasIdentifyLed(row.item.identifyLed)"
+          v-model="row.item.identifyLed"
+          name="switch"
+          switch
+          @change="toggleIdentifyLedValue(row.item)"
+        >
+          <span v-if="row.item.identifyLed">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else> {{ $t('global.status.off') }} </span>
+        </b-form-checkbox>
+        <div v-else>--</div>
+      </template>
+
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <!-- Nmae -->
+              <dt>{{ $t('pageInventory.table.name') }}:</dt>
+              <dd>{{ dataFormatter(item.name) }}</dd>
+              <!-- Serial number -->
+              <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+              <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <!-- Model-->
+              <dt>Model</dt>
+              <dd>{{ dataFormatter(item.model) }}</dd>
+              <!-- Spare Part Number -->
+              <dt>Spare Part Number</dt>
+              <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
+            </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 BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/_sila/Mixins/TableRowExpandMixin';
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+
+export default {
+  components: { IconChevron, PageSection },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
+          key: 'name',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'partNumber',
+          label: this.$t('pageInventory.table.partNumber'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'identifyLed',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    assemblies() {
+      return this.$store.getters['assemblies/assemblies'];
+    },
+    items() {
+      if (this.assemblies) {
+        return this.assemblies;
+      } else {
+        return [];
+      }
+    },
+  },
+  created() {
+    this.$store.dispatch('assemblies/getAssemblyInfo').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-assembly-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    toggleIdentifyLedValue(row) {
+      this.$store
+        .dispatch('assemblies/updateIdentifyLedValue', {
+          uri: row.uri,
+          memberId: row.id,
+          identifyLed: row.identifyLed,
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    hasIdentifyLed(identifyLed) {
+      return typeof identifyLed === 'boolean';
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableBmcManager.vue b/src/views/_sila/Overview/Inventory/InventoryTableBmcManager.vue
new file mode 100644
index 00000000..e3375d57
--- /dev/null
+++ b/src/views/_sila/Overview/Inventory/InventoryTableBmcManager.vue
@@ -0,0 +1,245 @@
+<template>
+  <page-section :section-title="$t('pageInventory.bmcManager')">
+    <b-table
+      responsive="md"
+      hover
+      :items="items"
+      :fields="fields"
+      show-empty
+      :empty-text="$t('global.table.emptyMessage')"
+      :busy="isBusy"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandBmc"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+
+      <!-- Toggle identify LED -->
+      <template #cell(identifyLed)="row">
+        <b-form-checkbox
+          v-if="hasIdentifyLed(row.item.identifyLed)"
+          v-model="row.item.identifyLed"
+          name="switch"
+          switch
+          @change="toggleIdentifyLedValue(row.item)"
+        >
+          <span v-if="row.item.identifyLed">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else> {{ $t('global.status.off') }} </span>
+        </b-form-checkbox>
+        <div v-else>--</div>
+      </template>
+
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Name -->
+                <dt>{{ $t('pageInventory.table.name') }}:</dt>
+                <dd>{{ dataFormatter(item.name) }}</dd>
+                <!-- Part number -->
+                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.partNumber) }}</dd>
+                <!-- Serial number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+                <!-- Spare part number -->
+                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
+                <!-- Model -->
+                <dt>{{ $t('pageInventory.table.model') }}:</dt>
+                <dd>{{ dataFormatter(item.model) }}</dd>
+                <!-- UUID -->
+                <dt>{{ $t('pageInventory.table.uuid') }}:</dt>
+                <dd>{{ dataFormatter(item.uuid) }}</dd>
+                <!-- Service entry point UUID -->
+                <dt>{{ $t('pageInventory.table.serviceEntryPointUuid') }}:</dt>
+                <dd>{{ dataFormatter(item.serviceEntryPointUuid) }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+                <!-- Power state -->
+                <dt>{{ $t('pageInventory.table.power') }}:</dt>
+                <dd>{{ dataFormatter(item.powerState) }}</dd>
+                <!-- Health rollup -->
+                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
+                <!-- BMC date and time -->
+                <dt>{{ $t('pageInventory.table.bmcDateTime') }}:</dt>
+                <dd>
+                  {{ item.dateTime | formatDate }}
+                  {{ item.dateTime | formatTime }}
+                </dd>
+                <!-- Reset date and time -->
+                <dt>{{ $t('pageInventory.table.lastResetTime') }}:</dt>
+                <dd>
+                  {{ item.lastResetTime | formatDate }}
+                  {{ item.lastResetTime | formatTime }}
+                </dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
+                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
+                <!-- Description -->
+                <dt>{{ $t('pageInventory.table.description') }}:</dt>
+                <dd>{{ dataFormatter(item.description) }}</dd>
+                <!-- Manager type -->
+                <dt>{{ $t('pageInventory.table.managerType') }}:</dt>
+                <dd>{{ dataFormatter(item.managerType) }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <!-- Firmware Version  -->
+              <dl>
+                <dt>{{ $t('pageInventory.table.firmwareVersion') }}:</dt>
+                <dd>{{ item.firmwareVersion }}</dd>
+              </dl>
+              <!-- Graphical console -->
+              <p class="mt-1 mb-2 h6 float-none m-0">
+                {{ $t('pageInventory.table.graphicalConsole') }}
+              </p>
+              <dl class="ml-4">
+                <dt>{{ $t('pageInventory.table.connectTypesSupported') }}:</dt>
+                <dd>
+                  {{ dataFormatterArray(item.graphicalConsoleConnectTypes) }}
+                </dd>
+                <dt>{{ $t('pageInventory.table.maxConcurrentSessions') }}:</dt>
+                <dd>
+                  {{ dataFormatter(item.graphicalConsoleMaxSessions) }}
+                </dd>
+                <dt>{{ $t('pageInventory.table.serviceEnabled') }}:</dt>
+                <dd>
+                  {{ dataFormatter(item.graphicalConsoleEnabled) }}
+                </dd>
+              </dl>
+              <!-- Serial console -->
+              <p class="mt-1 mb-2 h6 float-none m-0">
+                {{ $t('pageInventory.table.serialConsole') }}
+              </p>
+              <dl class="ml-4">
+                <dt>{{ $t('pageInventory.table.connectTypesSupported') }}:</dt>
+                <dd>
+                  {{ dataFormatterArray(item.serialConsoleConnectTypes) }}
+                </dd>
+                <dt>{{ $t('pageInventory.table.maxConcurrentSessions') }}:</dt>
+                <dd>{{ dataFormatter(item.serialConsoleMaxSessions) }}</dd>
+                <dt>{{ $t('pageInventory.table.serviceEnabled') }}:</dt>
+                <dd>{{ dataFormatter(item.serialConsoleEnabled) }}</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 BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/_sila/Mixins/TableRowExpandMixin';
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'identifyLed',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    bmc() {
+      return this.$store.getters['bmc/bmc'];
+    },
+    items() {
+      if (this.bmc) {
+        return [this.bmc];
+      } else {
+        return [];
+      }
+    },
+  },
+  created() {
+    this.$store.dispatch('bmc/getBmcInfo').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-bmc-manager-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    toggleIdentifyLedValue(row) {
+      this.$store
+        .dispatch('bmc/updateIdentifyLedValue', {
+          uri: row.uri,
+          identifyLed: row.identifyLed,
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    // TO DO: remove hasIdentifyLed method once the following story is merged:
+    // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/43179
+    hasIdentifyLed(identifyLed) {
+      return typeof identifyLed === 'boolean';
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableChassis.vue b/src/views/_sila/Overview/Inventory/InventoryTableChassis.vue
new file mode 100644
index 00000000..a5eb5ae6
--- /dev/null
+++ b/src/views/_sila/Overview/Inventory/InventoryTableChassis.vue
@@ -0,0 +1,191 @@
+<template>
+  <page-section :section-title="$t('pageInventory.chassis')">
+    <b-table
+      responsive="md"
+      hover
+      :items="chassis"
+      :fields="fields"
+      show-empty
+      :empty-text="$t('global.table.emptyMessage')"
+      :busy="isBusy"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandChassis"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+      <!-- Toggle identify LED -->
+      <template #cell(identifyLed)="row">
+        <b-form-checkbox
+          v-if="hasIdentifyLed(row.item.identifyLed)"
+          v-model="row.item.identifyLed"
+          name="switch"
+          switch
+          @change="toggleIdentifyLedValue(row.item)"
+        >
+          <span v-if="row.item.identifyLed">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else> {{ $t('global.status.off') }} </span>
+        </b-form-checkbox>
+        <div v-else>--</div>
+      </template>
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Name -->
+                <dt>{{ $t('pageInventory.table.name') }}:</dt>
+                <dd>{{ dataFormatter(item.name) }}</dd>
+                <!-- Part number -->
+                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.partNumber) }}</dd>
+                <!-- Serial Number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+                <!-- Model -->
+                <dt>{{ $t('pageInventory.table.model') }}:</dt>
+                <dd class="mb-2">
+                  {{ dataFormatter(item.model) }}
+                </dd>
+                <!-- Asset tag -->
+                <dt>{{ $t('pageInventory.table.assetTag') }}:</dt>
+                <dd class="mb-2">
+                  {{ dataFormatter(item.assetTag) }}
+                </dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+                <!-- Power state -->
+                <dt>{{ $t('pageInventory.table.power') }}:</dt>
+                <dd>{{ dataFormatter(item.power) }}</dd>
+                <!-- Health rollup -->
+                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
+                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
+                <!-- Chassis Type -->
+                <dt>{{ $t('pageInventory.table.chassisType') }}:</dt>
+                <dd>{{ dataFormatter(item.chassisType) }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Min power -->
+                <dt>{{ $t('pageInventory.table.minPowerWatts') }}:</dt>
+                <dd>{{ dataFormatter(item.minPowerWatts) }}</dd>
+                <!-- Max power -->
+                <dt>{{ $t('pageInventory.table.maxPowerWatts') }}:</dt>
+                <dd>{{ dataFormatter(item.maxPowerWatts) }}</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 BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
+import StatusIcon from '@/components/_sila/Global/StatusIcon';
+
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/_sila/Mixins/TableRowExpandMixin';
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'identifyLed',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    chassis() {
+      return this.$store.getters['chassis/chassis'];
+    },
+  },
+  created() {
+    this.$store.dispatch('chassis/getChassisInfo').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-chassis-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    toggleIdentifyLedValue(row) {
+      this.$store
+        .dispatch('chassis/updateIdentifyLedValue', {
+          uri: row.uri,
+          identifyLed: row.identifyLed,
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    // TO DO: Remove this method when the LocationIndicatorActive is added from backend.
+    hasIdentifyLed(identifyLed) {
+      return typeof identifyLed === 'boolean';
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableDimmSlot.vue b/src/views/_sila/Overview/Inventory/InventoryTableDimmSlot.vue
new file mode 100644
index 00000000..14160502
--- /dev/null
+++ b/src/views/_sila/Overview/Inventory/InventoryTableDimmSlot.vue
@@ -0,0 +1,255 @@
+<template>
+  <page-section :section-title="$t('pageInventory.dimmSlot')">
+    <b-row class="align-items-end">
+      <b-col sm="6" md="5" xl="4">
+        <search
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+      </b-col>
+      <b-col sm="6" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="dimms.length"
+        ></table-cell-count>
+      </b-col>
+    </b-row>
+    <b-table
+      sort-icon-left
+      no-sort-reset
+      hover
+      sort-by="health"
+      responsive="md"
+      show-empty
+      :items="dimms"
+      :fields="fields"
+      :sort-desc="true"
+      :sort-compare="sortCompare"
+      :filter="searchFilter"
+      :empty-text="$t('global.table.emptyMessage')"
+      :empty-filtered-text="$t('global.table.emptySearchMessage')"
+      :busy="isBusy"
+      @filtered="onFiltered"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandDimms"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+      <!-- Toggle identify LED -->
+      <template #cell(identifyLed)="row">
+        <b-form-checkbox
+          v-model="row.item.identifyLed"
+          name="switch"
+          switch
+          @change="toggleIdentifyLedValue(row.item)"
+        >
+          <span v-if="row.item.identifyLed">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else> {{ $t('global.status.off') }} </span>
+        </b-form-checkbox>
+      </template>
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col sm="6" xl="6">
+              <dl>
+                <!-- Part Number -->
+                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.partNumber) }}</dd>
+              </dl>
+              <dl>
+                <!-- Serial Number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+              </dl>
+              <dl>
+                <!-- Spare Part Number -->
+                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
+              </dl>
+              <dl>
+                <!-- Model -->
+                <dt>{{ $t('pageInventory.table.model') }}:</dt>
+                <dd>{{ dataFormatter(item.model) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="6">
+              <dl>
+                <!-- Memory Size in kb -->
+                <dt>{{ $t('pageInventory.table.memorySize') }}:</dt>
+                <dd>{{ dataFormatter(item.memorySize) }} KB</dd>
+              </dl>
+              <dl>
+                <!-- Status-->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+              </dl>
+              <dl>
+                <!-- Enabled-->
+                <dt>{{ $t('pageInventory.table.enabled') }}:</dt>
+                <dd>{{ dataFormatter(item.enabled) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col sm="6" xl="6">
+              <dl>
+                <!-- Description -->
+                <dt>{{ $t('pageInventory.table.description') }}:</dt>
+                <dd>{{ dataFormatter(item.description) }}</dd>
+              </dl>
+              <dl>
+                <!-- Memory Type -->
+                <dt>{{ $t('pageInventory.table.memoryType') }}:</dt>
+                <dd>{{ dataFormatter(item.memoryType) }}</dd>
+              </dl>
+              <dl>
+                <!-- Base Module Type -->
+                <dt>{{ $t('pageInventory.table.baseModuleType') }}:</dt>
+                <dd>{{ dataFormatter(item.baseModuleType) }}</dd>
+              </dl>
+              <dl>
+                <!-- Capacity MiB -->
+                <dt>{{ $t('pageInventory.table.capacityMiB') }}:</dt>
+                <dd>{{ dataFormatter(item.capacityMiB) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="6">
+              <dl>
+                <!-- Bus Width Bits -->
+                <dt>{{ $t('pageInventory.table.busWidthBits') }}:</dt>
+                <dd>{{ dataFormatter(item.busWidthBits) }}</dd>
+              </dl>
+              <dl>
+                <!-- Data Width Bits -->
+                <dt>{{ $t('pageInventory.table.dataWidthBits') }}:</dt>
+                <dd>{{ dataFormatter(item.dataWidthBits) }}</dd>
+              </dl>
+              <dl>
+                <!-- Operating Speed Mhz -->
+                <dt>{{ $t('pageInventory.table.operatingSpeedMhz') }}:</dt>
+                <dd>{{ dataFormatter(item.operatingSpeedMhz) }} MHz</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 TableCellCount from '@/components/_sila/Global/TableCellCount';
+
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+import TableSortMixin from '@/components/_sila/Mixins/TableSortMixin';
+import Search from '@/components/_sila/Global/Search';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/_sila/Mixins/SearchFilterMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/_sila/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+  mixins: [
+    TableRowExpandMixin,
+    DataFormatterMixin,
+    TableSortMixin,
+    SearchFilterMixin,
+  ],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'identifyLed',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      searchFilter: searchFilter,
+      searchTotalFilteredRows: 0,
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.dimms.length;
+    },
+    dimms() {
+      return this.$store.getters['memory/dimms'];
+    },
+  },
+  created() {
+    this.$store.dispatch('memory/getDimms').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-dimm-slot-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    sortCompare(a, b, key) {
+      if (key === 'health') {
+        return this.sortStatus(a, b, key);
+      }
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+    toggleIdentifyLedValue(row) {
+      this.$store
+        .dispatch('memory/updateIdentifyLedValue', {
+          uri: row.uri,
+          identifyLed: row.identifyLed,
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableFans.vue b/src/views/_sila/Overview/Inventory/InventoryTableFans.vue
new file mode 100644
index 00000000..068f41a4
--- /dev/null
+++ b/src/views/_sila/Overview/Inventory/InventoryTableFans.vue
@@ -0,0 +1,190 @@
+<template>
+  <page-section :section-title="$t('pageInventory.fans')">
+    <b-row class="align-items-end">
+      <b-col sm="6" md="5" xl="4">
+        <search
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+      </b-col>
+      <b-col sm="6" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="fans.length"
+        ></table-cell-count>
+      </b-col>
+    </b-row>
+    <b-table
+      sort-icon-left
+      no-sort-reset
+      hover
+      responsive="md"
+      sort-by="health"
+      show-empty
+      :items="fans"
+      :fields="fields"
+      :sort-desc="true"
+      :sort-compare="sortCompare"
+      :filter="searchFilter"
+      :empty-text="$t('global.table.emptyMessage')"
+      :empty-filtered-text="$t('global.table.emptySearchMessage')"
+      :busy="isBusy"
+      @filtered="onFiltered"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandFans"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Name -->
+                <dt>{{ $t('pageInventory.table.name') }}:</dt>
+                <dd>{{ dataFormatter(item.name) }}</dd>
+              </dl>
+              <dl>
+                <!-- Serial number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+              </dl>
+              <dl>
+                <!-- Part number -->
+                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.partNumber) }}</dd>
+              </dl>
+              <dl>
+                <!-- Fan speed -->
+                <dt>{{ $t('pageInventory.table.fanSpeed') }}:</dt>
+                <dd>{{ dataFormatter(item.speed) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+              </dl>
+              <dl>
+                <!-- Health Rollup state -->
+                <dt>{{ $t('pageInventory.table.statusHealthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.healthRollup) }}</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 TableCellCount from '@/components/_sila/Global/TableCellCount';
+
+import StatusIcon from '@/components/_sila/Global/StatusIcon';
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+import TableSortMixin from '@/components/_sila/Mixins/TableSortMixin';
+import Search from '@/components/_sila/Global/Search';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/_sila/Mixins/SearchFilterMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/_sila/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+  mixins: [
+    TableRowExpandMixin,
+    DataFormatterMixin,
+    TableSortMixin,
+    SearchFilterMixin,
+  ],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+          sortable: false,
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+          sortable: true,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'partNumber',
+          label: this.$t('pageInventory.table.partNumber'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'serialNumber',
+          label: this.$t('pageInventory.table.serialNumber'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      searchFilter: searchFilter,
+      searchTotalFilteredRows: 0,
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.fans.length;
+    },
+    fans() {
+      return this.$store.getters['fan/fans'];
+    },
+  },
+  created() {
+    this.$store.dispatch('fan/getFanInfo').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-fans-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    sortCompare(a, b, key) {
+      if (key === 'health') {
+        return this.sortStatus(a, b, key);
+      }
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/Inventory/InventoryTablePowerSupplies.vue b/src/views/_sila/Overview/Inventory/InventoryTablePowerSupplies.vue
new file mode 100644
index 00000000..a55b3e5e
--- /dev/null
+++ b/src/views/_sila/Overview/Inventory/InventoryTablePowerSupplies.vue
@@ -0,0 +1,208 @@
+<template>
+  <page-section :section-title="$t('pageInventory.powerSupplies')">
+    <b-row class="align-items-end">
+      <b-col sm="6" md="5" xl="4">
+        <search
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+      </b-col>
+      <b-col sm="6" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="powerSupplies.length"
+        ></table-cell-count>
+      </b-col>
+    </b-row>
+    <b-table
+      sort-icon-left
+      no-sort-reset
+      hover
+      responsive="md"
+      sort-by="health"
+      show-empty
+      :items="powerSupplies"
+      :fields="fields"
+      :sort-desc="true"
+      :sort-compare="sortCompare"
+      :filter="searchFilter"
+      :empty-text="$t('global.table.emptyMessage')"
+      :empty-filtered-text="$t('global.table.emptySearchMessage')"
+      :busy="isBusy"
+      @filtered="onFiltered"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandPowerSupplies"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Name -->
+                <dt>{{ $t('pageInventory.table.name') }}:</dt>
+                <dd>{{ dataFormatter(item.name) }}</dd>
+                <!-- Part number -->
+                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.partNumber) }}</dd>
+                <!-- Serial number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+                <!-- Spare part number -->
+                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
+                <!-- Model -->
+                <dt>{{ $t('pageInventory.table.model') }}:</dt>
+                <dd>{{ dataFormatter(item.model) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+                <!-- Status Health rollup state -->
+                <dt>{{ $t('pageInventory.table.statusHealthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.statusHealth) }}</dd>
+                <!-- Efficiency percent -->
+                <dt>{{ $t('pageInventory.table.efficiencyPercent') }}:</dt>
+                <dd>{{ dataFormatter(item.efficiencyPercent) }}</dd>
+                <!-- Power input watts -->
+                <dt>{{ $t('pageInventory.table.powerInputWatts') }}:</dt>
+                <dd>{{ dataFormatter(item.powerInputWatts) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
+                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Firmware version -->
+                <dt>{{ $t('pageInventory.table.firmwareVersion') }}:</dt>
+                <dd>{{ dataFormatter(item.firmwareVersion) }}</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 TableCellCount from '@/components/_sila/Global/TableCellCount';
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+import TableSortMixin from '@/components/_sila/Mixins/TableSortMixin';
+import Search from '@/components/_sila/Global/Search';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/_sila/Mixins/SearchFilterMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/_sila/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+  mixins: [
+    TableRowExpandMixin,
+    DataFormatterMixin,
+    TableSortMixin,
+    SearchFilterMixin,
+  ],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+          sortable: false,
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+          sortable: true,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'identifyLed',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      searchFilter: searchFilter,
+      searchTotalFilteredRows: 0,
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.powerSupplies.length;
+    },
+    powerSupplies() {
+      return this.$store.getters['powerSupply/powerSupplies'];
+    },
+  },
+  created() {
+    this.$store.dispatch('powerSupply/getAllPowerSupplies').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-power-supplies-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    sortCompare(a, b, key) {
+      if (key === 'health') {
+        return this.sortStatus(a, b, key);
+      }
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableProcessors.vue b/src/views/_sila/Overview/Inventory/InventoryTableProcessors.vue
new file mode 100644
index 00000000..c6c798cf
--- /dev/null
+++ b/src/views/_sila/Overview/Inventory/InventoryTableProcessors.vue
@@ -0,0 +1,251 @@
+<template>
+  <page-section :section-title="$t('pageInventory.processors')">
+    <!-- Search -->
+    <b-row class="align-items-end">
+      <b-col sm="6" md="5" xl="4">
+        <search
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+      </b-col>
+      <b-col sm="6" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="processors.length"
+        ></table-cell-count>
+      </b-col>
+    </b-row>
+    <b-table
+      sort-icon-left
+      no-sort-reset
+      hover
+      responsive="md"
+      show-empty
+      :items="processors"
+      :fields="fields"
+      :sort-desc="true"
+      :filter="searchFilter"
+      :empty-text="$t('global.table.emptyMessage')"
+      :empty-filtered-text="$t('global.table.emptySearchMessage')"
+      :busy="isBusy"
+      @filtered="onFiltered"
+    >
+      <!-- Expand button -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandProcessors"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+
+      <!-- Toggle identify LED -->
+      <template #cell(identifyLed)="row">
+        <b-form-checkbox
+          v-if="hasIdentifyLed(row.item.identifyLed)"
+          v-model="row.item.identifyLed"
+          name="switch"
+          switch
+          @change="toggleIdentifyLedValue(row.item)"
+        >
+          <span v-if="row.item.identifyLed">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else> {{ $t('global.status.off') }} </span>
+        </b-form-checkbox>
+        <div v-else>--</div>
+      </template>
+
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Name -->
+                <dt>{{ $t('pageInventory.table.name') }}:</dt>
+                <dd>{{ dataFormatter(item.name) }}</dd>
+                <!-- Part Number -->
+                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.partNumber) }}</dd>
+                <!-- Serial Number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+                <!-- Spare Part Number -->
+                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
+                <!-- Model -->
+                <dt>{{ $t('pageInventory.table.model') }}:</dt>
+                <dd>{{ dataFormatter(item.model) }}</dd>
+                <!-- Asset Tag -->
+                <dt>{{ $t('pageInventory.table.assetTag') }}:</dt>
+                <dd>{{ dataFormatter(item.assetTag) }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+                <!-- Health Rollup -->
+                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col class="mt-1" sm="6" xl="6">
+              <dl>
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
+                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
+                <!-- Processor Type -->
+                <dt>{{ $t('pageInventory.table.processorType') }}:</dt>
+                <dd>{{ dataFormatter(item.processorType) }}</dd>
+                <!-- Processor Architecture -->
+                <dt>{{ $t('pageInventory.table.processorArchitecture') }}:</dt>
+                <dd>{{ dataFormatter(item.processorArchitecture) }}</dd>
+                <!-- Instruction Set -->
+                <dt>{{ $t('pageInventory.table.instructionSet') }}:</dt>
+                <dd>{{ dataFormatter(item.instructionSet) }}</dd>
+                <!-- Version -->
+                <dt>{{ $t('pageInventory.table.version') }}:</dt>
+                <dd>{{ dataFormatter(item.version) }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-1" sm="6" xl="6">
+              <dl>
+                <!-- Min Speed MHz -->
+                <dt>{{ $t('pageInventory.table.minSpeedMHz') }}:</dt>
+                <dd>{{ dataFormatter(item.minSpeedMHz) }}</dd>
+                <!-- Max Speed MHz -->
+                <dt>{{ $t('pageInventory.table.maxSpeedMHz') }}:</dt>
+                <dd>{{ dataFormatter(item.maxSpeedMHz) }}</dd>
+                <!-- Total Cores -->
+                <dt>{{ $t('pageInventory.table.totalCores') }}:</dt>
+                <dd>{{ dataFormatter(item.totalCores) }}</dd>
+                <!-- Total Threads -->
+                <dt>{{ $t('pageInventory.table.totalThreads') }}:</dt>
+                <dd>{{ dataFormatter(item.totalThreads) }}</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 TableCellCount from '@/components/_sila/Global/TableCellCount';
+import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
+import TableSortMixin from '@/components/_sila/Mixins/TableSortMixin';
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+import Search from '@/components/_sila/Global/Search';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/_sila/Mixins/SearchFilterMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/_sila/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+  mixins: [
+    BVToastMixin,
+    TableRowExpandMixin,
+    DataFormatterMixin,
+    TableSortMixin,
+    SearchFilterMixin,
+  ],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+          sortable: false,
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+          sortable: true,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'identifyLed',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+          sortable: false,
+        },
+      ],
+      searchFilter: searchFilter,
+      searchTotalFilteredRows: 0,
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.processors.length;
+    },
+    processors() {
+      return this.$store.getters['processors/processors'];
+    },
+  },
+  created() {
+    this.$store.dispatch('processors/getProcessorsInfo').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-processors-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+    toggleIdentifyLedValue(row) {
+      this.$store
+        .dispatch('processors/updateIdentifyLedValue', {
+          uri: row.uri,
+          identifyLed: row.identifyLed,
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    // TO DO: remove hasIdentifyLed when the following is merged:
+    // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/37045
+    hasIdentifyLed(identifyLed) {
+      return typeof identifyLed === 'boolean';
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableSystem.vue b/src/views/_sila/Overview/Inventory/InventoryTableSystem.vue
new file mode 100644
index 00000000..eacc4a06
--- /dev/null
+++ b/src/views/_sila/Overview/Inventory/InventoryTableSystem.vue
@@ -0,0 +1,224 @@
+<template>
+  <page-section :section-title="$t('pageInventory.system')">
+    <b-table
+      responsive="md"
+      hover
+      show-empty
+      :items="systems"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+      :busy="isBusy"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandSystem"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+
+      <template #cell(locationIndicatorActive)="{ item }">
+        <b-form-checkbox
+          id="identifyLedSwitchSystem"
+          v-model="item.locationIndicatorActive"
+          data-test-id="inventorySystem-toggle-identifyLed"
+          switch
+          @change="toggleIdentifyLedSwitch"
+        >
+          <span v-if="item.locationIndicatorActive">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else>{{ $t('global.status.off') }}</span>
+        </b-form-checkbox>
+      </template>
+
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col class="mt-2" sm="6">
+              <dl>
+                <!-- Serial number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+                <!-- Model -->
+                <dt>{{ $t('pageInventory.table.model') }}:</dt>
+                <dd>{{ dataFormatter(item.model) }}</dd>
+                <!-- Asset tag -->
+                <dt>{{ $t('pageInventory.table.assetTag') }}:</dt>
+                <dd class="mb-2">
+                  {{ dataFormatter(item.assetTag) }}
+                </dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+                <!-- Power state -->
+                <dt>{{ $t('pageInventory.table.power') }}:</dt>
+                <dd>{{ dataFormatter(item.powerState) }}</dd>
+                <!-- Health rollup -->
+                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col class="mt-1" sm="6">
+              <dl>
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
+                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
+                <!-- Description -->
+                <dt>{{ $t('pageInventory.table.description') }}:</dt>
+                <dd>{{ dataFormatter(item.description) }}</dd>
+                <!-- Sub Model -->
+                <dt>{{ $t('pageInventory.table.subModel') }}:</dt>
+                <dd>
+                  {{ dataFormatter(item.subModel) }}
+                </dd>
+                <!-- System Type -->
+                <dt>{{ $t('pageInventory.table.systemType') }}:</dt>
+                <dd>
+                  {{ dataFormatter(item.systemType) }}
+                </dd>
+              </dl>
+            </b-col>
+            <b-col sm="6">
+              <!-- Memory Summary -->
+              <p class="mt-1 mb-2 h6 float-none m-0">
+                {{ $t('pageInventory.table.memorySummary') }}
+              </p>
+              <dl class="ml-4">
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.memorySummaryState) }}</dd>
+                <!-- Health -->
+                <dt>{{ $t('pageInventory.table.health') }}:</dt>
+                <dd>{{ dataFormatter(item.memorySummaryHealth) }}</dd>
+                <!-- Health Roll  -->
+                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.memorySummaryHealthRollup) }}</dd>
+                <!-- Total system memory -->
+                <dt>{{ $t('pageInventory.table.totalSystemMemoryGiB') }}:</dt>
+                <dd>{{ dataFormatter(item.totalSystemMemoryGiB) }}GB</dd>
+              </dl>
+              <!-- Processor Summary -->
+              <p class="mt-1 mb-2 h6 float-none m-0">
+                {{ $t('pageInventory.table.processorSummary') }}
+              </p>
+              <dl class="ml-4">
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.processorSummaryState) }}</dd>
+                <!-- Health -->
+                <dt>{{ $t('pageInventory.table.health') }}:</dt>
+                <dd>{{ dataFormatter(item.processorSummaryHealth) }}</dd>
+                <!-- Health Rollup -->
+                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.processorSummaryHealthRoll) }}</dd>
+                <!-- Count -->
+                <dt>{{ $t('pageInventory.table.count') }}:</dt>
+                <dd>{{ dataFormatter(item.processorSummaryCount) }}</dd>
+                <!-- Core Count -->
+                <dt>{{ $t('pageInventory.table.coreCount') }}:</dt>
+                <dd>{{ dataFormatter(item.processorSummaryCoreCount) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </b-container>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin';
+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 TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/_sila/Mixins/TableRowExpandMixin';
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'hardwareType',
+          label: this.$t('pageInventory.table.hardwareType'),
+          formatter: this.dataFormatter,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'locationIndicatorActive',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    systems() {
+      return this.$store.getters['system/systems'];
+    },
+  },
+  created() {
+    this.$store.dispatch('system/getSystem').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-system-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    toggleIdentifyLedSwitch(state) {
+      this.$store
+        .dispatch('system/changeIdentifyLedState', state)
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/Inventory/index.js b/src/views/_sila/Overview/Inventory/index.js
new file mode 100644
index 00000000..c9fde8d2
--- /dev/null
+++ b/src/views/_sila/Overview/Inventory/index.js
@@ -0,0 +1,2 @@
+import Inventory from './Inventory.vue';
+export default Inventory;