Create dependency from dependencies dashboard #27

README.md

@@ -17,7 +17,7 @@ Interested or have suggestions? Join [gitter chat](https://gitter.im/microservic
 
 Latest version and deployment instructions are always available on [Docker Hub](https://hub.docker.com/r/tillias/microcatalog).
 
-You can also test it in on click on [Play with Docker](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/tillias/microservice-catalog/master/docker-compose.yml)
+You can also test it with only one mouse click on [Play with Docker](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/tillias/microservice-catalog/master/docker-compose.yml)
 
 ## Development
 

src/main/webapp/app/dashboard/dependency-dashboard/create-dependency-dialog/create-dependency-dialog.component.html

@@ -0,0 +1,26 @@
+<div class="modal-header">
+    <h4 class="modal-title">Create dependency</h4>
+</div>
+
+<div class="modal-body">
+    <div class="form-group">
+        <label>Name: </label>
+            <p class="text-primary">{{name}}</p>
+    </div>
+    <div class="form-group">
+        <label>Source: </label>
+        <div>
+            <jhi-microservice-search (itemSelected)="onSourceSelected($event)"></jhi-microservice-search>
+        </div>
+    </div>
+    <div class="form-group">
+        <label>Target: </label>
+        <div>
+            <jhi-microservice-search (itemSelected)="onTargetSelected($event)"></jhi-microservice-search>
+        </div>
+    </div>
+    <div>
+        <button type="submit" class="btn btn-primary" [disabled]="!(source && target) || isSaving" (click)="createDependency()">Create</button>
+        <button type="submit" class="btn btn-secondary" (click)="cancel()">Cancel</button>
+    </div>
+</div>

src/main/webapp/app/dashboard/dependency-dashboard/create-dependency-dialog/create-dependency-dialog.component.ts

@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { IMicroservice } from '../../../shared/model/microservice.model';
+import { DependencyService } from '../../../entities/dependency/dependency.service';
+import { Dependency } from '../../../shared/model/dependency.model';
+import { JhiEventManager } from 'ng-jhipster';
+import { finalize } from 'rxjs/operators';
+
+@Component({
+  selector: 'jhi-create-dependency-dialog',
+  templateUrl: './create-dependency-dialog.component.html',
+  styleUrls: ['./create-dependency-dialog.component.scss'],
+})
+export class CreateDependencyDialogComponent implements OnInit {
+  source?: IMicroservice;
+  target?: IMicroservice;
+  name: string;
+  isSaving = false;
+
+  constructor(public eventManager: JhiEventManager, public activeModal: NgbActiveModal, public dependencyService: DependencyService) {
+    this.name = 'Please specify source & target';
+  }
+
+  ngOnInit(): void {}
+
+  createDependency(): void {
+    if (this.source && this.target) {
+      this.isSaving = true;
+
+      this.dependencyService
+        .create({
+          ...new Dependency(),
+          name: this.name,
+          source: this.source,
+          target: this.target,
+        })
+        .pipe(
+          finalize(() => {
+            this.isSaving = false;
+            this.activeModal.close();
+          })
+        )
+        .subscribe(() => {
+          this.eventManager.broadcast('dependencyListModification');
+        });
+    }
+  }
+
+  cancel(): void {
+    this.activeModal.dismiss('closed');
+  }
+
+  onSourceSelected(payload: IMicroservice): void {
+    this.source = payload;
+    this.updateName();
+  }
+
+  onTargetSelected(payload: IMicroservice): void {
+    this.target = payload;
+    this.updateName();
+  }
+
+  updateName(): void {
+    this.name = `${this.source?.name} -> ${this.target?.name}`;
+  }
+}

src/main/webapp/app/dashboard/dependency-dashboard/create-dependency-dialog/create-dependency-dialog.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CreateDependencyDialogComponent } from './create-dependency-dialog.component';
+import { MicrocatalogSharedModule } from '../../../shared/shared.module';
+import { MicroserviceSearchModule } from '../../../entities/microservice/microservice-dashboard/microservice-search/microservice-search.module';
+
+@NgModule({
+  imports: [MicroserviceSearchModule, MicrocatalogSharedModule],
+  declarations: [CreateDependencyDialogComponent],
+})
+export class CreateDependencyDialogModule {}

src/main/webapp/app/dashboard/dependency-dashboard/create-dependency-dialog/create-dependency-dialog.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { NgbModal, NgbModalOptions, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { CreateDependencyDialogComponent } from './create-dependency-dialog.component';
+
+@Injectable({ providedIn: 'root' })
+export class CreateDependencyDialogService {
+  private isOpen = false;
+
+  constructor(private modalService: NgbModal) {}
+
+  open(): void {
+    if (this.isOpen) {
+      return;
+    }
+    this.isOpen = true;
+
+    const options: NgbModalOptions = {
+      centered: true,
+    };
+
+    const modalRef: NgbModalRef = this.modalService.open(CreateDependencyDialogComponent, options);
+    modalRef.result.finally(() => (this.isOpen = false));
+  }
+}

src/main/webapp/app/dashboard/dependency-dashboard/dependency-dashboard.component.html

@@ -19,18 +19,25 @@
                     </div>
                 </ng-template>
             </ngb-panel>
-            <ngb-panel title="Dependencies" id="dependency">
+            <ngb-panel title="Management" id="dependency">
                 <ng-template ngbPanelContent>
                     <div class="p-1">
-                        <button class="btn btn-block btn-success btn-sm">Create dependency</button>
+                        <button class="btn btn-block btn-success btn-sm" >Create microservice</button>
                     </div>
                     <div class="p-1">
-                        <button class="btn btn-block btn-success btn-sm" [disabled]="!selection">Delete dependency
+                        <button class="btn btn-block btn-success btn-sm" (click)="createDependency()">Create dependency</button>
+                    </div>
+                    <div class="p-1">
+                        <button class="btn btn-block btn-warning btn-sm" [disabled]="!selection">Delete microservice
+                        </button>
+                    </div>
+                    <div class="pt-1">
+                        <button class="btn btn-block btn-warning btn-sm" [disabled]="!selection">Delete dependency
                         </button>
                     </div>
                 </ng-template>
             </ngb-panel>
-            <ngb-panel title="Deployments">
+            <ngb-panel title="Analysis">
                 <ng-template ngbPanelContent>
                     <div class="p-1">
                         <button class="btn btn-block btn-success btn-sm" [disabled]="!selection"

src/main/webapp/app/dashboard/dependency-dashboard/dependency-dashboard.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { DataSet } from 'vis-data/peer';
 import { Network } from 'vis-network/peer';
 import { DependencyService } from '../../entities/dependency/dependency.service';
@@ -7,24 +7,43 @@ import { map } from 'rxjs/operators';
 import { IMicroservice } from '../../shared/model/microservice.model';
 import { ISelectPayload } from '../../shared/vis/events/VisEvents';
 import { EXPERIMENTAL_FEATURE } from '../../app.constants';
+import { CreateDependencyDialogService } from './create-dependency-dialog/create-dependency-dialog.service';
+import { JhiEventManager } from 'ng-jhipster';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'jhi-dependency-dashboard',
   templateUrl: './dependency-dashboard.component.html',
   styleUrls: ['./dependency-dashboard.component.scss'],
 })
-export class DependencyDashboardComponent implements AfterViewInit, OnDestroy {
+export class DependencyDashboardComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('visNetwork', { static: false })
   visNetwork!: ElementRef;
 
+  dependenciesSubscriber?: Subscription;
+  microservicesSubscriber?: Subscription;
+
   networkInstance: any;
   searchValue?: IMicroservice;
   onlyIncomingFilter = true;
   onlyOutgoingFilter = true;
   selection?: ISelectPayload;
   experimentalFeatures = EXPERIMENTAL_FEATURE;
 
-  constructor(protected dependencyService: DependencyService) {}
+  constructor(
+    protected eventManager: JhiEventManager,
+    protected dependencyService: DependencyService,
+    protected createDependencyDialogService: CreateDependencyDialogService
+  ) {}
+
+  ngOnInit(): void {
+    this.registerChangeInDependencies();
+  }
+
+  registerChangeInDependencies(): void {
+    this.dependenciesSubscriber = this.eventManager.subscribe('dependencyListModification', () => this.loadAll());
+    this.microservicesSubscriber = this.eventManager.subscribe('microserviceListModification', () => this.loadAll());
+  }
 
   ngAfterViewInit(): void {
     const container = this.visNetwork;
@@ -65,6 +84,13 @@ export class DependencyDashboardComponent implements AfterViewInit, OnDestroy {
   ngOnDestroy(): void {
     this.networkInstance.off('selectNode');
     this.networkInstance.off('deselectNode');
+
+    if (this.dependenciesSubscriber) {
+      this.eventManager.destroy(this.dependenciesSubscriber);
+    }
+    if (this.microservicesSubscriber) {
+      this.eventManager.destroy(this.microservicesSubscriber);
+    }
   }
 
   handleSelectNode(payload: ISelectPayload): void {
@@ -145,4 +171,8 @@ export class DependencyDashboardComponent implements AfterViewInit, OnDestroy {
   }
 
   buildDeploymentPath(): void {}
+
+  createDependency(): void {
+    this.createDependencyDialogService.open();
+  }
 }

src/main/webapp/app/dashboard/dependency-dashboard/dependency-dashboard.module.ts

@@ -4,15 +4,15 @@ import { RouterModule } from '@angular/router';
 import { dependencyDashboardRoute } from './dependency-dashboard.route';
 import { MicrocatalogSharedModule } from '../../shared/shared.module';
 import { MicroserviceSearchModule } from '../../entities/microservice/microservice-dashboard/microservice-search/microservice-search.module';
-import { GraphActionsMenuModule } from './graph-actions-menu/graph-actions-menu.module';
 import { GraphLegendModule } from './node-legend/graph-legend.module';
+import { CreateDependencyDialogModule } from './create-dependency-dialog/create-dependency-dialog.module';
 
 @NgModule({
   imports: [
     MicroserviceSearchModule,
     MicrocatalogSharedModule,
-    GraphActionsMenuModule,
     GraphLegendModule,
+    CreateDependencyDialogModule,
     RouterModule.forChild(dependencyDashboardRoute),
   ],
   declarations: [DependencyDashboardComponent],