@rancher/shell 0.2.2 → 0.2.4

package/components/nav/NamespaceFilter.vue

@@ -551,44 +551,117 @@ export default {
 </script>
 
 <template>
-  <div class="ns-filter" tabindex="0" @focus="open()">
-    <div v-if="isOpen" class="ns-glass" @click="close()"></div>
+  <div
+    class="ns-filter"
+    tabindex="0"
+    @focus="open()"
+  >
+    <div
+      v-if="isOpen"
+      class="ns-glass"
+      @click="close()"
+    />
     <!-- Dropdown control -->
-    <div ref="dropdown" class="ns-dropdown" :class="{ 'ns-open': isOpen }" @click="toggle()">
-      <div v-if="value.length === 0" ref="values" class="ns-values">
+    <div
+      ref="dropdown"
+      class="ns-dropdown"
+      :class="{ 'ns-open': isOpen }"
+      @click="toggle()"
+    >
+      <div
+        v-if="value.length === 0"
+        ref="values"
+        class="ns-values"
+      >
         {{ t('nav.ns.all') }}
       </div>
-      <div v-else-if="isSingleSpecial" ref="values" class="ns-values">
+      <div
+        v-else-if="isSingleSpecial"
+        ref="values"
+        class="ns-values"
+      >
         {{ value[0].label }}
       </div>
-      <div v-else ref="values" v-tooltip="tooltip" class="ns-values">
-        <div v-if="total" ref="total" class="ns-value ns-abs">
+      <div
+        v-else
+        ref="values"
+        v-tooltip="tooltip"
+        class="ns-values"
+      >
+        <div
+          v-if="total"
+          ref="total"
+          class="ns-value ns-abs"
+        >
           {{ t('namespaceFilter.selected.label', { total }) }}
         </div>
-        <div v-for="ns in value" ref="value" :key="ns.id" class="ns-value">
+        <div
+          v-for="ns in value"
+          ref="value"
+          :key="ns.id"
+          class="ns-value"
+        >
           <div>{{ ns.label }}</div>
-          <i class="icon icon-close" @click="removeOption(ns, $event)" />
+          <i
+            class="icon icon-close"
+            @click="removeOption(ns, $event)"
+          />
         </div>
       </div>
-      <div v-if="hidden > 0" ref="more" v-tooltip="tooltip" class="ns-more">
+      <div
+        v-if="hidden > 0"
+        ref="more"
+        v-tooltip="tooltip"
+        class="ns-more"
+      >
         {{ t('namespaceFilter.more', { more: hidden }) }}
       </div>
-      <i v-if="!isOpen" class="icon icon-chevron-down" />
-      <i v-else class="icon icon-chevron-up" />
+      <i
+        v-if="!isOpen"
+        class="icon icon-chevron-down"
+      />
+      <i
+        v-else
+        class="icon icon-chevron-up"
+      />
     </div>
-    <button v-shortkey.once="['n']" class="hide" @shortkey="open()" />
-    <div v-if="isOpen" class="ns-dropdown-menu">
+    <button
+      v-shortkey.once="['n']"
+      class="hide"
+      @shortkey="open()"
+    />
+    <div
+      v-if="isOpen"
+      class="ns-dropdown-menu"
+    >
       <div class="ns-controls">
         <div class="ns-input">
-          <input ref="filter" v-model="filter" tabindex="0" class="ns-filter-input" @keydown="inputKeyHandler($event)" />
-          <i v-if="hasFilter" class="ns-filter-clear icon icon-close" @click="filter = ''" />
+          <input
+            ref="filter"
+            v-model="filter"
+            tabindex="0"
+            class="ns-filter-input"
+            @keydown="inputKeyHandler($event)"
+          >
+          <i
+            v-if="hasFilter"
+            class="ns-filter-clear icon icon-close"
+            @click="filter = ''"
+          />
         </div>
         <div class="ns-clear">
-          <i class="icon icon-close" @click="clear()" />
+          <i
+            class="icon icon-close"
+            @click="clear()"
+          />
         </div>
       </div>
-      <div class="ns-divider mt-0"></div>
-      <div ref="options" class="ns-options" role="list">
+      <div class="ns-divider mt-0" />
+      <div
+        ref="options"
+        class="ns-options"
+        role="list"
+      >
         <div
           v-for="opt in filtered"
           :id="opt.elementId"
@@ -600,14 +673,29 @@ export default {
           @mouseover="mouseOver($event)"
           @keydown="itemKeyHandler($event, opt)"
         >
-          <div v-if="opt.kind === 'divider'" class="ns-divider"></div>
-          <div v-else class="ns-item">
-            <i v-if="opt.kind === 'namespace'" class="icon icon-folder" />
+          <div
+            v-if="opt.kind === 'divider'"
+            class="ns-divider"
+          />
+          <div
+            v-else
+            class="ns-item"
+          >
+            <i
+              v-if="opt.kind === 'namespace'"
+              class="icon icon-folder"
+            />
             <div>{{ opt.label }}</div>
-            <i v-if="opt.selected" class="icon icon-checkmark" />
+            <i
+              v-if="opt.selected"
+              class="icon icon-checkmark"
+            />
           </div>
         </div>
-        <div v-if="filtered.length === 0" class="ns-none">
+        <div
+          v-if="filtered.length === 0"
+          class="ns-none"
+        >
           {{ t('namespaceFilter.noMatchingOptions') }}
         </div>
       </div>

package/components/nav/TopLevelMenu.vue

@@ -191,7 +191,8 @@ export default {
         const $el = $(el);
         const h = 33 * max;
 
-        $el.css('height', `${ h }px`);
+        $el.css('min-height', `${ h }px`);
+        $el.css('max-height', `${ h }px`);
       }
     },
     handler(e) {
@@ -221,9 +222,22 @@ export default {
       :class="{'raised': shown, 'unraised':!shown}"
       @click="toggle()"
     >
-      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none" /><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>
+      <svg
+        class="menu-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+      ><path
+        d="M0 0h24v24H0z"
+        fill="none"
+      /><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>
     </div>
-    <div v-if="shown" class="side-menu-glass" @click="hide()"></div>
+    <div
+      v-if="shown"
+      class="side-menu-glass"
+      @click="hide()"
+    />
     <transition name="fade">
       <div
         v-if="shown"
@@ -232,7 +246,7 @@ export default {
         tabindex="-1"
       >
         <div class="title">
-          <div class="menu-spacer"></div>
+          <div class="menu-spacer" />
           <div class="side-menu-logo">
             <BrandImage file-name="rancher-logo.svg" />
           </div>
@@ -243,7 +257,15 @@ export default {
               class="option cluster selector home"
               :to="{ name: 'home' }"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none" /><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></svg>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+              ><path
+                d="M0 0h24v24H0z"
+                fill="none"
+              /><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></svg>
               <div>
                 {{ t('nav.home') }}
               </div>
@@ -253,32 +275,60 @@ export default {
             <div class="category">
               {{ t('nav.categories.explore') }}
             </div>
-            <div v-if="showClusterSearch" class="search">
+            <div
+              v-if="showClusterSearch"
+              class="search"
+            >
               <input
                 ref="clusterFilter"
                 v-model="clusterFilter"
                 :placeholder="t('nav.search.placeholder')"
+              >
+              <i
+                v-if="clusterFilter"
+                class="icon icon-close"
+                @click="clusterFilter=''"
               />
-              <i v-if="clusterFilter" class="icon icon-close" @click="clusterFilter=''" />
             </div>
-            <div ref="clusterList" class="clusters">
-              <div v-for="c in clustersFiltered" :key="c.id" @click="hide()">
+            <div
+              ref="clusterList"
+              class="clusters"
+            >
+              <div
+                v-for="c in clustersFiltered"
+                :key="c.id"
+                @click="hide()"
+              >
                 <nuxt-link
                   v-if="c.ready"
                   class="cluster selector option"
                   :to="{ name: 'c-cluster', params: { cluster: c.id } }"
                 >
-                  <ClusterProviderIcon :small="true" :cluster="c" class="rancher-provider-icon mr-10" />
+                  <ClusterProviderIcon
+                    :small="true"
+                    :cluster="c"
+                    class="rancher-provider-icon mr-10"
+                  />
                   <div class="cluster-name">
                     {{ c.label }}
                   </div>
                 </nuxt-link>
-                <span v-else class="option-disabled cluster selector disabled">
-                  <ClusterProviderIcon :small="true" :cluster="c" class="rancher-provider-icon mr-10" />
+                <span
+                  v-else
+                  class="option-disabled cluster selector disabled"
+                >
+                  <ClusterProviderIcon
+                    :small="true"
+                    :cluster="c"
+                    class="rancher-provider-icon mr-10"
+                  />
                   <div class="cluster-name">{{ c.label }}</div>
                 </span>
               </div>
-              <div v-if="clustersFiltered.length === 0" class="none-matching">
+              <div
+                v-if="clustersFiltered.length === 0"
+                class="none-matching"
+              >
                 {{ t('nav.search.noResults') }}
               </div>
             </div>
@@ -288,9 +338,19 @@ export default {
             <div class="category">
               {{ t('nav.categories.multiCluster') }}
             </div>
-            <div v-for="a in multiClusterApps" :key="a.label" @click="hide()">
-              <nuxt-link class="option" :to="a.to">
-                <i class="icon group-icon" :class="a.icon" />
+            <div
+              v-for="a in multiClusterApps"
+              :key="a.label"
+              @click="hide()"
+            >
+              <nuxt-link
+                class="option"
+                :to="a.to"
+              >
+                <i
+                  class="icon group-icon"
+                  :class="a.icon"
+                />
                 <div>{{ a.label }}</div>
               </nuxt-link>
             </div>
@@ -299,9 +359,19 @@ export default {
             <div class="category">
               {{ t('nav.categories.legacy') }}
             </div>
-            <div v-for="a in legacyApps" :key="a.label" @click="hide()">
-              <nuxt-link class="option" :to="a.to">
-                <i class="icon group-icon" :class="a.icon" />
+            <div
+              v-for="a in legacyApps"
+              :key="a.label"
+              @click="hide()"
+            >
+              <nuxt-link
+                class="option"
+                :to="a.to"
+              >
+                <i
+                  class="icon group-icon"
+                  :class="a.icon"
+                />
                 <div>{{ a.label }}</div>
               </nuxt-link>
             </div>
@@ -310,17 +380,30 @@ export default {
             <div class="category">
               {{ t('nav.categories.configuration') }}
             </div>
-            <div v-for="a in configurationApps" :key="a.label" @click="hide()">
-              <nuxt-link class="option" :to="a.to">
-                <i class="icon group-icon" :class="a.icon" />
+            <div
+              v-for="a in configurationApps"
+              :key="a.label"
+              @click="hide()"
+            >
+              <nuxt-link
+                class="option"
+                :to="a.to"
+              >
+                <i
+                  class="icon group-icon"
+                  :class="a.icon"
+                />
                 <div>{{ a.label }}</div>
               </nuxt-link>
             </div>
           </template>
-          <div class="pad"></div>
+          <div class="pad" />
         </div>
         <div class="footer">
-          <div v-if="canEditSettings" @click="hide()">
+          <div
+            v-if="canEditSettings"
+            @click="hide()"
+          >
             <nuxt-link :to="{name: 'support'}">
               {{ t('nav.support', {hasSupport}) }}
             </nuxt-link>
@@ -516,6 +599,7 @@ export default {
       display: flex;
       flex-direction: column;
       margin: 10px 20px;
+      overflow-y: auto;
 
       .category {
         padding: 10px 0;

package/components/nav/Type.vue

@@ -84,10 +84,24 @@ export default {
       @mouseenter="setNear(true)"
       @mouseleave="setNear(false)"
     >
-      <span v-if="type.labelKey" class="label"><t :k="type.labelKey" /></span>
-      <span v-else class="label" :class="{'no-icon': !type.icon}" v-html="type.labelDisplay || type.label" />
-      <span v-if="showFavorite || showCount" class="count">
-        <Favorite v-if="showFavorite" :resource="type.name" />
+      <span
+        v-if="type.labelKey"
+        class="label"
+      ><t :k="type.labelKey" /></span>
+      <span
+        v-else
+        class="label"
+        :class="{'no-icon': !type.icon}"
+        v-html="type.labelDisplay || type.label"
+      />
+      <span
+        v-if="showFavorite || showCount"
+        class="count"
+      >
+        <Favorite
+          v-if="showFavorite"
+          :resource="type.name"
+        />
         {{ type.count }}
       </span>
     </a>

package/components/nav/WindowManager/ChartReadme.vue

@@ -30,7 +30,10 @@ export default {
 <template>
   <Window :active="active">
     <template #body>
-      <ChartReadme :version-info="versionInfo" class="chart-container" />
+      <ChartReadme
+        :version-info="versionInfo"
+        class="chart-container"
+      />
     </template>
   </Window>
 </template>

package/components/nav/WindowManager/ContainerLogs.vue

@@ -467,7 +467,10 @@ export default {
 </script>
 
 <template>
-  <Window :active="active" :before-close="cleanup">
+  <Window
+    :active="active"
+    :before-close="cleanup"
+  >
     <template #title>
       <div class="wm-button-bar">
         <Select
@@ -480,25 +483,51 @@ export default {
           placement="top"
         >
           <template #selected-option="option">
-            <t v-if="option" k="wm.containerLogs.containerName" :label="option.label" />
+            <t
+              v-if="option"
+              k="wm.containerLogs.containerName"
+              :label="option.label"
+            />
           </template>
         </Select>
         <div class="log-action ml-5">
-          <button class="btn bg-primary wm-btn" :disabled="isFollowing" @click="follow">
-            <t class="wm-btn-large" k="wm.containerLogs.follow" />
+          <button
+            class="btn bg-primary wm-btn"
+            :disabled="isFollowing"
+            @click="follow"
+          >
+            <t
+              class="wm-btn-large"
+              k="wm.containerLogs.follow"
+            />
             <i class="wm-btn-small icon icon-chevron-end" />
           </button>
-          <button class="btn bg-primary wm-btn" @click="clear">
-            <t class="wm-btn-large" k="wm.containerLogs.clear" />
+          <button
+            class="btn bg-primary wm-btn"
+            @click="clear"
+          >
+            <t
+              class="wm-btn-large"
+              k="wm.containerLogs.clear"
+            />
             <i class="wm-btn-small icon icon-close" />
           </button>
-          <AsyncButton mode="download" @click="download" />
+          <AsyncButton
+            mode="download"
+            @click="download"
+          />
         </div>
 
-        <div class="wm-seperator"></div>
+        <div class="wm-seperator" />
 
         <div class="log-action log-previous ml-5">
-          <div><Checkbox :label="t('wm.containerLogs.previous')" :value="previous" @input="togglePrevious" /></div>
+          <div>
+            <Checkbox
+              :label="t('wm.containerLogs.previous')"
+              :value="previous"
+              @input="togglePrevious"
+            />
+          </div>
         </div>
 
         <div class="log-action ml-5">
@@ -522,19 +551,39 @@ export default {
                   placement="top"
                   @input="toggleRange($event)"
                 />
-                <div><Checkbox :label="t('wm.containerLogs.wrap')" :value="wrap" @input="toggleWrap " /></div>
-                <div><Checkbox :label="t('wm.containerLogs.timestamps')" :value="timestamps" @input="toggleTimestamps" /></div>
+                <div>
+                  <Checkbox
+                    :label="t('wm.containerLogs.wrap')"
+                    :value="wrap"
+                    @input="toggleWrap "
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                    :label="t('wm.containerLogs.timestamps')"
+                    :value="timestamps"
+                    @input="toggleTimestamps"
+                  />
+                </div>
               </div>
             </template>
           </v-popover>
         </div>
 
         <div class="log-action ml-5">
-          <input v-model="search" class="input-sm" type="search" :placeholder="t('wm.containerLogs.search')" />
+          <input
+            v-model="search"
+            class="input-sm"
+            type="search"
+            :placeholder="t('wm.containerLogs.search')"
+          >
         </div>
 
         <div class="status log-action p-10">
-          <t :class="{'text-success': isOpen, 'text-error': !isOpen}" :k="isOpen ? 'wm.connection.connected' : 'wm.connection.disconnected'" />
+          <t
+            :class="{'text-success': isOpen, 'text-error': !isOpen}"
+            :k="isOpen ? 'wm.connection.connected' : 'wm.connection.disconnected'"
+          />
         </div>
       </div>
     </template>
@@ -543,18 +592,42 @@ export default {
         ref="body"
         :class="{'logs-container': true, 'open': isOpen, 'closed': !isOpen, 'show-times': timestamps && filtered.length, 'wrap-lines': wrap}"
       >
-        <table class="fixed" cellpadding="0" cellspacing="0">
+        <table
+          class="fixed"
+          cellpadding="0"
+          cellspacing="0"
+        >
           <tbody class="logs-body">
             <template v-if="filtered.length">
-              <tr v-for="line in filtered" :key="line.id">
-                <td :key="line.id + '-time'" class="time" v-html="format(line.time)" />
-                <td :key="line.id + '-msg'" class="msg" v-html="line.msg" />
+              <tr
+                v-for="line in filtered"
+                :key="line.id"
+              >
+                <td
+                  :key="line.id + '-time'"
+                  class="time"
+                  v-html="format(line.time)"
+                />
+                <td
+                  :key="line.id + '-msg'"
+                  class="msg"
+                  v-html="line.msg"
+                />
               </tr>
             </template>
             <tr v-else-if="search">
-              <td v-t="'wm.containerLogs.noMatch'" colspan="2" class="msg text-muted" />
+              <td
+                v-t="'wm.containerLogs.noMatch'"
+                colspan="2"
+                class="msg text-muted"
+              />
             </tr>
-            <tr v-else v-t="'wm.containerLogs.noData'" colspan="2" class="msg text-muted" />
+            <tr
+              v-else
+              v-t="'wm.containerLogs.noData'"
+              colspan="2"
+              class="msg text-muted"
+            />
           </tbody>
         </table>
       </div>

package/components/nav/WindowManager/ContainerShell.vue

@@ -327,7 +327,10 @@ export default {
 </script>
 
 <template>
-  <Window :active="active" :before-close="cleanup">
+  <Window
+    :active="active"
+    :before-close="cleanup"
+  >
     <template #title>
       <Select
         v-if="containerChoices.length > 0"
@@ -347,24 +350,41 @@ export default {
         </template>
       </Select>
       <div class="pull-left ml-5">
-        <button class="btn btn-sm bg-primary" @click="clear">
+        <button
+          class="btn btn-sm bg-primary"
+          @click="clear"
+        >
           <t k="wm.containerShell.clear" />
         </button>
       </div>
       <div class="status pull-left">
-        <t v-if="isOpen" k="wm.connection.connected" class="text-success" />
+        <t
+          v-if="isOpen"
+          k="wm.connection.connected"
+          class="text-success"
+        />
         <t
           v-else-if="isOpening"
           k="wm.connection.connecting"
           class="text-warning"
           :raw="true"
         />
-        <t v-else k="wm.connection.disconnected" class="text-error" />
+        <t
+          v-else
+          k="wm.connection.disconnected"
+          class="text-error"
+        />
       </div>
     </template>
     <template #body>
-      <div class="shell-container" :class="{ open: isOpen, closed: !isOpen }">
-        <div ref="xterm" class="shell-body" />
+      <div
+        class="shell-container"
+        :class="{ open: isOpen, closed: !isOpen }"
+      >
+        <div
+          ref="xterm"
+          class="shell-body"
+        />
         <resize-observer @notify="fit" />
       </div>
     </template>

package/components/nav/WindowManager/Window.vue

@@ -54,8 +54,14 @@ export default {
 </script>
 
 <template>
-  <div class="window" :class="{'show-grid': $slots.title && $slots.body}">
-    <div v-if="$slots.title" class="title clearfix">
+  <div
+    class="window"
+    :class="{'show-grid': $slots.title && $slots.body}"
+  >
+    <div
+      v-if="$slots.title"
+      class="title clearfix"
+    >
       <slot name="title" />
     </div>
     <div class="body clearfix">