* Samples: Added new tag 'Simple'

* Web-view: Improved Dashboard

Author: paslavskyi

samples/ktor-simple/gradle.properties

@@ -2,6 +2,6 @@ ktor_version=1.3.1
 kotlin.code.style=official
 logback_version=1.2.1
 h2_version=1.4.197
-sample.tags=Ktor, Netty, No Auth
+sample.tags=Ktor, Netty, No Auth, Simple
 sample.api=fibonacci
 sample.started.pattern=.+Uptime\\s(\\d+\\.?\\d*)\\sseconds.*

samples/micronaut-simple/gradle.properties

@@ -1,3 +1,3 @@
-sample.tags=Micronaut, Netty, No Auth
+sample.tags=Micronaut, Netty, No Auth, Simple
 sample.api=fibonacci
 sample.started.pattern=.+Uptime\\s(\\d+\\.?\\d*)\\sseconds.*

samples/spring-boot-simple/gradle.properties

@@ -1,3 +1,3 @@
-sample.tags=Spring Boot, Tomcat, No Auth
+sample.tags=Spring Boot, Tomcat, No Auth, Simple
 sample.api=fibonacci
 sample.started.pattern=.+Started\\s([\\w\\d]+)\\sin\\s(\\d+\\.?\\d*)\\sseconds\\s\\(JVM\\srunning\\sfor\\s(\\d+\\.?\\d*)\\).*

web-view/package-lock.json

@@ -17,14 +17,16 @@
     "primeflex": "^1.0.0",
     "primeicons": "^2.0.0",
     "primereact": "^4.0.0",
+    "prop-types": "latest",
+    "randomcolor": "^0.5.4",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
+    "react-tagcloud": "^2.0.0",
     "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
-    "prop-types": "latest"
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

web-view/package.json

@@ -8,13 +8,25 @@ export const fetchGitHubRelease = (release = 'latest') => async dispatch => {
         payload: response.data
     });
 
-    fetchMetrics(response.data.assets.find(it => it.name === 'metrics.json').browser_download_url)(dispatch)
+    const metricsAsset = response.data.assets.find(it => it.name === 'metrics.json');
+    fetchMetrics(response.data.id, metricsAsset.id, metricsAsset.browser_download_url)(dispatch)
 };
 
-export const fetchMetrics = url => async dispatch => {
-    const response = await axios.get(`https://cors-anywhere.herokuapp.com/${url}`);
+export const fetchMetrics = (releaseId, assetId, url) => async dispatch => {
+    let data;
+    const dataStr = localStorage.getItem(`${releaseId}:${assetId}`);
+    if (dataStr) {
+        data = JSON.parse(dataStr);
+    } else {
+        const response = await axios.get(`https://cors-anywhere.herokuapp.com/${url}`).catch(reason =>
+            (axios.get('https://api.allorigins.win/get?url=' + encodeURIComponent(url)))
+        );
+        data = response.data.contents ? JSON.parse(response.data.contents) : response.data;
+        localStorage.setItem(`${releaseId}:${assetId}`, JSON.stringify(data));
+    }
+
     dispatch({
         type: LOAD_METRICS,
-        payload: response.data
+        payload: data
     });
 };

web-view/src/actions/index.js

@@ -11,25 +11,28 @@ class ChartCard extends React.Component {
         if (this.props.chartType !== nextProps.chartType) {
             this.changeType = true;
             return true;
-        } else if (!_.isEqual(this.props.data, nextProps.data)) {
-            this.chart.refresh();
-            return true;
         }
         return !_.isEqual(this.props, nextProps);
     }
 
     setChartRef(c) {
-        if (!!this.changeType && !!c)
+        if (!!this.changeType && c)
             c.reinit();
         this.chart = c;
+        this.changeType = false;
     }
 
     render() {
-        const {first, title, chartType, data} = this.props;
+        const {first, title, chartType, data, samples} = this.props;
+        const filter = (data, samples) => {
+            data = _.clone(data);
+            data.datasets = data.datasets.filter((it) => _.find(samples, (s) => s.name === it.label));
+            return data;
+        };
 
         return (
             <Card title={title} style={{marginTop: !first ? '3em' : '0'}}>
-                <Chart type={chartType || "bar"} data={data} ref={this.setChartRef.bind(this)}/>
+                <Chart type={chartType || "bar"} data={filter(data, samples)} ref={this.setChartRef.bind(this)}/>
             </Card>
         );
     }
@@ -39,7 +42,8 @@ ChartCard.propTypes = {
     first: PropTypes.bool,
     title: PropTypes.string,
     chartType: PropTypes.oneOf(["bar", "horizontalBar"]),
-    data: PropTypes.object
+    data: PropTypes.object,
+    samples: PropTypes.array
 };
 
 export default ChartCard;

web-view/src/components/chart-card.js

@@ -5,33 +5,100 @@ import {Card} from "primereact/card";
 import {ScrollPanel} from "primereact/scrollpanel";
 import {SelectButton} from "primereact/selectbutton";
 import ChartCard from "./chart-card";
+import {AutoComplete} from "primereact/autocomplete";
+import {ListBox} from "primereact/listbox";
+import {Button} from "primereact/button";
+import randomColor from 'randomcolor';
+import TagsCard from "./tags-card";
 
 const Dashboard = (props) => {
     const [chartType, setChartType] = useState("bar");
+    const [tags, setTags] = useState(null);
+    const [samples, setSamples] = useState(props.samples);
+    const [tagsSuggestions, setTagsSuggestions] = useState(null);
     const types = [
         {label: 'Vertical Bar', value: 'bar'},
         {label: 'Horizontal Bar', value: 'horizontalBar'},
     ];
+
+    const filterTags = (event) => {
+        setTimeout(() => {
+            const results = props.tags.filter(tag => (tag.toLowerCase().indexOf(event.query.toLowerCase()) >= 0));
+            setTagsSuggestions(results)
+        }, 250);
+    };
+
+    const renderListItem = (item) => {
+        const classes = !!samples.find((it) => it.name === item.name) ?
+            "mdi mdi-checkbox-marked-outline mdi-18" : "mdi mdi-checkbox-blank-outline mdi-18";
+        return (<span><i className={classes} style={{paddingRight: '5px'}}/>{item.name}</span>);
+    };
+
+    const selectTags = (e) => {
+        const tags = e.value;
+        setTags(tags);
+        if (tags.length > 0) {
+            setSamples(props.samples.filter((it) => _.intersection(it.tags, tags).length > 0));
+        }
+    };
+
     return (
         <div className="p-grid">
             <div className="p-sm-12 p-md-12 p-lg-4 p-xl-3" style={{paddingTop: '5em'}}>
                 <div className="p-grid p-justify-around">
                     <Card style={{width: '280px'}}>
-                        <SelectButton value={chartType} options={types} onChange={(e) => setChartType(e.value)}/>
+                        <div className="p-grid p-dir-col">
+                            <div className="p-col">
+                                <SelectButton value={chartType} options={types}
+                                              onChange={(e) => setChartType(e.value)}/>
+                            </div>
+                            <div className="p-col">
+                                <AutoComplete value={tags} suggestions={tagsSuggestions} completeMethod={filterTags}
+                                              minLength={1} placeholder="Tags" multiple={true} className="tags-search"
+                                              onChange={selectTags}/>
+                            </div>
+                            <div className="p-col">
+                                <ListBox value={samples} options={props.samples} className="samples-list"
+                                         onChange={(e) => setSamples(e.value)}
+                                         filter={true} multiple={true} optionLabel="name"
+                                         itemTemplate={renderListItem}
+                                />
+
+                                <div className="p-grid app-tools">
+                                    <div className="p-col">
+                                        <Button label="Select All" className="p-button-raised p-button-secondary"
+                                                onClick={() => setSamples(props.samples)}
+                                        />
+                                    </div>
+                                    <div className="p-col">
+                                        <Button label="Clear All" className="p-button-raised p-button-secondary"
+                                                onClick={() => setSamples([])}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </Card>
+
+                    <TagsCard samples={props.samples}/>
                 </div>
             </div>
             <div className="p-sm-12 p-md-12 p-lg-8 p-xl-6">
                 <ScrollPanel style={{width: '100%', height: 'calc(100vh - 5.1em)', paddingTop: '5em'}}>
-                    <ChartCard title="Memory on start (Mb)" chartType={chartType} data={props.memoryOnStart} first={true}/>
+                    <ChartCard title="Memory on start (Mb)" chartType={chartType} data={props.memoryOnStart}
+                               first={true} samples={samples}/>
 
-                    <ChartCard title="Working memory (Mb)" chartType={chartType} data={props.memoryOnWork}/>
+                    <ChartCard title="Working memory (Mb)" chartType={chartType} data={props.memoryOnWork}
+                               samples={samples}/>
 
-                    <ChartCard title="Uptime (ms)" chartType={chartType} data={props.uptime}/>
+                    <ChartCard title="Uptime (ms)" chartType={chartType} data={props.uptime}
+                               samples={samples}/>
 
-                    <ChartCard title="Warming up (ms)" chartType={chartType} data={props.warmingUp}/>
+                    <ChartCard title="Warming up (ms)" chartType={chartType} data={props.warmingUp}
+                               samples={samples}/>
 
-                    <ChartCard title="Request time (ms)" chartType={chartType} data={props.requestTime}/>
+                    <ChartCard title="Request time (ms)" chartType={chartType} data={props.requestTime}
+                               samples={samples}/>
                 </ScrollPanel>
             </div>
         </div>
@@ -45,14 +112,12 @@ const mapStateToProps = state => {
 
     const colors = _.zipObject(
         state.metrics.map(sample => (sample.name)),
-        state.metrics.map(() => ('#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6)))
+        state.metrics.map(() => (randomColor()))
     );
 
     return ({
-        samples: _.zipObject(
-            state.metrics.map(sample => (sample.name)),
-            state.metrics.map(sample => (sample.tags))
-        ),
+        samples: state.metrics.map(sample => ({name: sample.name, tags: sample.tags})),
+        tags: _.uniq(_.flatMap(state.metrics.map(sample => (sample.tags)))),
         uptime: {
             labels: ['Avg', 'Max', 'Min'],
             datasets: state.metrics.map(sample => ({

web-view/src/components/dashboard.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {TagCloud} from 'react-tagcloud'
+import {Card} from "primereact/card";
+import _ from 'lodash'
+
+const TagsCard = props => {
+    const tags = [];
+    _.flatMap(props.samples, (it) => it.tags).forEach(it => {
+        let tag = _.find(tags, {value: it});
+        if (!tag) {
+            tag = {value: it, count: 0};
+            tags.push(tag);
+        }
+        tag.count += 1;
+    });
+    debugger
+    return (
+        <Card style={{width: '280px', marginTop: '10px'}}>
+            <TagCloud
+                minSize={12}
+                maxSize={35}
+                tags={tags}
+            />
+        </Card>
+    );
+};
+
+TagsCard.propTypes = {
+    samples: PropTypes.array
+};
+
+export default TagsCard;

web-view/src/components/tags-card.js

@@ -23,3 +23,33 @@
 body {
     background: lightgray;
 }
+
+.tags-search, .samples-list {
+    width: 100% !important;
+}
+
+.tags-search > .p-autocomplete-multiple-container {
+    width: 100%;
+}
+
+
+.samples-list > .p-listbox-list-wrapper {
+    max-height: 450px;
+}
+
+.samples-list > div {
+    width: 100%;
+}
+
+.samples-list .p-highlight {
+    background: rgba(0,0,0,0) !important;
+    color: rgb(51,51,51) !important;;
+}
+
+.app-tools {
+    padding-top: 10px;
+}
+
+.app-tools > .p-col > button {
+    width: 100%;
+}