Function Overview

javascript/grid-ui/src/screens/Overview/Overview.tsx:46–241

()

import { GRID_SESSIONS_QUERY } from '../../graphql/sessions'

function Overview (): JSX.Element {
  const { loading, error, data } = useQuery(NODES_QUERY, {
    pollInterval: GridConfig.status.xhrPollingIntervalMillis,
    fetchPolicy: 'network-only'
  })

  const { data: sessionsData } = useQuery(GRID_SESSIONS_QUERY, {
    pollInterval: GridConfig.status.xhrPollingIntervalMillis,
    fetchPolicy: 'network-only'
  })

  function compareSlotStereotypes(a: NodeInfo, b: NodeInfo, attribute: string): number {
    const joinA = a.slotStereotypes.length === 1
      ? a.slotStereotypes[0][attribute]
      : a.slotStereotypes.slice().map(st => st[attribute]).reverse().join(',')
    const joinB = b.slotStereotypes.length === 1
      ? b.slotStereotypes[0][attribute]
      : b.slotStereotypes.slice().map(st => st[attribute]).reverse().join(',')
    return joinA.localeCompare(joinB)
  }

  const sortProperties = {
    'platformName': (a, b) => compareSlotStereotypes(a, b, 'platformName'),
    'status': (a, b) => (a.status ?? '').localeCompare(b.status ?? ''),
    'uri': (a, b) => (a.uri ?? '').localeCompare(b.uri ?? ''),
    'browserName': (a, b) => compareSlotStereotypes(a, b, 'browserName'),
    'browserVersion': (a, b) => compareSlotStereotypes(a, b, 'browserVersion'),
    'slotCount': (a, b) => {
      const valueA = a.slotStereotypes.reduce((sum, st) => sum + st.slotCount, 0)
      const valueB = b.slotStereotypes.reduce((sum, st) => sum + st.slotCount, 0)
      return valueA < valueB ? -1 : 1
    },
    'id': (a, b) => (a.id < b.id ? -1 : 1)
  }

  const sortPropertiesLabel = {
    'platformName': 'Platform Name',
    'status': 'Status',
    'uri': 'URI',
    'browserName': 'Browser Name',
    'browserVersion': 'Browser Version',
    'slotCount': 'Slot Count',
    'id': 'ID'
  }

  const [sortOption, setSortOption] = useState(Object.keys(sortProperties)[0])
  const [sortOrder, setSortOrder] = useState(1)
  const [sortedNodes, setSortedNodes] = useState<NodeInfo[]>([])
  const [isDescending, setIsDescending] = useState(false)

  const handleSortChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    setSortOption(event.target.value as string)
  }

  const handleOrderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setIsDescending(event.target.checked)
    setSortOrder(event.target.checked ? -1 : 1)
  }