Custom microservice details is now activated using feature flag #38

README.md

@@ -1,6 +1,7 @@
 [![Build Status](https://travis-ci.org/tillias/microservice-catalog.svg?branch=master)](https://travis-ci.org/tillias/microservice-catalog)
 [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=microcatalog&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=microcatalog)
 [![Docker Image Version (latest by date)](https://img.shields.io/docker/v/tillias/microcatalog)](https://hub.docker.com/r/tillias/microcatalog)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 # microcatalog
 

src/main/webapp/app/app.constants.ts

@@ -6,3 +6,4 @@ export const VERSION = process.env.VERSION;
 export const DEBUG_INFO_ENABLED = Boolean(process.env.DEBUG_INFO_ENABLED);
 export const SERVER_API_URL = process.env.SERVER_API_URL;
 export const BUILD_TIMESTAMP = process.env.BUILD_TIMESTAMP;
+export const EXPERIMENTAL_FEATURE = process.env.EXPERIMENTAL_FEATURE;

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

@@ -23,7 +23,7 @@
     </div>
     <div class="row">
         <div class="col">
-            <div class="vis-network-full-height" id="visNetwork" #visNetwork></div>
+            <div class="vis-network-full-height" id="visNetwork"  #visNetwork></div>
         </div>
     </div>
 </div>

src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/microservice-card.component.html

@@ -26,9 +26,14 @@ <h6>{{microservice.description}}</h6>
                 <span><a href="{{microservice.swaggerUrl}}">API</a> </span>
             </div>
             <span class="text-primary">
-                    <a [routerLink]="['/microservice', microservice.id, 'view']">Details</a>
+                    <a *ngIf="enableCustomDetailsScreen; else experimental"
+                       [routerLink]="['/microservice', microservice.id, 'details', 'custom']">Details</a>
+                    <ng-template #experimental>
+                        <a [routerLink]="['/microservice', microservice.id, 'view']">Details</a>
+                    </ng-template>
                     <i class="fa fa-angle-right"></i>
                 </span>
         </div>
+
     </div>
 </div>

src/main/webapp/app/entities/microservice/microservice-dashboard/microservice-card/microservice-card.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { IMicroservice } from 'app/shared/model/microservice.model';
 import { CardSettings, ICardSettings } from 'app/entities/microservice/microservice-dashboard/microservice-card/card-settings.model';
+import { EXPERIMENTAL_FEATURE } from 'app/app.constants';
 
 @Component({
   selector: 'jhi-microservice-card',
@@ -11,6 +12,8 @@ export class MicroserviceCardComponent implements OnInit {
   @Input() microservice!: IMicroservice;
   @Input() settings: ICardSettings = CardSettings.DEFAULT;
 
+  enableCustomDetailsScreen = EXPERIMENTAL_FEATURE;
+
   constructor() {}
 
   ngOnInit(): void {

src/main/webapp/app/entities/microservice/microservice-details/microservice-custom-details.component.html

@@ -0,0 +1,2 @@
+<p>microservice-details works!</p>
+<p>{{microservice?.name}}</p>

src/main/webapp/app/entities/microservice/microservice-details/microservice-custom-details.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { IMicroservice } from '../../../shared/model/microservice.model';
+import { JhiDataUtils } from 'ng-jhipster';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'jhi-microservice-details',
+  templateUrl: './microservice-custom-details.component.html',
+  styleUrls: ['./microservice-custom-details.component.scss'],
+})
+export class MicroserviceCustomDetailsComponent implements OnInit {
+  microservice: IMicroservice | null = null;
+
+  constructor(protected dataUtils: JhiDataUtils, protected activatedRoute: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.activatedRoute.data.subscribe(({ microservice }) => (this.microservice = microservice));
+  }
+
+  byteSize(base64String: string): string {
+    return this.dataUtils.byteSize(base64String);
+  }
+
+  openFile(contentType = '', base64String: string): void {
+    this.dataUtils.openFile(contentType, base64String);
+  }
+
+  previousState(): void {
+    window.history.back();
+  }
+}

src/main/webapp/app/entities/microservice/microservice-details/microservice-custom-details.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { MicroserviceCustomDetailsComponent } from './microservice-custom-details.component';
+import { MicrocatalogSharedModule } from '../../../shared/shared.module';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  declarations: [MicroserviceCustomDetailsComponent],
+  imports: [MicrocatalogSharedModule, RouterModule],
+  exports: [MicroserviceCustomDetailsComponent],
+})
+export class MicroserviceCustomDetailsModule {}

src/main/webapp/app/entities/microservice/microservice.route.ts

@@ -11,6 +11,7 @@ import { MicroserviceService } from './microservice.service';
 import { MicroserviceComponent } from './microservice.component';
 import { MicroserviceDetailComponent } from './microservice-detail.component';
 import { MicroserviceUpdateComponent } from './microservice-update.component';
+import { MicroserviceCustomDetailsComponent } from './microservice-details/microservice-custom-details.component';
 
 @Injectable({ providedIn: 'root' })
 export class MicroserviceResolve implements Resolve<IMicroservice> {
@@ -80,4 +81,16 @@ export const microserviceRoute: Routes = [
     },
     canActivate: [UserRouteAccessService],
   },
+  {
+    path: ':id/details/custom',
+    component: MicroserviceCustomDetailsComponent,
+    resolve: {
+      microservice: MicroserviceResolve,
+    },
+    data: {
+      authorities: [Authority.USER],
+      pageTitle: 'microcatalogApp.microservice.home.title',
+    },
+    canActivate: [UserRouteAccessService],
+  },
 ];

webpack/webpack.dev.js

@@ -72,6 +72,9 @@ module.exports = (options) => webpackMerge(commonConfig({ env: ENV }), {
     },
     stats: process.env.JHI_DISABLE_WEBPACK_LOGS ? 'none' : options.stats,
     plugins: [
+        new webpack.DefinePlugin({
+          'EXPERIMENTAL_FEATURE': true
+        }),
         process.env.JHI_DISABLE_WEBPACK_LOGS
             ? null
             : new SimpleProgressWebpackPlugin({

webpack/webpack.prod.js

@@ -116,6 +116,9 @@ module.exports = webpackMerge(commonConfig({ env: ENV }), {
         ]
     },
     plugins: [
+        new webpack.DefinePlugin({
+          'EXPERIMENTAL_FEATURE': false
+        }),
         new MiniCssExtractPlugin({
             // Options similar to the same options in webpackOptions.output
             // both options are optional