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 fabric8-ui#454
jstrachan · May 2, 2017 · 49bcf70 · 49bcf70
1 parent 41ee150
commit 49bcf70
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 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
@@ -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
@@ -25,4 +25,12 @@
 }
 
 .app-env-info-panel-row {
-}
+}
+
+.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
@@ -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
@@ -55,6 +55,8 @@ import {DeploymentScaleDialog} from './scale-dialog/scale-dialog.deployment.comp
   exports: [
     ModalModule,
     DeploymentsListComponent,
+    DeploymentDeleteDialog,
+    DeploymentScaleDialog,
   ],
   providers: [
     DropdownConfig