Basic recusrive nesting

src/components/services/group.jsx

@@ -9,6 +9,7 @@ import ResolvedIcon from "components/resolvedicon";
 export default function ServicesGroup({
   group,
   services,
+  groups,
   layout,
   fiveColumns,
   disableCollapse,
@@ -74,7 +75,24 @@ export default function ServicesGroup({
               }}
             >
               <Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
-                <List group={group} services={services.services} layout={layout} useEqualHeights={useEqualHeights} />
+                {groups?.length ? (
+                  <div className="grid grid-cols-1 gap-2">
+                    {groups.map((subgroup) => (
+                      <ServicesGroup
+                        key={subgroup.name}
+                        group={subgroup.name}
+                        services={subgroup}
+                        layout={layout}
+                        fiveColumns={fiveColumns}
+                        disableCollapse={disableCollapse}
+                        useEqualHeights={useEqualHeights}
+                        groupsInitiallyCollapsed={groupsInitiallyCollapsed}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <List group={group} services={services.services} layout={layout} useEqualHeights={useEqualHeights} />
+                )}
               </Disclosure.Panel>
             </Transition>
           </>

src/pages/index.jsx

@@ -293,6 +293,7 @@ function Home({ initialSettings }) {
                   key={group.name}
                   group={group.name}
                   services={group}
+                  groups={group.groups}
                   layout={settings.layout?.[group.name]}
                   fiveColumns={settings.fiveColumns}
                   disableCollapse={settings.disableCollapse}
@@ -318,6 +319,7 @@ function Home({ initialSettings }) {
                 key={group.name}
                 group={group.name}
                 services={group}
+                groups={group.groups}
                 layout={settings.layout?.[group.name]}
                 fiveColumns={settings.fiveColumns}
                 disableCollapse={settings.disableCollapse}

src/utils/config/api-response.js

@@ -153,6 +153,7 @@ export async function servicesResponse() {
       services: [...discoveredDockerGroup.services, ...discoveredKubernetesGroup.services, ...configuredGroup.services]
         .filter((service) => service)
         .sort(compareServices),
+      groups: [...configuredGroup.groups], // TODO: do this properly
     };
 
     if (definedLayouts) {

src/utils/config/service-helpers.js

@@ -26,7 +26,7 @@ function parseServicesToGroups(services) {
     serviceGroup[name].forEach((entries) => {
       const entryName = Object.keys(entries)[0];
       if (Array.isArray(entries[entryName])) {
-        groups.push(parseServicesToGroups([{ [entryName]: entries[entryName] }]));
+        groups = groups.concat(parseServicesToGroups([{ [entryName]: entries[entryName] }]));
       } else {
         services.push({
           name: entryName,
@@ -675,13 +675,29 @@ export function cleanServiceGroups(groups) {
       });
       return cleanedService;
     }),
+    type: serviceGroup.type,
+    groups: cleanServiceGroups(serviceGroup.groups),
   }));
 }
 
+function findGroupByName(groups, name) {
+  for (const group of groups) {
+    if (group.name === name) {
+      return group;
+    } else if (group.groups) {
+      const foundGroup = findGroupByName(group.groups, name);
+      if (foundGroup) {
+        return foundGroup;
+      }
+    }
+  }
+  return null;
+}
+
 export async function getServiceItem(group, service) {
   const configuredServices = await servicesFromConfig();
 
-  const serviceGroup = configuredServices.find((g) => g.name === group);
+  const serviceGroup = findGroupByName(configuredServices, group);
   if (serviceGroup) {
     const serviceEntry = serviceGroup.services.find((s) => s.name === service);
     if (serviceEntry) return serviceEntry;
@@ -689,14 +705,14 @@ export async function getServiceItem(group, service) {
 
   const discoveredServices = await servicesFromDocker();
 
-  const dockerServiceGroup = discoveredServices.find((g) => g.name === group);
+  const dockerServiceGroup = findGroupByName(discoveredServices, group);
   if (dockerServiceGroup) {
     const dockerServiceEntry = dockerServiceGroup.services.find((s) => s.name === service);
     if (dockerServiceEntry) return dockerServiceEntry;
   }
 
   const kubernetesServices = await servicesFromKubernetes();
-  const kubernetesServiceGroup = kubernetesServices.find((g) => g.name === group);
+  const kubernetesServiceGroup = findGroupByName(kubernetesServices, group);
   if (kubernetesServiceGroup) {
     const kubernetesServiceEntry = kubernetesServiceGroup.services.find((s) => s.name === service);
     if (kubernetesServiceEntry) return kubernetesServiceEntry;