Update props to include item value stale info

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

 <script>
   import { s__ } from '~/locale';
   import popover from '~/vue_shared/directives/popover';
+  import tooltip from '~/vue_shared/directives/tooltip';
   import Icon from '~/vue_shared/components/icon.vue';
   import StackedProgressBar from '~/vue_shared/components/stacked_progress_bar.vue';
 
@@ -18,6 +19,7 @@
     },
     directives: {
       popover,
+      tooltip,
     },
     props: {
       itemTitle: {
@@ -33,6 +35,16 @@
         type: [Object, String, Number],
         required: true,
       },
+      itemValueStale: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      itemValueStaleTooltip: {
+        type: String,
+        required: false,
+        default: '',
+      },
       successLabel: {
         type: String,
         required: false,
@@ -132,8 +144,10 @@
     <div
       v-if="isValueTypeGraph"
       class="node-detail-value"
+      :class="{ 'd-flex': itemValueStale }"
     >
       <stacked-progress-bar
+        :css-class="itemValueStale ? 'flex-fill' : ''"
         :success-label="successLabel"
         :failure-label="failureLabel"
         :neutral-label="neutralLabel"
@@ -141,6 +155,14 @@
         :failure-count="itemValue.failureCount"
         :total-count="itemValue.totalCount"
       />
+      <icon
+        v-tooltip
+        v-show="itemValueStale"
+        name="time-out"
+        css-classes="prepend-left-10 detail-value-stale-icon"
+        data-container="body"
+        :title="itemValueStaleTooltip"
+      />
     </div>
     <template v-if="isValueTypeCustom">
       <geo-node-sync-settings

spec/javascripts/geo_nodes/components/geo_node_detail_item_spec.js

@@ -56,6 +56,22 @@ describe('GeoNodeDetailItemComponent', () => {
       vm.$destroy();
     });
 
+    it('renders stale information status icon when `itemValueStale` prop is true', () => {
+      const itemValueStaleTooltip = 'Data is out of date from 8 hours ago';
+      const vm = createComponent({
+        itemValueType: VALUE_TYPE.GRAPH,
+        itemValue: { successCount: 5, failureCount: 3, totalCount: 10 },
+        itemValueStale: true,
+        itemValueStaleTooltip,
+      });
+
+      const iconEl = vm.$el.querySelector('.detail-value-stale-icon');
+      expect(iconEl).not.toBeNull();
+      expect(iconEl.dataset.originalTitle).toBe(itemValueStaleTooltip);
+      expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('time-out');
+      vm.$destroy();
+    });
+
     it('renders sync settings item value', () => {
       const vm = createComponent({
         itemValueType: VALUE_TYPE.CUSTOM,