ui: modify time format display in session list

Signed-off-by: Leonardo R.S. Joao <leonardo.joao@ossystems.com.br>
shellhub-io · Feb 4, 2022 · bba1c7e · bba1c7e
1 parent 06e1b34
commit bba1c7e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/ui/src/components/filter/date.js b/ui/src/components/filter/date.js
@@ -7,6 +7,13 @@ export const formatDate = (date) => {
   return null;
 };
 
+export const formatDateCompact = (date) => {
+  if (date) {
+    return moment(date).format('LLL');
+  }
+  return null;
+};
+
 export const formatDateWithoutDayAndHours = (date) => {
   if (date) {
     return moment(date).format('MMMM Do YYYY');

diff --git a/ui/src/components/session/SessionList.vue b/ui/src/components/session/SessionList.vue
@@ -90,11 +90,11 @@
         </template>
 
         <template #[`item.started`]="{ item }">
-          {{ item.started_at | formatDate }}
+          {{ item.started_at | formatDateCompact }}
         </template>
 
         <template #[`item.last_seen`]="{ item }">
-          {{ item.last_seen | formatDate }}
+          {{ item.last_seen | formatDateCompact }}
         </template>
 
         <template #[`item.actions`]="{ item }">
@@ -165,7 +165,7 @@
 
 import SessionClose from '@/components/session/SessionClose';
 import SessionPlay from '@/components/session/SessionPlay';
-import { formatDate, lastSeen } from '@/components/filter/date';
+import { formatDateCompact, lastSeen } from '@/components/filter/date';
 
 export default {
   name: 'SessionListComponent',
@@ -175,7 +175,7 @@ export default {
     SessionPlay,
   },
 
-  filters: { formatDate, lastSeen },
+  filters: { formatDateCompact, lastSeen },
 
   data() {
     return {

diff --git a/ui/tests/unit/components/filter/Date.spec.js b/ui/tests/unit/components/filter/Date.spec.js
@@ -1,5 +1,5 @@
 import timezoneMock from 'timezone-mock';
-import { formatDate, formatDateWithoutDayAndHours } from '@/components/filter/date';
+import { formatDate, formatDateCompact, formatDateWithoutDayAndHours } from '@/components/filter/date';
 
 describe('Date', () => {
   const date = '2020-05-18T13:27:02.498Z';
@@ -15,6 +15,14 @@ describe('Date', () => {
   });
 });
 
+describe('Format date compact', () => {
+  it('Verify formatDate', () => {
+    const actual = formatDateCompact('2020-05-18T13:27:02.498Z');
+
+    expect(actual).toEqual('May 18, 2020 1:27 PM');
+  });
+});
+
 describe('Format date without day and hours', () => {
   it('Verify formatDate', () => {
     const actual = formatDateWithoutDayAndHours('2020-05-18T13:27:02.498Z');

diff --git a/ui/tests/unit/components/session/__snapshots__/SessionList.spec.js.snap b/ui/tests/unit/components/session/__snapshots__/SessionList.spec.js.snap
@@ -42,10 +42,10 @@ exports[`SessionList Renders the component 1`] = `
               <td class="text-center"><i aria-hidden="true" class="v-icon notranslate mdi mdi-shield-alert theme--light error--text"></i><span class="v-tooltip v-tooltip--bottom"><!----></span></td>
               <td class="text-center"><code>00.00.00</code></td>
               <td class="text-center">
-                Monday, May 18th 2020, 12:30:28 pm
+                May 18, 2020 12:30 PM
               </td>
               <td class="text-center">
-                Monday, May 18th 2020, 12:30:30 pm
+                May 18, 2020 12:30 PM
               </td>
               <td class="text-center"><span class="v-chip v-chip--clickable theme--light v-size--default transparent"><span class="v-chip__content"><button type="button" role="button" aria-haspopup="true" aria-expanded="false" class="v-icon notranslate icons v-icon--link mdi mdi-dots-horizontal theme--light" style="font-size: 16px;"></button></span></span>
                 <div class="v-menu">
@@ -66,10 +66,10 @@ exports[`SessionList Renders the component 1`] = `
               <td class="text-center"><i aria-hidden="true" class="v-icon notranslate mdi mdi-shield-alert theme--light error--text"></i><span class="v-tooltip v-tooltip--bottom"><!----></span></td>
               <td class="text-center"><code>00.00.00</code></td>
               <td class="text-center">
-                Monday, May 18th 2020, 12:30:28 pm
+                May 18, 2020 12:30 PM
               </td>
               <td class="text-center">
-                Monday, May 18th 2020, 12:30:30 pm
+                May 18, 2020 12:30 PM
               </td>
               <td class="text-center"><span class="v-chip v-chip--clickable theme--light v-size--default transparent"><span class="v-chip__content"><button type="button" role="button" aria-haspopup="true" aria-expanded="false" class="v-icon notranslate icons v-icon--link mdi mdi-dots-horizontal theme--light" style="font-size: 16px;"></button></span></span>
                 <div class="v-menu">