Ensuring the data range selection works when linking out to kibana

components/Drawer.vue

@@ -49,7 +49,6 @@ export default {
     },
 
     toggle() {
-      console.log('toggle')
       this.$set(this, 'maximized', !this.maximized);
     }
   },

components/formatter/KibanaLink.vue

@@ -1,4 +1,6 @@
 <script>
+const UTC_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]';
+
 export default {
   props: {
     value: {
@@ -17,23 +19,28 @@ export default {
 
   computed: {
     query() {
-      console.log('ppp', this.options);
-      const fromTo = this.options.fromTo;
-      const fromDelta = Math.floor(fromTo.to.diff(fromTo.from, 'hours', true));
-
       switch (this.options.type) {
-        case 'pod':
-          return `_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-${fromDelta}h,to:now))&_a=(columns:!(_source),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,key:kubernetes.pod_name,negate:!f,params:(query:${this.value}),type:phrase),query:(match_phrase:(kubernetes.pod_name:${this.value})))),interval:auto,query:(language:kuery,query:''),sort:!())`
-        case 'control-plane':
-          return `_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-${fromDelta}h,to:now))&_a=(columns:!(_source),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,key:is_control_plane_log,negate:!f,params:(query:!t),type:phrase),query:(match_phrase:(is_control_plane_log:!t))),('$state':(store:appState),meta:(alias:!n,disabled:!f,key:kubernetes_component,negate:!f,params:(query:${this.value}),type:phrase),query:(match_phrase:(kubernetes_component:${this.value})))),interval:auto,query:(language:kuery,query:''),sort:!())`;
-        case 'namespace':
-          return `_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-${fromDelta}h,to:now))&_a=(columns:!(_source),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,key:kubernetes.namespace_name,negate:!f,params:(query:${this.value}),type:phrase),query:(match_phrase:(kubernetes.namespace_name:${this.value})))),interval:auto,query:(language:kuery,query:''),sort:!())`;
-        case 'workload':
-          return `_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-${fromDelta}h,to:now))&_a=(columns:!(_source),filters:!(),interval:auto,query:(language:kuery,query:"${this.value}"),sort:!())`;
-        default:
-          return '';
+      case 'pod':
+        return `_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'${ this.from }',to:'${ this.to }'))&_a=(columns:!(_source),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,key:kubernetes.pod_name,negate:!f,params:(query:${ this.value }),type:phrase),query:(match_phrase:(kubernetes.pod_name:${ this.value })))),interval:auto,query:(language:kuery,query:''),sort:!())`;
+      case 'control-plane':
+        return `_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'${ this.from }',to:'${ this.to }'))&_a=(columns:!(_source),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,key:is_control_plane_log,negate:!f,params:(query:!t),type:phrase),query:(match_phrase:(is_control_plane_log:!t))),('$state':(store:appState),meta:(alias:!n,disabled:!f,key:kubernetes_component,negate:!f,params:(query:${ this.value }),type:phrase),query:(match_phrase:(kubernetes_component:${ this.value })))),interval:auto,query:(language:kuery,query:''),sort:!())`;
+      case 'namespace':
+        return `_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'${ this.from }',to:'${ this.to }'))&_a=(columns:!(_source),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,key:kubernetes.namespace_name,negate:!f,params:(query:${ this.value }),type:phrase),query:(match_phrase:(kubernetes.namespace_name:${ this.value })))),interval:auto,query:(language:kuery,query:''),sort:!())`;
+      case 'workload':
+        return `_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'${ this.from }',to:'${ this.to }'))&_a=(columns:!(_source),filters:!(),interval:auto,query:(language:kuery,query:"${ this.value }"),sort:!())`;
+      default:
+        return '';
       }
     },
+
+    from() {
+      return this.options.fromTo.from.utc().format(UTC_FORMAT);
+    },
+
+    to() {
+      return this.options.fromTo.to.utc().format(UTC_FORMAT);
+    },
+
     url() {
       const hostname = window.location.hostname;
 

nuxt.config.js

@@ -308,6 +308,7 @@ module.exports = {
     '~/plugins/directives',
     '~/plugins/transitions',
     '~/plugins/calendar',
+    '~/plugins/day',
     { src: '~plugins/vue-js-modal' },
     { src: '~/plugins/js-yaml', ssr: false },
     { src: '~/plugins/resize', ssr: false },

plugins/day.js

@@ -0,0 +1,4 @@
+import day from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+
+day.extend(utc);

product/opni/components/ControlPlaneBreakdownDetail.vue

@@ -1,6 +1,6 @@
 <script>
 import SortableTable from '@/components/SortableTable';
-import { SIMPLE_NAME, ANOMALY, NORMAL, SUSPICIOUS } from '@/config/table-headers';
+import { ANOMALY, NORMAL, SUSPICIOUS } from '@/config/table-headers';
 import LogsDrawer from './LogsDrawer';
 import { getControlPlaneLogs } from '~/product/opni/utils/requests';
 

product/opni/components/NamespaceBreakdownDetail.vue

@@ -1,6 +1,6 @@
 <script>
 import SortableTable from '@/components/SortableTable';
-import { SIMPLE_NAME, ANOMALY, NORMAL, SUSPICIOUS } from '@/config/table-headers';
+import { ANOMALY, NORMAL, SUSPICIOUS } from '@/config/table-headers';
 import LogsDrawer from './LogsDrawer';
 import { getNamespaceLogs } from '~/product/opni/utils/requests';
 

product/opni/components/WorkloadBreakdownDetail.vue

@@ -26,12 +26,9 @@ export default {
     return {
       headers: [
         {
-          name:          'Name',
-          label:         'Name',
-          value:         'breakdown.name',
-          sort:          `breakdown.name`,
-          formatter:     'KibanaLink',
-          formatterOpts: { options: { fromTo: this.fromTo, type: 'workload' } },
+          ...SIMPLE_NAME,
+          width: null,
+          value: 'breakdown.name'
         },
         BREAKDOWN_RESOURCE,
         ANOMALY(this.select, undefined, 'breakdown.insights.anomalyFormatted', 'breakdown.insights.anomaly'),