Merge pull request #528 from bartoval/enable_compress_webpack

Enable compress webpack

.github/workflows/skupper-console.yml → .github/workflows/build.yml

@@ -1,14 +1,16 @@
-name: network-console
+name: Build 🏗️
+
 on:
   push:
     branches: [main, v2]
   pull_request:
     branches: [main, v2]
+
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout 🛎️
+      - name: Checkout code 📥
         uses: actions/checkout@v4
 
       - name: Set up Node.js ⚙️
@@ -18,31 +20,35 @@ jobs:
           cache: 'yarn'
           cache-dependency-path: yarn.lock
 
-      - name: Install 📦
+      - name: Install dependencies 📦
+        run: |
+          HUSKY=0 yarn install --prefer-offline --immutable --check-cache
+
+      - name: Check for cyclic dependencies 🔄
         run: |
-          HUSKY=0 yarn install --prefer-offline --immutable --immutable-cache --check-cache
+          yarn check-cycles
 
-      - name: Lint 🎨
+      - name: Lint code 🎨
         run: |
           yarn lint
 
-      - name: Build 🚧
+      - name: Build project 🏗️
         run: |
           yarn build
 
       - name: Get number of CPU cores 💻
         id: cpu-cores
         uses: SimenB/github-actions-cpu-cores@v2
 
-      - name: Unit tests 🔧
+      - name: Run Unit tests 🧪
         run: |
           yarn coverage --max-workers ${{ steps.cpu-cores.outputs.count }}
 
-      - name: Upload coverage reports to Codecov
+      - name: Upload coverage to Codecov 📊
         uses: codecov/codecov-action@v3
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
-      - name: Integration tests 🚨
+      - name: Run Integration tests 🚨
         run: |
           yarn ci

.github/workflows/commitlint.yml

@@ -1,11 +1,25 @@
-name: Lint Commit Messages
-on: [pull_request, push]
+name: Lint Commit Messages 📝
+
+on:
+  pull_request:
+    branches:
+      - main
+      - v2
+  push:
+    branches:
+      - main
+      - v2
 
 jobs:
   commitlint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout code 📥
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: wagoid/commitlint-github-action@v5
+
+      - name: Run commit lint check ✅
+        uses: wagoid/commitlint-github-action@v5
+        with:
+          configFile: .commitlint.config.js

.github/workflows/release.yml

@@ -1,17 +1,16 @@
-name: release
+name: Release 🚀
+
 on:
   push:
-    # Sequence of patterns matched against tags
-    # Right now, we run this job automatically when a semantically versioned
-    # tag is pushed (with an optional suffix).
     tags:
-      - '[0-9]+.[0-9]+.[0-9]+*'
+      - '[0-9]+.[0-9]+.[0-9]+*' # Match semantically versioned tags
+
 jobs:
   build-and-release:
-    name: Build and release network-console
+    name: Build and Release Network Console 📦
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout 🛎️
+      - name: Checkout code 🛎️
         uses: actions/checkout@v4
 
       - name: Set up Node.js ⚙️
@@ -21,36 +20,38 @@ jobs:
           cache: 'yarn'
           cache-dependency-path: yarn.lock
 
-      - name: Set env 📋
+      - name: Set Environment Variable 📋
         run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
-      - name: Install 📦
+
+      - name: Install Dependencies 📦
         run: |
           HUSKY=0 CYPRESS_RUN_BINARY=0 yarn install --ignore-optional --immutable --immutable-cache --check-cache --prefer-offline
-      - name: Build 🚧
+
+      - name: Build Project 🚧
         run: |
           yarn build
         env:
           CI: false
-      - name: Unit tests 🔧
-        run: |
-          yarn test
-      - name: Package 📦
+
+      - name: Package Build 📦
         run: |
           cd build/ && tar -zcvf ../console.tgz --exclude='./data' .
-      - name: Create Draft Release ✅
+
+      - name: Create Draft Release ✨
         id: create_release
         uses: actions/create-release@v1
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           tag_name: ${{ github.ref }}
           release_name: Release ${{ env.RELEASE_VERSION }}
           body: |
             Skupper-console is available as a tar ball:
             - console.tgz
-            Issues fixed in this release
+            Issues fixed in this release:
             - https://github.com/skupperproject/skupper-console/issues?q=is:issue%20milestone:${{ env.RELEASE_VERSION }}
           draft: true
+
       - name: Upload Release Asset ⬆️
         id: upload-release-asset
         uses: actions/upload-release-asset@v1

.husky/commit-msg

@@ -1,2 +1,4 @@
 #!/usr/bin/env sh
+
+# Run the commitlint tool to check the commit message format during the commit-msg hook
 npx --no -- commitlint --edit ${1}

.husky/pre-commit

@@ -1,11 +1,17 @@
 #!/bin/sh
-# .husky/pre-commit
 
+# Check if the "node_modules" directory exists, otherwise run yarn install
 if [ ! -d "node_modules" ]; then
   echo "node_modules directory not found. Running yarn install..."
-  yarn install
+  if ! yarn install; then
+    echo "Error: yarn install failed!"
+    exit 1
+  fi
 fi
 
-# prettier
-yarn format
-
+# Run code formatting with Prettier
+echo "Running Prettier formatting..."
+if ! yarn format; then
+  echo "Error: Code formatting failed!"
+  exit 1
+fi

.husky/pre-push

@@ -1,3 +1,22 @@
 #!/bin/sh
-yarn lint-fix
-yarn tsc
+
+# Run ESLint fix to automatically address any issues identified by ESLint
+echo "Running ESLint fix..."
+if ! yarn lint-fix; then
+  echo "Error: ESLint fix failed!"
+  exit 1
+fi
+
+# Run TypeScript type check using tsc to verify the code compiles without errors
+echo "Running TypeScript type check..."
+if ! yarn tsc; then
+  echo "Error: TypeScript check failed!"
+  exit 1
+fi
+
+# Run TypeScript type check using tsc to verify the code compiles without errors
+echo "Running TypeScript type dep. cycles..."
+if ! yarn check-cycles; then
+  echo "Error: TypeScript dep. cycles failed!"
+  exit 1
+fi

eslint.config.mjs

@@ -94,13 +94,7 @@ export default [
       'padding-line-between-statements': 'off',
       'import/prefer-default-export': 'off',
 
-      'import/no-cycle': [
-        'error',
-        {
-          maxDepth: 3,
-          ignoreExternal: true
-        }
-      ],
+      'import/no-cycle': 'off',
 
       'no-console': 1,
       semi: [1, 'always'],

package.json

@@ -32,6 +32,7 @@
     "lint-fix": "yarn lint --fix",
     "format": "prettier --write 'src/**/*.{ts,tsx,json,css}'",
     "ts-check": "yarn tsc",
+    "check-cycles": "madge --circular --extensions ts,tsx src",
     "bundle-report": "STATS=server yarn build",
     "find-unused-modules": "ts-prune",
     "prepare": "husky",
@@ -87,6 +88,7 @@
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "madge": "^8.0.0",
     "mini-css-extract-plugin": "^2.9.2",
     "miragejs": "^0.1.48",
     "prettier": "^3.4.2",

src/core/components/SKSanckeyChart/index.tsx

@@ -58,7 +58,7 @@ const SkSankeyChart: FC<{ data: SkSankeyChartProps; onSearch?: Function; formatt
               tooltip: { container: { color: styles.default.darkTextColor } }
             }}
             labelTextColor={styles.default.darkTextColor}
-            valueFormat={formatter ? (value: number) => formatter?.(value) : ''}
+            valueFormat={(value: number) => formatter?.(value)}
             colors={getColors}
           />
         </div>

src/pages/Services/components/PairsSankeyChart.tsx

@@ -74,7 +74,7 @@ const PairsSankeyChart: FC<PairsSankeyChartProps> = function ({ pairs, showFilte
         <SkSankeyChart
           data={{ nodes, links }}
           onSearch={showFilter ? handleFindPairType : undefined}
-          formatter={metricSelected && mapFormatter[metricSelected]}
+          formatter={metricSelected ? mapFormatter[metricSelected] : undefined}
         />
       </CardBody>
     </Card>

src/pages/Services/services/index.ts

@@ -188,7 +188,8 @@ const generateSankeyLinks = (
       .map(({ sourceName, destinationName, ...rest }) => ({
         source: `${sourceName}.`,
         target: destinationName,
-        value: metricSelected ? (rest[metricSelected] as number) : DEFAULT_SANKEY_CHART_FLOW_VALUE
+        value:
+          metricSelected && rest[metricSelected] ? (rest[metricSelected] as number) : DEFAULT_SANKEY_CHART_FLOW_VALUE
       }))
       .filter(({ source, target }) => source && target)
   );

webpack.prod.ts

@@ -21,8 +21,8 @@ const prodConfig = {
   },
   output: {
     path: pathProd.join(ROOT_PROD, '/build'), // Output directory for production build
-    filename: '[name]-[contenthash].min.js', // Use content hash in filenames for cache busting
-    chunkFilename: 'js/[name]-[chunkhash].min.js', // Chunk filenames with a hash
+    filename: '[name].[contenthash].min.js', // Use content hash in filenames for cache busting
+    chunkFilename: 'js/[name].[chunkhash].min.js', // Chunk filenames with a hash
     publicPath: '/', // Public URL of the output directory
     clean: true // Clean the output directory before each build
   },
@@ -77,7 +77,7 @@ const prodConfig = {
       new TerserJSPlugin({
         test: /\.js$/, // Apply TerserJS for minifying JavaScript
         terserOptions: {
-          compress: false, // Do not apply compression (optional)
+          compress: true,
           mangle: true, // Mangle variable names to reduce file size
           format: {
             comments: false // Remove comments from the minified code