diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index 77b35290f..9b4128ca1 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -4094,6 +4094,7 @@ tableHeaders:
   customVerbs: Custom Verbs
   dateRange: Date Range
   description: Description
+  empty: ""
   expires: Expires
   feedback: Feedback
   providers: Providers
diff --git a/components/Drawer.vue b/components/Drawer.vue
index 5ae522f90..b091765d5 100644
--- a/components/Drawer.vue
+++ b/components/Drawer.vue
@@ -11,22 +11,84 @@ export default {
       type:    String,
       default: null
     }
+  },
+
+  data() {
+    return {
+      drawerHeight: null,
+      dragging:     false,
+      maximized:    false,
+    };
+  },
+
+  methods: {
+    close() {
+      this.$emit('close');
+      this.$set(this, 'maximized', false);
+    },
+
+    onMouseMove(ev) {
+      if (!this.dragging) {
+        return;
+      }
+
+      const clientHeight = document.documentElement.clientHeight;
+      const mouseY = ev.clientY;
+      const drawerHeight = clientHeight - mouseY;
+      const value = this.maximized ? null : `${ drawerHeight }px`;
+
+      this.$set(this, 'drawerHeight', value);
+    },
+
+    onDrag() {
+      this.$set(this, 'dragging', true);
+    },
+
+    onDragDone() {
+      this.$set(this, 'dragging', false);
+    },
+
+    toggle() {
+      this.$set(this, 'maximized', !this.maximized);
+    }
+  },
+
+  computed: {
+    style() {
+      if (this.maximized) {
+        return {};
+      }
+
+      return { height: this.drawerHeight };
+    },
+
+    toggleClass() {
+      return this.maximized ? 'icon-chevron-down' : 'icon-chevron-up';
+    }
   }
 };
 </script>
 
 <template>
-  <div class="catch-all" :class="{ open }" @click="$emit('close')">
-    <div class="drawer p-10" @click.stop>
+  <div class="catch-all" :class="{ open }" @click="close" @mousemove="onMouseMove" @mouseup="onDragDone">
+    <div class="drawer p-10 pb-0" :class="{ dragging, maximized }" :style="style" @click.stop>
+      <div v-if="!maximized" class="handle" @mousedown="onDrag"></div>
       <div class="title-bar">
         <slot name="title">
           <h1>{{ title }}</h1>
         </slot>
-        <div class="closer mr-10" @click="$emit('close')">
-          <i class="icon icon-3x icon-close closer-icon" />
+        <div class="actions">
+          <div class="closer mr-10" @click="toggle">
+            <i class="icon icon-2x toggle-icon" :class="toggleClass" />
+          </div>
+          <div class="closer icon-2x mr-10" @click="close">
+            <i class="icon icon-close closer-icon" />
+          </div>
         </div>
       </div>
-      <slot />
+      <div class="content">
+        <slot />
+      </div>
     </div>
   </div>
 </template>
@@ -44,33 +106,65 @@ export default {
     transition: bottom 0.2s;
 
     &:not(.open) {
-      bottom: -450px;
+      bottom: -100%;
       pointer-events: none;
     }
   }
 
   .drawer {
+    display: flex;
+    flex-direction: column;
+
     position: absolute;
-    left: 5px;
-    right: 5px;
+    left: 0;
+    right: 0;
     bottom: 0;
-
     height: 450px;
 
     border-radius: var(--border-radius);
     box-shadow: 0 0 20px var(--shadow);
     background-color: #FFF;
+    transition: height 0.2s;
+
+    &.maximized {
+      height: 100%;
+    }
 
     .title-bar {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
+
+        .actions {
+          display: flex;
+          flex-direction: row;
+        }
     }
 
     .closer {
         color: var(--link);
         cursor: pointer;
     }
+
+    .handle {
+      position: absolute;
+
+      top: -5px;
+      left: 0;
+      right: 0;
+      height:15px;
+      cursor: ns-resize;
+    }
+
+    &.dragging {
+      user-select: none;
+      transition: none;
+    }
+
+    .content {
+      position: relative;
+      height: 100%;
+    }
   }
 </style>
diff --git a/components/formatter/Collapse.vue b/components/formatter/Collapse.vue
new file mode 100644
index 000000000..cf17c3c82
--- /dev/null
+++ b/components/formatter/Collapse.vue
@@ -0,0 +1,41 @@
+<script>
+
+export default {
+  props: {
+    row: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    collapseClass() {
+      return this.open ? 'icon-chevron-down' : 'icon-chevron-right';
+    },
+
+    key() {
+      return 'open';
+    },
+
+    open() {
+      return this.row[this.key];
+    },
+  },
+
+  methods: {
+    toggle() {
+      this.$set(this.row, this.key, !this.open);
+    },
+  }
+};
+</script>
+
+<template>
+  <span class="icon" :class="collapseClass" @click="toggle"></span>
+</template>
+
+<style lang="scss" scoped>
+.icon {
+    cursor: pointer;
+}
+</style>
diff --git a/components/formatter/KibanaLink.vue b/components/formatter/KibanaLink.vue
new file mode 100644
index 000000000..2b5ea661b
--- /dev/null
+++ b/components/formatter/KibanaLink.vue
@@ -0,0 +1,67 @@
+<script>
+const UTC_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]';
+
+export default {
+  props: {
+    value: {
+      type:     String,
+      required: true
+    },
+    row: {
+      type:     Object,
+      required: true,
+    },
+    options: {
+      type:     [Object, String],
+      required: true,
+    }
+  },
+
+  computed: {
+    query() {
+      switch (this.options.type) {
+      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;
+
+      return `http://${ hostname }:5601/app/discover#/?${ this.query }`;
+    }
+  },
+
+  methods: {
+    toggle() {
+      this.$set(this.row, this.key, !this.open);
+    },
+  }
+};
+</script>
+
+<template>
+  <a :href="url" rel="nofollow noopener noreferrer" target="_blank">{{ value }}</a>
+</template>
+
+<style lang="scss" scoped>
+.icon {
+    cursor: pointer;
+}
+</style>
diff --git a/nuxt.config.js b/nuxt.config.js
index d6748a405..2bc31e948 100644
--- a/nuxt.config.js
+++ b/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 },
diff --git a/plugins/day.js b/plugins/day.js
new file mode 100644
index 000000000..70ade40f0
--- /dev/null
+++ b/plugins/day.js
@@ -0,0 +1,4 @@
+import day from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+
+day.extend(utc);
diff --git a/product/opni/components/Breakdown.vue b/product/opni/components/Breakdown.vue
index 4aac8a34c..7c25775b8 100644
--- a/product/opni/components/Breakdown.vue
+++ b/product/opni/components/Breakdown.vue
@@ -47,10 +47,10 @@ export default {
 
       const breakdowns = await getBreakdowns(from, to);
 
-      this.podBreakdown = breakdowns.pods;
-      this.namespaceBreakdown = breakdowns.namespaces;
-      this.workloadBreakdown = breakdowns.workloads;
-      this.controlPlaneBreakdown = breakdowns.controlPlanes;
+      this.podBreakdown = breakdowns?.pods || [];
+      this.namespaceBreakdown = breakdowns?.namespaces || [];
+      this.workloadBreakdown = breakdowns?.workloads || [];
+      this.controlPlaneBreakdown = breakdowns?.controlPlanes || [];
 
       this.loading = false;
     }
diff --git a/product/opni/components/Configurator.vue b/product/opni/components/Configurator.vue
index 9cca33f09..57e2df91e 100644
--- a/product/opni/components/Configurator.vue
+++ b/product/opni/components/Configurator.vue
@@ -73,6 +73,7 @@ export default {
   <div class="row">
     <div class="col span-1">
       <LabeledSelect
+        class="refresh"
         :label="t('opni.configurator.refresh')"
         :value="value.refreshRate"
         option-key="label"
@@ -104,3 +105,9 @@ export default {
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.refresh {
+  min-width: 100px;
+}
+</style>
diff --git a/product/opni/components/ControlPlaneBreakdownDetail.vue b/product/opni/components/ControlPlaneBreakdownDetail.vue
index 3de860508..e7bab3d65 100644
--- a/product/opni/components/ControlPlaneBreakdownDetail.vue
+++ b/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';
 
@@ -23,9 +23,12 @@ export default {
     return {
       headers: [
         {
-          ...SIMPLE_NAME,
-          width: null,
-          value: 'name'
+          name:          'Name',
+          label:         'Name',
+          value:         'name',
+          sort:          `name`,
+          formatter:     'KibanaLink',
+          formatterOpts: { options: { fromTo: this.fromTo, type: 'control-plane' } },
         },
         ANOMALY(this.select, undefined, 'insights.anomalyFormatted', 'insights.anomaly'),
         SUSPICIOUS(this.select, undefined, 'insights.suspiciousFormatted', 'insights.suspicious'),
diff --git a/product/opni/components/LogsDrawer.vue b/product/opni/components/LogsDrawer.vue
index f5f9004b8..67db033d5 100644
--- a/product/opni/components/LogsDrawer.vue
+++ b/product/opni/components/LogsDrawer.vue
@@ -5,6 +5,14 @@ import Banner from '@/components/Banner';
 import Loading from '@/components/Loading';
 
 export const LOG_HEADERS = [
+  {
+    name:      'collapse',
+    labelKey:  'tableHeaders.empty',
+    formatter: 'Collapse',
+    value:     'timestamp',
+    sort:      false,
+    width:     '20px'
+  },
   {
     name:      'date',
     labelKey:  'tableHeaders.date',
@@ -100,7 +108,7 @@ export default {
     </template>
     <Loading v-if="logs === null" mode="relative" />
     <div v-else class="contents">
-      <div class="row detail pb-20">
+      <div class="row detail">
         <div class="col span-12 p-5 pr-20">
           <SortableTable
             class="table"
@@ -118,7 +126,7 @@ export default {
           >
             <template #sub-row="{row, fullColspan}">
               <tr class="opni sub-row">
-                <td :colspan="fullColspan" class="pt-0">
+                <td v-if="row.open" :colspan="fullColspan" class="pt-0">
                   <Banner
                     class="m-0"
                     :color="getColor(row)"
@@ -137,9 +145,12 @@ export default {
 
 <style lang="scss" scoped>
 .contents {
-  display: flex;
-  flex-direction: column;
-  height: 380px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
   overflow: hidden;
 }
 
diff --git a/product/opni/components/NamespaceBreakdownDetail.vue b/product/opni/components/NamespaceBreakdownDetail.vue
index 4d0f22942..6a006286f 100644
--- a/product/opni/components/NamespaceBreakdownDetail.vue
+++ b/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';
 
@@ -23,9 +23,12 @@ export default {
     return {
       headers: [
         {
-          ...SIMPLE_NAME,
-          width: null,
-          value: 'name'
+          name:          'Name',
+          label:         'Name',
+          value:         'name',
+          sort:          `name`,
+          formatter:     'KibanaLink',
+          formatterOpts: { options: { fromTo: this.fromTo, type: 'namespace' } },
         },
         ANOMALY(this.select),
         SUSPICIOUS(this.select),
diff --git a/product/opni/components/PodBreakdownDetail.vue b/product/opni/components/PodBreakdownDetail.vue
index 6029b3105..2ae4fc79f 100644
--- a/product/opni/components/PodBreakdownDetail.vue
+++ b/product/opni/components/PodBreakdownDetail.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 { getPodLogs } from '~/product/opni/utils/requests';
 
@@ -23,9 +23,12 @@ export default {
     return {
       headers: [
         {
-          ...SIMPLE_NAME,
-          width: null,
-          value: 'name'
+          name:          'Name',
+          label:         'Name',
+          value:         'name',
+          sort:          `name`,
+          formatter:     'KibanaLink',
+          formatterOpts: { options: { fromTo: this.fromTo, type: 'pod' } },
         },
         ANOMALY(this.select),
         SUSPICIOUS(this.select),
diff --git a/product/opni/models/overallBreakdown/WorkloadBreakdownAggregation.ts b/product/opni/models/overallBreakdown/WorkloadBreakdownAggregation.ts
index 17acf8cda..bd94026ec 100644
--- a/product/opni/models/overallBreakdown/WorkloadBreakdownAggregation.ts
+++ b/product/opni/models/overallBreakdown/WorkloadBreakdownAggregation.ts
@@ -20,12 +20,12 @@ export class WorkloadBreakdownAggregation {
     statefulSet: WorkloadBreakdown[];
 
     constructor(response: WorkloadBreakdownAggregationResponse) {
-      this.customResource = response.CustomResource.map(b => new WorkloadBreakdown(b, 'CustomResource'));
-      this.daemonSet = response.DaemonSet.map(b => new WorkloadBreakdown(b, 'DaemonSet'));
-      this.deployment = response.Deployment.map(b => new WorkloadBreakdown(b, 'Deployment'));
-      this.independent = response.Independent.map(b => new WorkloadBreakdown(b, 'Independent'));
-      this.job = response.Job.map(b => new WorkloadBreakdown(b, 'Job'));
-      this.replicaSet = response.ReplicaSet.map(b => new WorkloadBreakdown(b, 'ReplicaSet'));
-      this.statefulSet = response.StatefulSet.map(b => new WorkloadBreakdown(b, 'StatefulSet'));
+      this.customResource = response?.CustomResource?.map(b => new WorkloadBreakdown(b, 'CustomResource')) || [];
+      this.daemonSet = response?.DaemonSet?.map(b => new WorkloadBreakdown(b, 'DaemonSet')) || [];
+      this.deployment = response?.Deployment?.map(b => new WorkloadBreakdown(b, 'Deployment')) || [];
+      this.independent = response?.Independent?.map(b => new WorkloadBreakdown(b, 'Independent')) || [];
+      this.job = response?.Job?.map(b => new WorkloadBreakdown(b, 'Job')) || [];
+      this.replicaSet = response?.ReplicaSet?.map(b => new WorkloadBreakdown(b, 'ReplicaSet')) || [];
+      this.statefulSet = response?.StatefulSet?.map(b => new WorkloadBreakdown(b, 'StatefulSet')) || [];
     }
 }
diff --git a/product/opni/utils/munging.js b/product/opni/utils/munging.js
index 16da7b7bb..a1cd8febf 100644
--- a/product/opni/utils/munging.js
+++ b/product/opni/utils/munging.js
@@ -1,6 +1,13 @@
 export function formatForTimeseries(data) {
+  const keys = ['anomaly', 'normal', 'suspicious'];
   const out = {};
 
+  keys.forEach((key) => {
+    const translatedKey = this.$store.getters['i18n/withFallback'](`opni.chart.labels.${ key }`, { count: 1 }, key);
+
+    out[translatedKey] = { data: [] };
+  });
+
   data.forEach((entry) => {
     Object.entries(entry).forEach(([key, value]) => {
       const label = this.$store.getters['i18n/withFallback'](`opni.chart.labels.${ key }`, { count: 1 }, key);
diff --git a/product/opni/utils/requests.ts b/product/opni/utils/requests.ts
index 1f0e477c6..912bc3e0f 100644
--- a/product/opni/utils/requests.ts
+++ b/product/opni/utils/requests.ts
@@ -17,7 +17,7 @@ type LogLevel = 'Normal' | 'Anomalous' | 'Suspicious';
 export async function getAreasOfInterest(now: Dayjs, range: UnitCount, granularity: Granularity): Promise<FromTo[]> {
   const from = getStartTime(now, range, granularity);
   const to = now;
-  const response = (await axios.get<AreaOfInterestResponse[]>(`opni-api/areas_of_interest?start_ts=${ from.valueOf() }&end_ts=${ to.valueOf() }`))?.data;
+  const response = (await axios.get<AreaOfInterestResponse[]>(`opni-api/areas_of_interest?start_ts=${ from.valueOf() }&end_ts=${ to.valueOf() }`))?.data || [];
 
   return (response)
     .filter(r => r.start_ts > 0 && r.end_ts > 0)