Fix monitoring UI

.gitea/workflows/docker-build.yml

@@ -297,17 +297,26 @@ jobs:
           tags: ${{ steps.tags.outputs.tags }}
 
   deploy-test-node:
-    needs:
+    needs: [detect-changes, build-auth-api, build-employee-api, build-transit-api, build-error-log-api, build-admin-ui, build-monitoring-ui]
-      [
+    if: ${{ always() && !contains(needs.*.result, 'failure') && !contains(needs.*.result, 'cancelled') && gitea.event_name == 'push' }}
-        detect-changes,
+    strategy:
-        build-auth-api,
+      fail-fast: false
-        build-employee-api,
+      matrix:
-        build-transit-api,
+        include:
-        build-error-log-api,
+          - name: auth-api
-        build-admin-ui,
+            need_job: build-auth-api
-        build-monitoring-ui,
+          - name: employee-api
-      ]
+            need_job: build-employee-api
-    if: ${{ always() && !contains(needs.*.result, 'failure') && !contains(needs.*.result, 'cancelled') && gitea.event_name == 'push' && (gitea.ref_name == 'dev' || gitea.ref_name == 'main' || gitea.ref_name == 'develop' || gitea.ref_name == 'auth-api' || gitea.ref_name == 'employee-api' || gitea.ref_name == 'transit-api' || gitea.ref_name == 'error-log-api' || gitea.ref_name == 'admin-ui' || gitea.ref_name == 'monitoring-ui') }}
+          - name: transit-api
+            need_job: build-transit-api
+          - name: error-log-api
+            need_job: build-error-log-api
+          - name: admin-ui
+            need_job: build-admin-ui
+          - name: monitoring-ui
+            need_job: build-monitoring-ui
+    
+    if: ${{ needs[matrix.value.need_job].result == 'success' }}
     runs-on: ubuntu-latest
 
     steps:

monitoring_ui/src/App.jsx

@@ -57,7 +57,12 @@ const healthPaths = {
   errors: "/health",
 };
 const testerRoutes = [
-  { service: "auth", method: "POST", path: "/login", label: "Login (userCode + password)" },
+  {
+    service: "auth",
+    method: "POST",
+    path: "/login",
+    label: "Login (userCode + password)",
+  },
   { service: "auth", method: "GET", path: "/me", label: "Current session" },
   {
     service: "employee",
@@ -108,8 +113,8 @@ function App() {
   const [token, setToken] = useState(
     () => localStorage.getItem("transit-monitor-token") || "",
   );
-  const [user, setUser] = useState(
+  const [user, setUser] = useState(() =>
-    () => JSON.parse(localStorage.getItem("transit-monitor-user") || "null"),
+    JSON.parse(localStorage.getItem("transit-monitor-user") || "null"),
   );
   const [health, setHealth] = useState({});
   const [history, setHistory] = useState({});
@@ -129,7 +134,8 @@ function App() {
   const [loginLoading, setLoginLoading] = useState(false);
   const [loginError, setLoginError] = useState("");
 
-  const login = useCallback(async (userCode, password) => {
+  const login = useCallback(
+    async (userCode, password) => {
       const url = urls.auth;
       if (!url) {
         setLoginError("Auth API URL not configured");
@@ -157,7 +163,9 @@ function App() {
       } finally {
         setLoginLoading(false);
       }
-  }, [urls.auth]);
+    },
+    [urls.auth],
+  );
 
   const logout = useCallback(() => {
     setToken("");
@@ -590,7 +598,9 @@ function Docs() {
                 <summary>API Routes</summary>
                 <ul>
                   {meta.routes.map((route) => (
-                    <li key={route}><code>{route}</code></li>
+                    <li key={route}>
+                      <code>{route}</code>
+                    </li>
                   ))}
                 </ul>
               </details>
@@ -855,7 +865,11 @@ function Connections({ urls, token, user, login, logout, save, loginLoading }) {
               />
             </label>
             {loginError && <div className="login-error">{loginError}</div>}
-            <button type="submit" className="run-button save-button" disabled={loginLoading}>
+            <button
+              type="submit"
+              className="run-button save-button"
+              disabled={loginLoading}
+            >
               {loginLoading ? "Logging in..." : "Login"}
             </button>
           </form>
@@ -898,10 +912,18 @@ function Connections({ urls, token, user, login, logout, save, loginLoading }) {
       </div>
       <div className="user-info">
         <h3>Logged in as</h3>
-        <p><strong>User Code:</strong> {user?.userCode}</p>
+        <p>
-        <p><strong>Role:</strong> {user?.job}</p>
+          <strong>User Code:</strong> {user?.userCode}
-        <p><strong>Admin:</strong> {user?.isAdmin ? "Yes" : "No"}</p>
+        </p>
-        <button className="ghost-button" onClick={logout}>Logout</button>
+        <p>
+          <strong>Role:</strong> {user?.job}
+        </p>
+        <p>
+          <strong>Admin:</strong> {user?.isAdmin ? "Yes" : "No"}
+        </p>
+        <button className="ghost-button" onClick={logout}>
+          Logout
+        </button>
       </div>
       <button
         className="run-button save-button"