dashboard-shell-shell 1.0.111

package/vue.config.js

@@ -0,0 +1,577 @@
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const { generateDynamicTypeImport } = require('./pkg/auto-import');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const serverMiddlewares = require('./server/server-middleware.js');
+const {
+  dev, devPorts, api, proxyWsOpts, proxyOpts, proxyMetaOpts, proxyPrimeOpts
+} = require('./vue-config-helper.js');
+const har = require('./server/har-file');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+const VirtualModulesPlugin = require('webpack-virtual-modules');
+
+// Suppress info level logging messages from http-proxy-middleware
+// This hides all of the "[HPM Proxy created] ..." messages
+const oldInfoLogger = console.info; // eslint-disable-line no-console
+
+console.info = () => {}; // eslint-disable-line no-console
+
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+// TODO: Add explanation of this logic
+console.info = oldInfoLogger; // eslint-disable-line no-console
+
+// This is currently hardcoded to avoid importing the TS
+// const { STANDARD } = require('./config/private-label');
+const STANDARD = 1;
+
+// human readable version used on rancher dashboard about page
+const dashboardVersion = process.env.DASHBOARD_VERSION;
+
+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
+
+/**
+ * Paths to the shell folder when it is included as a node dependency
+ */
+const getShellPaths = (dir) => {
+  let SHELL_ABS = path.join(dir, 'node_modules/@rancher/shell');
+  let COMPONENTS_DIR = path.join(SHELL_ABS, 'rancher-components');
+
+  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');
+    }
+  }
+
+  // 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'))) {
+    SHELL_ABS = path.join(dir, 'shell');
+    COMPONENTS_DIR = path.join(dir, 'pkg', 'rancher-components', 'src', 'components');
+  }
+
+  return { SHELL_ABS, COMPONENTS_DIR };
+};
+
+const getProxyConfig = (proxyConfig) => ({
+  ...proxyConfig,
+  '/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
+  '/rancherversion': proxyPrimeOpts(api), // Rancher version endpoint
+  '/version':        proxyPrimeOpts(api), // Rancher Kube version endpoint
+  // 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'),
+});
+
+/**
+ * @pkg imports must be resolved to the package that it importing them - this allows a package to use @pkg as an alias
+ * to the root of that particular package
+ */
+const getPackageImport = (dir) => new webpack.NormalModuleReplacementPlugin(/^@pkg/, (resource) => {
+  const ctx = resource.context.split('/');
+  // Find 'pkg' folder in the context
+  const index = ctx.findIndex((s) => s === 'pkg');
+
+  if (index !== -1 && (index + 1) < ctx.length) {
+    const pkg = ctx[index + 1];
+    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;
+  }
+});
+
+/**
+ * Instrument code for code coverage in e2e tests
+ */
+const instrumentCode = () => {
+  const instrumentedCode = (process.env.TEST_INSTRUMENT === 'true');
+
+  // Instrument code for tests
+  const babelPlugins = [
+    // TODO: Browser support; also add explanation to this TODO
+    // ['@babel/plugin-transform-modules-commonjs'],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }]
+  ];
+
+  if (instrumentedCode) {
+    babelPlugins.push([
+      'babel-plugin-istanbul', { extension: ['.js', '.vue'] }, 'add-vue'
+    ]);
+
+    console.warn('Instrumenting code for coverage'); // eslint-disable-line no-console
+  }
+};
+
+const getLoaders = (SHELL_ABS) => [
+  // no fallback for pre-2013 browsers https://caniuse.com/webworkers
+  {
+    test:    /web-worker.[a-z-]+.js/i,
+    loader:  'worker-loader',
+    options: { inline: 'no-fallback' },
+  },
+  // Handler for csv files (e.g. ec2 instance data)
+  {
+    test:    /\.csv$/i,
+    loader:  'csv-loader',
+    options: {
+      dynamicTyping:  true,
+      header:         true,
+      skipEmptyLines: true
+    },
+  },
+  // Handler for yaml files (used for i18n files, for example)
+  {
+    test:    /\.ya?ml$/i,
+    loader:  'js-yaml-loader',
+    options: { name: '[path][name].[ext]' },
+  },
+  {
+    test:    /\.m?[tj]sx?$/,
+    // This excludes no modules except for node_modules/@rancher/... so that plugins can properly compile
+    // when referencing @rancher/shell
+    exclude: /node_modules\/(?!(@rancher)\/).*/,
+    use:     [
+      {
+        loader:  'cache-loader',
+        options: {
+          cacheDirectory:  'node_modules/.cache/babel-loader',
+          cacheIdentifier: 'e93f32da'
+        }
+      },
+    ]
+  },
+  {
+    test: /\.tsx?$/,
+    use:  [
+      {
+        loader:  'cache-loader',
+        options: {
+          cacheDirectory:  'node_modules/.cache/ts-loader',
+          cacheIdentifier: '3596741e'
+        }
+      },
+      {
+        loader:  'ts-loader',
+        options: {
+          transpileOnly:     true,
+          happyPackMode:     false,
+          appendTsxSuffixTo: [
+            '\\.vue$'
+          ],
+          configFile: path.join(SHELL_ABS, 'tsconfig.json')
+        }
+      }
+    ]
+  },
+  // Prevent warning in log with the md files in the content folder
+  {
+    test: /\.md$/,
+    use:  [
+      {
+        loader:  'frontmatter-markdown-loader',
+        options: { mode: ['body'] }
+      }
+    ]
+  },
+];
+
+const getDevServerConfig = (proxy) => {
+  const harFile = process.env.HAR_FILE;
+  // HAR File support - load network responses from the specified .har file and use those rather than communicating to the Rancher server
+  const harData = harFile ? har.loadFile(harFile, devPorts ? 8005 : 80, '') : undefined;
+
+  return {
+    client: { webSocketURL: { hostname: '0.0.0.0', port: devPorts ? 8005 : 80 } },
+    server: {
+      type:    'https',
+      options: {
+        key:  fs.readFileSync(path.resolve(__dirname, 'server/server.key')),
+        cert: fs.readFileSync(path.resolve(__dirname, 'server/server.crt'))
+      }
+    },
+    port: (devPorts ? 8005 : 80),
+    host: '0.0.0.0',
+    setupMiddlewares(middlewares, devServer) {
+      const socketProxies = {};
+
+      if (!devServer) {
+        // eslint-disable-next-line no-console
+        console.error('webpack-dev-server is not defined');
+
+        return middlewares;
+      }
+
+      const app = devServer.app;
+
+      // Close down quickly in response to CTRL + C
+      process.once('SIGINT', () => {
+        devServer.close();
+        console.log('\n'); // eslint-disable-line no-console
+        process.exit(1);
+      });
+
+      app.use(serverMiddlewares);
+
+      if (harData) {
+        console.log('Installing HAR file middleware'); // eslint-disable-line no-console
+        app.use(har.harProxy(harData, process.env.HAR_DIR));
+
+        devServer.webSocketProxies.push({
+          upgrade(req, socket, head) {
+            const responseHeaders = ['HTTP/1.1 101 Web Socket Protocol Handshake', 'Upgrade: WebSocket', 'Connection: Upgrade'];
+
+            socket.write(`${ responseHeaders.join('\r\n') }\r\n\r\n`);
+          }
+        });
+      }
+
+      Object.keys(proxy).forEach((p) => {
+        const px = createProxyMiddleware({
+          ...proxy[p],
+          ws: false // We will handle the web socket upgrade
+        });
+
+        if (proxy[p].ws) {
+          socketProxies[p] = px;
+        }
+        app.use(p, px);
+      });
+
+      // TODO: Verify after migration completed
+      devServer.webSocketProxies.push({
+        upgrade(req, socket, head) {
+          const path = Object.keys(socketProxies).find((path) => req.url.startsWith(path));
+
+          if (path) {
+            const proxy = socketProxies[path];
+
+            if (proxy.upgrade) {
+              proxy.upgrade(req, socket, head);
+            } else {
+              console.log(`Upgrade for Proxy is not defined. Cannot upgrade Web socket for ${ req.url }`); // eslint-disable-line no-console
+            }
+          } else {
+            console.log(`Unknown Web socket upgrade request for ${ req.url }`); // eslint-disable-line no-console
+          }
+        }
+      });
+
+      return middlewares;
+    }
+  };
+};
+
+/**
+ * Generate a virtual module '@rancher/dynamic.js` which imports all of the packages that should be built into the application
+ * This is imported in 'shell/extensions/extension-loader.js` which ensures the all code for plugins to be included is imported in the application
+ */
+const getVirtualModules = (dir, includePkg) => {
+  // Find any UI packages in node_modules
+  const modulePaths = path.join(dir, 'node_modules');
+  const requiredPackages = require(path.join(dir, 'package.json'));
+  const librariesIndex = {};
+
+  if (requiredPackages && requiredPackages.dependencies) {
+    Object.keys(requiredPackages.dependencies).forEach((requiredPackage) => {
+      const library = require(path.join(modulePaths, requiredPackage, 'package.json'));
+
+      // The package.json must have the 'rancher' property to mark it as a UI package
+      if (library.rancher) {
+        const id = `${ library.name }-${ library.version }`;
+
+        librariesIndex[id] = library.main;
+      }
+    });
+  }
+
+  let reqs = '';
+  const pkgFolder = path.relative(dir, './pkg');
+
+  if (fs.existsSync(pkgFolder)) {
+    fs.readdirSync(pkgFolder)
+      .filter((name) => !name.startsWith('.')) // Ignore hidden folders
+      .forEach((name) => {
+        const library = require(path.join(dir, 'pkg', name, 'package.json'));
+
+        // Package file must have rancher field to be a plugin
+        if (includePkg(name) && library.rancher) {
+          reqs += `$plugin.registerBuiltinExtension('${ name }', require(\'~/pkg/${ name }\')); `;
+        }
+      });
+  }
+
+  Object.keys(librariesIndex).forEach((i) => {
+    reqs += `$plugin.loadAsync('${ i }', '/pkg/${ i }/${ librariesIndex[i] }');`;
+  });
+
+  return new VirtualModulesPlugin({ 'node_modules/@rancher/dynamic.js': `export default function ($plugin) { ${ reqs } };` });
+};
+
+const getAutoImport = () => new webpack.NormalModuleReplacementPlugin(/^@rancher\/auto-import$/, (resource) => {
+  const ctx = resource.context.split('/');
+  const pkg = ctx[ctx.length - 1];
+
+  resource.request = `@rancher/auto-import/${ pkg }`;
+});
+
+/**
+ * For each package in the pkg folder that is being compiled into the application,
+ * Add in the code to automatically import the types from that package
+ * This imports models, edit, detail, list etc
+ * When built as a UI package, shell/pkg/vue.config.js does the same thing
+ */
+const getVirtualModulesAutoImport = (dir) => {
+  const autoImportTypes = {};
+  const pkgFolder = path.relative(dir, './pkg');
+
+  if (fs.existsSync(pkgFolder)) {
+    fs.readdirSync(pkgFolder)
+      .filter((name) => !name.startsWith('.')) // Ignore hidden folders
+      .forEach((name) => {
+        autoImportTypes[`node_modules/@rancher/auto-import/${ name }`] = generateDynamicTypeImport(`@pkg/${ name }`, path.join(dir, `pkg/${ name }`));
+      });
+  }
+
+  return new VirtualModulesPlugin(autoImportTypes);
+};
+
+// Get current shell version
+const shellPkgData = require(path.join(__dirname, 'package.json'));
+
+/**
+ * DefinePlugin does string replacement within our code. We may want to consider replacing it with something else. In code we'll see something like
+ * process.env.commit even though process and env aren't even defined objects. This could cause people to be mislead.
+ */
+const createEnvVariablesPlugin = (routerBasePath, rancherEnv) => new webpack.DefinePlugin({
+  'process.env.commit':                    JSON.stringify(commit),
+  'process.env.version':                   JSON.stringify(dashboardVersion),
+  'process.env.dev':                       JSON.stringify(dev),
+  'process.env.pl':                        JSON.stringify(pl),
+  'process.env.perfTest':                  JSON.stringify(perfTest),
+  'process.env.loginLocaleSelector':       JSON.stringify(process.env.LOGIN_LOCALE_SELECTOR || 'true'),
+  'process.env.excludeOperatorPkg':        JSON.stringify(process.env.EXCLUDE_OPERATOR_PKG || 'false'),
+  'process.env.rancherEnv':                JSON.stringify(rancherEnv),
+  'process.env.harvesterPkgUrl':           JSON.stringify(process.env.HARVESTER_PKG_URL),
+  'process.env.api':                       JSON.stringify(api),
+  'process.env.UI_EXTENSIONS_API_VERSION': JSON.stringify(shellPkgData.version),
+  // Store the Router Base as env variable that we can use in `shell/config/router.js`
+  'process.env.routerBase':                JSON.stringify(routerBasePath),
+  __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+});
+
+/**
+ * Ensure we process files in the @rancher/shell folder
+ */
+const processShellFiles = (config, SHELL_ABS) => {
+  config.module.rules.forEach((rule) => {
+    if ('test.js'.match(rule.test)) {
+      if (rule.exclude) {
+        const orig = rule.exclude;
+
+        rule.exclude = function(modulePath) {
+          if (modulePath.indexOf(SHELL_ABS) === 0 || typeof orig !== 'function') {
+            return false;
+          }
+
+          return orig(modulePath);
+        };
+      }
+    }
+  });
+};
+
+/**
+ * Update vue-loader to set whitespace to 'preserve'
+ * This was the setting with nuxt, but is not the default with vue cli
+ * Need to find the vue loader in the webpack config and update the setting
+ */
+const preserveWhitespace = (config) => {
+  config.module.rules.forEach((loader) => {
+    if (loader.use) {
+      loader.use.forEach((use) => {
+        if (use.loader.includes('vue-loader')) {
+          use.options.compilerOptions = { ...use.options.compilerOptions, whitespace: 'preserve' };
+        }
+      });
+    }
+  });
+};
+
+const printLogs = (dev, dashboardVersion, resourceBase, routerBasePath, pl, rancherEnv) => {
+  console.log(`Build: ${ dev ? 'Development' : 'Production' }`); // eslint-disable-line no-console
+
+  if (!dev) {
+    console.log(`Version: ${ dashboardVersion }`); // eslint-disable-line no-console
+  }
+
+  if (resourceBase) {
+    console.log(`Resource Base URL: ${ resourceBase }`); // eslint-disable-line no-console
+  }
+
+  if (routerBasePath !== '/') {
+    console.log(`Router Base Path: ${ routerBasePath }`); // eslint-disable-line no-console
+  }
+
+  if (pl !== STANDARD) {
+    console.log(`PL: ${ pl }`); // eslint-disable-line no-console
+  }
+
+  console.log(`API: '${ api }'. Env: '${ rancherEnv }'`); // eslint-disable-line no-console
+};
+
+/**
+ * Add ignored paths based on env var configuration and known cases
+ * TODO: Verify after migration completed
+ * In Webpack5 only RegExp, string and [string] types are accepted
+ * https://webpack.js.org/configuration/watch/#watchoptionsignored
+ * Example conversion:
+ * - as list: [/.shell/, /dist-pkg/, /scripts\/standalone/, /\/pkg.test-pkg/, /\/pkg.harvester/]
+ * - as chained regex rule: /.shell|dist-pkg|scripts\/standalone|\/pkg.test-pkg|\/pkg.harvester/
+ */
+const getWatcherIgnored = (excludes = []) => {
+  const paths = [
+    /node_modules/,
+    /dist-pkg/,
+    /scripts\/standalone/,
+  ];
+  const pathExcludedPkg = excludes.map((excluded) => new RegExp(`/pkg.${ excluded }/`));
+  const pathsCombined = [...paths, ...pathExcludedPkg];
+  const regexCombined = new RegExp(pathsCombined.map(({ source }) => source).join('|'));
+
+  return regexCombined;
+};
+
+/**
+ * Expose a function that can be used by an app to provide a nuxt configuration for building an application
+ * This takes the directory of the application as the first argument so that we can derive folder locations
+ * from it, rather than from the location of this file
+ */
+module.exports = function(dir, appConfig = {}) {
+  require('events').EventEmitter.defaultMaxListeners = 20;
+  require('dotenv').config();
+
+  const { SHELL_ABS, COMPONENTS_DIR } = getShellPaths(dir);
+  const excludes = appConfig.excludes || [];
+
+  const includePkg = (name) => {
+    if (name.startsWith('.') || name === 'node_modules') {
+      return false;
+    }
+
+    return !excludes || (excludes && !excludes.includes(name));
+  };
+
+  const routerBasePath = process.env.ROUTER_BASE ?? '/';
+  let resourceBase = process.env.RESOURCE_BASE ?? '';
+  const outputDir = process.env.OUTPUT_DIR ?? 'dist';
+  const rancherEnv = process.env.RANCHER_ENV || 'web';
+
+  if ( resourceBase && !resourceBase.endsWith('/') ) {
+    resourceBase += '/';
+  }
+
+  printLogs(dev, dashboardVersion, resourceBase, routerBasePath, pl, rancherEnv);
+
+  const proxy = getProxyConfig(appConfig.proxy);
+  const config = {
+    // Vue server
+    devServer:  getDevServerConfig(proxy),
+    publicPath: resourceBase || undefined,
+    css:        {
+      extract:       false, // inline css styles instead of including with `<links`
+      loaderOptions: {
+        sass: {
+          // This is effectively added to the beginning of each style that's imported or included in a vue file. We may want to look into including these in app.scss
+          additionalData: `
+            @use 'sass:math';
+            @import "~shell/assets/styles/base/_variables.scss";
+            @import "~shell/assets/styles/base/_functions.scss";
+            @import "~shell/assets/styles/base/_mixins.scss";
+            @import 'node_modules/xterm/css/xterm.css';
+          `
+        }
+      }
+    },
+    outputDir,
+    pages: {
+      index: {
+        entry:    path.join(SHELL_ABS, '/initialize/entry.js'),
+        template: path.join(SHELL_ABS, '/public/index.html')
+      }
+    },
+    configureWebpack(config) {
+      // TODO VUE3: We may want to look into what we want the value to actually be. For the time being this was causing a warning in our CLI because it would set process.env.NODE_ENV to 'development' even thought it was
+      //            already set to 'dev' and we're using 'dev' in other locations so I don't think we want to do that. Config details found here: https://webpack.js.org/configuration/optimization/#optimizationnodeenv.
+      config.optimization.nodeEnv = false;
+      config.resolve.alias['~'] = dir;
+      config.resolve.alias['@'] = dir;
+      config.resolve.alias['~assets'] = path.join(__dirname, 'assets');
+      config.resolve.alias['~shell'] = SHELL_ABS;
+      config.resolve.alias['@shell'] = SHELL_ABS;
+      config.resolve.alias['@pkg'] = path.join(dir, 'pkg');
+      config.resolve.alias['./node_modules'] = path.join(dir, 'node_modules');
+      config.resolve.alias['@components'] = COMPONENTS_DIR;
+      config.resolve.alias['vue$'] = dev ? path.resolve(process.cwd(), 'node_modules', 'vue') : 'vue';
+      config.resolve.modules.push(__dirname);
+      config.plugins.push(getVirtualModules(dir, includePkg));
+      config.plugins.push(getAutoImport());
+      config.plugins.push(getVirtualModulesAutoImport(dir));
+      config.plugins.push(getPackageImport(dir));
+      config.plugins.push(createEnvVariablesPlugin(routerBasePath, rancherEnv));
+      config.plugins.push(new NodePolyfillPlugin()); // required from Webpack 5 to polyfill node modules
+
+      // The static assets need to be in the built assets directory in order to get served (primarily the favicon)
+      config.plugins.push(new CopyWebpackPlugin({ patterns: [{ from: path.join(SHELL_ABS, 'static'), to: '.' }] }));
+
+      config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /\/__tests__\// }));
+
+      config.resolve.extensions.push(...['.tsx', '.ts', '.js', '.vue', '.scss']);
+      config.watchOptions = {
+        ...(config.watchOptions || {}),
+        ignored: getWatcherIgnored()
+      };
+
+      if (dev) {
+        config.devtool = 'cheap-module-source-map';
+      } else {
+        config.devtool = 'source-map';
+      }
+
+      config.resolve.symlinks = false;
+      processShellFiles(config, SHELL_ABS);
+      instrumentCode();
+      config.module.rules.push(...getLoaders(SHELL_ABS));
+      preserveWhitespace(config);
+    },
+  };
+
+  return config;
+};