feat(ui): display time ago on every datetime

close #314
tchiotludo · Oct 24, 2021 · d734316 · d734316
1 parent 2983e61
commit d734316
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 11 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -29,6 +29,7 @@
     "react-helmet": "^6.0.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
+    "react-timeago": "^6.2.1",
     "react-toastify": "^6.0.6",
     "reactstrap": "^8.4.0"
   },

diff --git a/client/src/containers/Tail/Tail.jsx b/client/src/containers/Tail/Tail.jsx
@@ -10,6 +10,7 @@ import 'ace-builds/webpack-resolver';
 import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-merbivore_soft';
 import Root from '../../components/Root';
+import TimeAgo from 'react-timeago';
 
 const STATUS = {
   STOPPED: 'STOPPED',
@@ -404,7 +405,7 @@ class Tail extends Root {
                 colName: 'Date',
                 type: 'text',
                 cell: obj => {
-                  return <div className="tail-headers">{obj.timestamp}</div>;
+                  return (<div className="tail-headers"><TimeAgo date={Date.parse(obj.timestamp)} title={obj.timestamp}/></div>);
                 }
               },
               {

diff --git a/client/src/containers/Topic/Topic/TopicData/TopicData.jsx b/client/src/containers/Topic/Topic/TopicData/TopicData.jsx
@@ -9,7 +9,8 @@ import {
   uriTopicData,
   uriTopicDataDelete,
   uriTopicDataSearch, uriTopicDataSingleRecord,
-  uriTopicsPartitions
+  uriTopicsPartitions,
+  basePath
 } from '../../../../utils/endpoints';
 import Pagination from '../../../../components/Pagination/Pagination';
 import moment from 'moment';
@@ -25,9 +26,9 @@ import 'ace-builds/src-noconflict/theme-dracula';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Root from '../../../../components/Root';
-import { basePath } from '../../../../utils/endpoints';
-import {capitalizeTxt, getClusterUIOptions} from "../../../../utils/functions";
-import Select from "../../../../components/Form/Select";
+import {capitalizeTxt, getClusterUIOptions} from '../../../../utils/functions';
+import Select from '../../../../components/Form/Select';
+import TimeAgo from 'react-timeago'
 
 class TopicData extends Root {
   state = {
@@ -116,7 +117,7 @@ class TopicData extends Root {
             }
         }
     );
-  };
+  }
 
   _buildSearchFromQueryString(query) {
     const { search } = this.state;
@@ -886,7 +887,7 @@ class TopicData extends Root {
                     colName: 'Date',
                     type: 'text',
                     cell: (obj, col) => {
-                      return obj[col.accessor];
+                      return (<TimeAgo date={Date.parse(obj[col.accessor])} title={obj[col.accessor]}/>);
                     }
                   },
                   {

diff --git a/client/src/containers/Topic/TopicList/TopicList.jsx b/client/src/containers/Topic/TopicList/TopicList.jsx
@@ -15,6 +15,7 @@ import {Collapse} from 'react-bootstrap';
 import Root from '../../../components/Root';
 import {getClusterUIOptions} from "../../../utils/functions";
 import {handlePageChange, getPageNumber} from "./../../../utils/pagination"
+import TimeAgo from "react-timeago";
 
 class TopicList extends Root {
   state = {
@@ -304,7 +305,10 @@ class TopicList extends Root {
           id: 'lastWrite',
           accessor: 'lastWrite',
           colName: 'Last Record',
-          type: 'text'
+          type: 'text',
+          cell: (obj, col) => {
+            return <TimeAgo date={Date.parse(obj[col.accessor])} title={obj[col.accessor]}/>;
+          }
         });
     }
 

diff --git a/client/src/index.js b/client/src/index.js
@@ -5,7 +5,6 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 import prefix from './prefix';
 
-
 let pathPrefix = prefix() + '/ui';
 
 ReactDOM.render(<App pathPrefix={pathPrefix} />, document.getElementById('root'));