@rancher/shell 0.2.2 → 0.2.4

package/components/ResourceDetail/Masthead.vue

@@ -375,24 +375,43 @@ export default {
 
 <template>
   <div class="masthead">
-    <header>
+    <header class="header-layout">
       <div class="title">
         <div class="primaryheader">
           <h1>
-            <nuxt-link v-if="location" :to="location">
+            <nuxt-link
+              v-if="location"
+              :to="location"
+            >
               {{ parent.displayName }}:
             </nuxt-link>
             <span v-else>{{ parent.displayName }}:</span>
             <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
-            <t v-else :k="'resourceDetail.header.' + realMode" :subtype="resourceSubtype" :name="displayName" :escapehtml="false" />
-            <BadgeState v-if="!isCreate && parent.showState" class="masthead-state" :value="value" />
+            <t
+              v-else
+              :k="'resourceDetail.header.' + realMode"
+              :subtype="resourceSubtype"
+              :name="displayName"
+              :escapehtml="false"
+            />
+            <BadgeState
+              v-if="!isCreate && parent.showState"
+              class="masthead-state"
+              :value="value"
+            />
           </h1>
         </div>
-        <div v-if="!isCreate" class="subheader">
+        <div
+          v-if="!isCreate"
+          class="subheader"
+        >
           <span v-if="isNamespace && project">{{ t("resourceDetail.masthead.project") }}: <nuxt-link :to="project.detailLocation">{{ project.nameDisplay }}</nuxt-link></span>
           <span v-else-if="isWorkspace">{{ t("resourceDetail.masthead.workspace") }}: <nuxt-link :to="workspaceLocation">{{ namespace }}</nuxt-link></span>
           <span v-else-if="namespace && !hasMultipleNamespaces">{{ t("resourceDetail.masthead.namespace") }}: <nuxt-link :to="namespaceLocation">{{ namespace }}</nuxt-link></span>
-          <span v-if="parent.showAge">{{ t("resourceDetail.masthead.age") }}: <LiveDate class="live-date" :value="value.creationTimestamp" /></span>
+          <span v-if="parent.showAge">{{ t("resourceDetail.masthead.age") }}: <LiveDate
+            class="live-date"
+            :value="value.creationTimestamp"
+          /></span>
           <span v-if="value.showPodRestarts">{{ t("resourceDetail.masthead.restartCount") }}:<span class="live-data"> {{ value.restartCount }}</span></span>
         </div>
       </div>
@@ -428,7 +447,12 @@ export default {
       </slot>
     </header>
 
-    <Banner v-if="banner && isView && !parent.hideBanner" class="state-banner mb-10" :color="banner.color" :label="banner.message" />
+    <Banner
+      v-if="banner && isView && !parent.hideBanner"
+      class="state-banner mb-10"
+      :color="banner.color"
+      :label="banner.message"
+    />
     <Banner
       v-if="managedWarning.show"
       color="warning"

package/components/ResourceList/Masthead.vue

@@ -163,13 +163,16 @@ export default {
 </script>
 
 <template>
-  <header>
+  <header class="header-layout">
     <slot name="typeDescription">
       <TypeDescription :resource="resource" />
     </slot>
     <div class="title">
       <h1 class="m-0">
-        {{ _typeDisplay }} <Favorite v-if="isExplorer" :resource="favoriteResource || resource" />
+        {{ _typeDisplay }} <Favorite
+          v-if="isExplorer"
+          :resource="favoriteResource || resource"
+        />
       </h1>
       <ResourceLoadingIndicator
         v-if="showIncrementalLoadingIndicator"
@@ -180,8 +183,7 @@ export default {
     <div class="actions-container">
       <slot name="actions">
         <div class="actions">
-          <slot name="extraActions">
-          </slot>
+          <slot name="extraActions" />
 
           <slot name="createButton">
             <n-link

package/components/ResourceList/ResourceLoadingIndicator.vue

@@ -73,14 +73,20 @@ export default {
 </script>
 
 <template>
-  <div v-if="count && !haveAll" class="ml-10 resource-loading-indicator">
+  <div
+    v-if="count && !haveAll"
+    class="ml-10 resource-loading-indicator"
+  >
     <div class="inner">
       <div class="resource-loader">
         <div class="rl-bg">
           <i class="icon icon-spinner icon-spin" /><span>{{ t( 'resourceLoadingIndicator.loading' ) }} <span v-if="!indeterminate">{{ count }} / {{ total }}</span></span>
         </div>
       </div>
-      <div class="resource-loader" :style="{width}">
+      <div
+        class="resource-loader"
+        :style="{width}"
+      >
         <div class="rl-fg">
           <i class="icon icon-spinner icon-spin" /><span>{{ t( 'resourceLoadingIndicator.loading' ) }} <span v-if="!indeterminate">{{ count }} / {{ total }}</span></span>
         </div>

package/components/ResourceList/index.vue

@@ -89,17 +89,19 @@ export default {
       inStore,
       schema,
       hasListComponent,
-      showMasthead:      showMasthead === undefined ? true : showMasthead,
+      showMasthead:                     showMasthead === undefined ? true : showMasthead,
       resource,
       // manual refresh
-      manualRefreshInit: false,
-      watch:             false,
-      force:             false,
+      manualRefreshInit:                false,
+      watch:                            false,
+      force:                            false,
       // Provided by fetch later
-      customTypeDisplay: null,
+      customTypeDisplay:                null,
       // incremental loading
-      loadResources:     [resource],
-      loadIndeterminate: false,
+      loadResources:                    [resource],
+      loadIndeterminate:                false,
+      // query param for simple filtering
+      useQueryParamsForSimpleFiltering: true
     };
   },
 
@@ -149,7 +151,7 @@ export default {
       :load-indeterminate="loadIndeterminate"
     >
       <template slot="extraActions">
-        <slot name="extraActions"></slot>
+        <slot name="extraActions" />
       </template>
     </Masthead>
     <div v-if="hasListComponent">
@@ -170,6 +172,7 @@ export default {
       :has-advanced-filtering="hasAdvancedFiltering"
       :adv-filter-hide-labels-as-cols="advFilterHideLabelsAsCols"
       :adv-filter-prevent-filtering-labels="advFilterPreventFilteringLabels"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     />
   </div>
 </template>

package/components/ResourceSummary.vue

@@ -112,16 +112,26 @@ export default {
 
 <template>
   <div>
-    <SimpleBox class="container" :class="{'has-link': !!location}" @click="goToResource">
+    <SimpleBox
+      class="container"
+      :class="{'has-link': !!location}"
+      @click="goToResource"
+    >
       <h1>{{ resourceCounts.total }}</h1>
       <h3>
         {{ name }}
       </h3>
       <div class="warnings">
-        <div v-if="resourceCounts.warningCount" class="warn-count mb-10 chip">
+        <div
+          v-if="resourceCounts.warningCount"
+          class="warn-count mb-10 chip"
+        >
           {{ resourceCounts.warningCount }}
         </div>
-        <div v-if="resourceCounts.errorCount" class="error-count chip">
+        <div
+          v-if="resourceCounts.errorCount"
+          class="error-count chip"
+        >
           {{ resourceCounts.errorCount }}
         </div>
       </div>

package/components/ResourceTable.vue

@@ -134,6 +134,13 @@ export default {
       type:    Boolean,
       default: false
     },
+    /**
+     * Allows for the usage of a query param to work for simple filtering (q)
+     */
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
   },
 
   data() {
@@ -398,34 +405,75 @@ export default {
     :adv-filter-prevent-filtering-labels="advFilterPreventFilteringLabels"
     key-field="_key"
     :sort-generation-fn="safeSortGenerationFn"
+    :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     @clickedActionButton="handleActionButtonClick"
     @group-value-change="group = $event"
     v-on="$listeners"
   >
-    <template v-if="showGrouping" #header-middle>
+    <template
+      v-if="showGrouping"
+      #header-middle
+    >
       <slot name="more-header-middle" />
-      <ButtonGroup v-model="group" :options="groupOptions" />
+      <ButtonGroup
+        v-model="group"
+        :options="groupOptions"
+      />
     </template>
 
-    <template v-if="showGrouping" #header-right>
+    <template
+      v-if="showGrouping"
+      #header-right
+    >
       <slot name="header-right" />
     </template>
 
     <template #group-by="{group: thisGroup}">
-      <div class="group-tab" v-html="thisGroup.ref" />
+      <div
+        class="group-tab"
+        v-html="thisGroup.ref"
+      />
     </template>
 
     <!-- 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 #shortkeys>
-      <button v-shortkey.once="['enter']" class="hide detail" @shortkey="keyAction('detail')" />
-      <button v-shortkey.once="['e']" class="hide" @shortkey="keyAction('edit')" />
-      <button v-shortkey.once="['y']" class="hide" @shortkey="keyAction('yaml')" />
-      <button v-if="_showBulkActions" v-shortkey.once="['del']" class="hide" @shortkey="keyAction('remove')" />
-      <button v-if="_showBulkActions" v-shortkey.once="['backspace']" class="hide" @shortkey="keyAction('remove')" />
+      <button
+        v-shortkey.once="['enter']"
+        class="hide detail"
+        @shortkey="keyAction('detail')"
+      />
+      <button
+        v-shortkey.once="['e']"
+        class="hide"
+        @shortkey="keyAction('edit')"
+      />
+      <button
+        v-shortkey.once="['y']"
+        class="hide"
+        @shortkey="keyAction('yaml')"
+      />
+      <button
+        v-if="_showBulkActions"
+        v-shortkey.once="['del']"
+        class="hide"
+        @shortkey="keyAction('remove')"
+      />
+      <button
+        v-if="_showBulkActions"
+        v-shortkey.once="['backspace']"
+        class="hide"
+        @shortkey="keyAction('remove')"
+      />
     </template>
   </SortableTable>
 </template>

package/components/ResourceYaml.vue

@@ -365,14 +365,20 @@ export default {
         @save="save"
         @done="done"
       >
-        <template v-if="!isView" #left>
+        <template
+          v-if="!isView"
+          #left
+        >
           <FileSelector
             class="btn role-secondary"
             :label="t('generic.readFromFile')"
             @selected="onFileSelected"
           />
         </template>
-        <template v-if="!isView" #middle>
+        <template
+          v-if="!isView"
+          #middle
+        >
           <button
             v-if="showPreview"
             type="button"

package/components/RoleBindings.vue

@@ -381,7 +381,12 @@ export default {
     />
   </div>
   <div v-else>
-    <div v-for="(row, idx) in unremovedRows" :key="idx" class="role-row" :class="{[mode]: true}">
+    <div
+      v-for="(row, idx) in unremovedRows"
+      :key="idx"
+      class="role-row"
+      :class="{[mode]: true}"
+    >
       <div class="subject">
         <LabeledSelect
           v-model="row.subject"
@@ -403,11 +408,23 @@ export default {
         />
       </div>
       <div class="remove">
-        <button v-t="'generic.remove'" :disabled="isView" type="button" class="btn role-link" @click="remove(row)" />
+        <button
+          v-t="'generic.remove'"
+          :disabled="isView"
+          type="button"
+          class="btn role-link"
+          @click="remove(row)"
+        />
       </div>
     </div>
     <div>
-      <button v-t="'rbac.roleBinding.add'" :disabled="isView" type="button" class="btn role-tertiary add" @click="add()" />
+      <button
+        v-t="'rbac.roleBinding.add'"
+        :disabled="isView"
+        type="button"
+        class="btn role-tertiary add"
+        @click="add()"
+      />
     </div>
   </div>
 </template>

package/components/SelectIconGrid.vue

@@ -94,7 +94,10 @@ export default {
 </script>
 
 <template>
-  <div v-if="rows.length" class="grid">
+  <div
+    v-if="rows.length"
+    class="grid"
+  >
     <div
       :is="asLink ? 'a' : 'div'"
       v-for="(r, idx) in rows"
@@ -110,7 +113,10 @@ export default {
       }"
       @click="select(r, idx)"
     >
-      <div class="side-label" :class="{'indicator': true }" />
+      <div
+        class="side-label"
+        :class="{'indicator': true }"
+      />
       <div v-if="r.deploysOnWindows">
         <label class="deploys-os-label">
           {{ t('catalog.charts.deploysOnWindows') }}
@@ -121,23 +127,39 @@ export default {
           {{ t('catalog.charts.windowsIncompatible') }}
         </label>
       </div>
-      <div v-if="get(r, sideLabelField)" class="side-label" :class="{'indicator': false }">
+      <div
+        v-if="get(r, sideLabelField)"
+        class="side-label"
+        :class="{'indicator': false }"
+      >
         <label>{{ get(r, sideLabelField) }}</label>
       </div>
 
       <div class="logo">
-        <i v-if="r.iconClass" :class="r.iconClass" />
-        <LazyImage v-else :src="get(r, iconField)" />
+        <i
+          v-if="r.iconClass"
+          :class="r.iconClass"
+        />
+        <LazyImage
+          v-else
+          :src="get(r, iconField)"
+        />
       </div>
       <h4 class="name">
         {{ get(r, nameField) }}
       </h4>
-      <div v-if="get(r, descriptionField)" class="description">
+      <div
+        v-if="get(r, descriptionField)"
+        class="description"
+      >
         {{ get(r, descriptionField) }}
       </div>
     </div>
   </div>
-  <div v-else class="m-50 text-center">
+  <div
+    v-else
+    class="m-50 text-center"
+  >
     <h1 v-t="noDataKey" />
   </div>
 </template>

package/components/SimpleBox.vue

@@ -28,14 +28,25 @@ export default {
 </script>
 
 <template>
-  <div v-if="shown" class="simple-box" v-on="$listeners">
-    <div v-if="title || canClose || $slots.title" class="top">
+  <div
+    v-if="shown"
+    class="simple-box"
+    v-on="$listeners"
+  >
+    <div
+      v-if="title || canClose || $slots.title"
+      class="top"
+    >
       <slot name="title">
         <h2 v-if="title">
           {{ title }}
         </h2>
       </slot>
-      <div v-if="canClose || pref" class="close-button" @click="closeBox($event)">
+      <div
+        v-if="canClose || pref"
+        class="close-button"
+        @click="closeBox($event)"
+      >
         <i class="icon icon-close" />
       </div>
     </div>

package/components/SingleClusterInfo.vue

@@ -87,39 +87,70 @@ export default {
 <template>
   <div v-if="clusterDetail">
     <div class="single-cluster-header">
-      <ClusterProviderIcon :cluster="clusterDetail" class="rancher-icon" width="32" />
+      <ClusterProviderIcon
+        :cluster="clusterDetail"
+        class="rancher-icon"
+        width="32"
+      />
       <h1>{{ t('glance.clusterInfo') }}</h1>
     </div>
 
     <div class="single-cluster-info">
       <div class="cluster-counts">
         <ResourceSummary :spoofed-counts="totalCountGaugeInput" />
-        <ResourceSummary v-if="canAccessNodes" :cluster="clusterDetail.id" resource="node" />
-        <ResourceSummary v-if="canAccessNamespaces" :cluster="clusterDetail.id" resource="namespace" />
+        <ResourceSummary
+          v-if="canAccessNodes"
+          :cluster="clusterDetail.id"
+          resource="node"
+        />
+        <ResourceSummary
+          v-if="canAccessNamespaces"
+          :cluster="clusterDetail.id"
+          resource="namespace"
+        />
       </div>
       <div class="glance-item">
         <label>{{ t('glance.provider') }}: </label>
         <span>{{ t(`cluster.provider.${ clusterDetail.status.provider || 'other' }`) }}</span>
       </div>
-      <div v-if="clusterDetail.kubernetesVersionRaw" class="glance-item">
+      <div
+        v-if="clusterDetail.kubernetesVersionRaw"
+        class="glance-item"
+      >
         <label>{{ t('glance.version') }}: </label>
-        <span v-if="clusterDetail.kubernetesVersionExtension" style="font-size: 0.5em">{{ clusterDetail.kubernetesVersionExtension }}</span>
+        <span
+          v-if="clusterDetail.kubernetesVersionExtension"
+          style="font-size: 0.5em"
+        >{{ clusterDetail.kubernetesVersionExtension }}</span>
         <span>{{ clusterDetail.kubernetesVersionBase }}</span>
       </div>
       <div class="glance-item">
         <label>{{ t('glance.created') }}: </label>
-        <span><LiveDate :value="clusterDetail.metadata.creationTimestamp" :add-suffix="true" :show-tooltip="true" /></span>
+        <span><LiveDate
+          :value="clusterDetail.metadata.creationTimestamp"
+          :add-suffix="true"
+          :show-tooltip="true"
+        /></span>
       </div>
       <div class="section">
         {{ t('generic.links') }}
       </div>
       <div class="glance-item">
-        <nuxt-link :to="exploreLink" class="cluster-link">
+        <nuxt-link
+          :to="exploreLink"
+          class="cluster-link"
+        >
           {{ t('nav.categories.explore') }}
         </nuxt-link>
       </div>
-      <div v-if="showClusterTools" class="glance-item">
-        <nuxt-link :to="clusterToolsLink" class="cluster-link">
+      <div
+        v-if="showClusterTools"
+        class="glance-item"
+      >
+        <nuxt-link
+          :to="clusterToolsLink"
+          class="cluster-link"
+        >
           {{ t('nav.clusterTools') }}
         </nuxt-link>
       </div>

package/components/SortableTable/THead.vue

@@ -199,7 +199,11 @@ export default {
 <template>
   <thead>
     <tr :class="{'loading': loading}">
-      <th v-if="tableActions" :width="checkWidth" align="middle">
+      <th
+        v-if="tableActions"
+        :width="checkWidth"
+        align="middle"
+      >
         <Checkbox
           v-model="isAll"
           class="check"
@@ -207,7 +211,10 @@ export default {
           :disabled="noRows || noResults"
         />
       </th>
-      <th v-if="subExpandColumn" :width="expandWidth"></th>
+      <th
+        v-if="subExpandColumn"
+        :width="expandWidth"
+      />
       <th
         v-for="col in columns"
         v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.isColVisible)"
@@ -221,7 +228,10 @@ export default {
           class="table-header-container"
           :class="{ 'not-filterable': hasAdvancedFiltering && !col.isFilter }"
         >
-          <span v-if="col.sort" v-tooltip="col.tooltip">
+          <span
+            v-if="col.sort"
+            v-tooltip="col.tooltip"
+          >
             <span v-html="labelFor(col)" />
             <i
               v-show="hasAdvancedFiltering && !col.isFilter"
@@ -230,11 +240,20 @@ export default {
             />
             <span class="icon-stack">
               <i class="icon icon-sort icon-stack-1x faded" />
-              <i v-if="isCurrent(col) && !descending" class="icon icon-sort-down icon-stack-1x" />
-              <i v-if="isCurrent(col) && descending" class="icon icon-sort-up icon-stack-1x" />
+              <i
+                v-if="isCurrent(col) && !descending"
+                class="icon icon-sort-down icon-stack-1x"
+              />
+              <i
+                v-if="isCurrent(col) && descending"
+                class="icon icon-sort-up icon-stack-1x"
+              />
             </span>
           </span>
-          <span v-else v-tooltip="col.tooltip">{{ labelFor(col) }}</span>
+          <span
+            v-else
+            v-tooltip="col.tooltip"
+          >{{ labelFor(col) }}</span>
         </div>
       </th>
       <th
@@ -298,8 +317,10 @@ export default {
           </div>
         </div>
       </th>
-      <th v-else-if="rowActions" :width="rowActionsWidth">
-      </th>
+      <th
+        v-else-if="rowActions"
+        :width="rowActionsWidth"
+      />
     </tr>
   </thead>
 </template>

package/components/SortableTable/filtering.js

@@ -215,6 +215,13 @@ function matches(fields, token, item) {
       continue;
     }
 
+    // some items might not even have metadata.labels or metadata.labels.something... ignore those items. Nothing to filter by
+    if (typeof field !== 'function' &&
+    field.includes(LABEL_IDENTIFIER) &&
+    (!item.metadata.labels || !item.metadata.labels[field.replace(LABEL_IDENTIFIER, '')])) {
+      continue;
+    }
+
     let modifier;
     let val;