UI: Raw Event Viewer

Signed-off-by: tito1212 <vladyslav.sedenko@getindata.com>

Author: tito1212

web/package-lock.json

@@ -17,12 +17,14 @@
     "node": ">12.22.7"
   },
   "dependencies": {
+    "@date-io/moment": "^1.3.13",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.12",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.56",
+    "@material-ui/pickers": "^3.3.10",
     "@material-ui/styles": "^4.11.4",
     "@types/react-router-dom": "^5.1.2",
     "@types/react-syntax-highlighter": "^13.5.2",
@@ -53,6 +55,7 @@
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-helmet-async": "^1.3.0",
+    "react-inlinesvg": "^3.0.1",
     "react-redux": "^6.0.1",
     "react-router-dom": "^5.1.2",
     "react-syntax-highlighter": "^15.4.4",

web/package.json

@@ -10,6 +10,7 @@ const path = __dirname + '/dist'
 
 app.use('/', express.static(path))
 app.use('/datasets', express.static(path))
+app.use('/events', express.static(path))
 app.use('/lineage/:type/:namespace/:name', express.static(path))
 app.use(proxy('/api/v1', apiOptions))
 

web/setupProxy.js

@@ -3,6 +3,7 @@
 import { Box, Container, CssBaseline } from '@material-ui/core'
 import { ConnectedRouter, routerMiddleware } from 'connected-react-router'
 import { Helmet, HelmetProvider } from 'react-helmet-async'
+import { MuiPickersUtilsProvider } from '@material-ui/pickers'
 import { MuiThemeProvider } from '@material-ui/core/styles'
 import { Provider } from 'react-redux'
 import { Route, Switch } from 'react-router-dom'
@@ -12,9 +13,11 @@ import { createBrowserHistory } from 'history'
 import { theme } from '../helpers/theme'
 import BottomBar from './bottom-bar/BottomBar'
 import Datasets from '../routes/datasets/Datasets'
+import Events from '../routes/events/Events'
 import Header from './header/Header'
 import Jobs from '../routes/jobs/Jobs'
 import Lineage from './lineage/Lineage'
+import MomentUtils from '@date-io/moment'
 import React, { ReactElement } from 'react'
 import Sidenav from './sidenav/Sidenav'
 import Toast from './Toast'
@@ -45,29 +48,34 @@ const App = (): ReactElement => {
       <HelmetProvider>
         <ConnectedRouter history={history}>
           <MuiThemeProvider theme={theme}>
-            <Helmet>
-              <title>{TITLE}</title>
-            </Helmet>
-            <CssBaseline />
-            <Box ml={12}>
-              <Sidenav />
-              <Container maxWidth={'lg'} disableGutters={true}>
-                <Header />
-              </Container>
-              <Switch>
-                <Route path={'/'} exact>
-                  <Jobs />
-                </Route>
-                <Route path={'/datasets'} exact>
-                  <Datasets />
-                </Route>
-                <Route path={'/lineage/:nodeType/:namespace/:nodeName'}>
-                  <Lineage />
-                  <BottomBar />
-                </Route>
-              </Switch>
-              <Toast />
-            </Box>
+            <MuiPickersUtilsProvider utils={MomentUtils}>
+              <Helmet>
+                <title>{TITLE}</title>
+              </Helmet>
+              <CssBaseline />
+              <Box ml={12}>
+                <Sidenav />
+                <Container maxWidth={'lg'} disableGutters={true}>
+                  <Header />
+                </Container>
+                <Switch>
+                  <Route path={'/'} exact>
+                    <Jobs />
+                  </Route>
+                  <Route path={'/datasets'} exact>
+                    <Datasets />
+                  </Route>
+                  <Route path={'/events'} exact>
+                    <Events />
+                  </Route>
+                  <Route path={'/lineage/:nodeType/:namespace/:nodeName'}>
+                    <Lineage />
+                    <BottomBar />
+                  </Route>
+                </Switch>
+                <Toast />
+              </Box>
+            </MuiPickersUtilsProvider>
           </MuiThemeProvider>
         </ConnectedRouter>
       </HelmetProvider>

web/src/components/App.tsx

@@ -8,13 +8,17 @@ import SyntaxHighlighter from 'react-syntax-highlighter'
 
 interface OwnProps {
   code: object
+  showLineNumbers?: boolean
+  wrapLongLines?: boolean
 }
 
-const MqJson: React.FC<OwnProps> = ({ code }) => {
+const MqJson: React.FC<OwnProps> = ({ code, wrapLongLines = false, showLineNumbers = false }) => {
   return (
     <SyntaxHighlighter
       language='json'
       style={ocean}
+      wrapLongLines={wrapLongLines}
+      showLineNumbers={showLineNumbers}
       customStyle={{
         backgroundColor: alpha(theme.palette.common.white, 0.1),
         borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`,

web/src/components/core/code/MqJson.tsx

@@ -13,7 +13,6 @@ import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'
 const styles = (theme: Theme) =>
   createStyles({
     root: {
-      padding: theme.spacing(4),
       width: theme.spacing(8),
       height: theme.spacing(8),
       borderRadius: theme.spacing(2),

web/src/components/core/icon-button/MqIconButton.tsx

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react'
+import SVG from 'react-inlinesvg'
 
 import createStyles from '@material-ui/core/styles/createStyles'
 import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'
@@ -70,6 +71,19 @@ class Sidenav extends React.Component<SidenavProps> {
                 <FontAwesomeIcon icon={faDatabase} size={'2x'} />
               </MqIconButton>
             </RouterLink>
+            <RouterLink to={'/events'} className={classes.link}>
+              <MqIconButton
+                id={'eventsButton'}
+                title={'EVENTS'}
+                active={this.props.location.pathname === '/events'}
+              >
+                <SVG
+                  src="../../img/iconSearchArrow.svg"
+                  width={'30px'}
+                />
+              </MqIconButton>
+            </RouterLink>
+
             {/* todo remove this link for now until direct linking available */}
             {/*<RouterLink to={'/lineage'} className={classes.link}>*/}
             {/*  <MqIconButton*/}