@rancher/shell 0.2.4 → 0.3.0

package/components/nav/WindowManager/ContainerLogs.vue

@@ -32,7 +32,7 @@ export default {
     Window, Select, LabeledSelect, Checkbox, AsyncButton
   },
 
-  props:      {
+  props: {
     // The definition of the tab itself
     tab: {
       type:     Object,
@@ -675,7 +675,7 @@ export default {
     }
 
     .msg {
-      white-space: nowrap;
+      white-space: pre;
 
       .highlight {
         color: var(--logs-highlight);
@@ -684,7 +684,7 @@ export default {
     }
 
     &.wrap-lines .msg {
-      white-space: normal;
+      white-space: pre-wrap;
     }
   }
 

package/components/nav/WindowManager/ContainerShell.vue

@@ -44,6 +44,12 @@ export default {
       required: true,
     },
 
+    // The width of the window
+    width: {
+      type:    Number,
+      default: undefined,
+    },
+
     // The pod to connect to
     pod: {
       type:     Object,
@@ -95,6 +101,10 @@ export default {
     height() {
       this.fit();
     },
+
+    width() {
+      this.fit();
+    },
   },
 
   beforeDestroy() {
@@ -391,6 +401,12 @@ export default {
   </Window>
 </template>
 
+<style lang="scss">
+  .xterm-char-measure-element {
+    position: static;
+  }
+</style>
+
 <style lang="scss" scoped>
 .text-warning {
   animation: flasher 2.5s linear infinite;
@@ -405,6 +421,9 @@ export default {
 .shell-container {
   height: 100%;
   overflow: hidden;
+  .resize-observer {
+    display: none;
+  }
 }
 
 .shell-body {

package/components/nav/WindowManager/KubectlShell.vue

@@ -5,7 +5,7 @@ import ContainerShell from './ContainerShell';
 export default {
   extends: ContainerShell,
 
-  props:      {
+  props: {
     // The definition of the tab itself
     cluster: {
       type:     Object,
@@ -28,11 +28,11 @@ export default {
       }
 
       const url = addParams(`${ this.cluster.links.shell.replace(/^http/, 'ws') }`, {
-        stdout:    1,
-        stdin:     1,
-        stderr:    1,
-        tty:       1,
-        command:   cmd
+        stdout:  1,
+        stdin:   1,
+        stderr:  1,
+        tty:     1,
+        command: cmd
       });
 
       return url;

package/components/nav/WindowManager/MachineSsh.vue

@@ -4,7 +4,7 @@ import ContainerShell from './ContainerShell';
 export default {
   extends: ContainerShell,
 
-  props:      {
+  props: {
     // The definition of the tab itself
     machine: {
       type:     Object,

package/components/nav/WindowManager/index.vue

@@ -1,20 +1,22 @@
 <script>
 import { mapState } from 'vuex';
 import debounce from 'lodash/debounce';
-import { screenRect, boundingRect } from '@shell/utils/position';
+import {
+  screenRect, boundingRect, BOTTOM, RIGHT, LEFT
+} from '@shell/utils/position';
 
 export default {
   data() {
     return {
       dragOffset:     0,
       reportedHeight: this.height,
-      firstHeight:    true,
+      reportedWidth:  this.width,
       component:      { },
     };
   },
 
   computed: {
-    ...mapState('wm', ['tabs', 'active', 'open', 'userHeight']),
+    ...mapState('wm', ['tabs', 'active', 'open', 'userHeight', 'userWidth', 'userPin']),
 
     height: {
       get() {
@@ -47,9 +49,53 @@ export default {
         return val;
       },
     },
+
+    width: {
+      get() {
+        if ( process.server ) {
+          return 0;
+        }
+
+        if (this.userWidth) {
+          return this.userWidth;
+        }
+
+        const windowWidth = window.innerWidth;
+        let width = parseInt(window.localStorage.getItem('wm-width'), 10);
+
+        if (!width) {
+          width = Math.round(windowWidth / 8);
+        }
+        width = Math.min(width, 3 * windowWidth / 4);
+
+        window.localStorage.setItem('wm-width', width);
+
+        return width;
+      },
+      set(val) {
+        this.$store.commit('wm/setUserWidth', val);
+        window.localStorage.setItem('wm-width', val);
+        this.show();
+
+        return val;
+      }
+    },
+
+    pinClass() {
+      return `pin-${ this.userPin }`;
+    },
   },
 
   watch: {
+    userPin(v) {
+      if (this.open) {
+        this.setWmDimensions();
+        if (v === LEFT || v === RIGHT) {
+          this.setReportedHeight(window.innerHeight - 55);
+        }
+      }
+    },
+
     tabs() {
       this.toggle(true);
     },
@@ -87,7 +133,7 @@ export default {
     },
 
     show() {
-      document.documentElement.style.setProperty('--wm-height', `${ this.height }px`);
+      this.setWmDimensions();
       this.$store.commit('wm/setOpen', true);
     },
 
@@ -96,20 +142,21 @@ export default {
         document.documentElement.style.setProperty('--wm-height', `calc(var(--wm-tab-height, 29px) + 2px)`);
       } else {
         document.documentElement.style.setProperty('--wm-height', '0');
+        document.documentElement.style.setProperty('--wm-width', '0');
       }
 
       this.$store.commit('wm/setOpen', false);
     },
 
-    dragStart(event) {
+    dragYStart(event) {
       const doc = document.documentElement;
 
-      doc.addEventListener('mousemove', this.dragMove);
-      doc.addEventListener('touchmove', this.dragMove, true);
-      doc.addEventListener('mouseup', this.dragEnd);
-      doc.addEventListener('mouseleave', this.dragEnd);
-      doc.addEventListener('touchend touchcancel', this.dragEnd, true);
-      doc.addEventListener('touchstart', this.dragEnd, true);
+      doc.addEventListener('mousemove', this.dragYMove);
+      doc.addEventListener('touchmove', this.dragYMove, true);
+      doc.addEventListener('mouseup', this.dragYEnd);
+      doc.addEventListener('mouseleave', this.dragYEnd);
+      doc.addEventListener('touchend touchcancel', this.dragYEnd, true);
+      doc.addEventListener('touchstart', this.dragYEnd, true);
 
       const eventY = event.screenY;
 
@@ -119,7 +166,7 @@ export default {
       this.dragOffset = offset;
     },
 
-    dragMove(event) {
+    dragYMove(event) {
       const screen = screenRect();
       const eventY = event.screenY;
       const min = 50;
@@ -134,15 +181,15 @@ export default {
       this.queueUpdate();
     },
 
-    dragEnd(event) {
+    dragYEnd(event) {
       const doc = document.documentElement;
 
-      doc.removeEventListener('mousemove', this.dragMove);
-      doc.removeEventListener('touchmove', this.dragMove, true);
-      doc.removeEventListener('mouseup', this.dragEnd);
-      doc.removeEventListener('mouseleave', this.dragEnd);
-      doc.removeEventListener('touchend touchcancel', this.dragEnd, true);
-      doc.removeEventListener('touchstart', this.dragEnd, true);
+      doc.removeEventListener('mousemove', this.dragYMove);
+      doc.removeEventListener('touchmove', this.dragYMove, true);
+      doc.removeEventListener('mouseup', this.dragYEnd);
+      doc.removeEventListener('mouseleave', this.dragYEnd);
+      doc.removeEventListener('touchend touchcancel', this.dragYEnd, true);
+      doc.removeEventListener('touchstart', this.dragYEnd, true);
 
       this.setReportedHeight();
       setTimeout(() => {
@@ -150,8 +197,87 @@ export default {
       }, 100);
     },
 
-    setReportedHeight() {
-      this.reportedHeight = this.height;
+    dragXStart(event) {
+      const doc = document.documentElement;
+
+      doc.addEventListener('mousemove', this.dragXMove);
+      doc.addEventListener('touchmove', this.dragXMove, true);
+      doc.addEventListener('mouseup', this.dragXEnd);
+      doc.addEventListener('mouseleave', this.dragXEnd);
+      doc.addEventListener('touchend touchcancel', this.dragXEnd, true);
+      doc.addEventListener('touchstart', this.dragXEnd, true);
+
+      const eventX = event.screenX;
+      const rect = boundingRect(event.target);
+
+      switch (this.userPin) {
+      case RIGHT:
+        this.dragOffset = eventX - rect.left;
+        break;
+      case LEFT:
+        this.dragOffset = rect.right - eventX;
+        break;
+      }
+    },
+
+    dragXMove(event) {
+      const screen = screenRect();
+      const eventX = event.screenX;
+
+      const min = 250;
+      const max = Math.round(2 * screen.width / 5);
+      let neu;
+
+      switch (this.userPin) {
+      case RIGHT:
+        neu = screen.width - eventX + this.dragOffset;
+        break;
+      case LEFT:
+        neu = eventX + this.dragOffset;
+        break;
+      }
+
+      neu = Math.max(min, Math.min(neu, max));
+      this.width = neu;
+      this.dragging = true;
+      debounce(this.setReportedWidth, 250)();
+    },
+
+    dragXEnd(event) {
+      const doc = document.documentElement;
+
+      doc.removeEventListener('mousemove', this.dragXMove);
+      doc.removeEventListener('touchmove', this.dragXMove, true);
+      doc.removeEventListener('mouseup', this.dragXEnd);
+      doc.removeEventListener('mouseleave', this.dragXEnd);
+      doc.removeEventListener('touchend touchcancel', this.dragXEnd, true);
+      doc.removeEventListener('touchstart', this.dragXEnd, true);
+
+      this.setReportedWidth();
+      setTimeout(() => {
+        this.dragging = false;
+      }, 100);
+    },
+
+    setReportedHeight(height = this.height) {
+      this.reportedHeight = height;
+    },
+
+    setReportedWidth() {
+      this.reportedWidth = this.width;
+    },
+
+    setWmDimensions() {
+      switch (this.userPin) {
+      case RIGHT:
+      case LEFT:
+        document.documentElement.style.setProperty('--wm-height', `${ window.innerHeight - 55 }px`);
+        document.documentElement.style.setProperty('--wm-width', `${ this.width }px`);
+        break;
+      case BOTTOM:
+        document.documentElement.style.setProperty('--wm-height', `${ this.height }px`);
+        break;
+      }
     },
 
     close(id) {
@@ -178,11 +304,23 @@ export default {
   <div
     id="windowmanager"
     class="windowmanager"
+    :class="{[pinClass]: true}"
   >
     <div
       ref="tabs"
       class="tabs"
+      :class="{
+        'resizer-left': userPin == 'left',
+      }"
     >
+      <div
+        v-if="userPin == 'right'"
+        class="resizer resizer-x"
+        @mousedown.prevent.stop="dragXStart($event)"
+        @touchstart.prevent.stop="dragXStart($event)"
+      >
+        <i class="icon icon-code" />
+      </div>
       <div
         v-for="tab in tabs"
         :key="tab.id"
@@ -202,13 +340,22 @@ export default {
         />
       </div>
       <div
-        class="resizer"
-        @mousedown.prevent.stop="dragStart($event)"
-        @touchstart.prevent.stop="dragStart($event)"
+        v-if="userPin == 'bottom'"
+        class="resizer resizer-y"
+        @mousedown.prevent.stop="dragYStart($event)"
+        @touchstart.prevent.stop="dragYStart($event)"
         @click="toggle"
       >
         <i class="icon icon-sort" />
       </div>
+      <div
+        v-if="userPin == 'left'"
+        class="resizer resizer-x resizer-align-right"
+        @mousedown.prevent.stop="dragXStart($event)"
+        @touchstart.prevent.stop="dragXStart($event)"
+      >
+        <i class="icon icon-code" />
+      </div>
     </div>
     <div
       v-for="tab in tabs"
@@ -221,6 +368,7 @@ export default {
         :tab="tab"
         :active="tab.id === active"
         :height="reportedHeight"
+        :width="reportedWidth"
         v-bind="tab.attrs"
         @close="close(tab.id)"
       />
@@ -257,6 +405,7 @@ export default {
         user-select: none;
         border-top: 1px solid var(--wm-border);
         border-right: 1px solid var(--wm-border);
+        border-left: 1px solid var(--wm-border);
         padding: 5px 10px;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -303,9 +452,23 @@ export default {
         }
       }
 
-      .resizer {
+      .resizer-y {
         cursor: ns-resize;
       }
+
+      .resizer-x {
+        cursor: col-resize;
+      }
+
+      .resizer-align-right {
+        margin-left: auto;
+      }
+
+      &.resizer-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
     }
 
     .body {
@@ -319,5 +482,13 @@ export default {
         height: 100%;
       }
     }
+
+    &.pin-right {
+      border-left: var(--nav-border-size) solid var(--nav-border);
+    }
+
+    &.pin-left {
+      border-right: var(--nav-border-size) solid var(--nav-border);
+    }
   }
 </style>

package/config/labels-annotations.js

@@ -57,15 +57,15 @@ export const CAPI = {
 };
 
 export const CATALOG = {
-  CERTIFIED:     'catalog.cattle.io/certified',
-  _RANCHER:      'rancher',
-  _PARTNER:      'partner',
-  _OTHER:         'other',
+  CERTIFIED: 'catalog.cattle.io/certified',
+  _RANCHER:  'rancher',
+  _PARTNER:  'partner',
+  _OTHER:    'other',
 
-  EXPERIMENTAL:  'catalog.cattle.io/experimental',
-  NAMESPACE:     'catalog.cattle.io/namespace',
-  RELEASE_NAME:  'catalog.cattle.io/release-name',
-  FEATURED:      'catalog.cattle.io/featured',
+  EXPERIMENTAL: 'catalog.cattle.io/experimental',
+  NAMESPACE:    'catalog.cattle.io/namespace',
+  RELEASE_NAME: 'catalog.cattle.io/release-name',
+  FEATURED:     'catalog.cattle.io/featured',
 
   REQUIRES_GVK:     'catalog.cattle.io/requires-gvr',
   PROVIDES:         'catalog.cattle.io/provides-gvr',
@@ -75,14 +75,14 @@ export const CATALOG = {
   REQUESTS_CPU:     'catalog.cattle.io/requests-cpu',
   REQUESTS_MEMORY:  'catalog.cattle.io/requests-memory',
 
-  SCOPE:            'catalog.cattle.io/scope',
-  _MANAGEMENT:      'management',
-  _DOWNSTREAM:      'downstream',
+  SCOPE:       'catalog.cattle.io/scope',
+  _MANAGEMENT: 'management',
+  _DOWNSTREAM: 'downstream',
 
-  TYPE:             'catalog.cattle.io/type',
-  _APP:             'app',
-  _CLUSTER_TPL:     'cluster-template',
-  _CLUSTER_TOOL:    'cluster-tool',
+  TYPE:          'catalog.cattle.io/type',
+  _APP:          'app',
+  _CLUSTER_TPL:  'cluster-template',
+  _CLUSTER_TOOL: 'cluster-tool',
 
   COMPONENT:        'catalog.cattle.io/ui-component',
   SOURCE_REPO_TYPE: 'catalog.cattle.io/ui-source-repo-type',
@@ -92,7 +92,7 @@ export const CATALOG = {
 
   SUPPORTED_OS: 'catalog.cattle.io/os',
   PERMITTED_OS: 'catalog.cattle.io/permits-os',
-  DEPLOYED_OS:   'catalog.cattle.io/deploys-on-os',
+  DEPLOYED_OS:  'catalog.cattle.io/deploys-on-os',
 
   MIGRATED: 'apps.cattle.io/migrated',
   MANAGED:  'catalog.cattle.io/managed',
@@ -140,9 +140,9 @@ export const HCI = {
 // Can't use ui.cattle.io - it seems to strip these out - so using io.rancher
 export const CLUSTER_BADGE = {
   // Badge text - badge is only shown if badge text is not empty
-  TEXT:        'ui.rancher/badge-text',
+  TEXT:      'ui.rancher/badge-text',
   // Badge color - as a hex color - e.g. #ff00ff
-  COLOR:       'ui.rancher/badge-color',
+  COLOR:     'ui.rancher/badge-color',
   // Custom icon text - max 2 characters
-  ICON_TEXT:   'ui.rancher/badge-icon-text',
+  ICON_TEXT: 'ui.rancher/badge-icon-text',
 };

package/config/product/apps.js

@@ -32,12 +32,12 @@ export function init(store) {
   });
 
   virtualType({
-    label:       'Charts',
+    label:      'Charts',
     icon:       'compass',
-    namespaced:  false,
-    name:        'charts',
-    weight:      100,
-    route:       { name: 'c-cluster-apps-charts' },
+    namespaced: false,
+    name:       'charts',
+    weight:     100,
+    route:      { name: 'c-cluster-apps-charts' },
   });
 
   weightType(CATALOG.APP, 99, true);

package/config/product/auth.js

@@ -37,22 +37,22 @@ export function init(store) {
   });
 
   virtualType({
-    labelKey:    'auth.config.label',
-    icon:        'lock',
-    namespaced:  false,
-    name:        'config',
-    weight:      -1,
-    route:       { name: 'c-cluster-auth-config' },
+    labelKey:   'auth.config.label',
+    icon:       'lock',
+    namespaced: false,
+    name:       'config',
+    weight:     -1,
+    route:      { name: 'c-cluster-auth-config' },
     ifHaveType: MANAGEMENT.AUTH_CONFIG
   });
 
   virtualType({
-    label:       store.getters['type-map/labelFor']({ id: MANAGEMENT.USER }, 2),
-    name:           USERS_VIRTUAL_TYPE,
-    namespaced:     false,
-    weight:         102,
-    icon:           'user',
-    route:          {
+    label:      store.getters['type-map/labelFor']({ id: MANAGEMENT.USER }, 2),
+    name:       USERS_VIRTUAL_TYPE,
+    namespaced: false,
+    weight:     102,
+    icon:       'user',
+    route:      {
       name:   'c-cluster-product-resource',
       params: {
         cluster:  'local',
@@ -142,15 +142,15 @@ export function init(store) {
   weightType(NORMAN.SPOOFED.GROUP_PRINCIPAL, 101, true);
 
   virtualType({
-    label:       store.getters['i18n/t']('rbac.roletemplate.label'),
-    icon:        'user',
-    namespaced:  false,
-    name:        ROLES_VIRTUAL_TYPE,
-    weight:      101,
-    route:       { name: 'c-cluster-auth-roles' },
+    label:      store.getters['i18n/t']('rbac.roletemplate.label'),
+    icon:       'user',
+    namespaced: false,
+    name:       ROLES_VIRTUAL_TYPE,
+    weight:     101,
+    route:      { name: 'c-cluster-auth-roles' },
     // There are two resource types shown on this page, MANAGEMENT.GLOBAL_ROLE and MANAGEMENT.ROLE_TEMPLATE
     // If there user can't see ROLE_TEMPLATE, they definitely can't see GLOBAL_ROLE
-    ifHaveType:  MANAGEMENT.ROLE_TEMPLATE
+    ifHaveType: MANAGEMENT.ROLE_TEMPLATE
   });
 
   configureType(MANAGEMENT.AUTH_CONFIG, {
@@ -188,7 +188,7 @@ export function init(store) {
   // A lot of the built in roles have nicer names returned by nameDisplay. In both tables we want to show both nicer and base names
   const DISPLAY_NAME = {
     ...HEADER_NAME,
-    name:          'displayName',
+    name:     'displayName',
     labelKey: 'tableHeaders.nameDisplay',
   };
 

package/config/product/cis.js

@@ -43,44 +43,44 @@ export function init(store) {
       sort:          ['status.lastRunScanProfileName'],
     },
     {
-      name:        'total',
-      labelKey:    'cis.scan.total',
-      value:       'status.summary.total',
+      name:      'total',
+      labelKey:  'cis.scan.total',
+      value:     'status.summary.total',
       formatter: 'ScanResult'
 
     },
     {
-      name:        'pass',
-      value:       'status.summary.pass',
-      labelKey:    'cis.scan.pass',
+      name:      'pass',
+      value:     'status.summary.pass',
+      labelKey:  'cis.scan.pass',
       formatter: 'ScanResult'
 
     },
     {
-      name:        'fail',
-      labelKey:    'cis.scan.fail',
-      value:       'status.summary.fail',
+      name:      'fail',
+      labelKey:  'cis.scan.fail',
+      value:     'status.summary.fail',
       formatter: 'ScanResult'
 
     },
     {
-      name:        'warn',
-      labelKey:    'cis.scan.warn',
-      value:       'status.summary.warn',
+      name:      'warn',
+      labelKey:  'cis.scan.warn',
+      value:     'status.summary.warn',
       formatter: 'ScanResult'
 
     },
     {
-      name:        'skip',
-      labelKey:    'cis.scan.skip',
-      value:       'status.summary.skip',
+      name:      'skip',
+      labelKey:  'cis.scan.skip',
+      value:     'status.summary.skip',
       formatter: 'ScanResult'
 
     },
     {
-      name:        'notApplicable',
-      labelKey:    'cis.scan.notApplicable',
-      value:       'status.summary.notApplicable',
+      name:      'notApplicable',
+      labelKey:  'cis.scan.notApplicable',
+      value:     'status.summary.notApplicable',
       formatter: 'ScanResult'
 
     },
@@ -129,9 +129,9 @@ export function init(store) {
     STATE,
     NAME_HEADER,
     {
-      name:          'clusterProvider',
-      labelKey:      'cis.clusterProvider',
-      value:         'spec.clusterProvider',
+      name:     'clusterProvider',
+      labelKey: 'cis.clusterProvider',
+      value:    'spec.clusterProvider',
     },
     {
       name:        'minKubernetesVersion',
@@ -147,9 +147,9 @@ export function init(store) {
       dashIfEmpty: true,
     },
     {
-      name:          'isDefault',
-      labelKey:      'tableHeaders.builtIn',
-      formatter:     'Checked',
+      name:      'isDefault',
+      labelKey:  'tableHeaders.builtIn',
+      formatter: 'Checked',
       value:     'isDefault'
     },
     AGE