OptimCloud-gw-ui/src/components/DeviceList.js

import React, { useEffect, useState } from 'react';
import {
  CBadge,
  CCardBody,
  CDataTable,
  CButton,
  CLink,
  CCard,
  CCardHeader,
  CRow,
  CCol,
  CPopover,
} from '@coreui/react';
import ReactPaginate from 'react-paginate';
import Select from 'react-select';
import { cilSync, cilInfo } from '@coreui/icons';
import CIcon from '@coreui/icons-react';
import { getToken } from '../utils/authHelper';
import axiosInstance from '../utils/axiosInstance';
import { cleanBytesString, cropStringWithEllipsis } from '../utils/helper';
import iotIcon from '../assets/icons/iot.png';
import internetSwitch from '../assets/icons/networkswitch.png';

const DeviceList = () => {
  const [loadedSerials, setLoadedSerials] = useState(false);
  const [serialNumbers, setSerialNumbers] = useState([]);
  const [page, setPage] = useState(0);
  const [pageCount, setPageCount] = useState(0);
  const [devicesPerPage, setDevicesPerPage] = useState(10);
  const [devices, setDevices] = useState([]);
  const [loading, setLoading] = useState(true);

  const getSerialNumbers = () => {
    const token = getToken();
    setLoading(true);

    const headers = {
      Accept: 'application/json',
      Authorization: `Bearer ${token}`,
    };

    axiosInstance
      .get('/devices?serialOnly=true', {
        headers,
      })
      .then((response) => {
        setSerialNumbers(response.data.serialNumbers);
        setLoadedSerials(true);
      })
      .catch((error) => {
        setLoading(false);
        console.log(error.response);
      });
  };

  const getDeviceInformation = () => {
    const token = getToken();
    setLoading(true);

    const headers = {
      Accept: 'application/json',
      Authorization: `Bearer ${token}`,
    };

    const startIndex = page * devicesPerPage;
    const endIndex = parseInt(startIndex, 10) + parseInt(devicesPerPage, 10);
    const serialsToGet = serialNumbers.slice(startIndex, endIndex).join(',');

    axiosInstance
      .get(`/devices?deviceWithStatus=true&select=${serialsToGet}`, {
        headers,
      })
      .then((response) => {
        setDevices(response.data.devicesWithStatus);
        setLoading(false);
      })
      .catch((error) => {
        setLoading(false);
        console.log(error.response);
      });
  };

  const updateDevicesPerPage = (value) => {
    setDevicesPerPage(value);
  };

  const updatePageCount = ({ selected: selectedPage }) => {
    setPage(selectedPage);
  };

  // Initial load
  useEffect(() => {
    getSerialNumbers();
  }, []);

  // Updating the devices only if serial numbers, page number or devices per page changes
  useEffect(() => {
    if (loadedSerials) getDeviceInformation();
  }, [serialNumbers, page, devicesPerPage, loadedSerials]);

  useEffect(() => {
    if (loadedSerials) {
      const count = Math.ceil(serialNumbers.length / devicesPerPage);
      setPageCount(count);
    }
  }, [devicesPerPage, loadedSerials]);

  return (
    <DeviceListDisplay
      devices={devices}
      loading={loading}
      updateDevicesPerPage={updateDevicesPerPage}
      pageCount={pageCount}
      updatePage={updatePageCount}
      pageRangeDisplayed={5}
    />
  );
};

const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount, updatePage }) => {
  const columns = [
    { key: 'deviceType', label: '', filter: false, sorter: false, _style: { width: '5%' } },
    { key: 'serialNumber', _style: { width: '5%' } },
    { key: 'UUID', label: 'Config Id', _style: { width: '5%' } },
    { key: 'firmware', filter: false, _style: { width: '20%' } },
    { key: 'manufacturer', filter: false, _style: { width: '20%' } },
    { key: 'txBytes', label: 'Tx', filter: false, _style: { width: '10%' } },
    { key: 'rxBytes', label: 'Rx', filter: false, _style: { width: '10%' } },
    { key: 'ipAddress', _style: { width: '20%' } },
    {
      key: 'show_details',
      label: '',
      _style: { width: '3%' },
      sorter: false,
      filter: false,
    },
    {
      key: 'refresh',
      label: '',
      _style: { width: '2%' },
      sorter: false,
      filter: false,
    },
  ];

  const selectOptions = [
    { value: '10', label: '10' },
    { value: '25', label: '25' },
    { value: '50', label: '50' },
  ];

  const getDeviceIcon = (deviceType) => {
    if (deviceType === 'AP_Default') {
      return <CIcon name="cilRouter" size="2xl" alt="AP" />;
    }
    if (deviceType === 'IOT') {
      return <img src={iotIcon} style={{ height: '32px', width: '32px' }} alt="IOT" />;
    }
    if (deviceType === 'SWITCH') {
      return <img src={internetSwitch} style={{ height: '32px', width: '32px' }} alt="SWITCH" />;
    }
    return null;
  };

  const getStatusBadge = (status) => {
    if (status) {
      return 'success';
    }
    return 'danger';
  };

  return (
    <>
      <CCard>
        <CCardHeader>
          <CRow>
            <CCol />
            <CCol xs={2}>
              <Select
                isClearable={false}
                options={selectOptions}
                defaultValue={{ value: '10', label: '10' }}
                onChange={(value) => updateDevicesPerPage(value.value)}
              />
            </CCol>
          </CRow>
        </CCardHeader>
        <CCardBody>
          <CDataTable
            items={devices ?? []}
            fields={columns}
            border
            hover
            loading={loading}
            scopedSlots={{
              deviceType: (item) => (
                <td style={{ textAlign: 'center' }}>
                  <CPopover
                    content={item.connected ? 'Connected' : 'Not Connected'}
                    placement="top"
                  >
                    <CBadge color={getStatusBadge(item.connected)}>
                      {getDeviceIcon(item.deviceType) ?? item.deviceType}
                    </CBadge>
                  </CPopover>
                </td>
              ),
              firmware: (item) => (
                <td>
                  <CPopover content={item.firmware ? item.firmware : 'N/A'} placement="top">
                    <p>{cropStringWithEllipsis(item.firmware, 22)}</p>
                  </CPopover>
                </td>
              ),
              manufacturer: (item) => (
                <td>
                  <CPopover content={item.manufacturer ? item.manufacturer : 'N/A'} placement="top">
                    <p>{cropStringWithEllipsis(item.manufacturer, 23)}</p>
                  </CPopover>
                </td>
              ),
              txBytes: (item) => <td>{cleanBytesString(item.txBytes)}</td>,
              rxBytes: (item) => <td>{cleanBytesString(item.rxBytes)}</td>,
              ipAddress: (item) => (
                <td>
                  <CPopover content={item.ipAddress ? item.ipAddress : 'N/A'} placement="top">
                    <p>{cropStringWithEllipsis(item.ipAddress, 22)}</p>
                  </CPopover>
                </td>
              ),
              refresh: () => (
                <td className="py-2">
                  <CButton color="primary" variant="outline" size="sm">
                    <CIcon name="cil-sync" content={cilSync} size="sm" />
                  </CButton>
                </td>
              ),
              show_details: (item) => (
                <td className="py-2">
                  <CLink
                    className="c-subheader-nav-link"
                    aria-current="page"
                    to={() => `/devices/${item.serialNumber}`}
                  >
                    <CButton color="primary" variant="outline" shape="square" size="sm">
                      <CIcon name="cil-info" content={cilInfo} size="l" />
                    </CButton>
                  </CLink>
                </td>
              ),
            }}
          />
          <ReactPaginate
            previousLabel="← Previous"
            nextLabel="Next →"
            pageCount={pageCount}
            onPageChange={updatePage}
            breakClassName="page-item"
            breakLinkClassName="page-link"
            containerClassName="pagination"
            pageClassName="page-item"
            pageLinkClassName="page-link"
            previousClassName="page-item"
            previousLinkClassName="page-link"
            nextClassName="page-item"
            nextLinkClassName="page-link"
            activeClassName="active"
          />
        </CCardBody>
      </CCard>
    </>
  );
};

export default DeviceList;