From 6862fe355121dfdb2834f80b9555f5c245da1c66 Mon Sep 17 00:00:00 2001
From: Alexander Matyushentsev <Alexander_Matyushentsev@intuit.com>
Date: Mon, 16 Jul 2018 09:41:33 -0700
Subject: [PATCH] Issue #406 - add button to terminate a operation

---
 .../application-details.tsx                   |  2 +-
 .../application-operation-state.tsx           | 39 +++++++++++++++++--
 src/app/shared/models.ts                      |  2 +-
 .../shared/services/applications-service.ts   | 10 +++--
 4 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/app/applications/components/application-details/application-details.tsx b/src/app/applications/components/application-details/application-details.tsx
index e75426c1b3016..a662c4e256851 100644
--- a/src/app/applications/components/application-details/application-details.tsx
+++ b/src/app/applications/components/application-details/application-details.tsx
@@ -221,7 +221,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ na
                         />}
                 </SlidingPanel>
                 <SlidingPanel isShown={this.showOperationState && !!operationState} onClose={() => this.setOperationStatusVisible(false)}>
-                    {operationState && <ApplicationOperationState operationState={operationState}/>}
+                    {operationState && <ApplicationOperationState  application={this.state.application} operationState={operationState}/>}
                 </SlidingPanel>
                 <SlidingPanel isShown={this.showConditions && !!conditions} onClose={() => this.setConditionsStatusVisible(false)}>
                     {conditions && <ApplicationConditions conditions={conditions}/>}
diff --git a/src/app/applications/components/application-operation-state/application-operation-state.tsx b/src/app/applications/components/application-operation-state/application-operation-state.tsx
index 423462e3d414b..37403480759e1 100644
--- a/src/app/applications/components/application-operation-state/application-operation-state.tsx
+++ b/src/app/applications/components/application-operation-state/application-operation-state.tsx
@@ -1,12 +1,17 @@
-import { Duration } from 'argo-ui';
+import { Duration, NotificationType } from 'argo-ui';
 import * as moment from 'moment';
+import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
-import { Ticker } from '../../../shared/components';
+import { ErrorNotification, Ticker } from '../../../shared/components';
+import { AppContext } from '../../../shared/context';
 import * as models from '../../../shared/models';
+import { services } from '../../../shared/services';
 import * as utils from '../utils';
 
-export const ApplicationOperationState = ({operationState}: { operationState: models.OperationState }) => {
+interface Props { application: models.Application; operationState: models.OperationState; }
+
+export const ApplicationOperationState: React.StatelessComponent<Props> = ({application, operationState}, ctx: AppContext) => {
 
     const operationAttributes = [
         {title: 'OPERATION', value: utils.getOperationType(operationState)},
@@ -18,9 +23,31 @@ export const ApplicationOperationState = ({operationState}: { operationState: mo
                 {(time) => <Duration durationMs={(operationState.finishedAt && moment(operationState.finishedAt) || time).diff(moment(operationState.startedAt)) / 1000}/>}
             </Ticker>
         )},
-        ...(operationState.finishedAt ? [{title: 'FINISHED AT', value: operationState.finishedAt}] : []),
     ];
 
+    if (operationState.finishedAt) {
+        operationAttributes.push({ title: 'FINISHED AT', value: operationState.finishedAt});
+    } else if (operationState.phase !== 'Terminating') {
+        operationAttributes.push({
+            title: '',
+            value: (
+                <button className='argo-button argo-button--base' onClick={async () => {
+                    const confirmed = await ctx.apis.popup.confirm('Terminate operation', 'Are you sure you want to terminate operation?');
+                    if (confirmed) {
+                        try {
+                            services.applications.terminateOperation(application.metadata.name);
+                        } catch (e) {
+                            ctx.apis.notifications.show({
+                                content: <ErrorNotification title='Unable to terminate operation' e={e}/>,
+                                type: NotificationType.Error,
+                            });
+                        }
+                    }
+                }}>Terminate</button>
+            ),
+        });
+    }
+
     const resultAttributes: {title: string, value: string}[] = [];
     const syncResult = operationState.syncResult || operationState.rollbackResult;
     if (operationState.finishedAt) {
@@ -115,3 +142,7 @@ export const ApplicationOperationState = ({operationState}: { operationState: mo
         </div>
     );
 };
+
+ApplicationOperationState.contextTypes = {
+    apis: PropTypes.object,
+};
diff --git a/src/app/shared/models.ts b/src/app/shared/models.ts
index 7012611a08e88..e2a935c8417a7 100644
--- a/src/app/shared/models.ts
+++ b/src/app/shared/models.ts
@@ -34,7 +34,7 @@ export interface Operation {
     rollback: RollbackOperation;
 }
 
-export type OperationPhase = 'InProgress' | 'Failed' | 'Succeeded';
+export type OperationPhase = 'InProgress' | 'Failed' | 'Succeeded' | 'Terminating';
 
 /**
  * OperationState contains information about state of currently performing operation on application.
diff --git a/src/app/shared/services/applications-service.ts b/src/app/shared/services/applications-service.ts
index 2e7f07151e0af..0554bd5b6b2c5 100644
--- a/src/app/shared/services/applications-service.ts
+++ b/src/app/shared/services/applications-service.ts
@@ -37,11 +37,11 @@ export class ApplicationsService {
     }
 
     public sync(name: string, revision: string, prune: boolean): Promise<boolean> {
-        return requests.post(`/applications/${name}/sync`).send({revision, prune: !!prune}).then((res) => true);
+        return requests.post(`/applications/${name}/sync`).send({revision, prune: !!prune}).then(() => true);
     }
 
     public rollback(name: string, id: number): Promise<boolean> {
-        return requests.post(`/applications/${name}/rollback`).send({id}).then((res) => true);
+        return requests.post(`/applications/${name}/rollback`).send({id}).then(() => true);
     }
 
     public getContainerLogs(applicationName: string, podName: string, containerName: string): Observable<models.LogEntry> {
@@ -50,13 +50,17 @@ export class ApplicationsService {
     }
 
     public deletePod(applicationName: string, podName: string): Promise<any> {
-        return requests.delete(`/applications/${applicationName}/pods/${podName}`).send().then((res) => true);
+        return requests.delete(`/applications/${applicationName}/pods/${podName}`).send().then(() => true);
     }
 
     public resourceEvents(applicationName: string, resourceUID: string, resourceName: string): Promise<models.Event[]> {
         return requests.get(`/applications/${applicationName}/events`).query({resourceName, resourceUID}).send().then((res) => (res.body as models.EventList).items || []);
     }
 
+    public terminateOperation(applicationName: string) {
+        return requests.delete(`/applications/${applicationName}/operation`).send().then(() => true);
+    }
+
     private parseAppFields(data: any): models.Application {
         const app = data as models.Application;
         app.spec.project = app.spec.project || 'default';