netmon/views/TimeDiff.jsx

const React = require('react');
const dayjs = require('dayjs');

export const TimeDiff = ({ row, nextRow }) => {
  if (nextRow) {
    const now = dayjs();
    const firstDate = dayjs(row.timestamp);
    const secondDate = dayjs(nextRow.timestamp);
    const theDiff =
      row.id === nextRow.id ? now.diff(firstDate) : firstDate.diff(secondDate);
    const theSeconds = theDiff / 1000;
    const theMinutes = theSeconds / 60;
    const theHours = theMinutes / 60;
    const theDays = theHours / 24;

    const renderSecs = <>{theSeconds === 1 ? 'sec' : 'secs'}</>;
    const renderMins = <>{theMinutes === 1 ? 'min ' : 'mins '}</>;
    const renderHrs = <>{theHours === 1 ? 'hr ' : 'hrs '}</>;
    const renderDays = <>{theDays === 1 ? 'day ' : 'days '}</>;

    return (
      <>
        {/* secs */}
        {theSeconds < 60 ? (
          <>
            {Math.round(theSeconds)}
            {renderSecs}
          </>
        ) : null}

        {/* mins secs */}
        {theMinutes > 1 && theMinutes < 60 ? (
          <>
            <>
              {Math.round(theMinutes)}
              {renderMins}
            </>
            <>
              {Math.round((theMinutes % 1) * 60)}
              {renderSecs}
            </>
          </>
        ) : null}

        {/* hrs mins secs */}
        {theHours > 1 && theHours < 24 ? (
          <>
            <>
              {Math.round(theHours)}
              {renderHrs}
            </>
            <>
              {Math.round((theHours % 1) * 60)}
              {renderMins}
            </>
            <>
              {Math.round((theMinutes % 1) * 60)}
              {renderSecs}
            </>
          </>
        ) : null}

        {/* days hrs mins secs */}
        {theDays > 1 ? (
          <>
            <>
              {Math.round(theDays)}
              {renderDays}
            </>
            <>
              {Math.round((theDays % 1) * 24)}
              {renderHrs}
            </>
            <>
              {Math.round((theHours % 1) * 60)}
              {renderMins}
            </>
            <>
              {Math.round((theMinutes % 1) * 60)}
              {renderSecs}
            </>
          </>
        ) : null}
      </>
    );
  }
  return false;
};