@rancher/shell 0.2.3 → 0.2.4

package/components/CountBox.vue

@@ -40,9 +40,19 @@ export default {
 </script>
 
 <template>
-  <div class="count-container" :style="sideStyle">
-    <div class="count" :primary-color-var="primaryColorVar" :style="mainStyle">
-      <div class="data" :class="{ 'compact': compact }">
+  <div
+    class="count-container"
+    :style="sideStyle"
+  >
+    <div
+      class="count"
+      :primary-color-var="primaryColorVar"
+      :style="mainStyle"
+    >
+      <div
+        class="data"
+        :class="{ 'compact': compact }"
+      >
         <h1>{{ count }}</h1>
         <label>{{ name }}</label>
       </div>

package/components/CountGauge.vue

@@ -73,15 +73,38 @@ export default {
 </script>
 
 <template>
-  <GradientBox class="count-gauge" :class="{clickable}" :primary-color-var="primaryColorVar" :plain="plain" @click.native="visitLocation()">
-    <div v-if="graphical" class="graphical">
-      <GraphCircle v-if="percentage > 0" :primary-stroke-color="`rgba(var(${primaryColorVar}))`" secondary-stroke-color="rgb(var(--resource-gauge-back-circle))" :percentage="percentage" />
-      <GraphCircle v-if="percentage === 0" :primary-stroke-color="`rgba(var(${primaryColorVar}))`" secondary-stroke-color="rgb(var(--resource-gauge-back-circle))" class="zero" :percentage="100" />
+  <GradientBox
+    class="count-gauge"
+    :class="{clickable}"
+    :primary-color-var="primaryColorVar"
+    :plain="plain"
+    @click.native="visitLocation()"
+  >
+    <div
+      v-if="graphical"
+      class="graphical"
+    >
+      <GraphCircle
+        v-if="percentage > 0"
+        :primary-stroke-color="`rgba(var(${primaryColorVar}))`"
+        secondary-stroke-color="rgb(var(--resource-gauge-back-circle))"
+        :percentage="percentage"
+      />
+      <GraphCircle
+        v-if="percentage === 0"
+        :primary-stroke-color="`rgba(var(${primaryColorVar}))`"
+        secondary-stroke-color="rgb(var(--resource-gauge-back-circle))"
+        class="zero"
+        :percentage="100"
+      />
     </div>
     <div class="data">
       <h1>{{ useful }}</h1>
       <label>{{ name }}</label>
-      <div v-if="showAlerts" class="alerts">
+      <div
+        v-if="showAlerts"
+        class="alerts"
+      >
         <span class="text-warning">
           <i class="icon icon-warning" /><span class="count">{{ warningCount }}</span>
         </span>

package/components/CruResource.vue

@@ -382,7 +382,10 @@ export default {
         v-if="showSubtypeSelection"
         class="subtypes-container cru__content"
       >
-        <slot name="subtypes" :subtypes="subtypes">
+        <slot
+          name="subtypes"
+          :subtypes="subtypes"
+        >
           <div
             v-for="subtype in subtypes"
             :key="subtype.id"
@@ -397,14 +400,20 @@ export default {
                     v-if="subtype.bannerImage"
                     :src="subtype.bannerImage"
                     :alt="(resource.type ? resource.type + ': ' : '') + (subtype.label || '')"
-                  />
-                  <div v-else class="round-image">
+                  >
+                  <div
+                    v-else
+                    class="round-image"
+                  >
                     <div
                       v-if="subtype.bannerAbbrv"
                       class="banner-abbrv"
                     >
                       <span v-if="$store.getters['i18n/exists'](subtype.bannerAbbrv)">{{ t(subtype.bannerAbbrv) }}</span>
-                      <span v-else :style="{fontSize: abbrSizes[subtype.bannerAbbrv.length]}">{{ subtype.bannerAbbrv }}</span>
+                      <span
+                        v-else
+                        :style="{fontSize: abbrSizes[subtype.bannerAbbrv.length]}"
+                      >{{ subtype.bannerAbbrv }}</span>
                     </div>
                     <div v-else>
                       {{ subtype.id.slice(0, 1).toUpperCase() }}
@@ -412,22 +421,34 @@ export default {
                   </div>
                 </div>
                 <div class="subtype-body">
-                  <div class="title" :class="{'with-description': !!subtype.description}">
+                  <div
+                    class="title"
+                    :class="{'with-description': !!subtype.description}"
+                  >
                     <h5>
                       <span
                         v-if="$store.getters['i18n/exists'](subtype.label)"
                         v-html="t(subtype.label)"
-                      ></span>
+                      />
                       <span v-else>{{ subtype.label }}</span>
                     </h5>
-                    <a v-if="subtype.docLink" :href="subtype.docLink" target="_blank" rel="noopener nofollow" class="flex-right">{{ t('generic.moreInfo') }} <i class="icon icon-external-link" /></a>
+                    <a
+                      v-if="subtype.docLink"
+                      :href="subtype.docLink"
+                      target="_blank"
+                      rel="noopener nofollow"
+                      class="flex-right"
+                    >{{ t('generic.moreInfo') }} <i class="icon icon-external-link" /></a>
                   </div>
-                  <hr v-if="subtype.description" />
-                  <div v-if="subtype.description" class="description">
+                  <hr v-if="subtype.description">
+                  <div
+                    v-if="subtype.description"
+                    class="description"
+                  >
                     <span
                       v-if="$store.getters['i18n/exists'](subtype.description)"
                       v-html="t(subtype.description, {}, true)"
-                    ></span>
+                    />
                     <span v-else>{{ subtype.description }}</span>
                   </div>
                 </div>
@@ -452,10 +473,21 @@ export default {
             class="wizard"
             @error="e=>errors = e"
           >
-            <template #stepContainer="{activeStep}" class="step-container">
+            <template
+              #stepContainer="{activeStep}"
+              class="step-container"
+            >
               <template v-for="step in steps">
-                <div v-if="step.name === activeStep.name || step.hidden" :key="step.name" class="step-container__step" :class="{'hide': step.name !== activeStep.name && step.hidden}">
-                  <slot :step="step" :name="step.name" />
+                <div
+                  v-if="step.name === activeStep.name || step.hidden"
+                  :key="step.name"
+                  class="step-container__step"
+                  :class="{'hide': step.name !== activeStep.name && step.hidden}"
+                >
+                  <slot
+                    :step="step"
+                    :name="step.name"
+                  />
                 </div>
               </template>
             </template>
@@ -469,8 +501,14 @@ export default {
                   @cancel-confirmed="confirmCancel"
                 >
                   <!-- Pass down templates provided by the caller -->
-                  <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
-                    <slot :name="slot" v-bind="scope" />
+                  <template
+                    v-for="(_, slot) of $scopedSlots"
+                    v-slot:[slot]="scope"
+                  >
+                    <slot
+                      :name="slot"
+                      v-bind="scope"
+                    />
                   </template>
                   <div class="controls-steps">
                     <button
@@ -481,12 +519,22 @@ export default {
                     >
                       <t k="cruResource.previewYaml" />
                     </button>
-                    <template v-if="showPrevious" name="back">
-                      <button type="button" class="btn role-secondary" @click="back()">
+                    <template
+                      v-if="showPrevious"
+                      name="back"
+                    >
+                      <button
+                        type="button"
+                        class="btn role-secondary"
+                        @click="back()"
+                      >
                         <t k="wizard.previous" />
                       </button>
                     </template>
-                    <template v-if="activeStepIndex === visibleSteps.length-1" name="finish">
+                    <template
+                      v-if="activeStepIndex === visibleSteps.length-1"
+                      name="finish"
+                    >
                       <AsyncButton
                         v-if="!showSubtypeSelection && !isView"
                         ref="save"
@@ -495,8 +543,16 @@ export default {
                         @click="$emit('finish', $event)"
                       />
                     </template>
-                    <template v-else name="next">
-                      <button :disabled="!canNext" type="button" class="btn role-primary" @click="next()">
+                    <template
+                      v-else
+                      name="next"
+                    >
+                      <button
+                        :disabled="!canNext"
+                        type="button"
+                        class="btn role-primary"
+                        @click="next()"
+                      >
                         <t k="wizard.next" />
                       </button>
                     </template>
@@ -526,8 +582,14 @@ export default {
             @cancel-confirmed="confirmCancel"
           >
             <!-- Pass down templates provided by the caller -->
-            <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
-              <slot :name="slot" v-bind="scope" />
+            <template
+              v-for="(_, slot) of $scopedSlots"
+              v-slot:[slot]="scope"
+            >
+              <slot
+                :name="slot"
+                v-bind="scope"
+              />
             </template>
 
             <template #default>
@@ -604,7 +666,10 @@ export default {
                       <t k="resourceYaml.buttons.diff" />
                     </button>
                   </div>
-                  <div v-if="_selectedSubtype || !subtypes.length" class="controls-right">
+                  <div
+                    v-if="_selectedSubtype || !subtypes.length"
+                    class="controls-right"
+                  >
                     <button
                       :data-testid="componentTestid + '-yaml-cancel'"
                       type="button"

package/components/CruResourceFooter.vue

@@ -106,7 +106,7 @@ export default {
       :is-cancel-modal="isCancelModal"
       :is-form="isForm"
       @confirm-cancel="confirmCancel($event)"
-    ></ResourceCancelModal>
+    />
   </div>
 </template>
 

package/components/DashboardMetrics.vue

@@ -47,14 +47,23 @@ export default {
 </script>
 
 <template>
-  <div class="dashboard-metrics" :class="!hasSummaryAndDetail && 'external-link-pull-left'">
+  <div
+    class="dashboard-metrics"
+    :class="!hasSummaryAndDetail && 'external-link-pull-left'"
+  >
     <div class="graph-options mb-10">
-      <DashboardOptions v-model="graphOptions" :has-summary-and-detail="hasSummaryAndDetail" />
+      <DashboardOptions
+        v-model="graphOptions"
+        :has-summary-and-detail="hasSummaryAndDetail"
+      />
     </div>
     <div class="info">
       <slot />
     </div>
-    <div class="graphs" :style="{height: graphHeight}">
+    <div
+      class="graphs"
+      :style="{height: graphHeight}"
+    >
       <GrafanaDashboard
         v-if="graphOptions.type === 'detail'"
         class="col span-12 detail"

package/components/DashboardOptions.vue

@@ -103,14 +103,25 @@ export default {
 <template>
   <div class="graph-options">
     <div v-if="hasSummaryAndDetail">
-      <ButtonGroup v-model="value.type" :options="detailSummaryOptions" />
+      <ButtonGroup
+        v-model="value.type"
+        :options="detailSummaryOptions"
+      />
     </div>
     <div v-else>
       <div />
     </div>
     <div class="range-refresh">
-      <LabeledSelect v-model="value.range" :options="rangeOptions" :label="t('graphOptions.range')" />
-      <LabeledSelect v-model="value.refreshRate" :options="refreshOptions" :label="t('graphOptions.refresh')" />
+      <LabeledSelect
+        v-model="value.range"
+        :options="rangeOptions"
+        :label="t('graphOptions.range')"
+      />
+      <LabeledSelect
+        v-model="value.refreshRate"
+        :options="refreshOptions"
+        :label="t('graphOptions.refresh')"
+      />
     </div>
   </div>
 </template>

package/components/DetailText.vue

@@ -142,13 +142,23 @@ export default {
 
 <template>
   <div :class="{'force-wrap': true, 'with-copy':copy}">
-    <h5 v-if="labelKey" v-t="labelKey" />
+    <h5
+      v-if="labelKey"
+      v-t="labelKey"
+    />
     <h5 v-else-if="label">
       {{ label }}
     </h5>
 
-    <span v-if="isEmpty" v-t="'detailText.empty'" class="text-italic" />
-    <span v-else-if="isBinary" class="text-italic">{{ body }}</span>
+    <span
+      v-if="isEmpty"
+      v-t="'detailText.empty'"
+      class="text-italic"
+    />
+    <span
+      v-else-if="isBinary"
+      class="text-italic"
+    >{{ body }}</span>
 
     <CodeMirror
       v-else-if="jsonStr"
@@ -157,13 +167,25 @@ export default {
       :class="{'conceal': concealed}"
     />
 
-    <span v-else :class="{'conceal': concealed, 'monospace': monospace && !isBinary}" v-html="bodyHtml" />
+    <span
+      v-else
+      :class="{'conceal': concealed, 'monospace': monospace && !isBinary}"
+      v-html="bodyHtml"
+    />
 
     <template v-if="!isBinary && !jsonStr && isLong && !expanded">
-      <a href="#" @click.prevent="expand">{{ plusMore }}</a>
+      <a
+        href="#"
+        @click.prevent="expand"
+      >{{ plusMore }}</a>
     </template>
 
-    <CopyToClipboard v-if="copy && !isBinary" :text="value" class="role-tertiary" action-color="" />
+    <CopyToClipboard
+      v-if="copy && !isBinary"
+      :text="value"
+      class="role-tertiary"
+      action-color=""
+    />
   </div>
 </template>
 

package/components/DetailTop.vue

@@ -130,19 +130,33 @@ export default {
 </script>
 
 <template>
-  <div class="detail-top" :class="{empty: isEmpty}">
-    <div v-if="hasNamespaces" class="labels">
+  <div
+    class="detail-top"
+    :class="{empty: isEmpty}"
+  >
+    <div
+      v-if="hasNamespaces"
+      class="labels"
+    >
       <span class="label">
         {{ t('resourceDetail.detailTop.namespaces') }}:
       </span>
       <span>
-        <nuxt-link v-for="namespace in namespaces" :key="namespace.name" :to="namespace.detailLocation" class="namespaceLinkList">
+        <nuxt-link
+          v-for="namespace in namespaces"
+          :key="namespace.name"
+          :to="namespace.detailLocation"
+          class="namespaceLinkList"
+        >
           {{ namespace.name }}
         </nuxt-link>
       </span>
     </div>
 
-    <div v-if="description" class="description">
+    <div
+      v-if="description"
+      class="description"
+    >
       <span class="label">
         {{ t('resourceDetail.detailTop.description') }}:
       </span>
@@ -150,8 +164,16 @@ export default {
     </div>
 
     <div v-if="hasDetails">
-      <div v-for="group, index in details" :key="index" class="details">
-        <div v-for="detail in group" :key="detail.label || detail.slotName" class="detail">
+      <div
+        v-for="group, index in details"
+        :key="index"
+        class="details"
+      >
+        <div
+          v-for="detail in group"
+          :key="detail.label || detail.slotName"
+          class="detail"
+        >
           <span class="label">
             {{ detail.label }}:
           </span>
@@ -166,29 +188,52 @@ export default {
       </div>
     </div>
 
-    <div v-if="hasLabels" class="labels">
+    <div
+      v-if="hasLabels"
+      class="labels"
+    >
       <div class="tags">
         <span class="label">
           {{ t('resourceDetail.detailTop.labels') }}:
         </span>
-        <Tag v-for="(prop, key) in labels" :key="key + prop">
+        <Tag
+          v-for="(prop, key) in labels"
+          :key="key + prop"
+        >
           {{ key }}<span v-if="prop">: </span>{{ prop }}
         </Tag>
-        <a v-if="showFilteredSystemLabels" href="#" class="detail-top__label-button" @click.prevent="toggleLabels">
+        <a
+          v-if="showFilteredSystemLabels"
+          href="#"
+          class="detail-top__label-button"
+          @click.prevent="toggleLabels"
+        >
           {{ t(`resourceDetail.detailTop.${showAllLabels? 'hideLabels' : 'showLabels'}`) }}
         </a>
       </div>
     </div>
 
-    <div v-if="hasAnnotations" class="annotations">
+    <div
+      v-if="hasAnnotations"
+      class="annotations"
+    >
       <span class="label">
         {{ t('resourceDetail.detailTop.annotations') }}:
       </span>
-      <a href="#" @click.prevent="toggleAnnotations">
+      <a
+        href="#"
+        @click.prevent="toggleAnnotations"
+      >
         {{ t(`resourceDetail.detailTop.${annotationsVisible? 'hideAnnotations' : 'showAnnotations'}`, {annotations: annotationCount}) }}
       </a>
       <div v-if="annotationsVisible">
-        <DetailText v-for="(val, key) in annotations" :key="key" class="annotation" :value="val" :label="key" />
+        <DetailText
+          v-for="(val, key) in annotations"
+          :key="key"
+          class="annotation"
+          :value="val"
+          :label="key"
+        />
       </div>
     </div>
   </div>

package/components/Dialog.vue

@@ -64,17 +64,29 @@ export default {
       <h4>
         {{ title }}
       </h4>
-      <slot></slot>
+      <slot />
       <div class="dialog-buttons mt-20">
-        <slot name="buttons"></slot>
+        <slot name="buttons" />
         <div v-if="!$slots.buttons">
-          <button class="btn role-secondary" @click="closeDialog(false)">
+          <button
+            class="btn role-secondary"
+            @click="closeDialog(false)"
+          >
             {{ t('generic.cancel') }}
           </button>
-          <button v-if="!mode" class="btn role-primary ml-10" @click="closeDialog(true)">
+          <button
+            v-if="!mode"
+            class="btn role-primary ml-10"
+            @click="closeDialog(true)"
+          >
             {{ t('generic.ok') }}
           </button>
-          <AsyncButton v-else :mode="mode" class="ml-10" @click="ok" />
+          <AsyncButton
+            v-else
+            :mode="mode"
+            class="ml-10"
+            @click="ok"
+          />
         </div>
       </div>
     </div>

package/components/EmberPage.vue

@@ -510,12 +510,30 @@ export default {
 </script>
 
 <template>
-  <div ref="emberPage" class="ember-page">
-    <Loading v-if="!inline" :loading="!loaded" mode="content" :no-delay="true" />
-    <div v-if="inline && !loaded" class="inline-loading" v-html="t('generic.loading', {}, true)" />
-    <div v-if="error" class="ember-page-error">
+  <div
+    ref="emberPage"
+    class="ember-page"
+  >
+    <Loading
+      v-if="!inline"
+      :loading="!loaded"
+      mode="content"
+      :no-delay="true"
+    />
+    <div
+      v-if="inline && !loaded"
+      class="inline-loading"
+      v-html="t('generic.loading', {}, true)"
+    />
+    <div
+      v-if="error"
+      class="ember-page-error"
+    >
       <div>{{ t('embedding.unavailable') }}</div>
-      <button class="btn role-primary" @click="initFrame()">
+      <button
+        class="btn role-primary"
+        @click="initFrame()"
+      >
         {{ t('embedding.retry') }}
       </button>
     </div>

package/components/EmberPageView.vue

@@ -28,7 +28,10 @@ export default {
 </script>
 
 <template>
-  <EmberPage v-if="src" :src="src" />
+  <EmberPage
+    v-if="src"
+    :src="src"
+  />
   <div v-else>
     <h1>{{ t('generic.notFound') }}</h1>
     <h2>{{ page }}</h2>

package/components/EtcdInfoBanner.vue

@@ -26,7 +26,11 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <Banner v-else class="banner" color="info">
+  <Banner
+    v-else
+    class="banner"
+    color="info"
+  >
     <div class="datum">
       <label>{{ t('etcdInfoBanner.hasLeader') }}</label> {{ hasLeader }}
     </div>

package/components/ExplorerMembers.vue

@@ -49,12 +49,8 @@ export default {
       this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER }),
       this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE })
     ];
-    const [clusterRoleTemplateBindings] = await Promise.all(hydration);
-    const steveBindings = await Promise.all(
-      clusterRoleTemplateBindings.map(b => b.steve)
-    );
 
-    this.$set(this, 'clusterRoleTemplateBindings', steveBindings);
+    await Promise.all(hydration);
   },
 
   data() {
@@ -70,17 +66,19 @@ export default {
           cluster: this.$store.getters['currentCluster'].id
         }
       },
-      resource:                    MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
-      clusterRoleTemplateBindings: [],
+      resource: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
       VIRTUAL_TYPES
     };
   },
 
   computed: {
+    clusterRoleTemplateBindings() {
+      return this.$store.getters[`rancher/all`](NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING).map(b => b.clusterroletemplatebinding) ;
+    },
     ...mapGetters(['currentCluster']),
     filteredClusterRoleTemplateBindings() {
       return this.clusterRoleTemplateBindings.filter(
-        b => b.clusterName === this.$store.getters['currentCluster'].id
+        b => b?.clusterName === this.$store.getters['currentCluster'].id
       );
     },
     canManageMembers() {
@@ -110,7 +108,7 @@ export default {
     <ResourceTable
       :schema="schema"
       :headers="headers"
-      :rows="filteredClusterRoleTemplateBindings"
+      :rows="$fetchState.pending ? [] : filteredClusterRoleTemplateBindings"
       :groupable="false"
       :namespaced="false"
       :loading="$fetchState.pending || !currentCluster"