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

     1  import * as moment from 'moment';
     2  import * as React from 'react';
     3  import {ago} from 'argo-ui/v2';
     4  
     5  import * as models from '../../models';
     6  
     7  require('./events-list.scss');
     8  
     9  function timestampSort(first: models.Event, second: models.Event): number {
    10      if (first.lastTimestamp && !second.lastTimestamp) {
    11          return moment(second.eventTime).diff(first.lastTimestamp);
    12      } else if (!first.lastTimestamp && second.lastTimestamp) {
    13          return moment(second.lastTimestamp).diff(first.eventTime);
    14      } else if (!first.lastTimestamp && !second.lastTimestamp) {
    15          return moment(second.eventTime).diff(first.eventTime);
    16      }
    17      return moment(second.lastTimestamp).diff(first.lastTimestamp);
    18  }
    19  
    20  function getTimeElements(timestamp: string) {
    21      const readableFormat = (d: Date) => moment(d).calendar();
    22      const dateOfEvent = new Date(timestamp);
    23      return (
    24          <>
    25              <div className='events-list__event__ago'>{ago(dateOfEvent)}</div>
    26              <div className='events-list__event__time'>{readableFormat(dateOfEvent)}</div>
    27          </>
    28      );
    29  }
    30  
    31  export const EventsList = (props: {events: models.Event[]}) => {
    32      const events = props.events.sort((first, second) => timestampSort(first, second));
    33  
    34      return (
    35          <div className='events-list'>
    36              {(events.length === 0 && <p>No events available</p>) || (
    37                  <div className='argo-table-list'>
    38                      <div className='argo-table-list__head'>
    39                          <div className='row'>
    40                              <div className='columns small-2 xxlarge-2'>REASON</div>
    41                              <div className='columns small-4 xxlarge-5'>MESSAGE</div>
    42                              <div className='columns small-2 xxlarge-1'>COUNT</div>
    43                              <div className='columns small-2 xxlarge-2'>FIRST OCCURRED</div>
    44                              <div className='columns small-2 xxlarge-2'>LAST OCCURRED</div>
    45                          </div>
    46                      </div>
    47                      {events.map(event => (
    48                          <div className={`argo-table-list__row events-list__event events-list__event--${event.type}`} key={event.metadata.uid}>
    49                              <div className='row'>
    50                                  <div className='columns small-2 xxlarge-2'>{event.reason}</div>
    51                                  <div className='columns small-4 xxlarge-5' style={{whiteSpace: 'normal', lineHeight: 'normal'}}>
    52                                      {event.message}
    53                                  </div>
    54                                  <div className='columns small-2 xxlarge-1'>{event.count}</div>
    55                                  <div className='columns small-2 xxlarge-2'>{event.firstTimestamp ? getTimeElements(event.firstTimestamp) : getTimeElements(event.eventTime)}</div>
    56                                  <div className='columns small-2 xxlarge-2'>{event.lastTimestamp ? getTimeElements(event.lastTimestamp) : getTimeElements(event.eventTime)}</div>
    57                              </div>
    58                          </div>
    59                      ))}
    60                  </div>
    61              )}
    62          </div>
    63      );
    64  };