Show empty state when timestamp is not present

ee/app/assets/javascripts/geo_nodes/components/geo_node_event_status.vue

@@ -35,16 +35,24 @@
   <div
     class="node-detail-value"
   >
-    <strong>
-      {{ eventId }}
-    </strong>
-    <span
-      v-tooltip
-      class="event-status-timestamp"
-      data-placement="bottom"
-      :title="timeStampString"
+    <template v-if="eventTimeStamp">
+      <strong>
+        {{ eventId }}
+      </strong>
+      <span
+        v-tooltip
+        v-if="eventTimeStamp"
+        class="event-status-timestamp"
+        data-placement="bottom"
+        :title="timeStampString"
+      >
+        ({{ timeFormated(timeStamp) }})
+      </span>
+    </template>
+    <strong
+      v-else
     >
-      ({{ timeFormated(timeStamp) }})
-    </span>
+      {{ __('Not available') }}
+    </strong>
   </div>
 </template>

ee/app/assets/javascripts/geo_nodes/store/geo_nodes_store.js

@@ -74,11 +74,11 @@ export default class GeoNodesStore {
         failureCount: rawNodeDetails.attachments_failed_count || 0,
       },
       lastEvent: {
-        id: rawNodeDetails.last_event_id,
+        id: rawNodeDetails.last_event_id || 0,
         timeStamp: rawNodeDetails.last_event_timestamp,
       },
       cursorLastEvent: {
-        id: rawNodeDetails.cursor_last_event_id,
+        id: rawNodeDetails.cursor_last_event_id || 0,
         timeStamp: rawNodeDetails.cursor_last_event_timestamp,
       },
       namespaces: rawNodeDetails.namespaces,

spec/javascripts/geo_nodes/components/geo_node_event_status_spec.js

@@ -5,12 +5,15 @@ import { mockNodeDetails } from '../mock_data';
 
 import mountComponent from '../../helpers/vue_mount_component_helper';
 
-const createComponent = () => {
+const createComponent = (
+  eventId = mockNodeDetails.lastEvent.id,
+  eventTimeStamp = mockNodeDetails.lastEvent.timeStamp,
+) => {
   const Component = Vue.extend(geoNodeEventStatusComponent);
 
   return mountComponent(Component, {
-    eventId: mockNodeDetails.lastEvent.id,
-    eventTimeStamp: mockNodeDetails.lastEvent.timeStamp,
+    eventId,
+    eventTimeStamp,
   });
 };
 
@@ -46,5 +49,13 @@ describe('GeoNodeEventStatus', () => {
       expect(vm.$el.querySelector('strong').innerText.trim()).toBe(`${mockNodeDetails.lastEvent.id}`);
       expect(vm.$el.querySelector('.event-status-timestamp').innerText).toContain('ago');
     });
+
+    it('renders empty state when timestamp is not present', () => {
+      const vmWithoutTimestamp = createComponent(0, 0);
+      expect(vmWithoutTimestamp.$el.querySelectorAll('strong').length).not.toBe(0);
+      expect(vmWithoutTimestamp.$el.querySelectorAll('.event-status-timestamp').length).toBe(0);
+      expect(vmWithoutTimestamp.$el.querySelector('strong').innerText.trim()).toBe('Not available');
+      vmWithoutTimestamp.$destroy();
+    });
   });
 });