feat(ui): add applications and deployment targets to dashboard (#43)

Signed-off-by: christoph <christoph.enne@glasskube.eu>

frontend/cloud-ui/src/app/app.routes.ts

@@ -1,16 +1,16 @@
 import {Routes} from '@angular/router';
 import {DashboardPlaceholderComponent} from './components/dashboard-placeholder/dashboard-placeholder.component';
-import {ApplicationsComponent} from './applications/applications.component';
-import {DeploymentTargetsComponent} from './deployment-targets/deployment-targets.component';
+import {ApplicationsPageComponent} from './applications/applications-page.component';
+import {DeploymentTargetsPageComponent} from './deployment-targets/deployment-targets-page.component';
 
 export const routes: Routes = [
   {
     path: '',
     children: [
       {path: '', pathMatch: 'full', redirectTo: 'dashboard'},
       {path: 'dashboard', component: DashboardPlaceholderComponent},
-      {path: 'applications', component: ApplicationsComponent},
-      {path: 'deployment-targets', component: DeploymentTargetsComponent},
+      {path: 'applications', component: ApplicationsPageComponent},
+      {path: 'deployment-targets', component: DeploymentTargetsPageComponent},
     ],
   },
 ];

frontend/cloud-ui/src/app/applications/applications-page.component.html

@@ -0,0 +1,5 @@
+<section class="bg-gray-50 dark:bg-gray-900 p-3 sm:p-5 antialiased mt-14 sm:ml-64">
+  <div class="mx-auto max-w-screen-2xl px-4 lg:px-12">
+    <app-applications [fullVersion]="true"></app-applications>
+  </div>
+</section>

frontend/cloud-ui/src/app/applications/applications-page.component.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+import {ApplicationsComponent} from './applications.component';
+
+@Component({
+  selector: 'app-applications-page',
+  standalone: true,
+  imports: [ApplicationsComponent],
+  templateUrl: './applications-page.component.html',
+})
+export class ApplicationsPageComponent {}

frontend/cloud-ui/src/app/applications/applications.component.ts

@@ -1,5 +1,5 @@
 import {AsyncPipe, DatePipe, NgOptimizedImage} from '@angular/common';
-import {Component, ElementRef, inject, ViewChild} from '@angular/core';
+import {Component, ElementRef, inject, Input, ViewChild} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 import {
@@ -22,6 +22,7 @@ import {ApplicationsService} from '../services/applications.service';
   templateUrl: './applications.component.html',
 })
 export class ApplicationsComponent {
+  @Input('fullVersion') fullVersion: boolean = false;
   magnifyingGlassIcon = faMagnifyingGlass;
   plusIcon = faPlus;
   caretDownIcon = faCaretDown;

frontend/cloud-ui/src/app/components/dashboard-placeholder/dashboard-placeholder.component.html

@@ -1,62 +1,20 @@
-<div class="p-4 sm:ml-64 dark:bg-gray-700">
-  <div
-    class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700 mt-14 bg-white dark:bg-gray-700">
-    <div class="grid grid-cols-3 gap-4 mb-4">
-      <div class="flex items-center justify-center h-24 rounded bg-gray-50 dark:bg-gray-800">
-        <p class="text-2xl text-gray-400 dark:text-gray-500">
-          <svg
-            class="w-3.5 h-3.5"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 18 18">
-            <path
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 1v16M1 9h16" />
-          </svg>
-        </p>
+<div class="p-4 sm:ml-64 bg-gray-50 dark:bg-gray-900">
+  <div class="p-4 mt-14">
+    <div class="flex items-stretch justify-stretch h-96 mb-4 rounded bg-gray-50 dark:bg-gray-800">
+      <app-globe [deploymentTargets]="(deploymentTargets$ | async) ?? []" class="flex-1"></app-globe>
+    </div>
+    <div class="grid grid-cols-3 gap-4 mb-4 h-96">
+      <div class="rounded bg-gray-50 dark:bg-gray-800 overflow-y-auto">
+        <app-applications [fullVersion]="false"></app-applications>
       </div>
-      <div class="flex items-center justify-center h-24 rounded bg-gray-50 dark:bg-gray-800">
-        <p class="text-2xl text-gray-400 dark:text-gray-500">
-          <svg
-            class="w-3.5 h-3.5"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 18 18">
-            <path
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 1v16M1 9h16" />
-          </svg>
-        </p>
+      <div class="rounded bg-gray-50 dark:bg-gray-800 overflow-y-auto">
+        <app-applications [fullVersion]="false"></app-applications>
       </div>
-      <div class="flex items-center justify-center h-24 rounded bg-gray-50 dark:bg-gray-800">
-        <p class="text-2xl text-gray-400 dark:text-gray-500">
-          <svg
-            class="w-3.5 h-3.5"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 18 18">
-            <path
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 1v16M1 9h16" />
-          </svg>
-        </p>
+      <div class="rounded bg-gray-50 dark:bg-gray-800 overflow-y-auto">
+        <app-deployment-targets [fullVersion]="false"></app-deployment-targets>
       </div>
     </div>
-    <div class="flex items-stretch justify-stretch h-96 mb-4 rounded bg-gray-50 dark:bg-gray-800">
-      <app-globe [deploymentTargets]="(deploymentTargets$ | async) ?? []" class="flex-1"></app-globe>
-    </div>
+
     <div class="grid grid-cols-2 gap-4 mb-4">
       <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800">
         <p class="text-2xl text-gray-400 dark:text-gray-500">

frontend/cloud-ui/src/app/components/dashboard-placeholder/dashboard-placeholder.component.ts

@@ -1,12 +1,14 @@
 import {Component, inject} from '@angular/core';
 import {GlobeComponent} from '../globe/globe.component';
 import {DeploymentTargetsService} from '../../services/deployment-targets.service';
+import {ApplicationsComponent} from '../../applications/applications.component';
+import {DeploymentTargetsComponent} from '../../deployment-targets/deployment-targets.component';
 import {AsyncPipe} from '@angular/common';
 
 @Component({
   selector: 'app-dashboard-placeholder',
   standalone: true,
-  imports: [GlobeComponent, AsyncPipe],
+  imports: [ApplicationsComponent, DeploymentTargetsComponent, GlobeComponent, AsyncPipe],
   templateUrl: './dashboard-placeholder.component.html',
 })
 export class DashboardPlaceholderComponent {

frontend/cloud-ui/src/app/deployment-targets/deployment-targets-page.component.html

@@ -0,0 +1,6 @@
+<!-- Start block -->
+<section class="bg-gray-50 dark:bg-gray-900 p-3 sm:p-5 antialiased mt-14 sm:ml-64">
+  <div class="mx-auto max-w-screen-2xl px-4 lg:px-12">
+    <app-deployment-targets [fullVersion]="true"></app-deployment-targets>
+  </div>
+</section>

frontend/cloud-ui/src/app/deployment-targets/deployment-targets-page.component.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+import {DeploymentTargetsComponent} from './deployment-targets.component';
+
+@Component({
+  selector: 'app-deployment-targets-page',
+  imports: [DeploymentTargetsComponent],
+  templateUrl: './deployment-targets-page.component.html',
+})
+export class DeploymentTargetsPageComponent {}