chore: split SystemStatus.tsx into multiple files

Author: Julusian

packages/webui/src/client/ui/Settings/components/GenericDeviceSettingsComponent.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PeripheralDevice, PeripheralDeviceType } from '@sofie-automation/corelib/dist/dataModel/PeripheralDevice'
-import { DeviceItem } from '../../Status/SystemStatus'
+import { DeviceItem } from '../../Status/SystemStatus/DeviceItem'
 import { ConfigManifestOAuthFlowComponent } from './ConfigManifestOAuthFlow'
 import { protectString, unprotectString } from '../../../lib/tempLib'
 import { SchemaFormForCollection } from '../../../lib/forms/SchemaFormForCollection'

packages/webui/src/client/ui/Status.tsx

@@ -1,7 +1,7 @@
 import { useSubscription } from '../lib/ReactMeteorData/react-meteor-data'
 import { useTranslation } from 'react-i18next'
 import { Route, Switch, Redirect, NavLink } from 'react-router-dom'
-import SystemStatus from './Status/SystemStatus'
+import SystemStatus from './Status/SystemStatus/SystemStatus'
 import { MediaManagerStatus } from './Status/MediaManager'
 import { ExternalMessages } from './Status/ExternalMessages'
 import { UserActivity } from './Status/UserActivity'

packages/webui/src/client/ui/Status/StatusCodePill.tsx

@@ -1,9 +1,29 @@
 import * as React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation, TFunction } from 'react-i18next'
 import { assertNever } from '../../lib/tempLib'
 import ClassNames from 'classnames'
 import { StatusCode } from '@sofie-automation/blueprints-integration'
-import { statusCodeToString } from './SystemStatus'
+import {} from './SystemStatus/SystemStatus'
+
+export function statusCodeToString(t: TFunction, statusCode: StatusCode): string {
+	switch (statusCode) {
+		case StatusCode.UNKNOWN:
+			return t('Unknown')
+		case StatusCode.GOOD:
+			return t('Good')
+		case StatusCode.WARNING_MINOR:
+			return t('Minor Warning')
+		case StatusCode.WARNING_MAJOR:
+			return t('Warning')
+		case StatusCode.BAD:
+			return t('Bad')
+		case StatusCode.FATAL:
+			return t('Fatal')
+		default:
+			assertNever(statusCode)
+			return t('Unknown')
+	}
+}
 
 export const StatusCodePill: React.FC<{
 	connected: boolean