From 1d9ce0aa3d067726c2c880929408c68f53e13e0d Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Tue, 16 Sep 2025 13:04:01 -0400
Subject: [PATCH] feat: add unraid api status manager (#1708)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- New Features
- Added “Unraid API Status” page under Management Access to view current
API status, refresh it, and restart the API with confirmation.
- Status view shows running state, detailed output, and in-app
success/error messages after actions.

- Style
- Minor theme adjustments to border colors; no layout changes expected.

- Chores
  - Updated UI text: “Unraid API” → “Unraid API Settings” in settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 @tailwind-shared/theme-variants.css           |   5 -
 .../plugins/dynamix.my.servers/ApiStatus.page |   9 ++
 .../plugins/dynamix.my.servers/Connect.page   |   6 +-
 .../dynamix.my.servers/include/unraid-api.php |   8 +-
 web/components.d.ts                           |   2 +
 .../ApiStatus/ApiStatus.standalone.vue        |   5 +
 web/src/components/ApiStatus/ApiStatus.vue    | 139 ++++++++++++++++++
 .../components/Wrapper/component-registry.ts  |   5 +
 web/src/composables/services/webgui.ts        |   2 +-
 9 files changed, 172 insertions(+), 9 deletions(-)
 create mode 100644 plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/ApiStatus.page
 create mode 100644 web/src/components/ApiStatus/ApiStatus.standalone.vue
 create mode 100644 web/src/components/ApiStatus/ApiStatus.vue

diff --git a/@tailwind-shared/theme-variants.css b/@tailwind-shared/theme-variants.css
index 314e63f2a..515c182b0 100644
--- a/@tailwind-shared/theme-variants.css
+++ b/@tailwind-shared/theme-variants.css
@@ -12,7 +12,6 @@
   --header-background-color: #1c1b1b;
   --header-gradient-start: rgba(28, 27, 27, 0);
   --header-gradient-end: rgba(28, 27, 27, 0.7);
-  --ui-border-muted: hsl(240 5% 20%);
   --color-border: #383735;
   --color-alpha: #ff8c2f;
   --color-beta: #1c1b1b;
@@ -28,7 +27,6 @@
   --header-background-color: #f2f2f2;
   --header-gradient-start: rgba(242, 242, 242, 0);
   --header-gradient-end: rgba(242, 242, 242, 0.7);
-  --ui-border-muted: hsl(240 5.9% 90%);
   --color-border: #e0e0e0;
   --color-alpha: #ff8c2f;
   --color-beta: #f2f2f2;
@@ -43,7 +41,6 @@
   --header-background-color: #1c1b1b;
   --header-gradient-start: rgba(28, 27, 27, 0);
   --header-gradient-end: rgba(28, 27, 27, 0.7);
-  --ui-border-muted: hsl(240 5% 25%);
   --color-border: #383735;
   --color-alpha: #ff8c2f;
   --color-beta: #383735;
@@ -58,7 +55,6 @@
   --header-background-color: #f2f2f2;
   --header-gradient-start: rgba(242, 242, 242, 0);
   --header-gradient-end: rgba(242, 242, 242, 0.7);
-  --ui-border-muted: hsl(210 40% 80%);
   --color-border: #5a8bb8;
   --color-alpha: #ff8c2f;
   --color-beta: #e7f2f8;
@@ -68,7 +64,6 @@
 
 /* Dark Mode Overrides */
 .dark {
-  --ui-border-muted: hsl(240 5% 20%);
   --color-border: #383735;
 }
 
diff --git a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/ApiStatus.page b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/ApiStatus.page
new file mode 100644
index 000000000..34f4a4242
--- /dev/null
+++ b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/ApiStatus.page
@@ -0,0 +1,9 @@
+Menu="ManagementAccess:99"
+Title="Unraid API Status"
+Icon="icon-u-globe"
+Tag="globe"
+---
+<!-- API Status Manager -->
+<unraid-api-status-manager></unraid-api-status-manager>
+
+<!-- end unraid-api section -->
\ No newline at end of file
diff --git a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page
index e0d7cb8a6..5cbce2f90 100644
--- a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page
+++ b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page
@@ -1,5 +1,5 @@
 Menu="ManagementAccess:100"
-Title="Unraid API"
+Title="Unraid API Settings"
 Icon="icon-u-globe"
 Tag="globe"
 ---
@@ -596,8 +596,10 @@ $(function() {
 _(Unraid API extra origins)_:
 _(Connect Remote Access)_:
 _(GraphQL API Developer Sandbox)_:
+_(OIDC Configuration)_:
+
 </div>
 
 <!-- start unraid-api section -->
 <unraid-connect-settings></unraid-connect-settings>
-<!-- end unraid-api section -->
+
diff --git a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/unraid-api.php b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/unraid-api.php
index 7f4d3a93a..4cbda52d1 100644
--- a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/unraid-api.php
+++ b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/unraid-api.php
@@ -39,6 +39,7 @@ $validCommands = [
   'start',
   'restart',
   'stop',
+  'status',
   'report',
   'wanip'
 ];
@@ -68,7 +69,12 @@ switch ($command) {
     response_complete(200, array('result' => $output), $output);
     break;
   case 'restart':
-    exec('unraid-api restart 2>/dev/null', $output, $retval);
+    exec('/etc/rc.d/rc.unraid-api restart 2>&1', $output, $retval);
+    $output = implode(PHP_EOL, $output);
+    response_complete(200, array('success' => ($retval === 0), 'result' => $output, 'error' => ($retval !== 0 ? $output : null)), $output);
+    break;
+  case 'status':
+    exec('unraid-api status 2>&1', $output, $retval);
     $output = implode(PHP_EOL, $output);
     response_complete(200, array('result' => $output), $output);
     break;
diff --git a/web/components.d.ts b/web/components.d.ts
index 6fd296ab6..f6079fad1 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -16,6 +16,8 @@ declare module 'vue' {
     ApiKeyCreate: typeof import('./src/components/ApiKey/ApiKeyCreate.vue')['default']
     ApiKeyManager: typeof import('./src/components/ApiKey/ApiKeyManager.vue')['default']
     'ApiKeyPage.standalone': typeof import('./src/components/ApiKeyPage.standalone.vue')['default']
+    ApiStatus: typeof import('./src/components/ApiStatus/ApiStatus.vue')['default']
+    'ApiStatus.standalone': typeof import('./src/components/ApiStatus/ApiStatus.standalone.vue')['default']
     'Auth.standalone': typeof import('./src/components/Auth.standalone.vue')['default']
     Avatar: typeof import('./src/components/Brand/Avatar.vue')['default']
     Beta: typeof import('./src/components/UserProfile/Beta.vue')['default']
diff --git a/web/src/components/ApiStatus/ApiStatus.standalone.vue b/web/src/components/ApiStatus/ApiStatus.standalone.vue
new file mode 100644
index 000000000..6d14ae7ef
--- /dev/null
+++ b/web/src/components/ApiStatus/ApiStatus.standalone.vue
@@ -0,0 +1,5 @@
+<script lang="ts">
+import ApiStatus from '@/components/ApiStatus/ApiStatus.vue';
+
+export default ApiStatus;
+</script>
diff --git a/web/src/components/ApiStatus/ApiStatus.vue b/web/src/components/ApiStatus/ApiStatus.vue
new file mode 100644
index 000000000..7da852d43
--- /dev/null
+++ b/web/src/components/ApiStatus/ApiStatus.vue
@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { WebguiUnraidApiCommand } from '~/composables/services/webgui';
+import { useServerStore } from '~/store/server';
+
+const serverStore = useServerStore();
+
+const apiStatus = ref<string>('');
+const isRunning = ref<boolean>(false);
+const isLoading = ref<boolean>(false);
+const isRestarting = ref<boolean>(false);
+const statusMessage = ref<string>('');
+const messageType = ref<'success' | 'error' | 'info' | ''>('');
+
+const checkStatus = async () => {
+  isLoading.value = true;
+  statusMessage.value = '';
+  try {
+    const response = await WebguiUnraidApiCommand({
+      csrf_token: serverStore.csrf,
+      command: 'status',
+    });
+
+    if (response?.result) {
+      apiStatus.value = response.result;
+      isRunning.value =
+        response.result.includes('running') ||
+        response.result.includes('active') ||
+        response.result.includes('status : online');
+    }
+  } catch (error) {
+    console.error('Failed to get API status:', error);
+    apiStatus.value = 'Error fetching status';
+    isRunning.value = false;
+    statusMessage.value = 'Failed to fetch API status';
+    messageType.value = 'error';
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const restartApi = async () => {
+  const confirmed = window.confirm(
+    'Are you sure you want to restart the Unraid API service? This will temporarily interrupt API connections.'
+  );
+
+  if (!confirmed) return;
+
+  isRestarting.value = true;
+  statusMessage.value = 'Restarting API service...';
+  messageType.value = 'info';
+
+  try {
+    const response = await WebguiUnraidApiCommand({
+      csrf_token: serverStore.csrf,
+      command: 'restart',
+    });
+
+    if (response?.success) {
+      statusMessage.value = 'API service restart initiated. Please wait a few seconds.';
+      messageType.value = 'success';
+      setTimeout(() => {
+        checkStatus();
+      }, 3000);
+    } else {
+      statusMessage.value = response?.error || 'Failed to restart API service';
+      messageType.value = 'error';
+    }
+  } catch (error) {
+    console.error('Failed to restart API:', error);
+    statusMessage.value = 'Failed to restart API service';
+    messageType.value = 'error';
+  } finally {
+    isRestarting.value = false;
+  }
+};
+
+onMounted(() => {
+  checkStatus();
+});
+</script>
+
+<template>
+  <div class="bg-muted border-muted my-4 rounded-lg border p-6">
+    <div class="mb-4">
+      <h3 class="mb-2 text-lg font-semibold">API Service Status</h3>
+      <div class="flex items-center gap-2 text-sm">
+        <span class="font-medium">Status:</span>
+        <span :class="['font-semibold', isRunning ? 'text-green-500' : 'text-orange-500']">
+          {{ isLoading ? 'Loading...' : isRunning ? 'Running' : 'Not Running' }}
+        </span>
+      </div>
+    </div>
+
+    <div class="my-4">
+      <pre
+        class="max-h-52 overflow-y-auto rounded bg-black p-4 font-mono text-xs break-words whitespace-pre-wrap text-white"
+        >{{ apiStatus }}</pre
+      >
+    </div>
+
+    <div
+      v-if="statusMessage"
+      :class="[
+        'my-4 rounded px-4 py-3 text-sm',
+        messageType === 'success' && 'bg-green-500 text-white',
+        messageType === 'error' && 'bg-red-500 text-white',
+        messageType === 'info' && 'bg-blue-500 text-white',
+      ]"
+    >
+      {{ statusMessage }}
+    </div>
+
+    <div class="mt-4 flex gap-4">
+      <button
+        @click="checkStatus"
+        :disabled="isLoading"
+        class="bg-secondary hover:bg-secondary/80 text-secondary-foreground rounded px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+      >
+        {{ isLoading ? 'Refreshing...' : 'Refresh Status' }}
+      </button>
+      <button
+        @click="restartApi"
+        :disabled="isRestarting"
+        class="bg-destructive hover:bg-destructive/90 text-destructive-foreground rounded px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+      >
+        {{ isRestarting ? 'Restarting...' : 'Restart API' }}
+      </button>
+    </div>
+
+    <div class="border-muted mt-6 border-t pt-4">
+      <p class="text-muted-foreground text-sm">
+        View the current status of the Unraid API service and restart if needed. Use this to debug API
+        connection issues.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/web/src/components/Wrapper/component-registry.ts b/web/src/components/Wrapper/component-registry.ts
index a2817fc60..47106b56e 100644
--- a/web/src/components/Wrapper/component-registry.ts
+++ b/web/src/components/Wrapper/component-registry.ts
@@ -141,4 +141,9 @@ export const componentMappings: ComponentMapping[] = [
     selector: 'unraid-test-theme-switcher',
     appId: 'test-theme-switcher',
   },
+  {
+    component: defineAsyncComponent(() => import('../ApiStatus/ApiStatus.standalone.vue')),
+    selector: 'unraid-api-status-manager',
+    appId: 'api-status-manager',
+  },
 ];
diff --git a/web/src/composables/services/webgui.ts b/web/src/composables/services/webgui.ts
index 143a180d0..8d0344d9c 100644
--- a/web/src/composables/services/webgui.ts
+++ b/web/src/composables/services/webgui.ts
@@ -35,7 +35,7 @@ export const WebguiState = request.url('/plugins/dynamix.my.servers/data/server-
  */
 export interface WebguiUnraidApiCommandPayload {
   csrf_token: string;
-  command: 'report' | 'restart' | 'start';
+  command: 'report' | 'restart' | 'start' | 'status';
   param1?: '-v' | '-vv';
 }
 export const WebguiUnraidApiCommand = async (payload: WebguiUnraidApiCommandPayload) => {