ZENKO-2875 Slimming down the bundle(s)

.gitignore

@@ -1,6 +1,7 @@
 /public/assets/js
 /public/assets/fonts
 /public/assets/index.html
+/public/assets/index.html.gz
 
 yarn-error.log
 

conf/zenko-ui-nginx.conf

@@ -1,11 +1,34 @@
 server {
   listen       8383;
-  server_name  localhost;
+  server_name  _;
+
+  # send precompressed files with the “.gz” filename extension instead of regular files
+  gzip_static on;
 
   root   /usr/share/nginx/html;
   index index.html index.htm;
 
   location / {
       try_files $uri $uri/ /index.html;
   }
+
+  location /s3 {
+    rewrite            /s3/(.*) /$1  break;
+    proxy_pass         http://10.200.2.13:8000/;
+    proxy_redirect     off;
+    proxy_set_header   host $host:$server_port;
+    proxy_set_header   proxy_path /s3/$1;
+  }
+
+  location /iam {
+    proxy_pass         http://10.200.2.13:8600/;
+    proxy_set_header   host $host:$server_port;
+    proxy_set_header   proxy_path /iam;
+  }
+
+  location /sts {
+    proxy_pass         http://10.200.2.13:8800/;
+    proxy_set_header   host $host:$server_port;
+    proxy_set_header   proxy_path /sts;
+  }
 }

package.json

@@ -7,7 +7,7 @@
     "test": "jest",
     "test:lint": "eslint --ext js --ext jsx src",
     "start:dev": "webpack-dev-server --config webpack.dev.js",
-    "build": "webpack --config webpack.prod.js",
+    "build": "webpack -p --progress --config webpack.prod.js",
     "cypress:run": "cypress run",
     "cypress:open": "cypress open"
   },
@@ -23,6 +23,7 @@
     "@welldone-software/why-did-you-render": "^4.0.5",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
+    "compression-webpack-plugin": "^6.0.3",
     "css-loader": "^3.4.2",
     "cypress": "^4.8.0",
     "enzyme": "^3.11.0",
@@ -45,6 +46,7 @@
     "redux-mock-store": "^1.5.4",
     "style-loader": "^1.1.3",
     "webpack": "^4.41.5",
+    "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.10.3",
     "webpack-merge": "^4.2.2"

src/js/IAMClient.js

@@ -1,8 +1,8 @@
-import AWS from 'aws-sdk';
+import IAM from 'aws-sdk/clients/iam';
 
 export default class IAMClient {
     constructor(creds) {
-        this.client = new AWS.IAM({
+        this.client = new IAM({
             // endpoint: 'https://iam.amazonaws.com',
             endpoint: 'http://127.0.0.1:8383/iam',
             accessKeyId: creds.accessKey,

src/js/S3Client.js

@@ -1,4 +1,4 @@
-import AWS from 'aws-sdk';
+import S3 from 'aws-sdk/clients/s3';
 const async = require('async');
 
 const MULTIPART_UPLOAD = {
@@ -8,7 +8,7 @@ const MULTIPART_UPLOAD = {
 
 export default class S3Client {
     constructor(params) {
-        this.client = new AWS.S3({
+        this.client = new S3({
             endpoint: params.endpoint,
             accessKeyId: params.accessKey,
             secretAccessKey: params.secretKey,

src/js/STSClient.js

@@ -1,8 +1,8 @@
-import AWS from 'aws-sdk';
+import STS from 'aws-sdk/clients/sts';
 
 export default class STSClient {
     constructor(conf) {
-        this.client = new AWS.STS({
+        this.client = new STS({
             endpoint: conf.endpoint,
             region: 'us-east-1',
         });

src/react/Routes.jsx

@@ -1,22 +1,16 @@
 // @flow
 
-import { Link, Route, matchPath } from 'react-router-dom';
+import { Link, Redirect, Route, matchPath } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import AccountCreate from './account/AccountCreate';
 import Accounts from './account/Accounts';
 import type { Action } from '../types/actions';
 import type { AppState } from '../types/state';
 import DataBrowser from './databrowser/DataBrowser';
 import type { DispatchAPI } from 'redux';
-import Groups from './group/Groups';
 import LocationEditor from './backend/location/LocationEditor';
 import { Navbar } from '@scality/core-ui';
 import React from 'react';
-import ReplicationCreate from './workflow/replication/ReplicationCreate';
-import StorageMonitor from './backend/StorageMonitor';
-import UserCreate from './user/UserCreate';
-import Users from './user/Users';
-import Workflows from './workflow/Workflows';
 import { signout } from './actions';
 import styled from 'styled-components';
 
@@ -46,51 +40,27 @@ function Routes() {
                         }]
                     }
                     tabs={[
-                        {
-                            link: <Link to="/">Storage Monitoring</Link>,
-                            selected: !!matchPath(pathname, { path: '/', exact: true }),
-                        },
                         {
                             link: <Link to="/accounts">Accounts</Link>,
                             selected: !!matchPath(pathname, { path: '/accounts/:accountName?' }),
                         },
-                        // {
-                        //     link: <Link to="/groups">Groups</Link>,
-                        //     selected: isSelected(location, '/groups'),
-                        // },
-                        // {
-                        //     link: <Link to="/users">Users</Link>,
-                        //     selected: isSelected(location, '/users'),
-                        // },
                         {
                             link: <Link to="/buckets">Data Browser</Link>,
                             selected: !!matchPath(pathname, { path: '/buckets' }),
                         },
-                        // {
-                        //     link: <Link to="/workflow">Data Workflow</Link>,
-                        //     selected: isSelected(location, '/workflow'),
-                        // },
                     ]}
                 />
             </NavbarContainer>
 
-            <Route exact path="/" component={StorageMonitor} />
+            <Route exact path="/" render={() => <Redirect to="/accounts" />}/>
 
             <Route exact path="/create-location" component={LocationEditor} />
             <Route path="/locations/:locationName/edit" component={LocationEditor} />
 
             <Route path='/accounts/:accountName?' component={Accounts} />
             <Route path="/create-account" component={AccountCreate} />
 
-            <Route exact path="/users" component={Users} />
-            <Route path="/users/create" component={UserCreate} />
-
-            <Route path="/groups" component={Groups} />
-
             <Route path={['/buckets/:bucketName?', '/buckets/:bucketName/objects', '/create-bucket']} component={DataBrowser} />
-
-            <Route exact path="/workflow" component={Workflows} />
-            <Route path="/workflow/replication/create" component={ReplicationCreate} />
         </div>
     );
 }

webpack.dev.js

@@ -1,10 +1,14 @@
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 const path = require('path');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = merge(common, {
     mode: 'development',
     devtool: 'inline-source-map',
+    plugins: [
+        new BundleAnalyzerPlugin(),
+    ],
     devServer: {
         contentBase: path.join(__dirname, 'public/assets'),
         host: '127.0.0.1',

webpack.prod.js

@@ -1,7 +1,12 @@
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 const common = require('./webpack.common');
+const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = merge(common, {
     mode: 'production',
     devtool: 'hidden-source-map',
+    plugins: [
+        new CompressionPlugin(),
+    ],
 });