diff --git a/Data/Server/WebUI/package.json b/Data/Server/WebUI/package.json index ad3d25b..5123ce9 100644 --- a/Data/Server/WebUI/package.json +++ b/Data/Server/WebUI/package.json @@ -10,6 +10,7 @@ "dependencies": { "@emotion/react": "11.14.0", "@emotion/styled": "11.14.0", + "@fortawesome/fontawesome-free": "6.6.0", "@fontsource/ibm-plex-sans": "5.0.17", "@mui/icons-material": "7.0.2", "@mui/material": "7.0.2", diff --git a/Data/Server/WebUI/src/Devices/Device_List.jsx b/Data/Server/WebUI/src/Devices/Device_List.jsx index 5c0ff15..09f7daf 100644 --- a/Data/Server/WebUI/src/Devices/Device_List.jsx +++ b/Data/Server/WebUI/src/Devices/Device_List.jsx @@ -46,6 +46,34 @@ const themeClassName = myTheme.themeName || "ag-theme-quartz"; const gridFontFamily = '"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif'; const iconFontFamily = '"Quartz Regular"'; +const getOsIconClass = (osName) => { + const value = (osName || "").toString().toLowerCase(); + if (!value) return ""; + + if (value.includes("mac") || value.includes("os x") || value.includes("darwin")) { + return "fa-brands fa-apple"; + } + + if (value.includes("win")) { + return "fa-brands fa-windows"; + } + + if ( + value.includes("linux") || + value.includes("ubuntu") || + value.includes("debian") || + value.includes("fedora") || + value.includes("red hat") || + value.includes("centos") || + value.includes("suse") || + value.includes("rhel") + ) { + return "fa-brands fa-linux"; + } + + return ""; +}; + const DescriptionCellRenderer = React.memo(function DescriptionCellRenderer(props) { const { value, data, onSaveDescription, fontFamily } = props; const safeValue = typeof value === "string" ? value : value == null ? "" : String(value); @@ -974,6 +1002,43 @@ export default function DeviceList({ [statusTokenTheme, gridFontFamily] ); + const osCellRenderer = useCallback((params) => { + const rawValue = params.value; + const label = typeof rawValue === "string" ? rawValue : rawValue == null ? "" : String(rawValue); + const display = label.trim() || "-"; + const iconClass = getOsIconClass(label); + + return ( + + {iconClass ? ( + + ); + }, []); + const actionCellRenderer = useCallback( (params) => { const row = params.data; @@ -1117,6 +1182,7 @@ export default function DeviceList({ width: 410, minWidth: 410, flex: 1, + cellRenderer: osCellRenderer, }; case "internalIp": return { diff --git a/Data/Server/WebUI/src/index.jsx b/Data/Server/WebUI/src/index.jsx index 157e619..a64e173 100644 --- a/Data/Server/WebUI/src/index.jsx +++ b/Data/Server/WebUI/src/index.jsx @@ -8,6 +8,7 @@ import "normalize.css/normalize.css"; import "@fontsource/ibm-plex-sans/400.css"; import "@fontsource/ibm-plex-sans/500.css"; import "@fontsource/ibm-plex-sans/600.css"; +import "@fortawesome/fontawesome-free/css/all.min.css"; import './Borealis.css'; // Global Theming for All of Borealis import App from './App.jsx';