Merge pull request #128 from rjwats/status-improvements2

Status improvements - add file system

interface/src/system/SystemStatusForm.tsx

@@ -7,6 +7,7 @@ import DevicesIcon from '@material-ui/icons/Devices';
 import MemoryIcon from '@material-ui/icons/Memory';
 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 PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
 import RefreshIcon from '@material-ui/icons/Refresh';
@@ -26,6 +27,11 @@ interface SystemStatusFormState {
 
 type SystemStatusFormProps = AuthenticatedContextProps & RestFormProps<SystemStatus>;
 
+function formatNumber(num: number) {
+  return new Intl.NumberFormat().format(num);
+}
+
+
 class SystemStatusForm extends Component<SystemStatusFormProps, SystemStatusFormState> {
 
   state: SystemStatusFormState = {
@@ -67,7 +73,7 @@ class SystemStatusForm extends Component<SystemStatusFormProps, SystemStatusForm
               <MemoryIcon />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary="Heap (Free / Max Alloc)" secondary={data.free_heap + ' / ' + data.max_alloc_heap + ' bytes (~' + this.approxHeapFragmentation() + '% fragmentation)'} />
+          <ListItemText primary="Heap (Free / Max Alloc)" secondary={formatNumber(data.free_heap) + ' / ' + formatNumber(data.max_alloc_heap) + ' bytes (~' + this.approxHeapFragmentation() + '%\xa0fragmentation)'} />
         </ListItem>
         <Divider variant="inset" component="li" />
         <ListItem >
@@ -76,7 +82,7 @@ class SystemStatusForm extends Component<SystemStatusFormProps, SystemStatusForm
               <DataUsageIcon />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary="Sketch (Size / Free)" secondary={data.sketch_size + ' / ' + data.free_sketch_space + ' bytes'} />
+          <ListItemText primary="Sketch (Size / Free)" secondary={formatNumber(data.sketch_size) + ' / ' + formatNumber(data.free_sketch_space) + ' bytes'} />
         </ListItem>
         <Divider variant="inset" component="li" />
         <ListItem >
@@ -85,7 +91,16 @@ class SystemStatusForm extends Component<SystemStatusFormProps, SystemStatusForm
               <SdStorageIcon />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary="Flash Chip (Size / Speed)" secondary={data.flash_chip_size + ' bytes / ' + (data.flash_chip_speed / 1000000).toFixed(0) + ' MHz'} />
+          <ListItemText primary="Flash Chip (Size / Speed)" secondary={formatNumber(data.flash_chip_size) + ' bytes / ' + (data.flash_chip_speed / 1000000).toFixed(0) + ' MHz'} />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+        <ListItem >
+          <ListItemAvatar>
+            <Avatar>
+              <FolderIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary="File System (Used / Total)" secondary={formatNumber(data.fs_used) + ' / ' + formatNumber(data.fs_total) + ' bytes (' + formatNumber(data.fs_total - data.fs_used) + '\xa0bytes free)'} />
         </ListItem>
         <Divider variant="inset" component="li" />
       </Fragment>

interface/src/system/types.ts

@@ -8,6 +8,8 @@ export interface SystemStatus {
   sdk_version: string;
   flash_chip_size: number;
   flash_chip_speed: number;
+  fs_used: number;
+  fs_total: number;
 }
 
 export interface OTASettings {

lib/framework/ESP8266React.cpp

@@ -42,11 +42,11 @@ ESP8266React::ESP8266React(AsyncWebServer* server, FS* fs) :
       });
 #else
   // Serve static resources from /www/
-  server->serveStatic("/js/", SPIFFS, "/www/js/");
+  server->serveStatic("/js/", *fs, "/www/js/");
-  server->serveStatic("/css/", SPIFFS, "/www/css/");
+  server->serveStatic("/css/", *fs, "/www/css/");
-  server->serveStatic("/fonts/", SPIFFS, "/www/fonts/");
+  server->serveStatic("/fonts/", *fs, "/www/fonts/");
-  server->serveStatic("/app/", SPIFFS, "/www/app/");
+  server->serveStatic("/app/", *fs, "/www/app/");
-  server->serveStatic("/favicon.ico", SPIFFS, "/www/favicon.ico");
+  server->serveStatic("/favicon.ico", *fs, "/www/favicon.ico");
   // Serving all other get requests with "/www/index.htm"
   // OPTIONS get a straight up 200 response
   server->onNotFound([](AsyncWebServerRequest* request) {

lib/framework/ESP8266React.h

@@ -5,12 +5,10 @@
 
 #ifdef ESP32
 #include <AsyncTCP.h>
-#include <SPIFFS.h>
 #include <WiFi.h>
 #elif defined(ESP8266)
 #include <ESP8266WiFi.h>
 #include <ESPAsyncTCP.h>
-#include <FS.h>
 #endif
 
 #include <APSettingsService.h>

lib/framework/SystemStatus.cpp

@@ -24,6 +24,19 @@ void SystemStatus::systemStatus(AsyncWebServerRequest* request) {
   root["sdk_version"] = ESP.getSdkVersion();
   root["flash_chip_size"] = ESP.getFlashChipSize();
   root["flash_chip_speed"] = ESP.getFlashChipSpeed();
+
+// TODO - Ideally this class will take an *FS and extract the file system information from there.
+// ESP8266 and ESP32 do not have feature parity in FS.h which currently makes that difficult.
+#ifdef ESP32
+  root["fs_total"] = SPIFFS.totalBytes();
+  root["fs_used"] = SPIFFS.usedBytes();
+#elif defined(ESP8266)
+  FSInfo fs_info;
+  SPIFFS.info(fs_info);
+  root["fs_total"] = fs_info.totalBytes;
+  root["fs_used"] = fs_info.usedBytes;
+#endif
+
   response->setLength();
   request->send(response);
 }

lib/framework/SystemStatus.h

@@ -4,9 +4,11 @@
 #ifdef ESP32
 #include <WiFi.h>
 #include <AsyncTCP.h>
+#include <SPIFFS.h>
 #elif defined(ESP8266)
 #include <ESP8266WiFi.h>
 #include <ESPAsyncTCP.h>
+#include <FS.h>
 #endif
 
 #include <ArduinoJson.h>