Merge pull request #4293 from RedisInsight/fe/feature/RI-5411_Optimize_builds2

Author: egor-zalenski

.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." />
   }