@rancher/shell 0.3.1 → 0.3.2

package/pages/c/_cluster/explorer/index.vue

@@ -40,6 +40,9 @@ import { isEmpty } from '@shell/utils/object';
 import ConfigBadge from './ConfigBadge';
 import EventsTable from './EventsTable';
 import { fetchClusterResources } from './explorer-utils';
+import SimpleBox from '@shell/components/SimpleBox';
+import { ExtensionPoint, CardLocation } from '@shell/core/types';
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 
 export const RESOURCES = [NAMESPACE, INGRESS, PV, WORKLOAD_TYPES.DEPLOYMENT, WORKLOAD_TYPES.STATEFUL_SET, WORKLOAD_TYPES.JOB, WORKLOAD_TYPES.DAEMON_SET, SERVICE];
 
@@ -71,6 +74,7 @@ export default {
     EmberPage,
     ConfigBadge,
     EventsTable,
+    SimpleBox,
   },
 
   mixins: [metricPoller],
@@ -126,6 +130,7 @@ export default {
       ETCD_METRICS_SUMMARY_URL,
       clusterCounts,
       selectedTab:        'cluster-events',
+      extensionCards:     getApplicableExtensionEnhancements(this, ExtensionPoint.CARD, CardLocation.CLUSTER_DASHBOARD_CARD, this.$route),
     };
   },
 
@@ -492,6 +497,27 @@ export default {
       />
     </div>
 
+    <!-- extension cards -->
+    <div
+      v-if="extensionCards.length"
+      class="extension-card-container mt-20"
+    >
+      <SimpleBox
+        v-for="item, i in extensionCards"
+        :key="`extensionCards${i}`"
+        class="extension-card"
+        :style="item.style"
+      >
+        <h3>
+          {{ item.label }}
+        </h3>
+        <component
+          :is="item.component"
+          :resource="currentCluster"
+        />
+      </SimpleBox>
+    </div>
+
     <h3
       v-if="!hasV1Monitoring && hasStats"
       class="mt-40"
@@ -631,6 +657,19 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.extension-card-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(calc((100%/3) - 40px), 1fr));
+  grid-column-gap: 15px;
+  grid-row-gap: 20px;
+}
+
+@media only screen and (max-width: map-get($breakpoints, "--viewport-9")) {
+  .extension-card-container {
+    grid-template-columns: 1fr !important;
+  }
+}
+
 .cluster-dashboard-glance {
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);

package/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue

@@ -181,12 +181,14 @@ export default {
         <div class="dialog-buttons mt-20">
           <button
             class="btn role-secondary"
+            data-testid="dev-install-ext-modal-cancel-btn"
             @click="closeDialog()"
           >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
             mode="load"
+            data-testid="dev-install-ext-modal-install-btn"
             @click="loadPlugin"
           />
         </div>

package/pages/c/_cluster/uiplugins/InstallDialog.vue

@@ -243,6 +243,7 @@ export default {
             label-key="plugins.install.version"
             :options="versionOptions"
             class="version-selector mt-10"
+            data-testid="install-ext-modal-select-version"
           />
           <div v-else>
             {{ t('plugins.install.version') }} {{ version }}
@@ -252,12 +253,14 @@ export default {
           <button
             :disabled="busy"
             class="btn role-secondary"
+            data-testid="install-ext-modal-cancel-btn"
             @click="closeDialog(false)"
           >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
             :mode="buttonMode"
+            data-testid="install-ext-modal-install-btn"
             @click="install"
           />
         </div>

package/pages/c/_cluster/uiplugins/PluginInfoPanel.vue

@@ -113,10 +113,12 @@ export default {
     <div
       v-if="showSlideIn"
       class="glass"
+      data-testid="extension-details-bg"
       @click="hide()"
     />
     <div
       class="slideIn"
+      data-testid="extension-details"
       :class="{'hide': false, 'slideIn__show': showSlideIn}"
     >
       <div
@@ -142,7 +144,10 @@ export default {
             >
           </div>
           <div class="plugin-title">
-            <h2 class="slideIn__header">
+            <h2
+              class="slideIn__header"
+              data-testid="extension-details-title"
+            >
               {{ info.name }}
             </h2>
             <p class="plugin-description">
@@ -153,6 +158,7 @@ export default {
             <div class="slideIn__header__buttons">
               <div
                 class="slideIn__header__button"
+                data-testid="extension-details-close"
                 @click="showSlideIn = false"
               >
                 <i class="icon icon-close" />
@@ -236,6 +242,7 @@ export default {
     position: fixed;
     top: 0;
     left: 0;
+    z-index: 1;
 
     $slideout-width: 35%;
     $title-height: 50px;

package/pages/c/_cluster/uiplugins/RemoveUIPlugins.vue

@@ -107,6 +107,7 @@ export default {
     name="confirm-uiplugins-remove"
     :title="t('plugins.setup.remove.title')"
     mode="disable"
+    data-testid="disable-ext-modal"
     @okay="doRemove"
   >
     <template>
@@ -121,6 +122,7 @@ export default {
           v-model="removeRepo"
           :primary="true"
           label-key="plugins.setup.remove.registry.title"
+          data-testid="disable-ext-modal-remove-repo"
         />
         <div class="checkbox-info">
           {{ t('plugins.setup.remove.registry.prompt') }}

package/pages/c/_cluster/uiplugins/SetupUIPlugins.vue

@@ -214,6 +214,7 @@ export default {
               :manual="true"
               :current-phase="buttonState"
               class="enable-plugin-support"
+              data-testid="extension-enable-operator"
               @click="enable"
             />
           </div>

package/pages/c/_cluster/uiplugins/UninstallDialog.vue

@@ -84,12 +84,14 @@ export default {
           <button
             :disabled="busy"
             class="btn role-secondary"
+            data-testid="uninstall-ext-modal-cancel-btn"
             @click="closeDialog(false)"
           >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
             mode="uninstall"
+            data-testid="uninstall-ext-modal-uninstall-btn"
             @click="uninstall()"
           />
         </div>

package/pages/c/_cluster/uiplugins/index.vue

@@ -492,10 +492,13 @@ export default {
 <template>
   <div class="plugins">
     <div class="plugin-header">
-      <h2>{{ t('plugins.title') }}</h2>
+      <h2 data-testid="extensions-page-title">
+        {{ t('plugins.title') }}
+      </h2>
       <div
         v-if="reloadRequired"
         class="plugin-reload-banner mr-20"
+        data-testid="extension-reload-banner"
       >
         <i class="icon icon-checkmark mr-10" />
         <span>
@@ -503,6 +506,7 @@ export default {
         </span>
         <button
           class="ml-10 btn btn-sm role-primary"
+          data-testid="extension-reload-banner-reload-btn"
           @click="reload()"
         >
           {{ t('generic.reload') }}
@@ -514,6 +518,7 @@ export default {
         aria-haspopup="true"
         type="button"
         class="btn actions role-secondary"
+        data-testid="extensions-page-menu"
         @click="setMenu"
       >
         <i class="icon icon-actions" />
@@ -555,15 +560,18 @@ export default {
       <Tabbed
         ref="tabs"
         :tabs-only="true"
+        data-testid="extension-tabs"
         @changed="filterChanged"
       >
         <Tab
           name="installed"
+          data-testid="extension-tab-installed"
           label-key="plugins.tabs.installed"
           :weight="20"
         />
         <Tab
           name="available"
+          data-testid="extension-tab-available"
           label-key="plugins.tabs.available"
           :weight="19"
         />
@@ -606,6 +614,7 @@ export default {
             v-for="plugin in list"
             :key="plugin.name"
             class="plugin"
+            :data-testid="`extension-card-${plugin.name}`"
             @click="showPluginDetail(plugin)"
           >
             <div
@@ -709,6 +718,7 @@ export default {
                   <button
                     v-if="!plugin.builtin"
                     class="btn role-secondary"
+                    :data-testid="`extension-card-uninstall-btn-${plugin.name}`"
                     @click="showUninstallDialog(plugin, $event)"
                   >
                     {{ t('plugins.uninstall.label') }}
@@ -716,6 +726,7 @@ export default {
                   <button
                     v-if="plugin.upgrade"
                     class="btn role-secondary"
+                    :data-testid="`extension-card-update-btn-${plugin.name}`"
                     @click="showInstallDialog(plugin, 'update', $event)"
                   >
                     {{ t('plugins.update.label') }}
@@ -723,6 +734,7 @@ export default {
                   <button
                     v-if="!plugin.upgrade && plugin.versions.length > 1"
                     class="btn role-secondary"
+                    :data-testid="`extension-card-rollback-btn-${plugin.name}`"
                     @click="showInstallDialog(plugin, 'rollback', $event)"
                   >
                     {{ t('plugins.rollback.label') }}
@@ -734,6 +746,7 @@ export default {
                 >
                   <button
                     class="btn role-secondary"
+                    :data-testid="`extension-card-install-btn-${plugin.name}`"
                     @click="showInstallDialog(plugin, 'install', $event)"
                   >
                     {{ t('plugins.install.label') }}

package/plugins/dashboard-store/resource-class.js

@@ -37,6 +37,9 @@ import Vue from 'vue';
 
 import { normalizeType } from './normalize';
 
+import { ExtensionPoint, ActionLocation } from '@shell/core/types';
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
+
 const STRING_LIKE_TYPES = [
   'string',
   'date',
@@ -851,7 +854,11 @@ export default class Resource {
 
   // You can add custom actions by overriding your own availableActions (and probably reading super._availableActions)
   get _availableActions() {
-    const all = [
+    // get menu actions available by plugins configuration
+    const currentRoute = this.currentRouter().app._route;
+    const extensionMenuActions = getApplicableExtensionEnhancements(this.$rootState, ExtensionPoint.ACTION, ActionLocation.TABLE, currentRoute, this);
+
+    let all = [
       { divider: true },
       {
         action:  this.canUpdate ? 'goToEdit' : 'goToViewConfig',
@@ -899,6 +906,13 @@ export default class Resource {
       },
     ];
 
+    // Extension actions get added to the end, so add a divider if there are any
+    if (extensionMenuActions.length) {
+      // Add a divider first
+      all.push({ divider: true });
+      all = all.concat(extensionMenuActions);
+    }
+
     return all;
   }
 
@@ -1051,6 +1065,7 @@ export default class Resource {
   async _save(opt = {}) {
     delete this.__rehydrate;
     delete this.__clone;
+
     const forNew = !this.id;
 
     const errors = await this.validationErrors(this, opt.ignoreFields);

package/rancher-components/components/Banner/Banner.vue

@@ -121,6 +121,7 @@ $icon-size: 24px;
   margin: 15px 0;
   position: relative;
   width: 100%;
+  color: var(--body-text);
 
   &__icon {
     width: $icon-size * 2;

package/store/action-menu.js

@@ -22,9 +22,10 @@ export const state = function() {
 };
 
 export const getters = {
-  showing: state => state.show,
-  elem:    state => state.elem,
-  event:   state => state.event,
+  showing:   state => state.show,
+  elem:      state => state.elem,
+  event:     state => state.event,
+  resources: state => state.resources,
 
   options(state) {
     let selected = state.resources;

package/store/type-map.js

@@ -148,6 +148,8 @@ import { sortBy } from '@shell/utils/sort';
 import { haveV1Monitoring, haveV2Monitoring } from '@shell/utils/monitoring';
 import { NEU_VECTOR_NAMESPACE } from '@shell/config/product/neuvector';
 
+import { ExtensionPoint, TableColumnLocation } from '@shell/core/types';
+
 export const NAMESPACED = 'namespaced';
 export const CLUSTER_LEVEL = 'cluster';
 export const BOTH = 'both';
@@ -222,6 +224,30 @@ export function DSL(store, product, module = 'type-map') {
     },
 
     headers(type, headers) {
+      const extensionCols = store.$plugin.getUIConfig(ExtensionPoint.TABLE_COL, TableColumnLocation.RESOURCE);
+
+      // Try and insert the columns before the Age column, if that is the last column
+      let insertPosition = headers.length;
+
+      if (headers.length > 0) {
+        const lastColumn = headers[headers.length - 1];
+
+        if (lastColumn?.name === AGE.name) {
+          insertPosition--;
+        }
+      }
+
+      // adding extension defined cols to the correct header config
+      extensionCols.forEach((col) => {
+        if (col.locationConfig.resource) {
+          col.locationConfig.resource.forEach((resource) => {
+            if (resource && type === resource) {
+              headers.splice(insertPosition, 0, col);
+            }
+          });
+        }
+      });
+
       headers.forEach((header) => {
         // If on the client, then use the value getter if there is one
         if (header.getValue) {

package/types/shell/index.d.ts

@@ -47,6 +47,7 @@ export const MODE: "mode";
 export const _CREATE: "create";
 export const _VIEW: "view";
 export const _EDIT: "edit";
+export const _LIST: "list";
 export const _CLONE: "clone";
 export const _STAGE: "stage";
 export const _IMPORT: "import";