Benchmark report (#345)

* feat(ui): support for deleting multiple reports
* feat(ui): support for comparing runs to benchmark

Author: enudler

Dockerfile

@@ -24,7 +24,7 @@ ARG PREDATOR_DOCS_URL
 # Build UI from sources
 WORKDIR /usr/ui
 RUN npm ci --silent
-RUN BUCKET_PATH=$BUCKET_PATH PREDATOR_DOCS_URL=$PREDATOR_DOCS_URL npm run build
+RUN VERSION=$(node -p -e "require('/usr/package.json').version") && BUCKET_PATH=$BUCKET_PATH PREDATOR_DOCS_URL=$PREDATOR_DOCS_URL VERSION=$VERSION npm run build
 # Clean up
 RUN mv /usr/ui/dist /tmp/dist && rm -rf /usr/ui/* && mv /tmp/dist /usr/ui/dist
 

package-lock.json

@@ -34,7 +34,7 @@ module.exports = {
       BUCKET_PATH: env.BUCKET_PATH || '/',
     }),
     new webpack.NamedModulesPlugin(),
-    new webpack.EnvironmentPlugin(['NODE_ENV', 'BUCKET_PATH', 'PREDATOR_URL', 'PREDATOR_DOCS_URL']),
+    new webpack.EnvironmentPlugin(['NODE_ENV', 'BUCKET_PATH', 'PREDATOR_URL', 'PREDATOR_DOCS_URL','VERSION']),
     new MonacoWebpackPlugin()
   ]
 };

ui/config/webpack.config.js

@@ -1,7 +1,8 @@
 module.exports = {
     PREDATOR_URL: generatePredatorUrl(),
     PREDATOR_DOCS_URL: generatePredatorDocsUrl(),
-    BUCKET_PATH: generateBucketPath()
+    BUCKET_PATH: generateBucketPath(),
+    VERSION: process.env.VERSION || 'dev-mode'
 };
 
 function generatePredatorUrl() {

ui/src/App/common/env.js

@@ -5,7 +5,8 @@ import {connect} from 'react-redux'
 import history from '../../../store/history';
 import logo from '../../../images/logo.png';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-
+import {VERSION} from '../../../App/common/env';
+import {faPoll} from "@fortawesome/free-solid-svg-icons";
 
 const Logo = () => {
 
@@ -56,7 +57,7 @@ class DrawerE extends Component {
             flex: 'initial'
 
         }
-        const appLogoInnerStyle={
+        const appLogoInnerStyle = {
             display: 'flex',
             paddingLeft: '0px',
             paddingRight: '0',
@@ -66,13 +67,22 @@ class DrawerE extends Component {
         return (
             <div className={classes}>
                 <Drawer
-                    containerStyle={{backgroundImage: 'linear-gradient(142deg,#00041a,#00126b)'}}
+                    containerStyle={{
+                        backgroundImage: 'linear-gradient(142deg,#00041a,#00126b)',
+                        display: 'flex',
+                        flexDirection: 'column'
+                    }}
                     docked
                     open={open}
                     onClose={this.handleClose}>
                     <AppBar showMenuIconButton={false} title={<Logo/>} titleStyle={style['appbar-logo']}
                             titleStyle={appLogoTitleStyle} style={appLogoInnerStyle} className={style.appbar}/>
-                    <div style={{marginTop: '45px', paddingLeft: '9px', width: '100%'}}>
+                    <div style={{
+                        marginTop: '45px', paddingLeft: '9px', width: '100%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between'
+                    }}>
 
                         <List>
                             {listItemData.map((listItem) => {
@@ -94,7 +104,7 @@ class DrawerE extends Component {
                                                           // className={url.includes(nestedItem.navigateTo) ? style['menu-selected'] : undefined}
                                                                 primaryText={nestedItem.primaryText}
                                                                 onClick={nestedItem.linkUrl ? () => window.open(nestedItem.linkUrl, '_blank') : () => this.apiClick(`/${nestedItem.navigateTo}`)}
-                                                                iconStyle={{fontSize:'5px'}}
+                                                                iconStyle={{fontSize: '5px'}}
                                                                 leftIcon={nestedItem.icon &&
                                                                 <FontAwesomeIcon size={'xs'} className={style.icon}
                                                                                  icon={nestedItem.icon} fixedWidth/>}
@@ -107,6 +117,15 @@ class DrawerE extends Component {
                             })}
                         </List>
                     </div>
+                    <div style={{
+                        color: '#c2c2c28f',
+                        display: 'flex',
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'flex-end',
+                    }}>
+                        <Bottom/>
+                    </div>
                 </Drawer>
                 <AppBar
                     // title={<span style={{ cursor: 'default' }}><img width={'50px'} height={'50px'} src={Logo} alt={'Mickey'}/>Predator</span>}
@@ -123,10 +142,34 @@ class DrawerE extends Component {
     }
 }
 
+
+const Bottom = () => {
+    return (
+        <div style={{
+            display: 'flex', marginBottom: '10px',
+            flexDirection: 'row',
+            flex: 1,
+            justifyContent: 'space-between',
+            marginLeft: '10px',
+            marginRight: '10px',
+            alignItems: 'center'
+        }}>
+            <FontAwesomeIcon size={'2x'} style={{
+                color: 'white',
+                cursor: 'pointer'
+            }} icon={faPoll}
+                             onClick={() => window.open("https://docs.google.com/forms/d/15dozkkA2xBUV7T7ls5XMyBj-JDg5Tj-TXNMp9PkdFsM/viewform?edit_requested=true")}/>
+            <div> v{VERSION}</div>
+        </div>
+    )
+}
+
+
 function mapStateToProps(state) {
     return {
         url: state.router.location.pathname
     }
 }
 
+
 export default connect(mapStateToProps)(DrawerE);

ui/src/features/components/DrawerE/index.js

@@ -21,7 +21,7 @@ const COLORS = [{stroke: "#8884d8", fill: "#8884d8"},
     {stroke: "#395B56", fill: "#395B56"},
     {stroke: "#617A70", fill: "#617A70"},
     {stroke: "#CCC39F", fill: "#CCC39F"},
-    {stroke: "#FFFAD1", fill: "#FFFAD1"},
+    {stroke: "#827e5b", fill: "#827e5b"},
 ];
 const COLOR_FAMILY = {
     p95: [{stroke: "#BBDEF0", fill: "#BBDEF0"}, {stroke: "#00A6A6", fill: "#00A6A6"}, {
@@ -54,10 +54,10 @@ const getColor = (key, index) => {
 };
 
 const filterKeysFromArrayOfObject = (data, graphType, filteredKeys) => {
-    const keysToFilter = Object.keys(_.pickBy(filteredKeys, (value) => value));
+    const keysToFilter = Object.keys(_.pickBy(filteredKeys[graphType] || {}, (value) => value));
     const filteredData = data.reduce((acc, cur) => {
         acc.push(_.omitBy(cur, (value, key) => {
-            return keysToFilter.includes(`${graphType}${key}`)
+            return keysToFilter.includes(`${key}`)
         }));
         return acc;
     }, []);
@@ -100,7 +100,6 @@ export const BarChartPredator = ({data = [], keys=[], graphType, onSelectedGraph
 
 export const LineChartPredator = ({data = [], keys = [], labelY, graphType, onSelectedGraphPropertyFilter, filteredKeys}) => {
     const filteredData = filterKeysFromArrayOfObject(data, graphType, filteredKeys);
-
     return (
         <ResponsiveContainer width="100%" height={300}>
             <LineChart
@@ -154,7 +153,7 @@ const renderLegend = (props) => {
                          style={{margin: '5px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
                         <Checkbox
                             indeterminate={false}
-                            checked={filteredKeys[`${graphType}${entry.value}`] === undefined || filteredKeys[`${graphType}${entry.value}`] === false}
+                            checked={_.get(filteredKeys,`${graphType}.${entry.value}`) === undefined || _.get(filteredKeys,`${graphType}.${entry.value}`) === false}
                             // disabled={}
                             onChange={(value) => {
                                 onSelectedGraphPropertyFilter(graphType, entry.value, value)