Merge pull request #2 from rancher/opni

Adding resizable drawer and kibana linking

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

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>

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>

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>

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/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;
     }

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>

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'),

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;
 }