feat: surface orphaned containers

Author: pujitm

api/generated-schema.graphql

@@ -869,6 +869,9 @@ type DockerMutations {
   """Unpause (Resume) a container"""
   unpause(id: PrefixedID!): DockerContainer!
 
+  """Remove a container"""
+  removeContainer(id: PrefixedID!): Boolean!
+
   """Update auto-start configuration for Docker containers"""
   updateAutostartConfiguration(entries: [DockerAutostartEntryInput!]!, persistUserPreferences: Boolean): Boolean!
 
@@ -1170,6 +1173,9 @@ type DockerContainer implements Node {
   """Wait time in seconds applied after start"""
   autoStartWait: Int
   templatePath: String
+
+  """Whether the container is orphaned (no template found)"""
+  isOrphaned: Boolean!
   isUpdateAvailable: Boolean
   isRebuildReady: Boolean
 }

api/src/unraid-api/graph/resolvers/docker/docker.model.ts

@@ -201,6 +201,9 @@ export class DockerContainer extends Node {
 
     @Field(() => String, { nullable: true })
     templatePath?: string;
+
+    @Field(() => Boolean, { description: 'Whether the container is orphaned (no template found)' })
+    isOrphaned!: boolean;
 }
 
 @ObjectType({ implements: () => Node })

api/src/unraid-api/graph/resolvers/docker/docker.mutations.resolver.ts

@@ -53,6 +53,15 @@ export class DockerMutationsResolver {
         return this.dockerService.unpause(id);
     }
 
+    @ResolveField(() => Boolean, { description: 'Remove a container' })
+    @UsePermissions({
+        action: AuthAction.DELETE_ANY,
+        resource: Resource.DOCKER,
+    })
+    public async removeContainer(@Args('id', { type: () => PrefixedID }) id: string) {
+        return this.dockerService.removeContainer(id);
+    }
+
     @ResolveField(() => Boolean, {
         description: 'Update auto-start configuration for Docker containers',
     })

api/src/unraid-api/graph/resolvers/docker/docker.service.ts

@@ -182,9 +182,11 @@ export class DockerService {
         const config = this.dockerConfigService.getConfig();
         const containersWithTemplatePaths = containers.map((c) => {
             const containerName = c.names[0]?.replace(/^\//, '').toLowerCase();
+            const templatePath = config.templateMappings?.[containerName] || undefined;
             return {
                 ...c,
-                templatePath: config.templateMappings?.[containerName] || undefined,
+                templatePath,
+                isOrphaned: !templatePath,
             };
         });
 
@@ -247,6 +249,21 @@ export class DockerService {
         return updatedContainer;
     }
 
+    public async removeContainer(id: string): Promise<boolean> {
+        const container = this.client.getContainer(id);
+        try {
+            await container.remove({ force: true });
+            await this.clearContainerCache();
+            this.logger.debug(`Invalidated container caches after removing ${id}`);
+            const appInfo = await this.getAppInfo();
+            await pubsub.publish(PUBSUB_CHANNEL.INFO, appInfo);
+            return true;
+        } catch (error) {
+            this.logger.error(`Failed to remove container ${id}:`, error);
+            throw new Error(`Failed to remove container ${id}`);
+        }
+    }
+
     public async updateAutostartConfiguration(
         entries: DockerAutostartEntryInput[],
         options?: { persistUserPreferences?: boolean }

web/src/components/Docker/DockerContainerManagement.vue

@@ -7,6 +7,7 @@ import ContainerSizesModal from '@/components/Docker/ContainerSizesModal.vue';
 import { GET_DOCKER_CONTAINERS } from '@/components/Docker/docker-containers.query';
 import DockerAutostartSettings from '@/components/Docker/DockerAutostartSettings.vue';
 import DockerContainersTable from '@/components/Docker/DockerContainersTable.vue';
+import DockerOrphanedAlert from '@/components/Docker/DockerOrphanedAlert.vue';
 import DockerPortConflictsAlert from '@/components/Docker/DockerPortConflictsAlert.vue';
 import DockerSidebarTree from '@/components/Docker/DockerSidebarTree.vue';
 import DockerEdit from '@/components/Docker/Edit.vue';
@@ -193,6 +194,10 @@ const viewPrefs = computed(() => result.value?.docker?.organizer?.views?.[0]?.pr
 
 const containers = computed<DockerContainer[]>(() => result.value?.docker?.containers || []);
 
+const orphanedContainers = computed<DockerContainer[]>(() =>
+  containers.value.filter((c) => c.isOrphaned)
+);
+
 const portConflicts = computed<DockerPortConflictsResult | null>(() => {
   const dockerData = result.value?.docker;
   return dockerData?.portConflicts ?? null;
@@ -372,6 +377,9 @@ const isDetailsDisabled = computed(() => props.disabled || isSwitching.value);
             </UButton>
           </div>
         </div>
+        <div v-if="orphanedContainers.length" class="mb-4">
+          <DockerOrphanedAlert :orphaned-containers="orphanedContainers" @refresh="refreshContainers" />
+        </div>
         <div v-if="hasPortConflicts" class="mb-4">
           <DockerPortConflictsAlert
             :lan-conflicts="lanPortConflicts"

web/src/components/Docker/DockerOrphanedAlert.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { useMutation } from '@vue/apollo-composable';
+
+import gql from 'graphql-tag';
+
+import type { DockerContainer } from '@/composables/gql/graphql';
+
+interface Props {
+  orphanedContainers: DockerContainer[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  orphanedContainers: () => [],
+});
+
+const emit = defineEmits<{ (e: 'refresh'): void }>();
+
+const REMOVE_CONTAINER = gql`
+  mutation RemoveContainer($id: PrefixedID!) {
+    removeContainer(id: $id)
+  }
+`;
+
+const { mutate: removeContainer, loading: removing } = useMutation(REMOVE_CONTAINER);
+
+async function handleRemove(container: DockerContainer) {
+  const name = container.names[0]?.replace(/^\//, '') || 'container';
+  if (!confirm(`Are you sure you want to remove orphaned container "${name}"?`)) return;
+
+  try {
+    await removeContainer({ id: container.id });
+    emit('refresh');
+  } catch (e) {
+    console.error('Failed to remove container', e);
+    // Simple alert for now, ideally use a toast notification service
+    alert('Failed to remove container');
+  }
+}
+
+function formatContainerName(container: DockerContainer): string {
+  return container.names[0]?.replace(/^\//, '') || 'Unknown';
+}
+</script>
+
+<template>
+  <div
+    class="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-400/50 dark:bg-amber-400/10 dark:text-amber-100"
+  >
+    <div class="flex items-start gap-3">
+      <UIcon
+        name="i-lucide-triangle-alert"
+        class="mt-1 h-5 w-5 flex-shrink-0 text-amber-500 dark:text-amber-300"
+        aria-hidden="true"
+      />
+      <div class="w-full space-y-3">
+        <div>
+          <p class="text-sm font-semibold">
+            Orphaned containers detected ({{ orphanedContainers.length }})
+          </p>
+          <p class="text-xs text-amber-900/80 dark:text-amber-100/80">
+            These containers do not have a corresponding template. You can remove them if they are no
+            longer needed.
+          </p>
+        </div>
+        <div class="space-y-4">
+          <div class="space-y-2">
+            <div
+              class="rounded-md border border-amber-200/70 bg-white/80 p-3 dark:border-amber-300/30 dark:bg-transparent"
+            >
+              <div class="mt-2 flex flex-wrap gap-2">
+                <button
+                  v-for="container in orphanedContainers"
+                  :key="container.id"
+                  type="button"
+                  class="inline-flex items-center gap-1 rounded-full border border-amber-300 bg-amber-100 px-2 py-1 text-xs font-medium text-amber-900 transition hover:bg-amber-200 focus-visible:ring-2 focus-visible:ring-amber-400 focus-visible:outline-none dark:border-amber-200/40 dark:bg-transparent dark:text-amber-100"
+                  :title="`Remove ${formatContainerName(container)}`"
+                  :disabled="removing"
+                  @click="handleRemove(container)"
+                >
+                  <span>{{ formatContainerName(container) }}</span>
+                  <UIcon name="i-lucide-trash-2" class="h-3.5 w-3.5" aria-hidden="true" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

web/src/components/Docker/docker-containers.query.ts

@@ -44,6 +44,7 @@ export const GET_DOCKER_CONTAINERS = gql`
         }
         networkSettings
         mounts
+        isOrphaned
       }
       organizer(skipCache: $skipCache) {
         version
@@ -85,6 +86,7 @@ export const GET_DOCKER_CONTAINERS = gql`
               isUpdateAvailable
               isRebuildReady
               templatePath
+              isOrphaned
             }
           }
         }