[WebUI] Fixes and dependency updates

snowflakedb · Sep 23, 2020 · 425cdb6 · 425cdb6
1 parent 94e91a5
commit 425cdb6
Show file tree

Hide file tree

Showing 7 changed files with 1,104 additions and 1,096 deletions.
diff --git a/src/webui/frontend/config-overrides.js b/src/webui/frontend/config-overrides.js
@@ -7,13 +7,15 @@ module.exports = override(
     style: true,
   }),
   addLessLoader({
-    javascriptEnabled: true,
-    modifyVars: {
-      // Fetch icons locally instead of Alibaba CDN (https://ant.design/docs/react/customize-theme).
-      // Latest resource can be found here: https://ant.design/docs/spec/download.
-      '@icon-url': '"/iconfont"',
-      // Override Ant's LESS constants (https://ant.design/docs/react/use-with-create-react-app).
-      '@primary-color': '#00a2ae',
-    },
+    lessOptions: {
+      javascriptEnabled: true,
+      modifyVars: {
+        // Fetch icons locally instead of Alibaba CDN (https://ant.design/docs/react/customize-theme).
+        // Latest resource can be found here: https://ant.design/docs/spec/download.
+        'icon-url': '"/iconfont"',
+        // Override Ant's LESS constants (https://ant.design/docs/react/use-with-create-react-app).
+        'primary-color': '#00a2ae',
+      },
+    }
   }),
 );
diff --git a/src/webui/frontend/package.json b/src/webui/frontend/package.json
@@ -4,28 +4,28 @@
   "main": "lib/index.js",
   "private": true,
   "dependencies": {
-    "@antv/data-set": "^0.11.1",
+    "@antv/data-set": "^0.11.6",
     "@reach/router": "^1.3.3",
-    "@types/jest": "^26.0.7",
-    "@types/react": "^16.9.25",
+    "@types/jest": "^26.0.14",
+    "@types/react": "^16.9.49",
     "@types/react-router": "^5.1.4",
-    "antd": "^4.0.3",
-    "axios": "^0.19.2",
+    "antd": "^4.6.5",
+    "axios": "^0.20.0",
     "classnames": "^2.2.6",
     "connected-react-router": "^6.8.0",
     "enquire.js": "^2.1.6",
-    "history": "^4.7.2",
-    "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.13",
+    "history": "^5.0.0",
+    "jwt-decode": "^3.0.0-beta.2",
+    "lodash": "^4.17.20",
     "lodash-decorators": "^6.0.0",
-    "moment": "^2.23.0",
+    "moment": "^2.29.0",
     "path-to-regexp": "^6.1.0",
-    "rc-drawer": "^3.1.3",
+    "rc-drawer": "^4.1.0",
     "react": "^16.13.1",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
-    "react-router": "^5.1.2",
+    "react-router": "^5.2.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0"
   },
@@ -53,38 +53,38 @@
   "devDependencies": {
     "@types/classnames": "^2.2.10",
     "@types/enquire.js": "^2.1.1",
-    "@types/history": "^4.7.5",
+    "@types/history": "^4.7.8",
     "@types/jwt-decode": "^2.2.1",
-    "@types/lodash": "^4.14.149",
-    "@types/node": "^14.0.27",
+    "@types/lodash": "^4.14.161",
+    "@types/node": "^14.11.2",
     "@types/reach__router": "^1.3.1",
     "@types/react-document-title": "^2.0.4",
     "@types/react-dom": "^16.9.5",
     "@types/react-redux": "^7.1.7",
     "@types/stylus": "^0.48.32",
     "babel-plugin-import": "^1.13.0",
-    "css-loader": "^3.4.2",
-    "customize-cra": "^0.9.1",
-    "fork-ts-checker-webpack-plugin": "^4.1.1",
-    "husky": "^4.2.3",
+    "css-loader": "^4.3.0",
+    "customize-cra": "^1.0.0",
+    "fork-ts-checker-webpack-plugin": "^5.2.0",
+    "husky": "^4.3.0",
     "less": "^3.11.1",
-    "less-loader": "^5.0.0",
-    "lint-staged": "^10.0.8",
+    "less-loader": "^7.0.1",
+    "lint-staged": "^10.4.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.1",
+    "prettier": "^2.1.2",
     "react-app-rewired": "^2.1.5",
-    "react-scripts": "^3.4.1",
+    "react-scripts": "^3.4.3",
     "redux-devtools-extension": "^2.13.7",
-    "source-map-explorer": "^2.4.1",
+    "source-map-explorer": "^2.5.0",
     "style-loader": "^1.1.3",
     "stylus": "^0.54.5",
     "stylus-chokidar": "^0.0.3",
     "ts-import-plugin": "^1.6.5",
-    "ts-loader": "^6.2.2",
-    "tslint": "^6.1.0",
+    "ts-loader": "^8.0.4",
+    "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.13.0",
-    "tslint-react": "^4.2.0",
-    "typescript": "^3.8.3"
+    "tslint-react": "^5.0.0",
+    "typescript": "^4.0.3"
   },
   "browserslist": {
     "production": [

diff --git a/src/webui/frontend/src/App.tsx b/src/webui/frontend/src/App.tsx
@@ -1,31 +1,29 @@
 import * as React from 'react';
 import {Router, Redirect} from '@reach/router';
 
-import BasicLayout from './layouts/BasicLayout';
 import MainLayout from './layouts/MainLayout';
 
 import LoginForm from './routes/User/Login';
 import AlertsDashboard from './routes/Dashboard/Alerts';
 import ConnectorsDashboard from './routes/Dashboard/Connectors';
 import PoliciesDashboard from './routes/Dashboard/Policies';
 import ViolationsDashboard from './routes/Dashboard/Violations';
-import Baselines from './routes/Dashboard/Baselines';
+import BaselinesDashboard from './routes/Dashboard/Baselines';
 
 const SnowAlertWebUI = () => (
   <>
     <Router>
       <Redirect noThrow from="/" to="dashboard/connectors" />
       <MainLayout path="login" component={LoginForm} />
 
-      <BasicLayout path="dashboard/connectors">
-        <ConnectorsDashboard path="/" />
-        <ConnectorsDashboard path="/:selected" />
-      </BasicLayout>
+      <ConnectorsDashboard path="dashboard/connectors" />
+      <ConnectorsDashboard path="dashboard/connectors/:selected" />
 
-      <BasicLayout path="dashboard/baselines">
-        <Baselines path="/" />
-        <Baselines path="/:selected" />
-      </BasicLayout>
+      <BaselinesDashboard path="dashboard/baselines" />
+      <BaselinesDashboard path="dashboard/baselines/:selected" />
+
+      <AlertsDashboard path="dashboard/alerts" />
+      <AlertsDashboard path="dashboard/alerts/:selected" />
 
       <AlertsDashboard path="dashboard/alerts" />
       <AlertsDashboard path="dashboard/alerts/:selected" />

diff --git a/src/webui/frontend/src/routes/Dashboard/Baselines.tsx b/src/webui/frontend/src/routes/Dashboard/Baselines.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {Link} from '@reach/router';
 import {bindActionCreators, Dispatch} from 'redux';
+import BasicLayout from '../../layouts/BasicLayout';
 import {getData} from '../../reducers/data';
 import * as stateTypes from '../../reducers/types';
 import {navigate} from '../../store/history';
@@ -62,7 +63,6 @@ class Baselines extends React.Component<BaselinesProps, OwnState> {
       data: {baselines},
     } = this.props;
     const toFind = title || selected;
-    console.log(selected);
     return baselines.find(b => b.baseline === toFind);
   }
 
@@ -95,7 +95,7 @@ class Baselines extends React.Component<BaselinesProps, OwnState> {
     }
 
     return selectedBaseline ? (
-      <div>
+      <BasicLayout>
         <Modal
           title={`Error Creating Baseline`}
           visible={!!errorMessage}
@@ -128,25 +128,22 @@ class Baselines extends React.Component<BaselinesProps, OwnState> {
             </Button>,
           ]}
         >
-          <div>
-            <List
-              size="large"
-              dataSource={(baselineResults || []).concat()}
-              renderItem={(r: string) => (
-                <List.Item style={{paddingLeft: 16}}>
-                  <CheckOutlined style={{color: '#52c41a', marginRight: 4}} /> {r}
-                </List.Item>
-              )}
-              bordered
-            />
-          </div>
+          <List
+            size="large"
+            dataSource={(baselineResults || []).concat()}
+            renderItem={(r: string) => (
+              <List.Item style={{paddingLeft: 16}}>
+                <CheckOutlined style={{color: '#52c41a', marginRight: 4}} /> {r}
+              </List.Item>
+            )}
+            bordered
+          />
         </Modal>
 
         <h1>Creating {selectedBaseline.title}</h1>
         <List
           itemLayout="vertical"
           size="small"
-          grid={{gutter: 0}}
           dataSource={options}
           renderItem={(opt: any) => (
             <List.Item key={opt.name}>
@@ -189,13 +186,6 @@ class Baselines extends React.Component<BaselinesProps, OwnState> {
             </List.Item>
           )}
         />
-        <Button
-          onClick={() => {
-            this.props.selectBaseline(null);
-          }}
-        >
-          &larr; Go Back
-        </Button>
 
         <Button
           style={{float: 'right'}}
@@ -205,9 +195,9 @@ class Baselines extends React.Component<BaselinesProps, OwnState> {
         >
           {'Create'}
         </Button>
-      </div>
+      </BasicLayout>
     ) : (
-      <div>
+      <BasicLayout>
         {baselines.map(b => (
           <Card
             key={b.baseline}
@@ -229,7 +219,7 @@ class Baselines extends React.Component<BaselinesProps, OwnState> {
             />
           </Card>
         ))}
-      </div>
+      </BasicLayout>
     );
   }
 }

diff --git a/src/webui/frontend/src/routes/Dashboard/Connectors.tsx b/src/webui/frontend/src/routes/Dashboard/Connectors.tsx
@@ -4,6 +4,7 @@ import {LoadingOutlined, ApiOutlined} from '@ant-design/icons';
 import React from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators, Dispatch} from 'redux';
+import BasicLayout from '../../layouts/BasicLayout';
 import {getData} from '../../reducers/data';
 import * as stateTypes from '../../reducers/types';
 import {loadSAData, newConnection, finalizeConnection, testConnection, dismissErrorMessage} from '../../actions/data';
@@ -39,7 +40,7 @@ class Connectors extends React.Component<ConnectorsProps & {path: string}, OwnSt
     super(props);
 
     this.state = {
-      optionValues: {},
+      optionValues: {'name': 'default'},
     };
 
     if (this.findConnector()) {
@@ -103,7 +104,7 @@ class Connectors extends React.Component<ConnectorsProps & {path: string}, OwnSt
     }
 
     return selectedConnector ? (
-      <div>
+      <BasicLayout>
         <Modal
           title={`Error Creating ${connectionStage} Connection`}
           visible={!!errorMessage}
@@ -210,9 +211,9 @@ class Connectors extends React.Component<ConnectorsProps & {path: string}, OwnSt
           {selectedConnector.finalize ? 'Next' : 'Create'}
           {connectionStage === 'creating' && <LoadingOutlined />}
         </Button>
-      </div>
+      </BasicLayout>
     ) : (
-      <div>
+      <BasicLayout>
         {connectors.map(c => (
           <Card
             key={c.name}
@@ -232,7 +233,7 @@ class Connectors extends React.Component<ConnectorsProps & {path: string}, OwnSt
             />
           </Card>
         ))}
-      </div>
+      </BasicLayout>
     );
   }
 }