From 49bcf70c15fb78386a64dff797d1bf1732d2bc0a Mon Sep 17 00:00:00 2001
From: James Strachan <james.strachan@gmail.com>
Date: Fri, 28 Apr 2017 10:41:41 +0100
Subject: [PATCH] feat(apps page): add kebab menu

lets add a kebab menu to drop down so folks can scale, delete or view on openshift console. Also lets remove the icon on the versions and just use links to make things look easier to grok #454
---
 .../ui/app/list/list.app.component.html       | 78 +++++++++++++++----
 .../ui/app/list/list.app.component.scss       | 10 ++-
 .../ui/app/list/list.app.component.ts         | 20 ++++-
 .../ui/deployment/deployment.module.ts        |  2 +
 4 files changed, 94 insertions(+), 16 deletions(-)

diff --git a/src/app/kubernetes/ui/app/list/list.app.component.html b/src/app/kubernetes/ui/app/list/list.app.component.html
index 6caf896..021b1d6 100644
--- a/src/app/kubernetes/ui/app/list/list.app.component.html
+++ b/src/app/kubernetes/ui/app/list/list.app.component.html
@@ -32,14 +32,49 @@
           </div>
           <div *ngFor="let envInfo of app.environmentDetails" class="col-md-2">
             <div class="card-pf card-pf-accented card-pf-aggregate-status">
-              <h2 class="card-pf-title" title="version of the application running in this environment">
-                <span class="card-pf-aggregate-status-count">{{envInfo.version}}</span>&nbsp;
-                <span *ngIf="envInfo.exposeUrl">
-                  <a [href]="envInfo.exposeUrl" title="View the app in this environment" target="app">
-                    <span class="fa fa-external-link"></span>
-                  </a>
+              <h2 class="card-pf-title">
+                <span title="version of the application running in this environment">
+                  <span class="card-pf-aggregate-status-count">
+                    <span *ngIf="!envInfo.exposeUrl">
+                      {{envInfo.version}}
+                    </span>
+                    <span *ngIf="envInfo.exposeUrl">
+                      <a [href]="envInfo.exposeUrl" title="View the app in this environment" target="app" class="app-version-link">
+                        {{envInfo.version}}
+                      </a>
+                    </span>
+                  </span>
+                </span>
+
+                <span *ngIf="envInfo.deployment" class='pull-right dropdown-kebab-pf' dropdown>
+                  <button class='btn btn-link kebab' type='button'
+                          aria-haspopup='true' aria-expanded='true' dropdownToggle>
+                    <span class='fa fa-ellipsis-v'></span>
+                  </button>
+                  <ul class='dropdown-menu-right' aria-labelledby='dropdownKebabRight9' role="menu" dropdownMenu>
+                    <li *ngIf="envInfo.exposeUrl">
+                      <a target="deployment" [href]="envInfo.exposeUrl"
+                         title="Open this deployment in a separate browser tab">
+                        Open
+                      </a>
+                    </li>
+                    <li>
+                      <a (click)="openScaleDialog(scaleDeploymentModal, envInfo.deployment.deployment)"
+                         title="Scale the number of pods for this app in this environment">Scale</a>
+                    </li>
+                    <li *ngIf="envInfo.deployment.deployment.openShiftConsoleUrl">
+                      <a [href]="envInfo.deployment.deployment.openShiftConsoleUrl" target="openshift"
+                         title="View this Deployment in the OpenShift Console">OpenShift Console</a>
+                    </li>
+                    <li class="divider"></li>
+                    <li>
+                      <a (click)="openDeleteDialog(deleteDeploymentModal, envInfo.deployment.deployment)"
+                         title="Delete this Deployment">Delete</a>
+                    </li>
+                  </ul>
                 </span>
               </h2>
+              
               <div class="card-pf-body">
                 <div class="card-pf-aggregate-status-notifications">
                   <div *ngIf="envInfo.deployment">
@@ -56,18 +91,20 @@ <h2 class="card-pf-title" title="version of the application running in this envi
                       <span class="pficon pficon-warning-triangle-o"></span> {{envInfo.deployment.terminatingReplicas}}
                     </span>
                     <div *ngIf="envInfo.deployment.emptyReplicas">
-                      <span class="card-pf-aggregate-status-notification" title="There are current no pods in this environment">
+                      <span class="card-pf-aggregate-status-notification"
+                            title="There are current no pods in this environment">
                         0
                       </span>
                     </div>
                   </div>
-<!--
-                  <div *ngIf="!envInfo.deployment">
-                    <span class="card-pf-aggregate-status-notification" title="Number of available pods">
-                      0
-                    </span>
-                  </div>
--->
+
+                  <!--
+                                    <div *ngIf="!envInfo.deployment">
+                                      <span class="card-pf-aggregate-status-notification" title="Number of available pods">
+                                        0
+                                      </span>
+                                    </div>
+                  -->
                 </div>
               </div>
             </div>
@@ -90,3 +127,16 @@ <h2 class="card-pf-title" title="version of the application running in this envi
 
 
 </fabric8-loading>
+
+
+<modal #deleteDeploymentModal title="Delete Deployment">
+  <modal-content>
+    <delete-deployment-dialog></delete-deployment-dialog>
+  </modal-content>
+</modal>
+
+<modal #scaleDeploymentModal title="Scale Deployment">
+  <modal-content>
+    <scale-deployment-dialog></scale-deployment-dialog>
+  </modal-content>
+</modal>
diff --git a/src/app/kubernetes/ui/app/list/list.app.component.scss b/src/app/kubernetes/ui/app/list/list.app.component.scss
index a856792..8d561a0 100644
--- a/src/app/kubernetes/ui/app/list/list.app.component.scss
+++ b/src/app/kubernetes/ui/app/list/list.app.component.scss
@@ -25,4 +25,12 @@
 }
 
 .app-env-info-panel-row {
-}
\ No newline at end of file
+}
+
+.card-pf-title .kebab {
+  padding-top: 0px;
+}
+
+.card-pf-title .app-version-link {
+
+}
diff --git a/src/app/kubernetes/ui/app/list/list.app.component.ts b/src/app/kubernetes/ui/app/list/list.app.component.ts
index 26f3a5a..63cba30 100644
--- a/src/app/kubernetes/ui/app/list/list.app.component.ts
+++ b/src/app/kubernetes/ui/app/list/list.app.component.ts
@@ -1,8 +1,10 @@
-import {Component, Input} from "@angular/core";
+import {Component, Input, ViewChild} from "@angular/core";
 import {TREE_ACTIONS} from "angular2-tree-component";
 import {ParentLinkFactory} from "../../../../common/parent-link-factory";
 import {AppDeployments} from "../list-page/list-page.app.component";
 import {Space, createEmptySpace} from "../../../model/space.model";
+import {DeploymentDeleteDialog} from "../../deployment/delete-dialog/delete-dialog.deployment.component";
+import {DeploymentScaleDialog} from "../../deployment/scale-dialog/scale-dialog.deployment.component";
 
 @Component({
   selector: 'fabric8-apps-list',
@@ -16,10 +18,26 @@ export class AppListComponent {
   @Input() apps: AppDeployments[];
   @Input() space: Space;
 
+
+  @ViewChild(DeploymentDeleteDialog) deleteDialog: DeploymentDeleteDialog;
+  @ViewChild(DeploymentScaleDialog) scaleDialog: DeploymentScaleDialog;
+
   constructor(
     parentLinkFactory: ParentLinkFactory,
   ) {
     this.parentLink = parentLinkFactory.parentLink;
   }
 
+  openDeleteDialog(deleteDeploymentModal, deployment) {
+    this.deleteDialog.modal = deleteDeploymentModal;
+    this.deleteDialog.deployment = deployment;
+    deleteDeploymentModal.open();
+  }
+
+  openScaleDialog(scaleDeploymentModal, deployment) {
+    this.scaleDialog.configure(scaleDeploymentModal, deployment);
+    scaleDeploymentModal.open();
+  }
+
+
 }
diff --git a/src/app/kubernetes/ui/deployment/deployment.module.ts b/src/app/kubernetes/ui/deployment/deployment.module.ts
index 388ed76..2d59b6e 100644
--- a/src/app/kubernetes/ui/deployment/deployment.module.ts
+++ b/src/app/kubernetes/ui/deployment/deployment.module.ts
@@ -55,6 +55,8 @@ import {DeploymentScaleDialog} from './scale-dialog/scale-dialog.deployment.comp
   exports: [
     ModalModule,
     DeploymentsListComponent,
+    DeploymentDeleteDialog,
+    DeploymentScaleDialog,
   ],
   providers: [
     DropdownConfig