github.com/argoproj/argo-cd@v1.8.7/ui/src/app/shared/components/events-list/events-list.tsx (about)

     1  import * as moment from 'moment';
     2  import * as React from 'react';
     3  
     4  import * as models from '../../models';
     5  
     6  require('./events-list.scss');
     7  
     8  export const EventsList = (props: {events: models.Event[]}) => {
     9      const events = props.events.sort((first, second) => moment(second.firstTimestamp).diff(first.lastTimestamp));
    10  
    11      return (
    12          <div className='events-list'>
    13              {(events.length === 0 && <p>No events available</p>) || (
    14                  <div className='argo-table-list'>
    15                      <div className='argo-table-list__head'>
    16                          <div className='row'>
    17                              <div className='columns small-2'>REASON</div>
    18                              <div className='columns small-5'>MESSAGE</div>
    19                              <div className='columns small-1'>COUNT</div>
    20                              <div className='columns small-2'>FIRST OCCURRED</div>
    21                              <div className='columns small-2'>LAST OCCURRED</div>
    22                          </div>
    23                      </div>
    24                      {events.map(event => (
    25                          <div className={`argo-table-list__row events-list__event events-list__event--${event.type}`} key={event.metadata.uid}>
    26                              <div className='row'>
    27                                  <div className='columns small-2'>{event.reason}</div>
    28                                  <div className='columns small-5'>{event.message}</div>
    29                                  <div className='columns small-1'>{event.count}</div>
    30                                  <div className='columns small-2'>{event.firstTimestamp}</div>
    31                                  <div className='columns small-2'>{event.lastTimestamp}</div>
    32                              </div>
    33                          </div>
    34                      ))}
    35                  </div>
    36              )}
    37          </div>
    38      );
    39  };