@rancher/shell 0.1.2 → 0.1.4

package/nuxt.config.js

@@ -141,16 +141,16 @@ export default function(dir, _appConfig) {
       // Package file must have rancher field to be a plugin
       if (includePkg(name) && f.rancher) {
         reqs += `$plugin.initPlugin('${ name }', require(\'~/pkg/${ name }\')); `;
-      }
 
-      // // Serve the code for the UI package in case its used for dynamic loading (but not if the same package was provided in node_modules)
-      // if (!nmPackages[name]) {
-      //   const pkgPackageFile = require(path.join(dir, 'pkg', name, 'package.json'));
-      //   const pkgRef = `${ name }-${ pkgPackageFile.version }`;
+        // // Serve the code for the UI package in case its used for dynamic loading (but not if the same package was provided in node_modules)
+        // if (!nmPackages[name]) {
+        //   const pkgPackageFile = require(path.join(dir, 'pkg', name, 'package.json'));
+        //   const pkgRef = `${ name }-${ pkgPackageFile.version }`;
 
-      //   serverMiddleware.push({ path: `/pkg/${ pkgRef }`, handler: serveStatic(`${ dir }/dist-pkg/${ pkgRef }`) });
-      // }
-      autoImportTypes[`@rancher/auto-import/${ name }`] = generateDynamicTypeImport(`@pkg/${ name }`, path.join(dir, `pkg/${ name }`));
+        //   serverMiddleware.push({ path: `/pkg/${ pkgRef }`, handler: serveStatic(`${ dir }/dist-pkg/${ pkgRef }`) });
+        // }
+        autoImportTypes[`@rancher/auto-import/${ name }`] = generateDynamicTypeImport(`@pkg/${ name }`, path.join(dir, `pkg/${ name }`));
+      }
     });
   }
 
@@ -185,8 +185,6 @@ export default function(dir, _appConfig) {
 
   // Serve up the dist-pkg folder under /pkg
   serverMiddleware.push({ path: `/pkg/`, handler: serveStatic(`${ dir }/dist-pkg/`) });
-  // Endpoint to download and unpack a tgz from the local verdaccio rgistry (dev)
-  serverMiddleware.push(path.resolve(dir, SHELL, 'server', 'verdaccio-middleware'));
   // Add the standard dashboard server middleware after the middleware added to serve up UI packages
   serverMiddleware.push(path.resolve(dir, SHELL, 'server', 'server-middleware'));
 
@@ -202,6 +200,8 @@ export default function(dir, _appConfig) {
     process.env.DRONE_VERSION ||
     require('./package.json').version;
 
+  const prime = process.env.PRIME;
+
   const dev = (process.env.NODE_ENV !== 'production');
   const devPorts = dev || process.env.DEV_PORTS === 'true';
   const pl = process.env.PL || STANDARD;
@@ -265,7 +265,9 @@ export default function(dir, _appConfig) {
       dev,
       pl,
       perfTest,
-      rancherEnv
+      rancherEnv,
+      harvesterPkgUrl: process.env.HARVESTER_PKG_URL,
+      api
     },
 
     publicRuntimeConfig: { rancherEnv },
@@ -494,7 +496,8 @@ export default function(dir, _appConfig) {
         plugins: [
           // TODO: Browser support
           // ['@babel/plugin-transform-modules-commonjs'],
-          ['@babel/plugin-proposal-private-property-in-object', { loose: true }]
+          ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+          'babel-plugin-istanbul'
         ],
       }
     },
@@ -552,7 +555,7 @@ export default function(dir, _appConfig) {
     plugins: [
       // Extensions
       path.relative(dir, path.join(SHELL, 'core/plugins.js')),
-      path.relative(dir, path.join(SHELL, 'core/plugins-loader.js')),
+      path.relative(dir, path.join(SHELL, 'core/plugins-loader.js')), // Load builtin plugins
 
       // Third-party
       path.join(NUXT_SHELL, 'plugins/axios'),
@@ -576,33 +579,33 @@ export default function(dir, _appConfig) {
       { src: path.join(NUXT_SHELL, 'plugins/nuxt-client-init'), ssr: false },
       path.join(NUXT_SHELL, 'plugins/replaceall'),
       path.join(NUXT_SHELL, 'plugins/back-button'),
-      { src: path.join(NUXT_SHELL, 'plugins/plugin'), ssr: false },
+      { src: path.join(NUXT_SHELL, 'plugins/plugin'), ssr: false }, // Load dyanmic plugins
       { src: path.join(NUXT_SHELL, 'plugins/codemirror-loader'), ssr: false },
+      { src: path.join(NUXT_SHELL, 'plugins/formatters'), ssr: false }, // Populate formatters cache for sorted table
     ],
 
     // Proxy: https://github.com/nuxt-community/proxy-module#options
     proxy: {
-      '/k8s':          proxyWsOpts(api), // Straight to a remote cluster (/k8s/clusters/<id>/)
-      '/pp':           proxyWsOpts(api), // For (epinio) standalone API
-      '/api':          proxyWsOpts(api), // Management k8s API
-      '/apis':         proxyWsOpts(api), // Management k8s API
-      '/v1':           proxyWsOpts(api), // Management Steve API
-      '/v3':           proxyWsOpts(api), // Rancher API
-      '/v3-public':    proxyOpts(api), // Rancher Unauthed API
-      '/api-ui':       proxyOpts(api), // Browser API UI
-      '/meta':         proxyMetaOpts(api), // Browser API UI
-      '/v1-*':         proxyOpts(api), // SAML, KDM, etc
+      '/k8s':            proxyWsOpts(api), // Straight to a remote cluster (/k8s/clusters/<id>/)
+      '/pp':             proxyWsOpts(api), // For (epinio) standalone API
+      '/api':            proxyWsOpts(api), // Management k8s API
+      '/apis':           proxyWsOpts(api), // Management k8s API
+      '/v1':             proxyWsOpts(api), // Management Steve API
+      '/v3':             proxyWsOpts(api), // Rancher API
+      '/v3-public':      proxyOpts(api), // Rancher Unauthed API
+      '/api-ui':         proxyOpts(api), // Browser API UI
+      '/meta':           proxyMetaOpts(api), // Browser API UI
+      '/rancherversion': proxyPrimeOpts(api), // Rancher version endpoint
+      '/v1-*':           proxyOpts(api), // SAML, KDM, etc
       // These are for Ember embedding
-      '/c/*/edit':     proxyOpts('https://127.0.0.1:8000'), // Can't proxy all of /c because that's used by Vue too
-      '/k/':           proxyOpts('https://127.0.0.1:8000'),
-      '/g/':           proxyOpts('https://127.0.0.1:8000'),
-      '/n/':           proxyOpts('https://127.0.0.1:8000'),
-      '/p/':           proxyOpts('https://127.0.0.1:8000'),
-      '/assets':       proxyOpts('https://127.0.0.1:8000'),
-      '/translations': proxyOpts('https://127.0.0.1:8000'),
-      '/engines-dist': proxyOpts('https://127.0.0.1:8000'),
-      // Plugin dev
-      '/verdaccio/':   proxyOpts('http://127.0.0.1:4873/-'),
+      '/c/*/edit':       proxyOpts('https://127.0.0.1:8000'), // Can't proxy all of /c because that's used by Vue too
+      '/k/':             proxyOpts('https://127.0.0.1:8000'),
+      '/g/':             proxyOpts('https://127.0.0.1:8000'),
+      '/n/':             proxyOpts('https://127.0.0.1:8000'),
+      '/p/':             proxyOpts('https://127.0.0.1:8000'),
+      '/assets':         proxyOpts('https://127.0.0.1:8000'),
+      '/translations':   proxyOpts('https://127.0.0.1:8000'),
+      '/engines-dist':   proxyOpts('https://127.0.0.1:8000'),
     },
 
     // Nuxt server
@@ -661,6 +664,49 @@ export default function(dir, _appConfig) {
     };
   }
 
+  // Intercept the /rancherversion API call wnad modify the 'RancherPrime' value
+  // if configured to do so by the environment variable PRIME
+  function proxyPrimeOpts(target) {
+    const opts = proxyOpts(target);
+
+    // Don't intercept if the PRIME environment variable is not set
+    if (!prime?.length) {
+      return opts;
+    }
+
+    opts.onProxyRes = (proxyRes, req, res) => {
+      const _end = res.end;
+      let body = '';
+
+      proxyRes.on( 'data', (data) => {
+        data = data.toString('utf-8');
+        body += data;
+      });
+
+      res.write = () => {};
+
+      res.end = () => {
+        let output = body;
+
+        try {
+          const out = JSON.parse(body);
+
+          out.RancherPrime = prime;
+          output = JSON.stringify(out);
+        } catch (err) {}
+
+        res.setHeader('content-length', output.length );
+        res.setHeader('content-type', 'application/json' );
+        res.setHeader('transfer-encoding', '');
+        res.setHeader('cache-control', 'no-cache');
+        res.writeHead(proxyRes.statusCode);
+        _end.apply(res, [output]);
+      };
+    };
+
+    return opts;
+  }
+
   function onProxyRes(proxyRes, req, res) {
     if (devPorts) {
       proxyRes.headers['X-Frame-Options'] = 'ALLOWALL';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -32,125 +32,124 @@
     "e2e:dev": "start-server-and-test dev https://localhost:8005 cy:open"
   },
   "dependencies": {
-    "@aws-sdk/client-ec2": "^3.1.0",
-    "@aws-sdk/client-eks": "^3.1.0",
-    "@aws-sdk/client-kms": "^3.8.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
-    "@babel/plugin-proposal-private-property-in-object": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@innologica/vue-dropdown-menu": "^0.1.3",
-    "@novnc/novnc": "^1.2.0",
+    "@aws-sdk/client-ec2": "3.1.0",
+    "@aws-sdk/client-eks": "3.1.0",
+    "@aws-sdk/client-kms": "3.8.1",
+    "@babel/plugin-proposal-optional-chaining": "7.14.5",
+    "@babel/plugin-proposal-private-property-in-object": "7.14.5",
+    "@babel/preset-typescript": "7.16.7",
+    "@innologica/vue-dropdown-menu": "0.1.3",
+    "@novnc/novnc": "1.2.0",
     "@nuxt/types": "2.14.6",
-    "@nuxt/typescript-build": "^2.1.0",
-    "@nuxtjs/axios": "^5.3.6",
-    "@nuxtjs/eslint-config-typescript": "^6.0.1",
-    "@nuxtjs/eslint-module": "^1.1.0",
-    "@nuxtjs/proxy": "^1.3.3",
-    "@nuxtjs/style-resources": "^1.2.1",
-    "@nuxtjs/webpack-profile": "^0.1.0",
-    "@popperjs/core": "^2.4.0",
-    "@types/node": "^16.4.3",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "^4.5.15",
-    "@vue/cli-plugin-typescript": "^4.5.15",
-    "@vue/cli-service": "^4.5.13",
+    "@nuxt/typescript-build": "2.1.0",
+    "@nuxtjs/axios": "5.12.0",
+    "@nuxtjs/eslint-config-typescript": "6.0.1",
+    "@nuxtjs/eslint-module": "1.2.0",
+    "@nuxtjs/proxy": "1.3.3",
+    "@nuxtjs/style-resources": "1.2.1",
+    "@nuxtjs/webpack-profile": "0.1.0",
+    "@popperjs/core": "2.4.4",
+    "@types/node": "16.4.3",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "@vue/cli-plugin-babel": "4.5.15",
+    "@vue/cli-plugin-typescript": "4.5.15",
+    "@vue/cli-service": "4.5.15",
     "@vue/test-utils": "1.2.1",
-    "@vue/vue2-jest": "^27.0.0",
-    "add": "^2.0.6",
-    "ansi_up": "^5.0.0",
-    "babel-eslint": "^10.0.1",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-vue": "^2.0.2",
-    "browser-env": "^3.2.6",
-    "comlink": "^4.3.1",
-    "cookie": "^0.4.0",
-    "cookie-universal-nuxt": "^2.0.17",
-    "core-js": "^3.20.3",
-    "cron-validator": "^1.2.0",
-    "cronstrue": "^1.92.0",
-    "cross-env": "^6.0.3",
+    "@vue/vue2-jest": "27.0.0",
+    "add": "2.0.6",
+    "ansi_up": "5.0.0",
+    "babel-eslint": "10.1.0",
+    "babel-plugin-module-resolver": "4.0.0",
+    "babel-preset-vue": "2.0.2",
+    "browser-env": "3.3.0",
+    "cookie": "0.5.0",
+    "cookie-universal-nuxt": "2.1.4",
+    "core-js": "3.21.1",
+    "cron-validator": "1.2.0",
+    "cronstrue": "1.95.0",
+    "cross-env": "6.0.3",
     "css-loader": "4.3.0",
-    "csv-loader": "^3.0.3",
-    "cypress": "8.4.1",
-    "d3": "^5.12.0",
-    "d3-selection": "^1.3.0",
-    "dagre-d3": "^0.6.3",
-    "dayjs": "^1.8.16",
-    "diff2html": "^2.11.2",
-    "dompurify": "^2.0.12",
+    "csv-loader": "3.0.3",
+    "cypress": "10.3.1",
+    "d3": "7.3.0",
+    "d3-selection": "1.4.1",
+    "dagre-d3": "0.6.4",
+    "dayjs": "1.8.29",
+    "diff2html": "2.11.2",
+    "dompurify": "2.0.12",
     "eslint": "7.32.0",
-    "eslint-config-standard": ">=12.0.0",
+    "eslint-config-standard": "16.0.3",
     "eslint-import-resolver-node": "0.3.4",
     "eslint-module-utils": "2.6.1",
-    "eslint-plugin-cypress": "^2.11.3",
-    "eslint-plugin-jest": "^23.6.0",    
+    "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-n": "^15.2.0",
+    "eslint-plugin-jest": "24.4.0",
+    "eslint-plugin-n": "15.2.0",
     "eslint-plugin-vue": "7.14.0",
-    "event-target-shim": "^5.0.1",
-    "express": "^4.17.1",
-    "file-saver": "^2.0.2",
-    "frontmatter-markdown-loader": "^3.6.3",
-    "identicon.js": "^2.3.3",
-    "intl-messageformat": "^7.7.2",
-    "is-url": "^1.2.4",
-    "jest": "^27.5.1",
-    "jest-serializer-vue": "^2.0.2",
-    "jexl": "^2.2.2",
-    "jquery": "^3.5.0",
-    "js-cookie": "^2.2.0",
-    "js-yaml": "^4.1.0",
-    "js-yaml-loader": "^1.2.2",
-    "jsdiff": "^1.1.1",
-    "jsdom-global": "^3.0.2",
-    "jsonpath-plus": "^6.0.1",
-    "jsrsasign": "^10.2.0",
-    "jszip": "^3.7.0",
-    "lodash": "^4.17.21",
-    "marked": "^2.0.0",
-    "nodemon": "^2.0.2",
+    "event-target-shim": "5.0.1",
+    "express": "4.17.1",
+    "file-saver": "2.0.2",
+    "frontmatter-markdown-loader": "3.7.0",
+    "identicon.js": "2.3.3",
+    "intl-messageformat": "7.8.4",
+    "is-url": "1.2.4",
+    "jest": "27.5.1",
+    "jest-serializer-vue": "2.0.2",
+    "jexl": "2.2.2",
+    "jquery": "3.5.1",
+    "js-cookie": "2.2.1",
+    "js-yaml": "4.1.0",
+    "js-yaml-loader": "1.2.2",
+    "jsdiff": "1.1.1",
+    "jsdom-global": "3.0.2",
+    "jsonpath-plus": "6.0.1",
+    "jsrsasign": "10.2.0",
+    "jszip": "3.7.0",
+    "lodash": "4.17.21",
+    "marked": "4.0.17",
+    "nodemon": "2.0.4",
     "nuxt": "2.15.8",
-    "nyc": "^15.0.0",
-    "papaparse": "^5.3.0",
-    "portal-vue": "^2.1.5",
-    "rancher-icons": "rancher/icons#v2.0.0",
-    "require-extension-hooks": "^0.3.3",
-    "require-extension-hooks-babel": "^1.0.0-beta.1",
-    "require-extension-hooks-vue": "^3.0.0",
-    "sass": "^1.38.2",
-    "sass-loader": "10",
-    "serve-static": "^1.14.1",
-    "set-cookie-parser": "^2.4.0",
-    "shell-quote": "^1.7.2",
-    "sinon": "^8.0.4",
-    "start-server-and-test": "^1.13.1",
-    "style-loader": "^1.1.2",
-    "ts-node": "^8.3.0",
-    "typescript": "~4.1.5",
-    "url-parse": "^1.5.0",
-    "v-tooltip": "^2.0.2",
+    "nyc": "15.1.0",
+    "papaparse": "5.3.0",
+    "portal-vue": "2.1.7",
+    "rancher-icons": "rancher/icons#v2.0.3",
+    "require-extension-hooks": "0.3.3",
+    "require-extension-hooks-babel": "1.0.0",
+    "require-extension-hooks-vue": "3.0.0",
+    "sass": "1.51.0",
+    "sass-loader": "10.2.1",
+    "serve-static": "1.14.1",
+    "set-cookie-parser": "2.4.6",
+    "shell-quote": "1.7.3",
+    "sinon": "8.1.1",
+    "start-server-and-test": "1.13.1",
+    "style-loader": "1.2.1",
+    "ts-node": "8.10.2",
+    "typescript": "4.1.6",
+    "url-parse": "1.5.10",
+    "v-tooltip": "2.0.3",
     "vue": "2.6.14",
-    "vue-clipboard2": "^0.3.1",
-    "vue-codemirror": "^4.0.6",
-    "vue-js-modal": "^1.3.31",
-    "vue-resize": "^0.4.5",
-    "vue-select": "^3.13.0",
+    "vue-clipboard2": "0.3.1",
+    "vue-codemirror": "4.0.6",
+    "vue-js-modal": "1.3.35",
+    "vue-resize": "0.4.5",
+    "vue-select": "3.18.3",
     "vue-server-renderer": "2.6.14",
-    "vue-shortkey": "^3.1.7",
+    "vue-shortkey": "3.1.7",
     "vue-template-compiler": "2.6.14",
-    "vue2-transitions": "^0.3.0",
-    "vuedraggable": "^2.24.3",
-    "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",
-    "worker-loader": "^3.0.8",
-    "yarn": "^1.22.11"
+    "vue2-transitions": "0.3.0",
+    "vuedraggable": "2.24.3",
+    "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",
+    "worker-loader": "3.0.8",
+    "yarn": "1.22.18"
   },
   "nyc": {
     "extension": [

package/pages/auth/login.vue

@@ -3,6 +3,7 @@ import { removeObject } from '@shell/utils/array';
 import { USERNAME } from '@shell/config/cookies';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import AsyncButton from '@shell/components/AsyncButton';
+import LocaleSelector from '@shell/components/LocaleSelector';
 import BrandImage from '@shell/components/BrandImage';
 import InfoBox from '@shell/components/InfoBox';
 import CopyCode from '@shell/components/CopyCode';
@@ -30,7 +31,7 @@ export default {
   name:       'Login',
   layout:     'unauthenticated',
   components: {
-    LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password
+    LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector
   },
 
   async asyncData({ route, redirect, store }) {
@@ -164,7 +165,7 @@ export default {
 
     kubectlCmd() {
       return "kubectl get secret --namespace cattle-system bootstrap-secret -o go-template='{{.data.bootstrapPassword|base64decode}}{{\"\\n\"}}'";
-    }
+    },
 
   },
 
@@ -393,6 +394,9 @@ export default {
               {{ nonLocalPrompt }}
             </a>
           </div>
+          <div class="locale-elector">
+            <LocaleSelector mode="login" />
+          </div>
         </template>
       </div>
 
@@ -435,4 +439,9 @@ export default {
       }
     }
   }
+
+  .locale-elector {
+    position: absolute;
+    bottom: 30px;
+  }
 </style>

package/pages/auth/setup.vue

@@ -114,7 +114,7 @@ export default {
       setVendor(plSetting.value);
     }
 
-    const productName = plSetting.default === 'Harvester' ? 'Harvester' : 'Rancher';
+    const productName = plSetting.default;
 
     const principals = await store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL, opt: { url: '/v3/principals' } });
     const me = findBy(principals, 'me', true);

package/pages/c/_cluster/_product/members/index.vue

@@ -1,96 +1,6 @@
 <script>
-import { MANAGEMENT, NORMAN, VIRTUAL_TYPES } from '@shell/config/types';
-import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
-import Masthead from '@shell/components/ResourceList/Masthead';
-import { AGE, ROLE, STATE, PRINCIPAL } from '@shell/config/table-headers';
-import { canViewClusterPermissionsEditor } from '@shell/components/form/Members/ClusterPermissionsEditor.vue';
-import Banner from '@components/Banner/Banner.vue';
-
-/**
- * Explorer members page.
- * Route: /c/local/explorer/members
- */
-export default {
-
-  name: 'ExplorerMembers',
-
-  components: {
-    Banner, Loading, Masthead, ResourceTable
-  },
-
-  async fetch() {
-    const clusterRoleTemplateBindingSchema = this.$store.getters[`rancher/schemaFor`](NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING);
-
-    const hydration = [
-      clusterRoleTemplateBindingSchema ? this.$store.dispatch(`rancher/findAll`, { type: NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING }, { root: true }) : [],
-      clusterRoleTemplateBindingSchema ? this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING }) : [],
-      this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL }),
-      this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER }),
-      this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }),
-    ];
-    const [clusterRoleTemplateBindings] = await Promise.all(hydration);
-    const steveBindings = await Promise.all(clusterRoleTemplateBindings.map(b => b.steve));
-
-    this.$set(this, 'clusterRoleTemplateBindings', steveBindings);
-  },
-
-  data() {
-    return {
-      schema:         this.$store.getters[`management/schemaFor`](MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING),
-      headers:        [
-        STATE,
-        PRINCIPAL,
-        ROLE,
-        AGE
-      ],
-      createLocation: {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  this.$store.getters['currentProduct'].name,
-          resource: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
-        }
-      },
-      resource:                    MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
-      clusterRoleTemplateBindings: [],
-      VIRTUAL_TYPES
-    };
-  },
-
-  computed: {
-    filteredClusterRoleTemplateBindings() {
-      return this.clusterRoleTemplateBindings
-        .filter(b => b.clusterName === this.$store.getters['currentCluster'].id);
-    },
-    canManageMembers() {
-      return canViewClusterPermissionsEditor(this.$store);
-    },
-    isLocal() {
-      return this.$store.getters['currentCluster'].isLocal;
-    }
-  },
-};
+import ExplorerMembers from '@shell/components/ExplorerMembers';
+export default { components: { ExplorerMembers } };
 </script>
 
-<template>
-  <Loading v-if="$fetchState.pending" />
-  <div v-else>
-    <Masthead
-      :schema="schema"
-      :resource="resource"
-      :favorite-resource="VIRTUAL_TYPES.CLUSTER_MEMBERS"
-      :create-location="createLocation"
-      :create-button-label="t('members.createActionLabel')"
-    />
-    <Banner v-if="isLocal" color="error" :label="t('members.localClusterWarning')" />
-    <ResourceTable
-      :schema="schema"
-      :headers="headers"
-      :rows="filteredClusterRoleTemplateBindings"
-      :groupable="false"
-      :namespaced="false"
-      sub-search="subSearch"
-      :sub-fields="['nameDisplay']"
-    />
-  </div>
-</template>
+<template><ExplorerMembers v-bind="$attrs" /></template>