Added delete button on node list page

components/automate-ui/src/app/entities/infra-nodes/infra-nodes.actions.ts

@@ -6,7 +6,10 @@ import { InfraNode } from './infra-nodes.model';
 export enum NodeActionTypes {
   GET_ALL         = 'NODES::GET_ALL',
   GET_ALL_SUCCESS = 'NODES::GET_ALL::SUCCESS',
-  GET_ALL_FAILURE = 'NODES::GET_ALL::FAILURE'
+  GET_ALL_FAILURE = 'NODES::GET_ALL::FAILURE',
+  DELETE          = 'NODES::DELETE',
+  DELETE_SUCCESS  = 'NODES::DELETE::SUCCESS',
+  DELETE_FAILURE  = 'NODES::DELETE::FAILURE'
 }
 
 export interface NodesSuccessPayload {
@@ -34,7 +37,25 @@ export class GetNodesFailure implements Action {
   constructor(public payload: HttpErrorResponse) { }
 }
 
+export class DeleteNode implements Action {
+  readonly type = NodeActionTypes.DELETE;
+  constructor(public payload: { server_id: string, org_id: string, name: string }) { }
+}
+
+export class DeleteNodeSuccess implements Action {
+  readonly type = NodeActionTypes.DELETE_SUCCESS;
+  constructor(public payload: { name: string }) { }
+}
+
+export class DeleteNodeFailure implements Action {
+  readonly type = NodeActionTypes.DELETE_FAILURE;
+  constructor(public payload: HttpErrorResponse) { }
+}
+
 export type NodeActions =
   | GetNodes
   | GetNodesSuccess
-  | GetNodesFailure;
+  | GetNodesFailure
+  | DeleteNode
+  | DeleteNodeSuccess
+  | DeleteNodeFailure;

components/automate-ui/src/app/entities/infra-nodes/infra-nodes.effects.ts

@@ -12,7 +12,10 @@ import {
   GetNodesSuccess,
   NodesSuccessPayload,
   GetNodesFailure,
-  NodeActionTypes
+  NodeActionTypes,
+  DeleteNode,
+  DeleteNodeSuccess,
+  DeleteNodeFailure
 } from './infra-nodes.actions';
 
 import {
@@ -46,4 +49,34 @@ export class InfraNodeEffects {
       });
     })));
 
+  deleteNode$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(NodeActionTypes.DELETE),
+      mergeMap(({ payload: { server_id, org_id, name } }: DeleteNode) =>
+        this.requests.deleteNode(server_id, org_id, name).pipe(
+          map(() => new DeleteNodeSuccess({ name })),
+          catchError((error: HttpErrorResponse) =>
+            observableOf(new DeleteNodeFailure(error)))))));
+
+  deleteNodeSuccess$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(NodeActionTypes.DELETE_SUCCESS),
+      map(({ payload: { name } }: DeleteNodeSuccess) => {
+        return new CreateNotification({
+          type: Type.info,
+          message: `Successfully deleted node - ${name}.`
+        });
+    })));
+
+  deleteNodeFailure$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(NodeActionTypes.DELETE_FAILURE),
+      map(({ payload: { error } }: DeleteNodeFailure) => {
+        const msg = error.error;
+        return new CreateNotification({
+          type: Type.error,
+          message: `Could not delete node: ${msg || error}`
+        });
+    })));
+
 }

components/automate-ui/src/app/entities/infra-nodes/infra-nodes.reducer.ts

@@ -12,9 +12,11 @@ export interface InfraNodeEntityState extends EntityState<InfraNode> {
     items: InfraNode[],
     total: number
   };
+  deleteStatus: EntityStatus;
 }
 
 const GET_ALL_STATUS = 'getAllStatus';
+const DELETE_STATUS = 'deleteStatus';
 
 export const nodeEntityAdapter: EntityAdapter<InfraNode> = createEntityAdapter<InfraNode>();
 
@@ -41,6 +43,22 @@ export function infraNodeEntityReducer(
     case NodeActionTypes.GET_ALL_FAILURE:
       return set(GET_ALL_STATUS, EntityStatus.loadingFailure, state);
 
+    case NodeActionTypes.DELETE:
+      return set(DELETE_STATUS, EntityStatus.loading, state);
+
+    case NodeActionTypes.DELETE_SUCCESS:
+    const nodes =
+        state.nodeList.items.filter(node => node.name !== action.payload.name);
+      const total = state.nodeList.total - 1;
+      return pipe(
+        set(DELETE_STATUS, EntityStatus.loadingSuccess),
+        set('nodeList.items', nodes || []),
+        set('nodeList.total', total || 0)
+      )(state) as InfraNodeEntityState;
+
+    case NodeActionTypes.DELETE_FAILURE:
+      return set(DELETE_STATUS, EntityStatus.loadingFailure, state);
+
     default:
       return state;
   }

components/automate-ui/src/app/entities/infra-nodes/infra-nodes.requests.ts

@@ -26,4 +26,9 @@ export class InfraNodeRequests {
     return this.http.get<NodesSuccessPayload>(url, {headers});
   }
 
+  public deleteNode(server_id: string, org_id: string, name: string): Observable<{}> {
+    return this.http.delete(`${env.infra_proxy_url}/servers/${server_id}/orgs/${org_id}/nodes/${name}`,
+    {headers});
+  }
+
 }

components/automate-ui/src/app/entities/infra-nodes/infra-nodes.selectors.ts

@@ -22,3 +22,8 @@ export const nodeList = createSelector(
   infraNodeState,
   (state) => state.nodeList
 );
+
+export const deleteStatus = createSelector(
+  infraNodeState,
+  (state) => state.deleteStatus
+);

components/automate-ui/src/app/modules/infra-proxy/delete-infra-object-modal/delete-infra-object-modal.component.html

@@ -5,15 +5,18 @@
 
   <div class="right-box">
     <div class="left-align">
-      <chef-icon class="url-failed-icon">warning</chef-icon><span class="object-name"> {{objectName}}</span>
       <div class="title-text">Deleting {{objectNoun | titlecase}}?</div>
+      <p class="object-name"> {{objectName}}</p>
       <ng-container *ngIf="custom === false">
         <div class="action-text">This action is irreversible.</div>
         <div *ngIf="validator" class="client-message">
           <span>you are about to delete a validate client.</span><br>
           <span>Without a validate client, you may have</span><br> 
           <span>difficulties creating new nodes.</span>
         </div>
+        <div *ngIf="objectNoun === 'node'" class="node-message">
+          <span>Any associated clients will also be deleted.</span>
+        </div>
       </ng-container>
     </div>
 

components/automate-ui/src/app/modules/infra-proxy/delete-infra-object-modal/delete-infra-object-modal.component.scss

@@ -31,11 +31,14 @@ chef-modal {
     margin-top: 6px;
     margin-bottom: 11px;
     line-height: 40px;
+    letter-spacing: 0.15px;
   }
 
   .action-text {
     font-size: 24px;
     font-weight: 900;
+    line-height: 28px;
+    letter-spacing: 0.25px;
   }
 
   .left-align {
@@ -65,12 +68,10 @@ chef-modal {
     margin: 0px;
   }
 
-  span.object-name {
-    font-weight: 400;
-    margin-top: -2px;
-    margin-left: 7px;
-    position: absolute;
-    text-transform: capitalize;
+  p.object-name {
+    font-weight: 900;
+    font-size: 14px;
+    line-height: 18px;
   }
 }
 
@@ -137,13 +138,17 @@ chef-modal {
     opacity: 0.5;
   }
 
-  .url-failed-icon {
-    color: $chef-critical;
-  }
 }
 
 .client-message {
   font-size: 14px;
   line-height: 20px;
   margin-top: 10px;
 }
+
+.node-message {
+  font-size: 18px;
+  line-height: 28px;
+  letter-spacing: 0.25px;
+  margin-top: 10px;
+}

components/automate-ui/src/app/modules/infra-proxy/infra-nodes/infra-nodes.component.html

@@ -1,5 +1,13 @@
 <section class="infra-nodes">
   <chef-loading-spinner *ngIf="nodesListLoading" size="50"></chef-loading-spinner>
+  <app-delete-infra-object-modal
+    [visible]="deleteModalVisible"
+    objectNoun="node"
+    [objectName]="nodeToDelete?.name"
+    (close)="closeDeleteModal()"
+    (deleteClicked)="deleteNode()"
+    objectAction="Delete">
+  </app-delete-infra-object-modal>
   <app-empty-state *ngIf="authFailure" moduleTitle="nodes" (resetKeyRedirection)="resetKeyTabRedirection($event)">
   </app-empty-state>
   <ng-container *ngIf="!nodesListLoading && !authFailure">
@@ -24,6 +32,7 @@
             <chef-th class="no_border_th">Uptime</chef-th>
             <chef-th class="no_border_th">Last Check-In</chef-th>
             <chef-th class="no_border_th">Environment</chef-th>
+            <chef-th class="no_border_th three-dot-column"></chef-th>
           </chef-tr>
         </chef-thead>
         <chef-tbody>
@@ -35,6 +44,11 @@
             <chef-td>{{ node.uptime === '' ? '--' : node.uptime.split(' ').slice(0,2).join(' ') }}</chef-td>
             <chef-td>{{ timeFromNow(node.check_in) }}</chef-td>
             <chef-td>{{ node.environment === '' ? '--' : node.environment}}</chef-td>
+            <chef-td class="three-dot-column">
+              <mat-select panelClass="chef-control-menu">
+                <mat-option data-cy="delete" class="secondary minus-icon" (onSelectionChange)="startNodeDelete(node)">Delete</mat-option>
+              </mat-select>
+            </chef-td>
           </chef-tr>
         </chef-tbody>
       </chef-table>

components/automate-ui/src/app/modules/infra-proxy/infra-nodes/infra-nodes.component.scss

@@ -82,3 +82,43 @@ img {
     height: 55px;
   }
 }
+
+.minus-icon {
+  &:before {
+    display: inline-block;
+    content: '|';
+    font-family: arial;
+    transform: scaleX(-1) rotate(-90deg);
+    vertical-align: top;
+    line-height: 1em;
+    width: 8px;
+    color: $chef-critical;
+    height: 10px;
+    margin-right: 1.3em;
+    text-align: center;
+    position: absolute;
+    right: 0;
+  }
+
+  &:hover {
+    &:before {
+      color: $chef-white;
+    }
+
+  }
+}
+
+::ng-deep
+.mat-select-panel .mat-option {
+  &.secondary {
+    width: 115px;
+    height: 2.3em;
+    background: $chef-white;
+    color: $chef-critical;
+  }
+
+  &:hover {
+    background: $chef-primary-bright;
+    color: $chef-white;
+  }
+}

components/automate-ui/src/app/modules/infra-proxy/infra-nodes/infra-nodes.component.spec.ts

@@ -34,6 +34,11 @@ describe('InfraNodesComponent', () => {
         MockComponent({ selector: 'input', inputs: ['resetOrigin'] }),
         MockComponent({ selector: 'mat-select' }),
         MockComponent({ selector: 'mat-option' }),
+        MockComponent({
+          selector: 'app-delete-infra-object-modal',
+          inputs: ['default', 'visible', 'objectNoun', 'objectName'],
+          outputs: ['close', 'deleteNode']
+        }),
         InfraNodesComponent
       ],
       providers: [

components/automate-ui/src/app/modules/infra-proxy/infra-nodes/infra-nodes.component.ts

@@ -1,17 +1,18 @@
 import { Component, Input, OnInit, OnDestroy, EventEmitter, Output } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { combineLatest, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { filter, takeUntil } from 'rxjs/operators';
 import { isNil } from 'lodash/fp';
 
 import { NgrxStateAtom } from 'app/ngrx.reducers';
 import { LayoutFacadeService, Sidebar } from 'app/entities/layout/layout.facade';
 import { EntityStatus } from 'app/entities/entities';
-import { GetNodes } from 'app/entities/infra-nodes/infra-nodes.actions';
+import { GetNodes, DeleteNode } from 'app/entities/infra-nodes/infra-nodes.actions';
 import { InfraNode } from 'app/entities/infra-nodes/infra-nodes.model';
 import {
   nodeList,
-  getAllStatus
+  getAllStatus,
+  deleteStatus
 } from 'app/entities/infra-nodes/infra-nodes.selectors';
 import { TimeFromNowPipe } from 'app/pipes/time-from-now.pipe';
 @Component({
@@ -36,6 +37,8 @@ export class InfraNodesComponent implements OnInit, OnDestroy {
   public currentPage = 1;
   public per_page = 9;
   public total: number;
+  public nodeToDelete: InfraNode;
+  public deleteModalVisible = false;
 
   constructor(
     private store: Store<NgrxStateAtom>,
@@ -63,6 +66,18 @@ export class InfraNodesComponent implements OnInit, OnDestroy {
         this.authFailure = true;
       }
     });
+
+    this.store.select(deleteStatus).pipe(
+      filter(status => status === EntityStatus.loadingSuccess),
+      takeUntil(this.isDestroyed))
+      .subscribe(() => {
+        this.searching = true;
+        if (this.nodes.length === 0 &&
+          this.currentPage !== 1) {
+          this.currentPage = this.currentPage - 1;
+        }
+        this.getNodesData();
+      });
   }
 
   searchNodes(currentText: string) {
@@ -105,4 +120,21 @@ export class InfraNodesComponent implements OnInit, OnDestroy {
     const fromNowValue = this.timeFromNowPipe.transform(epchoTime);
     return fromNowValue === '-' ? '--' : fromNowValue;
   }
+
+  public startNodeDelete(node: InfraNode): void {
+    this.nodeToDelete = node;
+    this.deleteModalVisible = true;
+  }
+
+  public deleteNode(): void {
+    this.searching = true;
+    this.closeDeleteModal();
+    this.store.dispatch(new DeleteNode({
+      server_id: this.serverId, org_id: this.orgId, name: this.nodeToDelete.name
+    }));
+  }
+
+  public closeDeleteModal(): void {
+    this.deleteModalVisible = false;
+  }
 }