Merge pull request #20 from alexmt/340-app-events-ui

Issue #340 - render application events
argoproj · Jul 24, 2018 · 83d0c4b · 83d0c4b
2 parents 2e1db8f + 95b237b
commit 83d0c4b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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 || []);
     }