From 95b237bdc570289152962204747c2c9aaead9d03 Mon Sep 17 00:00:00 2001
From: Alexander Matyushentsev <Alexander_Matyushentsev@intuit.com>
Date: Mon, 23 Jul 2018 09:02:15 -0700
Subject: [PATCH] Issue #340 - render application events

---
 .../application-details/application-details.tsx  |  2 ++
 .../application-resource-events.tsx              | 16 ++++++++++------
 src/app/shared/services/applications-service.ts  |  4 ++++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/app/applications/components/application-details/application-details.tsx b/src/app/applications/components/application-details/application-details.tsx
index a662c4e256851..e58b5db381f74 100644
--- a/src/app/applications/components/application-details/application-details.tsx
+++ b/src/app/applications/components/application-details/application-details.tsx
@@ -181,6 +181,8 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{ na
                             title: 'PARAMETERS', key: 'parameters', content: <ParametersPanel
                                 params={this.state.application.status.parameters || []}
                                 overrides={this.state.application.spec.source.componentParameterOverrides}/>,
+                        }, {
+                            title: 'EVENTS', key: 'event', content: <ApplicationResourceEvents applicationName={this.state.application.metadata.name}/>,
                         }]}/>
                     )}
                     </div>
diff --git a/src/app/applications/components/application-resource-events/application-resource-events.tsx b/src/app/applications/components/application-resource-events/application-resource-events.tsx
index 84829fa884edf..e4e70b4630669 100644
--- a/src/app/applications/components/application-resource-events/application-resource-events.tsx
+++ b/src/app/applications/components/application-resource-events/application-resource-events.tsx
@@ -6,16 +6,18 @@ import { services } from '../../../shared/services';
 
 require('./application-resource-events.scss');
 
-export class ApplicationResourceEvents extends React.Component<{ applicationName: string, resource: models.ResourceNode }, { events: models.Event[] }> {
+export class ApplicationResourceEvents extends React.Component<{ applicationName: string, resource?: models.ResourceNode }, { events: models.Event[] }> {
 
-    constructor(props: {applicationName: string,  resource: models.ResourceNode }) {
+    constructor(props: {applicationName: string, resource?: models.ResourceNode }) {
         super(props);
         this.state = { events: null };
     }
 
     public async componentDidMount() {
-        const events = await services.applications.resourceEvents(this.props.applicationName, this.props.resource.state.metadata.uid, this.props.resource.state.metadata.name);
-        this.setState({ events });
+        const events = this.props.resource ?
+            services.applications.resourceEvents(this.props.applicationName, this.props.resource.state.metadata.uid, this.props.resource.state.metadata.name) :
+            services.applications.events(this.props.applicationName);
+        this.setState({ events: await events });
     }
 
     public render() {
@@ -28,7 +30,8 @@ export class ApplicationResourceEvents extends React.Component<{ applicationName
                         <div className='argo-table-list'>
                             <div className='argo-table-list__head'>
                                 <div className='row'>
-                                    <div className='columns small-8'>MESSAGE</div>
+                                    <div className='columns small-2'>REASON</div>
+                                    <div className='columns small-6'>MESSAGE</div>
                                     <div className='columns small-2'>COUNT</div>
                                     <div className='columns small-2'>EVENT TIMESTAMP</div>
                                 </div>
@@ -37,7 +40,8 @@ export class ApplicationResourceEvents extends React.Component<{ applicationName
                                 <div className={`argo-table-list__row application-resource-events__event application-resource-events__event--${event.type}`}
                                      key={event.metadata.uid}>
                                     <div className='row'>
-                                        <div className='columns small-8'>{event.message}</div>
+                                        <div className='columns small-2'>{event.reason}</div>
+                                        <div className='columns small-6'>{event.message}</div>
                                         <div className='columns small-2'>{event.count}</div>
                                         <div className='columns small-2'>{event.firstTimestamp}</div>
                                     </div>
diff --git a/src/app/shared/services/applications-service.ts b/src/app/shared/services/applications-service.ts
index e90130239a38a..10481c2d0ecf7 100644
--- a/src/app/shared/services/applications-service.ts
+++ b/src/app/shared/services/applications-service.ts
@@ -53,6 +53,10 @@ export class ApplicationsService {
         return requests.delete(`/applications/${applicationName}/pods/${podName}`).send().then(() => true);
     }
 
+    public events(applicationName: string): Promise<models.Event[]> {
+        return this.resourceEvents(applicationName, null, null);
+    }
+
     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 || []);
     }