src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue

<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
      must-sort
      hover
      responsive="md"
      thead-class="table-light"
      :sort-by="['health']"
      show-empty
      :items="powerSupplies"
      :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 chevron icon -->
      <template #cell(expandRow)="row">
        <b-button
          variant="link"
          data-test-id="hardwareStatus-button-expandPowerSupplies"
          :title="expandRowLabel"
          class="btn-icon-only"
          :class="{ collapsed: !row.detailsShowing }"
          @click="toggleRowDetails(row)"
        >
          <icon-chevron />
          <span class="visually-hidden">{{ expandRowLabel }}</span>
        </b-button>
      </template>

      <!-- Health -->
      <template #cell(health)="{ value }">
        <status-icon :status="statusIcon(value)" />
        {{ value }}
      </template>

      <!-- StatusState -->
      <template #cell(statusState)="{ value }">
        <status-icon :status="statusStateIcon(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) }}
                  {{ $t('unit.Percent') }}
                </dd>
                <!-- Power input watts -->
                <dt>{{ $t('pageInventory.table.powerInputWatts') }}:</dt>
                <dd>
                  {{ dataFormatter(item.powerInputWatts) }}
                  {{ $t('unit.W') }}
                </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/Global/PageSection';
import IconChevron from '@carbon/icons-vue/es/chevron--down/20';

import StatusIcon from '@/components/Global/StatusIcon';
import TableCellCount from '@/components/Global/TableCellCount';
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
import TableSortMixin from '@/components/Mixins/TableSortMixin';
import Search from '@/components/Global/Search';
import SearchFilterMixin, {
  searchFilter,
} from '@/components/Mixins/SearchFilterMixin';
import TableRowExpandMixin, {
  expandRowLabel,
} from '@/components/Mixins/TableRowExpandMixin';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';

export default {
  components: {
    IconChevron,
    PageSection,
    StatusIcon,
    Search,
    TableCellCount,
  },
  mixins: [
    TableRowExpandMixin,
    DataFormatterMixin,
    TableSortMixin,
    SearchFilterMixin,
  ],
  data() {
    return {
      $t: useI18n().t,
      isBusy: true,
      fields: [
        {
          key: 'expandRow',
          label: '',
          tdClass: 'table-row-expand',
          sortable: false,
        },
        {
          key: 'id',
          label: i18n.global.t('pageInventory.table.id'),
          formatter: this.dataFormatter,
          sortable: true,
        },
        {
          key: 'health',
          label: i18n.global.t('pageInventory.table.health'),
          formatter: this.dataFormatter,
          sortable: true,
          tdClass: 'text-nowrap',
        },
        {
          key: 'statusState',
          label: i18n.global.t('pageInventory.table.state'),
          formatter: this.dataFormatter,
          tdClass: 'text-nowrap',
        },
        {
          key: 'locationNumber',
          label: i18n.global.t('pageInventory.table.locationNumber'),
          formatter: this.dataFormatter,
          sortable: true,
        },
        {
          key: 'identifyLed',
          label: i18n.global.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
      require('@/eventBus').default.$emit(
        'hardware-status-power-supplies-complete',
      );
      this.isBusy = false;
    });
  },
  methods: {
    sortCompare(a, b, key) {
      if (key === 'health') {
        return this.sortStatus(a, b, key);
      } else if (key === 'statusState') {
        return this.sortStatusState(a, b, key);
      }
    },
    onFiltered(filteredItems) {
      this.searchTotalFilteredRows = filteredItems.length;
    },
    /**
     * Returns the icon to use for status state based on the given status.
     * @param {string} status The status to determine the icon for.
     * @return {string} The icon for the given status.
     */
    statusStateIcon(status) {
      switch (status) {
        case 'Enabled':
          return 'success';
        case 'Absent':
          return 'warning';
        default:
          return '';
      }
    },
    /**
     * Sorts the status state of two objects based on the provided key.
     * @param {Object} a The first object to compare.
     * @param {Object} b The second object to compare.
     * @param {string} key The key to use for comparison.
     */
    sortStatusState(a, b, key) {
      const statusState = ['Enabled', 'Absent'];
      return statusState.indexOf(a[key]) - statusState.indexOf(b[key]);
    },
  },
};
</script>