@rancher/shell 0.2.5 → 0.3.1

package/models/workload.js

@@ -7,6 +7,16 @@ import { convertSelectorObj, matching, matches } from '@shell/utils/selector';
 import { SEPARATOR } from '@shell/components/DetailTop';
 import WorkloadService from '@shell/models/workload.service';
 
+export const defaultContainer = {
+  imagePullPolicy: 'Always',
+  name:            'container-0',
+  securityContext: {
+    runAsNonRoot:             false,
+    readOnlyRootFilesystem:   false,
+    privileged:               false,
+    allowPrivilegeEscalation: false,
+  }
+};
 export default class Workload extends WorkloadService {
   // remove clone as yaml/edit as yaml until API supported
   get _availableActions() {
@@ -32,11 +42,11 @@ export default class Workload extends WorkloadService {
       });
 
       insertAt(out, 0, {
-        action:     'redeploy',
-        label:      this.t('action.redeploy'),
-        icon:       'icon icon-refresh',
-        enabled:    !!this.links.update,
-        bulkable:   true,
+        action:   'redeploy',
+        label:    this.t('action.redeploy'),
+        icon:     'icon icon-refresh',
+        enabled:  !!this.links.update,
+        bulkable: true,
       });
 
       insertAt(out, 0, {
@@ -57,11 +67,11 @@ export default class Workload extends WorkloadService {
     insertAt(out, 0, { divider: true }) ;
 
     insertAt(out, 0, {
-      action:     'openShell',
-      enabled:    !!this.links.view,
-      icon:       'icon icon-fw icon-chevron-right',
-      label:      this.t('action.openShell'),
-      total:      1,
+      action:  'openShell',
+      enabled: !!this.links.view,
+      icon:    'icon icon-fw icon-chevron-right',
+      label:   this.t('action.openShell'),
+      total:   1,
     });
 
     const toFilter = ['cloneYaml'];
@@ -98,7 +108,9 @@ export default class Workload extends WorkloadService {
       if (!spec.template) {
         spec.template = {
           spec: {
-            restartPolicy: this.type === WORKLOAD_TYPES.JOB ? 'Never' : 'Always', containers: [{ imagePullPolicy: 'Always', name: 'container-0' }], initContainers: []
+            restartPolicy:  this.type === WORKLOAD_TYPES.JOB ? 'Never' : 'Always',
+            containers:     [{ ...defaultContainer }],
+            initContainers: []
           }
         };
       }
@@ -109,14 +121,14 @@ export default class Workload extends WorkloadService {
     vm.$set(this, 'spec', spec);
   }
 
-  toggleRollbackModal( resources = this ) {
+  toggleRollbackModal( workload = this ) {
     this.$dispatch('promptModal', {
-      resources,
-      component: 'RollbackWorkloadDialog'
+      componentProps: { workload },
+      component:      'RollbackWorkloadDialog'
     });
   }
 
-  async rollBackWorkload( cluster, workload, rollbackRequestData ) {
+  async rollBackWorkload( cluster, workload, type, rollbackRequestData ) {
     const rollbackRequestBody = JSON.stringify(rollbackRequestData);
 
     if ( Array.isArray( workload ) ) {
@@ -125,8 +137,15 @@ export default class Workload extends WorkloadService {
     const namespace = workload.metadata.namespace;
     const workloadName = workload.metadata.name;
 
-    // Ensure we go out to the correct cluster
-    await this.patch(rollbackRequestBody, { url: `/k8s/clusters/${ cluster.id }/apis/apps/v1/namespaces/${ namespace }/deployments/${ workloadName }` });
+    /**
+     * Ensure we go out to the correct cluster
+     *
+     * Build the request body in the same format that kubectl
+     * uses to call the Kubernetes API to roll back a workload.
+     * To see an example request body, run:
+     * kubectl rollout undo deployment/[deployment name] --to-revision=[revision number] -v=8
+     */
+    await this.patch(rollbackRequestBody, { url: `/k8s/clusters/${ cluster.id }/apis/apps/v1/namespaces/${ namespace }/${ type }/${ workloadName }` });
   }
 
   pause() {
@@ -221,17 +240,17 @@ export default class Workload extends WorkloadService {
         type:           'subDomain',
       },
       {
-        nullable:       false,
-        path:           'spec',
-        required:       true,
-        type:           'object',
-        validators:     ['containerImages'],
+        nullable:   false,
+        path:       'spec',
+        required:   true,
+        type:       'object',
+        validators: ['containerImages'],
       },
       {
-        nullable:       true,
-        path:           `${ podSpecPath }.affinity`,
-        type:           'object',
-        validators:     ['podAffinity'],
+        nullable:   true,
+        path:       `${ podSpecPath }.affinity`,
+        type:       'object',
+        validators: ['podAffinity'],
       }
     ];
 
@@ -311,22 +330,22 @@ export default class Workload extends WorkloadService {
     const type = this._type ? this._type : this.type;
 
     const detailItem = {
-      endpoint:  {
+      endpoint: {
         label:     'Endpoints',
         content:   this.endpoint,
         formatter: 'WorkloadDetailEndpoints'
       },
-      ready:     {
-        label:     'Ready',
-        content:   this.ready
+      ready: {
+        label:   'Ready',
+        content: this.ready
       },
-      upToDate:  {
-        label:     'Up-to-date',
-        content:   this.upToDate
+      upToDate: {
+        label:   'Up-to-date',
+        content: this.upToDate
       },
       available: {
-        label:     'Available',
-        content:   this.available
+        label:   'Available',
+        content: this.available
       }
     };
 
@@ -610,6 +629,18 @@ export default class Workload extends WorkloadService {
     return out;
   }
 
+  get currentRevisionNumber() {
+    if (this.ownedByWorkload || this.kind === 'Job' || this.kind === 'CronJob') {
+      return undefined;
+    }
+    if (this.kind === 'Deployment') {
+      return this.metadata.annotations['deployment.kubernetes.io/revision'];
+    }
+
+    // 'DaemonSet', 'StatefulSet'
+    return this.metadata.generation;
+  }
+
   async matchingPods() {
     const all = await this.$dispatch('findAll', { type: POD });
     const allInNamespace = all.filter(pod => pod.metadata.namespace === this.metadata.namespace);

package/nuxt.config.js

@@ -22,23 +22,22 @@ export const API_PATH = api;
 
 const dev = (process.env.NODE_ENV !== 'production');
 const devPorts = dev || process.env.DEV_PORTS === 'true';
-const version = process.env.VERSION ||
-  process.env.DRONE_TAG ||
-  process.env.DRONE_VERSION ||
-  require('./package.json').version;
+
+// human readable version used on rancher dashboard about page
+const dashboardVersion = process.env.DASHBOARD_VERSION;
 
 const prime = process.env.PRIME;
 
 const pl = process.env.PL || STANDARD;
-const commit = process.env.COMMIT || 'head';
 const perfTest = (process.env.PERF_TEST === 'true'); // Enable performance testing when in dev
+const instrumentCode = (process.env.TEST_INSTRUMENT === 'true'); //  Instrument code for code coverage in e2e tests
 
 // Allow skipping of eslint check
 // 0 = Skip browser and console checks
 // 1 = Skip browser check
 // 2 = Do not skip any checks
 const skipEsLintCheckStr = (process.env.SKIP_ESLINT || '');
-const skipEsLintCheck = parseInt(skipEsLintCheckStr, 10) || 2;
+let skipEsLintCheck = parseInt(skipEsLintCheckStr, 10) || 2;
 
 // ===============================================================================================
 // Nuxt configuration
@@ -55,6 +54,21 @@ export default function(dir, _appConfig) {
   let COMPONENTS_DIR = path.join(SHELL_ABS, 'rancher-components');
   let typescript = {};
 
+  if (fs.existsSync(SHELL_ABS)) {
+    const stat = fs.lstatSync(SHELL_ABS);
+
+    // If @rancher/shell is a symlink, then use the components folder for it
+    if (stat.isSymbolicLink()) {
+      const REAL_SHELL_ABS = fs.realpathSync(SHELL_ABS); // In case the shell is being linked via 'yarn link'
+
+      COMPONENTS_DIR = path.join(REAL_SHELL_ABS, '..', 'pkg', 'rancher-components', 'src', 'components');
+
+      // For now, skip eslint check when being linked via yarn link - pkg folder is linked otherwise
+      // This will change when we remove nuxt
+      skipEsLintCheck = true;
+    }
+  }
+
   // If we have a local folder named 'shell' then use that rather than the one in node_modules
   // This will be the case in the main dashboard repository.
   if (fs.existsSync(path.join(dir, 'shell'))) {
@@ -69,8 +83,21 @@ export default function(dir, _appConfig) {
     }
   }
 
+  // Instrument code for tests
+  const babelPlugins = [
+    // TODO: Browser support
+    // ['@babel/plugin-transform-modules-commonjs'],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }]
+  ];
+
+  if (instrumentCode) {
+    babelPlugins.push('babel-plugin-istanbul');
+
+    console.warn('Instrumenting code for coverage'); // eslint-disable-line no-console
+  }
+
   // ===============================================================================================
-  // Functions for the UI Pluginas
+  // Functions for the UI Plugins
   // ===============================================================================================
 
   const appConfig = _appConfig || {};
@@ -210,7 +237,11 @@ export default function(dir, _appConfig) {
 
     if (index !== -1 && (index + 1) < ctx.length) {
       const pkg = ctx[index + 1];
-      const p = path.resolve(dir, 'pkg', pkg, resource.request.substr(5));
+      let p = path.resolve(dir, 'pkg', pkg, resource.request.substr(5));
+
+      if (resource.request.startsWith(`@pkg/${ pkg }`)) {
+        p = path.resolve(dir, 'pkg', resource.request.substr(5));
+      }
 
       resource.request = p;
     }
@@ -251,7 +282,7 @@ export default function(dir, _appConfig) {
   console.log(`Build: ${ dev ? 'Development' : 'Production' }`); // eslint-disable-line no-console
 
   if ( !dev ) {
-    console.log(`Version: ${ version } (${ commit })`); // eslint-disable-line no-console
+    console.log(`Version: ${ dashboardVersion }`); // eslint-disable-line no-console
   }
 
   if ( resourceBase ) {
@@ -290,8 +321,6 @@ export default function(dir, _appConfig) {
 
     // Configuration visible to the client, https://nuxtjs.org/api/configuration-env
     env: {
-      commit,
-      version,
       dev,
       pl,
       perfTest,
@@ -300,7 +329,8 @@ export default function(dir, _appConfig) {
       api
     },
 
-    publicRuntimeConfig: { rancherEnv },
+    // vars accessible via this.$config https://nuxtjs.org/docs/configuration-glossary/configuration-runtime-config/
+    publicRuntimeConfig: { rancherEnv, dashboardVersion },
 
     buildDir: dev ? '.nuxt' : '.nuxt-prod',
 
@@ -324,9 +354,9 @@ export default function(dir, _appConfig) {
 
     // Axios: https://axios.nuxtjs.org/options
     axios: {
-      https:          true,
-      proxy:          true,
-      retry:          { retries: 0 },
+      https: true,
+      proxy: true,
+      retry: { retries: 0 },
       // debug:   true
     },
 
@@ -356,12 +386,12 @@ export default function(dir, _appConfig) {
     ],
 
     dir: {
-      assets:     path.join(SHELL, 'assets'),
-      layouts:    path.join(SHELL, 'layouts'),
-      middleware: path.join(SHELL, 'middleware'),
-      pages:      path.join(SHELL, 'pages'),
-      static:     path.join(SHELL, 'static'),
-      store:      path.join(SHELL, 'store'),
+      assets:     path.posix.join(SHELL, 'assets'),
+      layouts:    path.posix.join(SHELL, 'layouts'),
+      middleware: path.posix.join(SHELL, 'middleware'),
+      pages:      path.posix.join(SHELL, 'pages'),
+      static:     path.posix.join(SHELL, 'static'),
+      store:      path.posix.join(SHELL, 'store'),
     },
 
     watchers: { webpack: { ignore: watcherIgnores } },
@@ -456,7 +486,7 @@ export default function(dir, _appConfig) {
 
         // And substitute our own loader for images
         config.module.rules.unshift({
-          test:    /\.(png|jpe?g|gif|svg|webp)$/,
+          test: /\.(png|jpe?g|gif|svg|webp)$/,
           use:  [
             {
               loader:  'url-loader',
@@ -496,7 +526,7 @@ export default function(dir, _appConfig) {
 
         // Prevent warning in log with the md files in the content folder
         config.module.rules.push({
-          test:    /\.md$/,
+          test: /\.md$/,
           use:  [
             {
               loader:  'frontmatter-markdown-loader',
@@ -515,20 +545,15 @@ export default function(dir, _appConfig) {
               require.resolve('@nuxt/babel-preset-app'),
               {
                 // buildTarget: isServer ? 'server' : 'client',
-                corejs:      { version: 3 },
-                targets:     isServer ? { node: '12' } : { browsers: ['last 2 versions'] },
-                modern:      !isServer
+                corejs:  { version: 3 },
+                targets: isServer ? { node: '12' } : { browsers: ['last 2 versions'] },
+                modern:  !isServer
               }
             ],
             '@babel/preset-typescript',
           ];
         },
-        plugins: [
-          // TODO: Browser support
-          // ['@babel/plugin-transform-modules-commonjs'],
-          ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
-          'babel-plugin-istanbul'
-        ],
+        plugins: babelPlugins
       }
     },
 
@@ -638,8 +663,8 @@ export default function(dir, _appConfig) {
         key:  fs.readFileSync(path.resolve(dir, SHELL, 'server/server.key')),
         cert: fs.readFileSync(path.resolve(dir, SHELL, 'server/server.crt'))
       } : null),
-      port:      (devPorts ? 8005 : 80),
-      host:      '0.0.0.0',
+      port: (devPorts ? 8005 : 80),
+      host: '0.0.0.0',
     },
 
     // Server middleware

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.2.5",
+  "version": "0.3.1",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -113,7 +113,7 @@
     "nyc": "15.1.0",
     "papaparse": "5.3.0",
     "portal-vue": "2.1.7",
-    "rancher-icons": "rancher/icons#v2.0.9",
+    "rancher-icons": "rancher/icons#v2.0.13",
     "require-extension-hooks": "0.3.3",
     "require-extension-hooks-babel": "1.0.0",
     "require-extension-hooks-vue": "3.0.0",
@@ -143,11 +143,11 @@
     "vuex": "3.6.2",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-virtual-modules": "0.4.3",
-    "xterm": "4.9.0",
-    "xterm-addon-fit": "0.4.0",
-    "xterm-addon-search": "0.7.0",
-    "xterm-addon-web-links": "0.4.0",
-    "xterm-addon-webgl": "0.9.0",
+    "xterm": "5.0.0",
+    "xterm-addon-fit": "0.6.0",
+    "xterm-addon-search": "0.10.0",
+    "xterm-addon-web-links": "0.7.0",
+    "xterm-addon-webgl": "0.13.0",
     "worker-loader": "3.0.8",
     "yarn": "1.22.18"
   },

package/pages/about.vue

@@ -16,11 +16,12 @@ export default {
   },
   data() {
     return {
-      settings: null,
+      dashboardVersion: this.$config.dashboardVersion,
+      settings:         null,
       SETTING
     };
   },
-  computed:   {
+  computed: {
     rancherVersion() {
       return this.settings.find(s => s.id === SETTING.VERSION_RANCHER);
     },
@@ -117,10 +118,21 @@ export default {
             target="_blank"
             rel="nofollow noopener noreferrer"
           >
-            {{ appName }}
+            {{ t("about.versions.rancher") }}
           </a>
         </td><td>{{ rancherVersion.value }}</td>
       </tr>
+      <tr v-if="dashboardVersion">
+        <td>
+          <a
+            href="https://github.com/rancher/dashboard"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
+            {{ t("generic.dashboard") }}
+          </a>
+        </td><td>{{ dashboardVersion }}</td>
+      </tr>
       <tr v-if="cliVersion">
         <td>
           <a

package/pages/account/index.vue

@@ -43,7 +43,7 @@ export default {
       canChangePassword: false
     };
   },
-  computed:   {
+  computed: {
     ...mapGetters({ t: 'i18n/t' }),
 
     apiKeyheaders() {

package/pages/auth/login.vue

@@ -116,8 +116,8 @@ export default {
       product: getProduct(),
 
       username,
-      remember:  !!username,
-      password:  '',
+      remember: !!username,
+      password: '',
 
       timedOut:  this.$route.query[TIMED_OUT] === _FLAGGED,
       loggedOut: this.$route.query[LOGGED_OUT] === _FLAGGED,
@@ -125,7 +125,7 @@ export default {
 
       providers:          [],
       providerComponents: [],
-      customLoginError:    {}
+      customLoginError:   {}
     };
   },
 
@@ -168,6 +168,10 @@ export default {
       return "kubectl get secret --namespace cattle-system bootstrap-secret -o go-template='{{.data.bootstrapPassword|base64decode}}{{\"\\n\"}}'";
     },
 
+    hasLoginMessage() {
+      return this.errorToDisplay || this.loggedOut || this.timedOut;
+    }
+
   },
 
   created() {
@@ -225,6 +229,10 @@ export default {
       }
     },
 
+    handleProviderError(err) {
+      this.err = err;
+    },
+
     async loginLocal(buttonCb) {
       try {
         await this.$store.dispatch('auth/login', {
@@ -290,10 +298,13 @@ export default {
         <p class="text-center">
           {{ t('login.howdy') }}
         </p>
-        <h1 class="text-center">
+        <h1 class="text-center login-welcome">
           {{ t('login.welcome', {vendor}) }}
         </h1>
-        <div class="login-messages">
+        <div
+          class="login-messages"
+          :class="{'login-messages--hasContent': hasLoginMessage}"
+        >
           <Banner
             v-if="errorToDisplay"
             :label="errorToDisplay"
@@ -372,7 +383,7 @@ export default {
 
         <div
           v-if="(!hasLocal || (hasLocal && !showLocal)) && providers.length"
-          class="mt-30"
+          :class="{'mt-30': !hasLoginMessage}"
         >
           <component
             :is="providerComponents[idx]"
@@ -383,12 +394,13 @@ export default {
             :name="name"
             :open="!showLocal"
             @showInputs="showLocal = false"
+            @error="handleProviderError"
           />
         </div>
         <template v-if="hasLocal">
           <form
             v-if="showLocal"
-            class="mt-40"
+            :class="{'mt-30': !hasLoginMessage}"
           >
             <div class="span-6 offset-3">
               <div class="mb-20">
@@ -490,6 +502,24 @@ export default {
       object-fit: cover;
     }
 
+    .login-welcome {
+      margin: 0
+    }
+
+    .login-messages {
+      align-items: center;
+
+      .banner {
+        margin: 5px;
+      }
+      h4 {
+        margin: 0;
+      }
+      &--hasContent {
+        min-height: 70px;
+      }
+    }
+
     .login-messages, .first-login-message {
       display: flex;
       justify-content: center;

package/pages/auth/setup.vue

@@ -144,18 +144,18 @@ export default {
 
     return {
       productName,
-      vendor:            getVendor(),
-      product:           getProduct(),
-      step:              parseInt(route.query.step, 10) || 1,
+      vendor:  getVendor(),
+      product: getProduct(),
+      step:    parseInt(route.query.step, 10) || 1,
 
-      useRandom:          true,
-      haveCurrent:        !!current,
-      username:           me?.loginName || 'admin',
+      useRandom:   true,
+      haveCurrent: !!current,
+      username:    me?.loginName || 'admin',
       isFirstLogin,
       mustChangePassword,
       current,
-      password:           randomStr(),
-      confirm:            '',
+      password:    randomStr(),
+      confirm:     '',
 
       v3User,
 
@@ -222,9 +222,9 @@ export default {
 
         if ( this.mustChangePassword ) {
           await this.$store.dispatch('rancher/request', {
-            url:           '/v3/users?action=changepassword',
-            method:        'post',
-            data:          {
+            url:    '/v3/users?action=changepassword',
+            method: 'post',
+            data:   {
               currentPassword: this.current,
               newPassword:     this.password
             },

package/pages/c/_cluster/_product/_resource/_id.vue

@@ -2,8 +2,8 @@
 import ResourceDetail from '@shell/components/ResourceDetail';
 
 export default {
-  name:        'ClusterResourcedId',
-  components:  { ResourceDetail },
+  name:       'ClusterResourcedId',
+  components: { ResourceDetail },
 };
 </script>
 

package/pages/c/_cluster/apps/charts/chart.vue

@@ -30,8 +30,8 @@ export default {
 
   data() {
     return {
-      showLastVersions:  10,
-      showMoreVersions:  false,
+      showLastVersions: 10,
+      showMoreVersions: false,
     };
   },
 
@@ -96,8 +96,8 @@ export default {
       this.$router.push({
         name:   'c-cluster-apps-charts-install',
         params: {
-          cluster:  this.$route.params.cluster,
-          product:  this.$store.getters['productId'],
+          cluster: this.$route.params.cluster,
+          product: this.$store.getters['productId'],
         },
         query: {
           [REPO_TYPE]: this.query.repoType,