rename debug to system (#4447)

web/src/Sidebar.jsx

@@ -44,7 +44,7 @@ export default function Sidebar() {
       </Match>
       {birdseye?.enabled ? <Destination href="/birdseye" text="Birdseye" /> : null}
       <Destination href="/events" text="Events" />
-      <Destination href="/debug" text="Debug" />
+      <Destination href="/system" text="System" />
       <Separator />
       <div className="flex flex-grow" />
       {ENV !== 'production' ? (

web/src/app.tsx

@@ -35,7 +35,7 @@ export default function App() {
                     path="/recording/:camera/:date?/:hour?/:minute?/:second?"
                     getComponent={Routes.getRecording}
                   />
-                  <AsyncRoute path="/debug" getComponent={Routes.getDebug} />
+                  <AsyncRoute path="/system" getComponent={Routes.getSystem} />
                   <AsyncRoute path="/styleguide" getComponent={Routes.getStyleGuide} />
                   <Cameras default path="/" />
                 </Router>

web/src/routes/System.jsx

@@ -12,7 +12,7 @@ import Dialog from '../components/Dialog';
 
 const emptyObject = Object.freeze({});
 
-export default function Debug() {
+export default function System() {
   const [state, setState] = useState({ showFfprobe: false, ffprobe: '' });
   const { data: config } = useSWR('config');
 
@@ -69,7 +69,7 @@ export default function Debug() {
   return (
     <div className="space-y-4 p-2 px-4">
       <Heading>
-        Debug <span className="text-sm">{service.version}</span>
+        System <span className="text-sm">{service.version}</span>
       </Heading>
       {state.showFfprobe && (
         <Dialog>
@@ -175,7 +175,7 @@ export default function Debug() {
             ))}
           </div>
 
-          <p>Debug stats update automatically every {config.mqtt.stats_interval} seconds.</p>
+          <p>System stats update automatically every {config.mqtt.stats_interval} seconds.</p>
         </Fragment>
       )}
 

web/src/routes/__tests__/System.test.jsx

@@ -1,18 +1,18 @@
 import { h } from 'preact';
-import Debug from '../Debug';
+import System from '../System';
 import { render, screen, waitForElementToBeRemoved } from 'testing-library';
 
-describe('Debug Route', () => {
+describe('System Route', () => {
   beforeEach(() => {});
 
   test('shows an ActivityIndicator if stats are null', async () => {
-    render(<Debug />);
+    render(<System />);
     expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
   });
 
   // eslint-disable-next-line jest/no-disabled-tests
   test.skip('shows stats and config', async () => {
-    render(<Debug />);
+    render(<System />);
 
     await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));
 

web/src/routes/index.js

@@ -28,8 +28,8 @@ export async function getRecording(_url, _cb, _props) {
   return module.default;
 }
 
-export async function getDebug(_url, _cb, _props) {
-  const module = await import('./Debug.jsx');
+export async function getSystem(_url, _cb, _props) {
+  const module = await import('./System.jsx');
   return module.default;
 }