@rancher/shell 0.3.0 → 0.3.1

package/pages/home.vue

@@ -40,6 +40,14 @@ export default {
   fetch() {
     this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
     this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
+
+    if ( this.$store.getters['management/canList'](CAPI.MACHINE) ) {
+      this.$store.dispatch('management/findAll', { type: CAPI.MACHINE });
+    }
+
+    if ( this.$store.getters['management/canList'](MANAGEMENT.NODE) ) {
+      this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
+    }
   },
 
   data() {
@@ -71,12 +79,30 @@ export default {
       return this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
     },
 
+    // User can go to Cluster Management if they can see the cluster schema
+    canManageClusters() {
+      const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
+
+      return !!schema;
+    },
+
     canCreateCluster() {
       const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
 
       return !!schema?.collectionMethods.find(x => x.toLowerCase() === 'post');
     },
 
+    manageLocation() {
+      return {
+        name:   'c-cluster-product-resource',
+        params: {
+          product:  MANAGER,
+          cluster:  BLANK_CLUSTER,
+          resource: CAPI.RANCHER_CLUSTER
+        },
+      };
+    },
+
     createLocation() {
       return {
         name:   'c-cluster-product-resource-create',
@@ -176,6 +202,12 @@ export default {
     markSeenReleaseNotes(this.$store);
   },
 
+  // Forget the types when we leave the page
+  beforeDestroy() {
+    this.$store.dispatch('management/forgetType', CAPI.MACHINE);
+    this.$store.dispatch('management/forgetType', MANAGEMENT.NODE);
+  },
+
   methods: {
     /**
      * Define actions for each navigation link
@@ -269,7 +301,9 @@ export default {
             data-testid="changelog-banner"
             color="info whats-new"
           >
-            <div>{{ t('landing.seeWhatsNew') }}</div>
+            <div>
+              {{ t('landing.seeWhatsNew') }}
+            </div>
             <a
               class="hand"
               @click.prevent.stop="showWhatsNew"
@@ -286,11 +320,13 @@ export default {
           >
             <div class="col span-12">
               <Banner
-                color="set-login-page"
+                color="set-login-page mt-0"
                 :closable="true"
                 @close="closeSetLoginBanner()"
               >
-                <div>{{ t('landing.landingPrefs.title') }}</div>
+                <div>
+                  {{ t('landing.landingPrefs.title') }}
+                </div>
                 <a
                   class="hand mr-20"
                   @click.prevent.stop="showUserPrefs"
@@ -324,19 +360,28 @@ export default {
                   </div>
                 </template>
                 <template
-                  v-if="canCreateCluster"
+                  v-if="canCreateCluster || canManageClusters"
                   #header-middle
                 >
                   <div class="table-heading">
                     <n-link
+                      v-if="canManageClusters"
+                      :to="manageLocation"
+                      class="btn btn-sm role-secondary"
+                    >
+                      {{ t('cluster.manageAction') }}
+                    </n-link>
+                    <n-link
+                      v-if="canCreateCluster"
                       :to="importLocation"
-                      class="btn role-primary"
+                      class="btn btn-sm role-primary"
                     >
                       {{ t('cluster.importAction') }}
                     </n-link>
                     <n-link
+                      v-if="canCreateCluster"
                       :to="createLocation"
-                      class="btn role-primary"
+                      class="btn btn-sm role-primary"
                     >
                       {{ t('generic.create') }}
                     </n-link>
@@ -344,15 +389,22 @@ export default {
                 </template>
                 <template #col:name="{row}">
                   <td>
-                    <span v-if="row.mgmt">
-                      <n-link
-                        v-if="row.mgmt.isReady && !row.hasError"
-                        :to="{ name: 'c-cluster-explorer', params: { cluster: row.mgmt.id }}"
-                      >
-                        {{ row.nameDisplay }}
-                      </n-link>
-                      <span v-else>{{ row.nameDisplay }}</span>
-                    </span>
+                    <div class="list-cluster-name">
+                      <span v-if="row.mgmt">
+                        <n-link
+                          v-if="row.mgmt.isReady && !row.hasError"
+                          :to="{ name: 'c-cluster-explorer', params: { cluster: row.mgmt.id }}"
+                        >
+                          {{ row.nameDisplay }}
+                        </n-link>
+                        <span v-else>{{ row.nameDisplay }}</span>
+                      </span>
+                      <i
+                        v-if="row.unavailableMachines"
+                        v-tooltip="row.unavailableMachines"
+                        class="conditions-alert-icon icon-alert icon"
+                      />
+                    </div>
                   </td>
                 </template>
                 <template #col:cpu="{row}">
@@ -410,19 +462,19 @@ export default {
     }
   }
 
-  .banner.info.whats-new, .banner.set-login-page {
-    border: 0;
-    margin-top: 0;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    > div {
-      flex: 1;
-    }
-    > a {
-      align-self: flex-end;
+  .set-login-page, .whats-new {
+    > ::v-deep .banner__content {
+      display: flex;
+
+      > div {
+        flex: 1;
+      }
+      > a {
+        align-self: flex-end;
+      }
     }
   }
+
   .banner.set-login-page {
     border: 1px solid var(--border);
   }
@@ -432,7 +484,7 @@ export default {
     height: 39px;
 
     & > a {
-      margin-left: 5px;
+      margin-left: 10px;
     }
   }
   .panel:not(:first-child) {
@@ -451,12 +503,35 @@ export default {
     display: contents;
     white-space: nowrap;
   }
+
+  .list-cluster-name {
+    align-items: center;
+    display: flex;
+
+    .conditions-alert-icon {
+      color: var(--error);
+      margin-left: 4px;
+    }
+  }
+
+  // Hide the side-panel showing links when the screen is small
+  @media screen and (max-width: 996px) {
+    .side-panel {
+      display: none;
+    }
+  }
 </style>
 <style lang="scss">
 .home-page {
-  .search > INPUT {
-    background-color: transparent;
-    padding: 8px;
+  .search {
+    align-items: center;
+    display: flex;
+
+    > INPUT {
+      background-color: transparent;
+      height: 30px;
+      padding: 8px;
+    }
   }
 
   h2 {

package/pages/prefs.vue

@@ -9,7 +9,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import LandingPagePreference from '@shell/components/LandingPagePreference';
 import {
   mapPref, THEME, KEYMAP, DATE_FORMAT, TIME_FORMAT, ROWS_PER_PAGE, HIDE_DESC, SHOW_PRE_RELEASE, MENU_MAX_CLUSTERS,
-  VIEW_IN_API, ALL_NAMESPACES, THEME_SHORTCUT, PLUGIN_DEVELOPER
+  VIEW_IN_API, ALL_NAMESPACES, THEME_SHORTCUT, PLUGIN_DEVELOPER, SCALE_POOL_PROMPT
 } from '@shell/store/prefs';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { addObject } from '@shell/utils/array';
@@ -25,17 +25,18 @@ export default {
     return { admin: isAdminUser(this.$store.getters) };
   },
   computed: {
-    keymap:          mapPref(KEYMAP),
-    viewInApi:       mapPref(VIEW_IN_API),
-    allNamespaces:   mapPref(ALL_NAMESPACES),
-    themeShortcut:   mapPref(THEME_SHORTCUT),
-    dateFormat:      mapPref(DATE_FORMAT),
-    timeFormat:      mapPref(TIME_FORMAT),
-    perPage:         mapPref(ROWS_PER_PAGE),
-    hideDesc:        mapPref(HIDE_DESC),
-    showPreRelease:  mapPref(SHOW_PRE_RELEASE),
-    menuMaxClusters: mapPref(MENU_MAX_CLUSTERS),
-    pluginDeveloper: mapPref(PLUGIN_DEVELOPER),
+    keymap:            mapPref(KEYMAP),
+    viewInApi:         mapPref(VIEW_IN_API),
+    allNamespaces:     mapPref(ALL_NAMESPACES),
+    themeShortcut:     mapPref(THEME_SHORTCUT),
+    dateFormat:        mapPref(DATE_FORMAT),
+    timeFormat:        mapPref(TIME_FORMAT),
+    perPage:           mapPref(ROWS_PER_PAGE),
+    hideDesc:          mapPref(HIDE_DESC),
+    showPreRelease:    mapPref(SHOW_PRE_RELEASE),
+    menuMaxClusters:   mapPref(MENU_MAX_CLUSTERS),
+    pluginDeveloper:   mapPref(PLUGIN_DEVELOPER),
+    scalingDownPrompt: mapPref(SCALE_POOL_PROMPT),
 
     ...mapGetters(['isSingleProduct']),
 
@@ -238,6 +239,16 @@ export default {
         </div>
       </div>
     </div>
+    <!-- Confirmation setting -->
+    <div class="col adv-features mt-10 mb-10">
+      <hr>
+      <h4 v-t="'prefs.confirmationSetting.title'" />
+      <Checkbox
+        v-model="scalingDownPrompt"
+        :label="t('prefs.confirmationSetting.scalingDownPrompt')"
+        class="mt-10"
+      />
+    </div>
     <!-- Advanced Features -->
     <div class="col adv-features mt-10 mb-10">
       <hr>

package/pages/rio/mesh.vue

@@ -408,7 +408,7 @@ export default {
 </script>
 <template>
   <div class="mesh">
-    <header class="header-layout">
+    <header>
       <h1>App Mesh</h1>
     </header>
 

package/pkg/dynamic-importer.lib.js

@@ -72,3 +72,11 @@ export function importWindowComponent(name) {
 export function resolveWindowComponent(key) {
   return undefined;
 }
+
+export function resolveMachineConfigComponent(key) {
+  return undefined;
+}
+
+export function resolveCloudCredentialComponent(key) {
+  return undefined;
+}

package/pkg/vue.config.js

@@ -45,14 +45,18 @@ module.exports = function(dir) {
     },
 
     configureWebpack: (config) => {
+      const pkgName = dir.replace(`${ path.dirname(dir) }/`, '');
+
       // Alias updates
       config.resolve.alias['@shell'] = path.join(dir, '.shell');
       config.resolve.alias['~shell'] = path.join(dir, '.shell');
       // This should be udpated once we move to rancher-components as a dependency
       config.resolve.alias['@components'] = COMPONENTS_DIR;
       config.resolve.alias['./node_modules'] = path.join(maindir, 'node_modules');
+      config.resolve.alias[`@pkg/${ pkgName }`] = dir;
       config.resolve.alias['@pkg'] = dir;
       config.resolve.alias['~pkg'] = dir;
+      config.resolve.alias['~'] = maindir;
       delete config.resolve.alias['@'];
 
       // Prevent the dynamic importer and the model-loader-require from importing anything dynamically - we don't want all of the