Initial React frontend styling implementation

Author: jasondellaluce

react-frontend/.env

@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+DISABLE_ESLINT_PLUGIN=true

react-frontend/Dockerfile

@@ -0,0 +1,31 @@
+# Build stage
+FROM node:16-alpine as build
+
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy the rest of the code
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy the build output to replace the default nginx contents
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Copy custom nginx config if needed
+# COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port 80
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

react-frontend/README.md

@@ -0,0 +1,79 @@
+# Sysdig Inspect React Frontend
+
+This is a React.js port of the original Ember.js frontend for Sysdig Inspect. It maintains the same visual appearance and functionality while using modern React.js and Redux for state management.
+
+## Project Structure
+
+- `src/components`: Reusable UI components
+- `src/pages`: Page components that correspond to routes
+- `src/store`: Redux store configuration and slices
+- `src/services`: API and utility services
+- `src/styles`: LESS stylesheets
+- `public`: Static assets
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 16 or higher
+- npm 7 or higher
+
+### Installation
+
+```bash
+cd react-frontend
+npm install
+```
+
+If you encounter TypeScript version conflicts during installation, the project has been configured to use TypeScript 4.9.5 which is compatible with Create React App. The configuration includes:
+
+- Using react-app-rewired and customize-cra for LESS support
+- Setting up proper TypeScript configuration
+- Adding type declarations for LESS files
+
+If you still encounter issues, try removing the node_modules directory and package-lock.json file before reinstalling:
+
+```bash
+rm -rf node_modules package-lock.json
+npm install
+```
+
+### Development
+
+To start the development server:
+
+```bash
+npm start
+```
+
+This will start the React development server on port 3001, which proxies API requests to the backend server running on port 3000.
+
+### Building for Production
+
+To build the application for production:
+
+```bash
+npm run build
+```
+
+This creates a `build` directory with the compiled application.
+
+## Docker
+
+To build and run the React frontend in a Docker container:
+
+```bash
+# Build the Docker image
+docker build -t sysdig-inspect-react .
+
+# Run the container
+docker run -p 80:80 sysdig-inspect-react
+```
+
+## Integration with Electron
+
+The React frontend is designed to work with the existing Electron application. The Electron main process and backend server remain unchanged, while the frontend is replaced with this React implementation.
+
+## License
+
+This project is licensed under the GNU General Public License - see the LICENSE file for details.

react-frontend/config-overrides.js

@@ -0,0 +1,59 @@
+const { addLessLoader } = require('customize-cra');
+
+// Custom function to fix PostCSS loader issues
+const fixPostcssLoaderConfig = (config) => {
+  const oneOfRules = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
+
+  // Find all rules that use postcss-loader
+  oneOfRules.forEach(rule => {
+    if (rule.use && Array.isArray(rule.use)) {
+      rule.use.forEach(loader => {
+        if (loader.loader && loader.loader.includes('postcss-loader') && loader.options) {
+          // Fix the options to match the new API
+          const options = { ...loader.options };
+          delete options.ident;
+          delete options.plugins;
+
+          // Set the new options
+          loader.options = {
+            postcssOptions: {
+              plugins: [
+                require.resolve('postcss-flexbugs-fixes'),
+                [
+                  require.resolve('postcss-preset-env'),
+                  {
+                    autoprefixer: {
+                      flexbox: 'no-2009',
+                    },
+                    stage: 3,
+                  },
+                ],
+                require.resolve('postcss-normalize'),
+              ],
+            },
+            sourceMap: options.sourceMap,
+          };
+        }
+      });
+    }
+  });
+
+  return config;
+};
+
+module.exports = function override(config, env) {
+  // Add LESS loader
+  config = addLessLoader({
+    lessOptions: {
+      javascriptEnabled: true,
+      modifyVars: {
+        // You can add any LESS variables here if needed
+      }
+    }
+  })(config, env);
+
+  // Fix PostCSS loader config
+  config = fixPostcssLoaderConfig(config);
+
+  return config;
+};

react-frontend/craco.config.js

@@ -0,0 +1,74 @@
+const lessRegex = /\.less$/;
+const lessModuleRegex = /\.module\.less$/;
+
+module.exports = {
+  webpack: {
+    configure: (webpackConfig) => {
+      // Find the style rules
+      const oneOfRules = webpackConfig.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
+
+      // Add LESS support
+      const lessRule = {
+        test: lessRegex,
+        exclude: lessModuleRegex,
+        use: [
+          // The first two loaders are the same as for CSS
+          ...oneOfRules.find(rule => rule.test && rule.test.toString().includes('css') && !rule.test.toString().includes('module')).use,
+          {
+            loader: require.resolve('less-loader'),
+            options: {
+              lessOptions: {
+                javascriptEnabled: true,
+              },
+            },
+          },
+        ],
+        sideEffects: true,
+      };
+
+      // Add LESS modules support
+      const lessModuleRule = {
+        test: lessModuleRegex,
+        use: [
+          // The first loaders are the same as for CSS modules
+          ...oneOfRules.find(rule => rule.test && rule.test.toString().includes('module')).use,
+          {
+            loader: require.resolve('less-loader'),
+            options: {
+              lessOptions: {
+                javascriptEnabled: true,
+              },
+            },
+          },
+        ],
+      };
+
+      // Insert the LESS rules before the file-loader rule
+      const fileLoaderIndex = oneOfRules.findIndex(rule => rule.type === 'asset/resource');
+      oneOfRules.splice(fileLoaderIndex, 0, lessRule, lessModuleRule);
+
+      // Fix PostCSS loader issues
+      oneOfRules.forEach(rule => {
+        if (rule.use && Array.isArray(rule.use)) {
+          rule.use.forEach(loader => {
+            if (loader.loader && loader.loader.includes('postcss-loader') && loader.options) {
+              // Fix the options to match the new API
+              if (loader.options.ident) {
+                delete loader.options.ident;
+              }
+
+              if (loader.options.plugins) {
+                loader.options.postcssOptions = {
+                  plugins: loader.options.plugins
+                };
+                delete loader.options.plugins;
+              }
+            }
+          });
+        }
+      });
+
+      return webpackConfig;
+    }
+  }
+};