#RI-5411 - Optimize builds

.github/workflows/aws-upload-dev.yml

@@ -53,6 +53,19 @@ jobs:
         aws s3 cp release/ s3://${AWS_BUCKET_NAME_TEST}/public/upgrades --recursive
         aws s3 cp release/ s3://${AWS_BUCKET_NAME_TEST}/public/pre-release/${APP_VERSION} --recursive
 
+    - name: Download vendor plugins
+      uses: actions/download-artifact@v4
+      id: download-vendor
+      continue-on-error: true
+      with:
+        name: 'vendor-plugins'
+        path: vendor
+
+    - name: Upload vendor plugins to s3 bucket
+      if: steps.download-vendor.outcome == 'success'
+      run: |
+        aws s3 cp vendor/ s3://${AWS_BUCKET_NAME_TEST}/public/plugins/static/ --recursive
+
     - name: Generate job summary
       run: |
         node ./.github/generate-build-summary.js

.github/workflows/pipeline-build-linux.yml

@@ -77,6 +77,13 @@ jobs:
           yarn package:stage --linux $target
         fi
 
+    - uses: actions/upload-artifact@v4
+      name: Upload vendor for plugins
+      with:
+        name: vendor-plugins
+        path: |
+          ./vendor
+
     - uses: actions/upload-artifact@v4
       name: Upload linux builds
       with:

.gitignore

@@ -70,6 +70,7 @@ vendor
 redisinsight/main.js.LICENSE.txt
 redisinsight/main.prod.js.LICENSE.txt
 licenses
+redisinsight/ui/src/packages/common/index*
 
 
 # E2E tests report

package.json

@@ -210,6 +210,7 @@
     "vite": "^5.4.9",
     "vite-bundle-visualizer": "1.0.1",
     "vite-plugin-compression2": "^1.1.0",
+    "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-electron": "^0.28.6",
     "vite-plugin-electron-renderer": "^0.14.5",
     "vite-plugin-react-click-to-component": "^3.0.0",

redisinsight/api/src/modules/cluster-monitor/cluster-monitor.controller.ts

@@ -13,7 +13,7 @@ export class ClusterMonitorController {
 
   @ApiEndpoint({
     statusCode: 200,
-    description: 'Get list of available plugins',
+    description: 'Get cluster details',
     responses: [
       {
         status: 200,

redisinsight/ui/index.html

@@ -19,9 +19,54 @@
       window.__RI_PROXY_PATH__ = undefined;
     }
   </script>
+
+  <style>
+    #page-placeholder {
+      display: flex;
+      background-color: black;
+      width: 100vw;
+      height: 100vh;
+      position: fixed;
+      justify-content: center;
+      align-items: center;
+      top: 0;
+      z-index: 100;
+    }
+
+    #page-placeholder__icon {
+      width: 28px;
+      height: 28px;
+      animation: nonstop-jump 1s ease-in-out infinite;
+
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI2LjM4MjggMTUuNDY3MkMyNC40NTQyIDE3Ljg5NzIgMjIuMzcxMyAyMC42NzQzIDE4LjIwNTYgMjAuNjc0M0MxNC40ODQ3IDIwLjY3NDMgMTMuMDk4NSAxNy4zOTIzIDEzLjAwMSAxNC43MjYxQzEzLjgxNjMgMTYuNDUgMTUuNDEwMiAxNy44NDYxIDE3Ljg5NzEgMTcuNzgxNUMyMi42Nzk5IDE3LjYyNzIgMjUuOTU4NSAxMy4zMDcyIDI1Ljk1ODUgOS4zNzI5MkMyNS45NTg1IDQuNjY3MjIgMjIuNDQ4NSAxLjI3Mjk1IDE2LjM1NDIgMS4yNzI5NUMxMS45OTU3IDEuMjcyOTUgNi41OTU2OSAyLjkzMTUxIDMuMDQ3MTMgNS41NTQzNkMzLjAwODU2IDguMjU0MzUgNC41MTI4NCAxMS43NjQzIDUuMDUyODQgMTEuMzc4NkM4LjEyOTIgOS4xNjY3MyAxMC41Njg2IDcuNzQyODcgMTIuOTM0NyA3LjAyODkyQzkuNDMyMjYgMTAuOTM0NiAxLjAyODg4IDIwLjAwMzUgMCAyMS42QzAuMTE1NzE0IDIzLjA2NTcgMS45Mjg1NiAyNyAyLjgxNTcgMjdDMy4wODU3IDI3IDMuMzE3MTMgMjYuODQ1NyAzLjU4NzEzIDI2LjU3NTdDNi4xMjA1NiAyMy43MjkyIDguMTg1NzggMjEuMTc3MSAxMC4wMjI3IDE4LjcxNzJDMTAuMjgwNyAyMi4zMjI1IDEyLjA1MzUgMjYuNzMgMTcuMDA5OSAyNi43M0MyMS40NDU2IDI2LjczIDI1Ljg0MjggMjMuNTI4NiAyNy44NDg1IDE2LjMxNThDMjguMDc5OSAxNS40Mjg2IDI2Ljk5OTkgMTQuNzM0MyAyNi4zODI4IDE1LjQ2NzJaTTIxLjMyOTkgOS42NDI5MkMyMS4zMjk5IDExLjkxODYgMTkuMDkyOCAxMy4wMzcyIDE3LjA0ODUgMTMuMDM3MkMxNS45NTU4IDEzLjAzNzIgMTUuMTE2NCAxMi43NTAzIDE0LjQ1MjUgMTIuMzc3NEMxNS42NzQgMTAuNTI3OCAxNi44ODMxIDguNjMxMjUgMTguMTgyMiA2LjYwMDk1QzIwLjQ3MjggNi45ODg2NSAyMS4zMjk5IDguMjYxODcgMjEuMzI5OSA5LjY0MjkyWiIgZmlsbD0iI0ZGNDQzOCIvPgo8L3N2Zz4K");
+    }
+
+    @keyframes nonstop-jump {
+      0% {
+        transform: translateY(0px);
+      }
+      50% {
+        transform: translateY(6px);
+      }
+      100% {
+        transform: translateY(0px);
+      }
+    }
+  </style>
+
+  <% if(isDev){ %>
+    <style>
+      body #page-placeholder {
+        display: none;
+      }
+    </style>
+  <% } %>
 </head>
-<body>
+<body style="margin: 0">
   <div id="root"></div>
+  <div id="page-placeholder">
+    <div id="page-placeholder__icon"></div>
+  </div>
   <script type="module" src="/%RI_INDEX_NAME%"></script>
 </body>
 </html>

redisinsight/ui/package.json

@@ -12,6 +12,6 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "stats": "npx vite-bundle-visualizer --open -o ./dist-stats.html --sourcemap"
+    "stats": "NODE_OPTIONS=--max_old_space_size=8192 npx vite-bundle-visualizer --open -o ./dist-stats.html --sourcemap"
   }
 }

redisinsight/ui/src/App.tsx

@@ -1,11 +1,11 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import { Provider, useSelector } from 'react-redux'
 import { EuiPage, EuiPageBody } from '@elastic/eui'
 
 import { Route, Switch } from 'react-router-dom'
 import { store } from 'uiSrc/slices/store'
 import { appInfoSelector } from 'uiSrc/slices/app/info'
-import { PagePlaceholder } from 'uiSrc/components'
+import { removePagePlaceholder } from 'uiSrc/utils'
 import MonacoLanguages from 'uiSrc/components/monaco-laguages'
 import AppInit from 'uiSrc/components/init/AppInit'
 import { Pages, Theme } from './constants'
@@ -40,6 +40,11 @@ const AppWrapper = ({ children }: { children?: ReactElement[] }) => (
 )
 const App = ({ children }: { children?: ReactElement[] }) => {
   const { loading: serverLoading } = useSelector(appInfoSelector)
+  useEffect(() => {
+    if (!serverLoading) {
+      removePagePlaceholder()
+    }
+  }, [serverLoading])
   return (
     <div className="main-container">
       <ThemeComponent />
@@ -54,18 +59,14 @@ const App = ({ children }: { children?: ReactElement[] }) => {
           path="*"
           render={() => (
             <>
-              { serverLoading
-                ? <PagePlaceholder />
-                : (
-                  <EuiPage className="main">
-                    <GlobalDialogs />
-                    <GlobalSubscriptions />
-                    <NavigationMenu />
-                    <EuiPageBody component="main">
-                      <MainComponent />
-                    </EuiPageBody>
-                  </EuiPage>
-                )}
+              <EuiPage className="main">
+                <GlobalDialogs />
+                <GlobalSubscriptions />
+                <NavigationMenu />
+                <EuiPageBody component="main">
+                  <MainComponent />
+                </EuiPageBody>
+              </EuiPage>
               <Notifications />
               <Config />
               <ShortcutsFlyout />

redisinsight/ui/src/components/MonacoEnvironmentInitializer/MonacoEnvironmentInitializer.tsx

@@ -2,7 +2,6 @@ import { useEffect } from 'react'
 
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import JSONWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
-import TypeScriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 // https://github.com/remcohaszing/monaco-yaml?tab=readme-ov-file#why-doesnt-it-work-with-vite
 import YamlWorker from './yaml.worker?worker'
 
@@ -17,9 +16,6 @@ const MonacoEnvironmentInitializer = () => {
             return new YamlWorker()
           case 'json':
             return new JSONWorker()
-          case 'javascript':
-          case 'typescript':
-            return new TypeScriptWorker()
           default:
             throw new Error(`MonacoWorker: Unknown label ${label}`)
         }

redisinsight/ui/src/components/init/AppInit.tsx

@@ -6,6 +6,7 @@ import {
   STATUS_FAIL,
   STATUS_SUCCESS,
 } from 'uiSrc/slices/app/init'
+import { removePagePlaceholder } from 'uiSrc/utils'
 import ConnectivityError from 'uiSrc/components/connectivity-error/ConnectivityError'
 import SuspenseLoader from 'uiSrc/components/main-router/components/SuspenseLoader'
 
@@ -28,6 +29,7 @@ const AppInit = ({ children, onSuccess, onFail }: Props) => {
   }, [])
 
   if (status === STATUS_FAIL) {
+    removePagePlaceholder()
     return <ConnectivityError isLoading={false} onRetry={initApp} error="An unexpected server error has occurred. Please retry the request." />
   }
 

redisinsight/ui/src/components/monaco-editor/index.ts

@@ -1,12 +1,10 @@
 import MonacoEditor from './MonacoEditor'
-import MonacoJS from './components/monaco-js'
 import MonacoJson from './components/monaco-json'
 import MonacoYaml from './components/monaco-yaml'
 import DedicatedEditor from './components/dedicated-editor'
 
 export {
   MonacoEditor,
-  MonacoJS,
   MonacoJson,
   MonacoYaml,
   DedicatedEditor,

redisinsight/ui/src/packages/clients-list/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Client list plugin</title>
+
+  <script type="module" src="./src/main.tsx"></script>
+  <!-- Run Conditions-->
+  <% if(isDev){ %>
+    <link rel="stylesheet" href="https://s3.us-east-1.amazonaws.com/redisinsight.test/public/plugins/static/global_styles.css" />
+    <link rel="stylesheet" href="https://s3.us-east-1.amazonaws.com/redisinsight.test/public/plugins/static/dark_theme.css" />
+    <!-- <link rel="stylesheet" href="https://s3.us-east-1.amazonaws.com/redisinsight.test/public/plugins/static/light_theme.css" /> -->
+  <% } %>
+</head>
+<body class="theme_DARK">
+  <div id="app"></div>
+</body>
+</html>

redisinsight/ui/src/packages/clients-list/package.json

@@ -12,22 +12,9 @@
   "styles": "./dist/styles.css",
   "main": "./dist/index.js",
   "name": "client-list",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "scripts": {
-    "start": "cross-env NODE_ENV=development parcel serve src/index.html",
-    "build": "rimraf dist && cross-env NODE_ENV=production concurrently \"yarn build:js && yarn minify:js\" \"yarn build:css\" \"yarn build:assets\"",
-    "build:js": "parcel build src/main.tsx --no-source-maps --no-cache --dist-dir dist",
-    "build:css": "parcel build src/styles/styles.scss --no-source-maps --no-cache --dist-dir dist",
-    "build:css:dark": "parcel build src/styles/dark_theme.scss --no-source-maps --no-cache --dist-dir dist",
-    "build:css:light": "parcel build src/styles/light_theme.scss --no-source-maps --no-cache --dist-dir dist",
-    "build:assets": "parcel build src/assets/**/* --dist-dir dist",
-    "minify:js": "terser --compress --mangle -- dist/main.js > dist/index.js && rimraf dist/main.js"
-  },
-  "targets": {
-    "main": false,
-    "module": {
-      "includeNodeModules": true
-    }
+    "dev": "vite -c ../vite.config.mjs"
   },
   "visualizations": [
     {
@@ -68,19 +55,7 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.12.0",
-    "@parcel/transformer-sass": "^2.12.0",
-    "@types/json-bigint": "^1.0.1",
-    "@types/node": "^17.0.21",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
-    "concurrently": "^7.6.0",
-    "cross-env": "^7.0.3",
-    "parcel": "^2.12.0",
-    "process": "^0.11.10",
-    "rimraf": "^3.0.2",
-    "terser": "^5.16.6",
-    "typescript": ">=3.0.0"
+    "vite": "file:../node_modules/vite"
   },
   "dependencies": {
     "@elastic/datemath": "^5.0.3",
@@ -94,8 +69,6 @@
     "redisinsight-plugin-sdk": "^1.1.0"
   },
   "resolutions": {
-    "@parcel/**/micromatch": "^4.0.8",
-    "@parcel/**/braces": "^3.0.3",
     "trim": "0.0.3",
     "**/semver": "^7.5.2"
   }

redisinsight/ui/src/packages/clients-list/src/global.d.ts

@@ -0,0 +1 @@
+declare module '@elastic/eui/es/components/icon/*'

redisinsight/ui/src/packages/clients-list/src/main.tsx

@@ -2,6 +2,7 @@
 import React from 'react'
 import { render } from 'react-dom'
 import App, { CommonPlugin, RawMode } from './App'
+import './styles/styles.scss'
 
 interface Props {
   command?: string