Angular: Show data in dropdown-collapse-tables :P (provisionally)

ng/src/app/pages/home/home.component.html

@@ -1,13 +1,62 @@
 <ng-container *ngIf="!!servers?.length; else nothing">
   <ul>
-    <li *ngFor="let server of servers">
-      {{ server.title }}
-      <ul *ngIf="dataTypes?.[server.id]">
-        <li *ngFor="let type of dataTypes?.[server.id]">
-          {{ type.type }}
-          <ul *ngIf="type.subtypes?.length">
-            <li *ngFor="let sub of type.subtypes">{{ sub.type }}</li>
+    <li *ngFor="let server of servers; index as t" class="list-unstyled">
+      <button
+        class="btn btn-secondary dropdown-toggle"
+        type="button"
+        data-bs-toggle="collapse"
+        [attr.data-bs-target]="'#data-types-' + t"
+        aria-expanded="false">
+        {{ server.title }}
+      </button>
+      <ul *ngIf="server.types?.length" class="collapse" [id]="'data-types-' + t">
+        <li *ngFor="let type of server.types; index as i" class="list-unstyled">
+          <button
+            class="btn btn-secondary dropdown-toggle"
+            type="button"
+            data-bs-toggle="collapse"
+            [attr.data-bs-target]="'#data-table-' + i"
+            aria-expanded="false">
+            {{ type.type }}
+          </button>
+          <ul *ngIf="type.subtypes?.length; else data" class="collapse" [id]="'data-table-' + i">
+            <li *ngFor="let sub of type.subtypes; index as j" class="list-unstyled">
+              <button
+                class="btn btn-secondary dropdown-toggle"
+                type="button"
+                data-bs-toggle="collapse"
+                [attr.data-bs-target]="'#data-table-sub-' + j"
+                aria-expanded="false">
+                {{ sub.type }}
+              </button>
+              <div *ngIf="sub.data?.length" class="collapse" [id]="'data-table-sub-' + j">
+                <table class="table table-striped">
+                  <tbody>
+                    <tr>
+                      <th *ngFor="let entry of sub.data?.[0] | keyvalue">{{ entry.key }}</th>
+                    </tr>
+                    <tr *ngFor="let dataset of sub.data">
+                      <td *ngFor="let entry of dataset | keyvalue">{{ entry.value }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </li>
           </ul>
+          <ng-template #data>
+            <div *ngIf="type.data?.length" class="collapse" [id]="'data-table-' + i">
+              <table class="table table-striped">
+                <tbody>
+                  <tr>
+                    <th *ngFor="let entry of type.data?.[0] | keyvalue">{{ entry.key }}</th>
+                  </tr>
+                  <tr *ngFor="let dataset of type.data">
+                    <td *ngFor="let entry of dataset | keyvalue">{{ entry.value }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </ng-template>
         </li>
       </ul>
     </li>

ng/src/app/pages/home/home.component.ts

@@ -8,9 +8,9 @@ import { ServerApiService } from './../../services/server-api.service';
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
-  public servers?: Server[];
-  public dataTypes?: { [id: number]: ServerDataTypesConfig[] };
-  public data?: { [id: number]: { [type: string]: ServerData[] } };
+  public servers?: Array<
+    Server & { types?: Array<ServerDataTypesConfig & { data?: ServerData[]; subtypes?: Array<ServerDataTypesConfig & { data?: ServerData[] }> }> }
+  >;
 
   constructor(private serverApi: ServerApiService) {}
 
@@ -19,24 +19,16 @@ export class HomeComponent implements OnInit {
       const end = new Date();
       const start = new Date(end.getTime() - 1000 * 60 * 60 * 4);
       this.servers = await this.serverApi.getAllServerConfigs();
-      this.dataTypes = {};
-      this.data = {};
       for (const server of this.servers) {
-        this.dataTypes[server.id] = await this.serverApi.getServerDataTypes(server.id);
+        server.types = await this.serverApi.getServerDataTypes(server.id);
 
-        this.data[server.id] = {};
-        for (const dataType of this.dataTypes[server.id]) {
+        for (const dataType of server.types) {
           if (dataType.subtypes) {
             for (const sub of dataType.subtypes) {
-              this.data[server.id][`${dataType.type}:${sub.type}`] = await this.serverApi.queryServerData(
-                server.id,
-                `${dataType.type}:${sub.type}`,
-                start,
-                end
-              );
+              sub.data = await this.serverApi.queryServerData(server.id, `${dataType.type}:${sub.type}`, start, end);
             }
           } else {
-            this.data[server.id][dataType.type] = await this.serverApi.queryServerData(server.id, dataType.type, start, end);
+            dataType.data = await this.serverApi.queryServerData(server.id, dataType.type, start, end);
           }
         }
       }