[WIP] Upgrade plugin for OpenShift 4.19+ compatibility

.eslintrc.yml

@@ -0,0 +1,27 @@
+env:
+  browser: true
+  es2021: true
+extends:
+  - eslint:recommended
+  - plugin:react/recommended
+  - plugin:@typescript-eslint/recommended
+  - prettier
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: latest
+  sourceType: module
+plugins:
+  - prettier
+  - react
+  - '@typescript-eslint'
+rules:
+  prettier/prettier:
+    - error
+  react/prop-types: off
+settings:
+  react:
+    version: detect
+
+

.gitignore

@@ -74,6 +74,7 @@ typings/
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
+.cache_*
 
 # Next.js build output
 .next

.prettierrc.yaml → .prettierrc.yml

@@ -2,7 +2,5 @@ arrowParens: always
 printWidth: 100
 singleQuote: true
 trailingComma: all
-tabWidth: 2
-semi: true
-jsxSingleQuote: false
-proseWrap: always
+
+

.stylelintrc.yaml

@@ -0,0 +1,28 @@
+extends:
+  - stylelint-config-standard
+rules:
+  # Disallow color names and hex colors as these don't work well with dark mode.
+  # Use PF global variables instead:
+  # https://patternfly-react-main.surge.sh/developer-resources/global-css-variables#global-css-variables
+  color-named: never
+  color-no-hex: true
+  # PatternFly CSS vars don't conform to stylelint's regex. Disable this rule.
+  custom-property-pattern: null
+  function-disallowed-list:
+    - rgb
+  # Disable the standard rule to allow BEM-style classnames with underscores.
+  selector-class-pattern: null
+  # Disallow CSS classnames prefixed with .pf- or .co- as these prefixes are
+  # reserved by PatternFly and OpenShift console.
+  selector-disallowed-list:
+    - "*"
+    - /\.(pf|co)-/
+  # Plugins should avoid naked element selectors like `table` and `li` since
+  # this can impact layout of existing pages in console.
+  selector-max-type:
+    - 0
+    - ignore:
+        - compounded
+        - descendant
+
+

Dockerfile

@@ -1,13 +1,13 @@
-
-FROM registry.access.redhat.com/ubi8/nodejs-16:latest AS builder
+FROM registry.access.redhat.com/ubi9/nodejs-20:latest AS build
 USER root
 RUN command -v yarn || npm i -g yarn
 
-COPY . /opt/app-root/src
+COPY . /usr/src/app
+WORKDIR /usr/src/app
 RUN yarn install --frozen-lockfile && yarn build
 
 FROM registry.access.redhat.com/ubi9/nginx-120:latest
 COPY default.conf "${NGINX_CONFIGURATION_PATH}"
-COPY --from=builder /opt/app-root/src/dist .
+COPY --from=build /usr/src/app/dist /opt/app-root/src
 USER 1001
 CMD /usr/libexec/s2i/run

README.md

@@ -11,15 +11,16 @@ Dynamic plugin for the OpenShift console which adds GPU capabilities.
 
 | NVIDIA GPU plugin      | OCP Console |
 | ---------------------- | ----------- |
-| release-0.2.5/latest   | 4.12-4.18   |
-| release-0.2.4          | 4.11        |
-| release-0.0.1          | 4.10        |
+| main                   | 4.19+       |
+| 0.2.6                  | 4.12-4.18   |
+| 0.2.4                  | 4.11        |
+| 0.0.1                  | 4.10        |
 
 ## QuickStart
 
 ### Prerequisites
 
-- [Red Hat OpenShift](https://www.redhat.com/en/technologies/cloud-computing/openshift) 4.12-4.18
+- [Red Hat OpenShift](https://www.redhat.com/en/technologies/cloud-computing/openshift) 4.19+ (main branch)
 - [NVIDIA GPU operator](https://github.com/NVIDIA/gpu-operator)
 - [Helm](https://helm.sh/docs/intro/install/)
 

deployment/console-plugin-nvidia-gpu/Chart.yaml

@@ -1,7 +1,7 @@
 apiVersion: v2
 appVersion: latest
 description: |
-  Red Hat OpenShift dynamic console plugin that leverages the NVIDIA GPU operator metrics and serves the respective console-extensions. Requires Red Hat OpenShift version 4.12+
+  Red Hat OpenShift dynamic console plugin that leverages the NVIDIA GPU operator metrics and serves the respective console-extensions. Requires Red Hat OpenShift version 4.19+
 name: console-plugin-nvidia-gpu
 sources:
   - https://github.com/rh-ecosystem-edge/console-plugin-nvidia-gpu
@@ -12,7 +12,7 @@ keywords:
   - nvidia
   - gpu
 type: application
-version: 0.2.5
+version: 0.3.0
 maintainers:
   - name: mresvanis
     email: [email protected]

i18n-scripts/build-i18n.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+set -exuo pipefail
+
+FILE_PATTERN='src/**/*.{js,jsx,ts,tsx,json}'
+
+i18next "${FILE_PATTERN}" -c "./i18next-parser.config.js" -o "locales/\$LOCALE/\$NAMESPACE.json"

i18n-scripts/common.js

@@ -0,0 +1,34 @@
+const fs = require('fs');
+const path = require('path');
+
+module.exports = {
+  isDirectory(filePath) {
+    try {
+      const stat = fs.lstatSync(filePath);
+      return stat.isDirectory();
+    } catch (e) {
+      // lstatSync throws an error if path doesn't exist
+      return false;
+    }
+  },
+  parseFolder(directory, argFunction, packageDir) {
+    return (async () => {
+      try {
+        const files = await fs.promises.readdir(directory);
+        for (const file of files) {
+          const filePath = path.join(directory, file);
+          await argFunction(filePath, packageDir);
+        }
+      } catch (e) {
+        console.error(`Failed to parseFolder ${directory}:`, e);
+      }
+    })();
+  },
+  deleteFile(filePath) {
+    try {
+      fs.unlinkSync(filePath);
+    } catch (e) {
+      console.error(`Failed to delete file ${filePath}:`, e);
+    }
+  },
+};

i18n-scripts/lexers.js

@@ -0,0 +1,30 @@
+const EventEmitter = require('events');
+const jsonc = require('comment-json');
+
+/**
+ * Custom JSON parser for localizing keys matching format: /%.+%/
+ */
+module.exports.CustomJSONLexer = class extends EventEmitter {
+  extract(content, filename) {
+    let keys = [];
+    try {
+      jsonc.parse(
+        content,
+        (key, value) => {
+          if (typeof value === 'string') {
+            const match = value.match(/^%(.+)%$/);
+            if (match && match[1]) {
+              keys.push({ key: match[1] });
+            }
+          }
+          return value;
+        },
+        true,
+      );
+    } catch (e) {
+      console.error('Failed to parse as JSON.', filename, e);
+      keys = [];
+    }
+    return keys;
+  }
+};

i18n-scripts/set-english-defaults.js

@@ -0,0 +1,76 @@
+const fs = require('fs');
+const path = require('path');
+const pluralize = require('pluralize');
+const common = require('./common.js');
+
+const publicDir = path.join(__dirname, './../locales/');
+
+function determineRule(key) {
+  if (key.includes('WithCount_plural')) {
+    return 0;
+  }
+  if (key.includes('WithCount')) {
+    return 1;
+  }
+  if (key.includes('_plural')) {
+    return 2;
+  }
+  return 3;
+}
+
+function updateFile(fileName) {
+  let file;
+  try {
+    file = require(fileName);
+  } catch (err) {
+    throw new Error(`Failed to load ${fileName}: ${err.message}`);
+  }
+
+  if (!file || typeof file !== 'object' || Array.isArray(file)) {
+    throw new Error(`Invalid file content in ${fileName}: expected an object`);
+  }
+
+  const updatedFile = {};
+  const keys = Object.keys(file);
+  let originalKey;
+
+  for (let i = 0; i < keys.length; i++) {
+    if (file[keys[i]] === '') {
+      // follow i18next rules
+      // "key": "item",
+      // "key_plural": "items",
+      // "keyWithCount": "{{count}} item",
+      // "keyWithCount_plural": "{{count}} items"
+      switch (determineRule(keys[i])) {
+        case 0:
+          [originalKey] = keys[i].split('WithCount_plural');
+          updatedFile[keys[i]] = `{{count}} ${pluralize(originalKey)}`;
+          break;
+        case 1:
+          [originalKey] = keys[i].split('WithCount');
+          updatedFile[keys[i]] = `{{count}} ${originalKey}`;
+          break;
+        case 2:
+          [originalKey] = keys[i].split('_plural');
+          updatedFile[keys[i]] = pluralize(originalKey);
+          break;
+        default:
+          updatedFile[keys[i]] = keys[i];
+      }
+    } else {
+      updatedFile[keys[i]] = file[keys[i]];
+    }
+  }
+
+  return fs.promises.writeFile(fileName, JSON.stringify(updatedFile, null, 2));
+}
+
+async function processLocalesFolder(filePath) {
+  if (path.basename(filePath) === 'en') {
+    await common.parseFolder(filePath, updateFile);
+  }
+}
+
+(async () => {
+  await common.parseFolder(publicDir, processLocalesFolder);
+})();

i18next-parser.config.js

@@ -1,9 +1,31 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
+const { CustomJSONLexer } = require('./i18n-scripts/lexers');
+
+// eslint-disable-next-line no-undef
 module.exports = {
+  sort: true,
   createOldCatalogs: false,
   keySeparator: false,
   locales: ['en'],
   namespaceSeparator: '~',
   reactNamespace: false,
-  useKeysAsDefaultValue: true,
   defaultNamespace: 'plugin__console-plugin-nvidia-gpu',
+  useKeysAsDefaultValue: true,
+
+  lexers: {
+    hbs: ['HandlebarsLexer'],
+    handlebars: ['HandlebarsLexer'],
+
+    htm: ['HTMLLexer'],
+    html: ['HTMLLexer'],
+
+    mjs: ['JavascriptLexer'],
+    js: ['JavascriptLexer'],
+    ts: ['JavascriptLexer'],
+    jsx: ['JsxLexer'],
+    tsx: ['JsxLexer'],
+    json: [CustomJSONLexer],
+
+    default: ['JavascriptLexer'],
+  },
 };