PSRAM Status (#159)

Show PSRAM on status screen
Use correct calculation for heap fragmentation
Fix display of application error component

interface/src/components/ApplicationError.tsx

@@ -33,11 +33,13 @@ const ApplicationError: FC<ApplicationErrorProps> = ({ error }) => {
     <div className={classes.siteErrorPage}>
       <CssBaseline />
       <Paper className={classes.siteErrorPagePanel} elevation={10}>
-        <Box display="flex" flexDirection="row" justifyContent="center">
+        <Box display="flex" flexDirection="row" justifyContent="center" alignItems="center" mb={2}>
           <WarningIcon fontSize="large" color="error" />
-          <Typography variant="h4" gutterBottom>
-            &nbsp;Application error
-          </Typography>
+          <Box ml={2}>
+            <Typography variant="h4">
+              Application error
+            </Typography>
+          </Box>
         </Box>
         <Typography variant="subtitle1" gutterBottom>
           Failed to configure the application, please refresh to try again.

interface/src/system/SystemStatusForm.tsx

@@ -9,6 +9,7 @@ import ShowChartIcon from '@material-ui/icons/ShowChart';
 import SdStorageIcon from '@material-ui/icons/SdStorage';
 import FolderIcon from '@material-ui/icons/Folder';
 import DataUsageIcon from '@material-ui/icons/DataUsage';
+import AppsIcon from '@material-ui/icons/Apps';
 import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import SettingsBackupRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
@@ -17,7 +18,7 @@ import { redirectingAuthorizedFetch, AuthenticatedContextProps, withAuthenticate
 import { RestFormProps, FormButton, ErrorButton } from '../components';
 import { FACTORY_RESET_ENDPOINT, RESTART_ENDPOINT } from '../api';
 
-import { SystemStatus } from './types';
+import { SystemStatus, EspPlatform } from './types';
 
 interface SystemStatusFormState {
   confirmRestart: boolean;
@@ -31,7 +32,6 @@ function formatNumber(num: number) {
   return new Intl.NumberFormat().format(num);
 }
 
-
 class SystemStatusForm extends Component<SystemStatusFormProps, SystemStatusFormState> {
 
   state: SystemStatusFormState = {
@@ -40,11 +40,6 @@ class SystemStatusForm extends Component<SystemStatusFormProps, SystemStatusForm
     processing: false
   }
 
-  approxHeapFragmentation = (): number => {
-    const { data: { max_alloc_heap, free_heap } } = this.props;
-    return 100 - Math.round((max_alloc_heap / free_heap) * 100);
-  }
-
   createListItems() {
     const { data } = this.props
     return (
@@ -73,8 +68,22 @@ class SystemStatusForm extends Component<SystemStatusFormProps, SystemStatusForm
               <MemoryIcon />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary="Heap (Free / Max Alloc)" secondary={formatNumber(data.free_heap) + ' / ' + formatNumber(data.max_alloc_heap) + ' bytes (~' + this.approxHeapFragmentation() + '%\xa0fragmentation)'} />
+          <ListItemText primary="Heap (Free / Max Alloc)" secondary={formatNumber(data.free_heap) + ' / ' + formatNumber(data.max_alloc_heap) + ' bytes ' + (data.esp_platform === EspPlatform.ESP8266 ? '(' + data.heap_fragmentation + '% fragmentation)' : '')} />
         </ListItem>
+        {
+          (data.esp_platform === EspPlatform.ESP32 && data.psram_size > 0) && (
+            <Fragment>
+              <Divider variant="inset" component="li" />
+              <ListItem >
+                <ListItemAvatar>
+                  <Avatar>
+                    <AppsIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText primary="PSRAM (Size / Free)" secondary={formatNumber(data.psram_size) + ' / ' + formatNumber(data.free_psram) + ' bytes'} />
+              </ListItem>
+            </Fragment>)
+        }
         <Divider variant="inset" component="li" />
         <ListItem >
           <ListItemAvatar>

interface/src/system/types.ts

@@ -1,5 +1,10 @@
-export interface SystemStatus {
-  esp_platform: string;
+export enum EspPlatform {
+  ESP8266 = "esp8266",
+  ESP32 = "esp32"
+}
+
+interface ESPSystemStatus {
+  esp_platform: EspPlatform;
   max_alloc_heap: number;
   cpu_freq_mhz: number;
   free_heap: number;
@@ -12,6 +17,19 @@ export interface SystemStatus {
   fs_total: number;
 }
 
+export interface ESP32SystemStatus extends ESPSystemStatus {
+  esp_platform: EspPlatform.ESP32;
+  psram_size: number;
+  free_psram: number;
+}
+
+export interface ESP8266SystemStatus extends ESPSystemStatus {
+  esp_platform: EspPlatform.ESP8266;
+  heap_fragmentation: number;
+}
+
+export type SystemStatus = ESP8266SystemStatus | ESP32SystemStatus;
+
 export interface OTASettings {
   enabled: boolean;
   port: number;