@rancher/shell 0.2.3 → 0.2.5

package/components/formatter/WorkloadHealthScale.vue

@@ -162,23 +162,57 @@ export default {
 </script>
 
 <template>
-  <div v-if="loading" class="hs-popover__loader">
+  <div
+    v-if="loading"
+    class="hs-popover__loader"
+  >
     <i class="icon icon-spinner" />
   </div>
-  <div v-else :id="`root-${id}`" :ref="`root-${id}`" class="hs-popover">
-    <div id="trigger" class="hs-popover__trigger" :class="{expanded}" @click="expanded = !expanded">
-      <ProgressBarMulti v-if="parts" class="health" :values="parts" :show-zeros="true" />
+  <div
+    v-else
+    :id="`root-${id}`"
+    :ref="`root-${id}`"
+    class="hs-popover"
+  >
+    <div
+      id="trigger"
+      class="hs-popover__trigger"
+      :class="{expanded}"
+      @click="expanded = !expanded"
+    >
+      <ProgressBarMulti
+        v-if="parts"
+        class="health"
+        :values="parts"
+        :show-zeros="true"
+      />
       <i :class="{icon: true, 'icon-chevron-up': expanded, 'icon-chevron-down': !expanded}" />
     </div>
-    <div :id="id" class="hs-popover__content" :class="{expanded, [id]:true}">
+    <div
+      :id="id"
+      class="hs-popover__content"
+      :class="{expanded, [id]:true}"
+    >
       <div>
-        <div v-for="obj in parts" :key="obj.label" class="counts">
+        <div
+          v-for="obj in parts"
+          :key="obj.label"
+          class="counts"
+        >
           <span class="counts-label">{{ obj.label }}</span>
           <span>{{ obj.value }}</span>
         </div>
-        <div v-if="canScale" class="text-center scale">
+        <div
+          v-if="canScale"
+          class="text-center scale"
+        >
           <span>{{ t('tableHeaders.scale') }} </span>
-          <PlusMinus :value="row.spec.replicas" :disabled="disabled" @minus="scaleDown" @plus="scaleUp" />
+          <PlusMinus
+            :value="row.spec.replicas"
+            :disabled="disabled"
+            @minus="scaleDown"
+            @plus="scaleUp"
+          />
         </div>
       </div>
     </div>

package/components/graph/AspectPreserver.vue

@@ -37,9 +37,20 @@ export default {
 </script>
 
 <template>
-  <div ref="outer" class="aspect--outer">
-    <div ref="inner" class="aspect--inner" :style="{paddingBottom: 100 * aspectRatio[1]/aspectRatio[0] + '%' }">
-      <slot class="aspect--svg" :graphWidth="graphWidth" :graphHeight="graphHeight"></slot>
+  <div
+    ref="outer"
+    class="aspect--outer"
+  >
+    <div
+      ref="inner"
+      class="aspect--inner"
+      :style="{paddingBottom: 100 * aspectRatio[1]/aspectRatio[0] + '%' }"
+    >
+      <slot
+        class="aspect--svg"
+        :graphWidth="graphWidth"
+        :graphHeight="graphHeight"
+      />
     </div>
   </div>
 </template>

package/components/graph/Bar.vue

@@ -39,9 +39,20 @@ export default {
 </script>
 
 <template>
-  <div class="bar" :style="barStyle">
-    <div class="indicator" :style="indicatorStyle" />
-    <div v-for="(sliceStyle, i) in sliceStyles" :key="i" class="slice" :style="sliceStyle" />
+  <div
+    class="bar"
+    :style="barStyle"
+  >
+    <div
+      class="indicator"
+      :style="indicatorStyle"
+    />
+    <div
+      v-for="(sliceStyle, i) in sliceStyles"
+      :key="i"
+      class="slice"
+      :style="sliceStyle"
+    />
   </div>
 </template>
 

package/components/graph/Circle.vue

@@ -84,16 +84,45 @@ export default {
 </script>
 
 <template>
-  <svg class="circle" width="100%" height="100%" :viewBox="viewBox">
+  <svg
+    class="circle"
+    width="100%"
+    height="100%"
+    :viewBox="viewBox"
+  >
     <g :transform="transform">
       <defs>
-        <linearGradient :id="primaryStrokeColorId" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="50%" :stop-color="primaryStrokeGradientColor || primaryStrokeColor" />
-          <stop offset="100%" :stop-color="primaryStrokeColor" />
+        <linearGradient
+          :id="primaryStrokeColorId"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+        >
+          <stop
+            offset="50%"
+            :stop-color="primaryStrokeGradientColor || primaryStrokeColor"
+          />
+          <stop
+            offset="100%"
+            :stop-color="primaryStrokeColor"
+          />
         </linearGradient>
-        <linearGradient :id="secondaryStrokeColorId" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="50%" :stop-color="secondaryStrokeGradientColor || secondaryStrokeColor" />
-          <stop offset="100%" :stop-color="secondaryStrokeColor" />
+        <linearGradient
+          :id="secondaryStrokeColorId"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+        >
+          <stop
+            offset="50%"
+            :stop-color="secondaryStrokeGradientColor || secondaryStrokeColor"
+          />
+          <stop
+            offset="100%"
+            :stop-color="secondaryStrokeColor"
+          />
         </linearGradient>
       </defs>
       <circle

package/components/graph/HalfCircle.vue

@@ -24,7 +24,12 @@ export default {
 
 <template>
   <div class="half-circle">
-    <GraphCircle v-bind="$attrs" :rotate="-180" :percentage="calculatedPercentage" :stroke-width="strokeWidth" />
+    <GraphCircle
+      v-bind="$attrs"
+      :rotate="-180"
+      :percentage="calculatedPercentage"
+      :stroke-width="strokeWidth"
+    />
   </div>
 </template>
 

package/components/graph/LinePlot.vue

@@ -142,8 +142,7 @@ export default {
         :key="i"
         :d="lines[i]"
         class="line"
-      >
-      </path>
+      />
       <circle
         v-for="(point, index) in set.points"
         :key="`${index}--circle`"
@@ -151,13 +150,11 @@ export default {
         r="4"
         :cx="scaleX([0, 10], index)"
         :cy="scaleY(set.domain, point)"
-      >
-      </circle>
+      />
     </g>
     <g
       class="grid"
-    >
-    </g>
+    />
   </svg>
 </template>
 

package/components/graph/ProgressArc.vue

@@ -73,8 +73,14 @@ export default {
       :viewBox="`0 1 ${graphWidth} ${graphWidth}`"
     >
       <g :transform="`translate(${graphWidth/2}, ${graphWidth/2}) rotate(180)`">
-        <path class="background" :d="fullArc"></path>
-        <path :style="{fill: `rgb(${progressColor[0]}, ${progressColor[1]}, ${progressColor[2]})`}" :d="arc"></path>
+        <path
+          class="background"
+          :d="fullArc"
+        />
+        <path
+          :style="{fill: `rgb(${progressColor[0]}, ${progressColor[1]}, ${progressColor[2]})`}"
+          :d="arc"
+        />
       </g>
     </svg>
   </div>

package/components/nav/GlobalLoading.vue

@@ -18,5 +18,8 @@ export default {
 
 </script>
 <template>
-  <Loading v-if="loading" mode="relative" />
+  <Loading
+    v-if="loading"
+    mode="relative"
+  />
 </template>

package/components/nav/Group.vue

@@ -186,25 +186,55 @@ export default {
 </script>
 
 <template>
-  <div class="accordion" :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren}">
-    <div v-if="showHeader" class="header" :class="{'active': isOverview, 'noHover': !canCollapse}" @click="groupSelected()">
+  <div
+    class="accordion"
+    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren}"
+  >
+    <div
+      v-if="showHeader"
+      class="header"
+      :class="{'active': isOverview, 'noHover': !canCollapse}"
+      @click="groupSelected()"
+    >
       <slot name="header">
-        <n-link v-if="hasOverview" :to="group.children[0].route" :exact="group.children[0].exact">
+        <n-link
+          v-if="hasOverview"
+          :to="group.children[0].route"
+          :exact="group.children[0].exact"
+        >
           <h6 v-html="group.labelDisplay || group.label" />
         </n-link>
-        <h6 v-else v-html="group.labelDisplay || group.label" />
+        <h6
+          v-else
+          v-html="group.labelDisplay || group.label"
+        />
       </slot>
-      <i v-if="!onlyHasOverview && canCollapse" class="icon toggle" :class="{'icon-chevron-down': !isExpanded, 'icon-chevron-up': isExpanded}" @click="peek($event, true)" />
+      <i
+        v-if="!onlyHasOverview && canCollapse"
+        class="icon toggle"
+        :class="{'icon-chevron-down': !isExpanded, 'icon-chevron-up': isExpanded}"
+        @click="peek($event, true)"
+      />
     </div>
-    <ul v-if="isExpanded" class="list-unstyled body" v-bind="$attrs">
+    <ul
+      v-if="isExpanded"
+      class="list-unstyled body"
+      v-bind="$attrs"
+    >
       <template v-for="(child, idx) in group[childrenKey]">
-        <li v-if="child.divider" :key="idx">
-          <hr />
+        <li
+          v-if="child.divider"
+          :key="idx"
+        >
+          <hr>
         </li>
         <!-- <div v-else-if="child[childrenKey] && hideGroup(child[childrenKey])" :key="child.name">
           HIDDEN
         </div> -->
-        <li v-else-if="child[childrenKey]" :key="child.name">
+        <li
+          v-else-if="child[childrenKey]"
+          :key="child.name"
+        >
           <Group
             ref="groups"
             :key="id+'_'+child.name+'_children'"

package/components/nav/Header.vue

@@ -294,52 +294,111 @@ export default {
 </script>
 
 <template>
-  <header ref="header">
+  <header
+    ref="header"
+    class="header-layout"
+  >
     <div>
-      <TopLevelMenu v-if="isMultiCluster || !isSingleProduct"></TopLevelMenu>
+      <TopLevelMenu v-if="isMultiCluster || !isSingleProduct" />
     </div>
-    <div class="menu-spacer" :class="{'isSingleProduct': isSingleProduct }">
-      <n-link v-if="isSingleProduct" :to="singleProductLogoRoute">
+    <div
+      class="menu-spacer"
+      :class="{'isSingleProduct': isSingleProduct }"
+    >
+      <n-link
+        v-if="isSingleProduct"
+        :to="singleProductLogoRoute"
+      >
         <img
           class="side-menu-logo"
           :src="isSingleProduct.logo"
-        />
+        >
       </n-link>
     </div>
-    <div v-if="!simple" ref="product" class="product">
-      <div v-if="currentProduct && currentProduct.showClusterSwitcher" v-tooltip="nameTooltip" class="cluster cluster-clipped">
-        <div v-if="isSingleProduct" class="product-name">
+    <div
+      v-if="!simple"
+      ref="product"
+      class="product"
+    >
+      <div
+        v-if="currentProduct && currentProduct.showClusterSwitcher"
+        v-tooltip="nameTooltip"
+        class="cluster cluster-clipped"
+      >
+        <div
+          v-if="isSingleProduct"
+          class="product-name"
+        >
           {{ t(isSingleProduct.productNameKey) }}
         </div>
         <template v-else>
-          <ClusterProviderIcon v-if="currentCluster" :cluster="currentCluster" class="mr-10" />
-          <div v-if="currentCluster" ref="clusterName" class="cluster-name">
+          <ClusterProviderIcon
+            v-if="currentCluster"
+            :cluster="currentCluster"
+            class="mr-10"
+          />
+          <div
+            v-if="currentCluster"
+            ref="clusterName"
+            class="cluster-name"
+          >
             {{ currentCluster.spec.displayName }}
           </div>
-          <ClusterBadge v-if="currentCluster" :cluster="currentCluster" class="ml-10" />
-          <div v-if="!currentCluster" class="simple-title">
-            <BrandImage class="side-menu-logo-img" file-name="rancher-logo.svg" />
+          <ClusterBadge
+            v-if="currentCluster"
+            :cluster="currentCluster"
+            class="ml-10"
+          />
+          <div
+            v-if="!currentCluster"
+            class="simple-title"
+          >
+            <BrandImage
+              class="side-menu-logo-img"
+              file-name="rancher-logo.svg"
+            />
           </div>
         </template>
       </div>
-      <div v-if="currentProduct && !currentProduct.showClusterSwitcher" class="cluster">
-        <img v-if="currentProduct.iconHeader" v-bind="$attrs" :src="currentProduct.iconHeader" class="cluster-os-logo mr-10" style="width: 44px; height: 36px;" />
+      <div
+        v-if="currentProduct && !currentProduct.showClusterSwitcher"
+        class="cluster"
+      >
+        <img
+          v-if="currentProduct.iconHeader"
+          v-bind="$attrs"
+          :src="currentProduct.iconHeader"
+          class="cluster-os-logo mr-10"
+          style="width: 44px; height: 36px;"
+        >
         <div class="product-name">
           {{ prod }}
         </div>
       </div>
     </div>
-    <div v-else class="simple-title">
-      <div v-if="isSingleProduct" class="product-name">
+    <div
+      v-else
+      class="simple-title"
+    >
+      <div
+        v-if="isSingleProduct"
+        class="product-name"
+      >
         {{ t(isSingleProduct.productNameKey) }}
       </div>
 
-      <div v-else class="side-menu-logo">
-        <BrandImage class="side-menu-logo-img" file-name="rancher-logo.svg" />
+      <div
+        v-else
+        class="side-menu-logo"
+      >
+        <BrandImage
+          class="side-menu-logo-img"
+          file-name="rancher-logo.svg"
+        />
       </div>
     </div>
 
-    <div class="spacer"></div>
+    <div class="spacer" />
 
     <div class="rd-header-right">
       <component :is="navHeaderRight" />
@@ -351,7 +410,10 @@ export default {
         <NamespaceFilter v-if="clusterReady && currentProduct && (currentProduct.showNamespaceFilter || isExplorer)" />
         <WorkspaceSwitcher v-else-if="clusterReady && currentProduct && currentProduct.showWorkspaceSwitcher" />
       </div>
-      <div v-if="currentCluster && !simple" class="header-buttons">
+      <div
+        v-if="currentCluster && !simple"
+        class="header-buttons"
+      >
         <template v-if="currentProduct && currentProduct.showClusterSwitcher">
           <button
             v-if="showImportYaml"
@@ -370,7 +432,10 @@ export default {
             height="auto"
             styles="max-height: 90vh;"
           >
-            <Import :cluster="currentCluster" @close="closeImport" />
+            <Import
+              :cluster="currentCluster"
+              @close="closeImport"
+            />
           </modal>
 
           <button
@@ -405,8 +470,14 @@ export default {
             class="btn header-btn role-tertiary"
             @click="copyKubeConfig($event)"
           >
-            <i v-if="kubeConfigCopying" class="icon icon-checkmark icon-lg" />
-            <i v-else class="icon icon-copy icon-lg" />
+            <i
+              v-if="kubeConfigCopying"
+              class="icon icon-checkmark icon-lg"
+            />
+            <i
+              v-else
+              class="icon icon-copy icon-lg"
+            />
           </button>
         </template>
 
@@ -453,15 +524,28 @@ export default {
           :popper-options="{modifiers: { flip: { enabled: false } } }"
           :container="false"
         >
-          <template slot="popover" class="user-menu">
+          <template
+            slot="popover"
+            class="user-menu"
+          >
             <ul
               data-testid="page-actions-dropdown"
               class="list-unstyled dropdown"
               @click.stop="showPageActionsMenu(false)"
             >
-              <li v-for="a in pageActions" :key="a.label" class="user-menu-item">
-                <a v-if="!a.separator" @click="pageAction(a)">{{ a.labelKey ? t(a.labelKey) : a.label }}</a>
-                <div v-else class="menu-separator">
+              <li
+                v-for="a in pageActions"
+                :key="a.label"
+                class="user-menu-item"
+              >
+                <a
+                  v-if="!a.separator"
+                  @click="pageAction(a)"
+                >{{ a.labelKey ? t(a.labelKey) : a.label }}</a>
+                <div
+                  v-else
+                  class="menu-separator"
+                >
                   <div class="menu-separator-line" />
                 </div>
               </li>
@@ -470,7 +554,7 @@ export default {
         </v-popover>
       </div>
 
-      <div class="header-spacer"></div>
+      <div class="header-spacer" />
       <div
         v-if="showUserMenu"
         class="user user-menu"
@@ -489,12 +573,30 @@ export default {
           :container="false"
         >
           <div class="user-image text-right hand">
-            <img v-if="principal && principal.avatarSrc" :src="principal.avatarSrc" :class="{'avatar-round': principal.roundAvatar}" width="36" height="36" />
-            <i v-else class="icon icon-user icon-3x avatar" />
+            <img
+              v-if="principal && principal.avatarSrc"
+              :src="principal.avatarSrc"
+              :class="{'avatar-round': principal.roundAvatar}"
+              width="36"
+              height="36"
+            >
+            <i
+              v-else
+              class="icon icon-user icon-3x avatar"
+            />
           </div>
-          <template slot="popover" class="user-menu">
-            <ul class="list-unstyled dropdown" @click.stop="showMenu(false)">
-              <li v-if="authEnabled" class="user-info">
+          <template
+            slot="popover"
+            class="user-menu"
+          >
+            <ul
+              class="list-unstyled dropdown"
+              @click.stop="showMenu(false)"
+            >
+              <li
+                v-if="authEnabled"
+                class="user-info"
+              >
                 <div class="user-name">
                   <i class="icon icon-lg icon-user" /> {{ principal.loginName }}
                 </div>
@@ -504,13 +606,28 @@ export default {
                   </template>
                 </div>
               </li>
-              <nuxt-link v-if="showPreferencesLink" tag="li" :to="{name: 'prefs'}" class="user-menu-item">
+              <nuxt-link
+                v-if="showPreferencesLink"
+                tag="li"
+                :to="{name: 'prefs'}"
+                class="user-menu-item"
+              >
                 <a>{{ t('nav.userMenu.preferences') }}</a>
               </nuxt-link>
-              <nuxt-link v-if="showAccountAndApiKeyLink" tag="li" :to="{name: 'account'}" class="user-menu-item">
+              <nuxt-link
+                v-if="showAccountAndApiKeyLink"
+                tag="li"
+                :to="{name: 'account'}"
+                class="user-menu-item"
+              >
                 <a>{{ t('nav.userMenu.accountAndKeys', {}, true) }}</a>
               </nuxt-link>
-              <nuxt-link v-if="authEnabled" tag="li" :to="{name: 'auth-logout', query: { [LOGGED_OUT]: true }}" class="user-menu-item">
+              <nuxt-link
+                v-if="authEnabled"
+                tag="li"
+                :to="{name: 'auth-logout', query: { [LOGGED_OUT]: true }}"
+                class="user-menu-item"
+              >
                 <a @blur="showMenu(false)">{{ t('nav.userMenu.logOut') }}</a>
               </nuxt-link>
             </ul>

package/components/nav/Jump.vue

@@ -65,9 +65,13 @@ export default {
       :placeholder="t('nav.resourceSearch.placeholder')"
       class="search"
       @keyup.esc="$emit('closeSearch')"
-    />
+    >
     <div class="results">
-      <div v-for="g in groups" :key="g.name" class="package">
+      <div
+        v-for="g in groups"
+        :key="g.name"
+        class="package"
+      >
         <Group
           v-if="!g.hidden"
           :key="g.name"