@rancher/shell 0.2.5 → 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

@@ -340,10 +340,10 @@ export default {
         const weight = Math.floor(4 * (edge.stats.rps - min) / (max - min)) + 1;
 
         g.setEdge(fromId(edge), toId(edge), {
-          arrowhead:       'smaller',
-          arrowheadClass:  'arrowhead',
-          class:           `weight${ weight }`,
-          curve:           this.d3.curveBasis,
+          arrowhead:      'smaller',
+          arrowheadClass: 'arrowhead',
+          class:          `weight${ weight }`,
+          curve:          this.d3.curveBasis,
           weight,
         });
       }
@@ -408,7 +408,7 @@ export default {
 </script>
 <template>
   <div class="mesh">
-    <header class="header-layout">
+    <header>
       <h1>App Mesh</h1>
     </header>
 

package/pages/support/index.vue

@@ -51,13 +51,13 @@ export default {
 
   data() {
     return {
-      apps:                 [],
-      vendor:               getVendor(),
-      supportKey:           '',
-      brandSetting:         null,
-      uiIssuesSetting:      null,
-      serverSetting:        null,
-      promos:               [
+      apps:            [],
+      vendor:          getVendor(),
+      supportKey:      '',
+      brandSetting:    null,
+      uiIssuesSetting: null,
+      serverSetting:   null,
+      promos:          [
         'support.promos.one',
         'support.promos.two',
         'support.promos.three',

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

@@ -11,6 +11,15 @@ module.exports = function(dir) {
   const SHELL = path.join(dir, '.shell');
   let COMPONENTS_DIR = path.join(SHELL, 'rancher-components');
 
+  const stat = fs.lstatSync(SHELL);
+
+  // If @rancher/shell is a symlink, then use the components folder for it
+  if (stat.isSymbolicLink() && !fs.existsSync(COMPONENTS_DIR)) {
+    const REAL_SHELL = fs.realpathSync(SHELL);
+
+    COMPONENTS_DIR = path.join(REAL_SHELL, '..', 'pkg', 'rancher-components', 'src', 'components');
+  }
+
   if (fs.existsSync(path.join(maindir, 'shell'))) {
     COMPONENTS_DIR = path.join(maindir, 'pkg', 'rancher-components', 'src', 'components');
   }
@@ -36,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
@@ -76,7 +89,7 @@ module.exports = function(dir) {
 
       // Prevent warning in log with the md files in the content folder
       config.module.rules.push({
-        test:    /\.md$/,
+        test: /\.md$/,
         use:  [
           {
             loader:  'url-loader',