[Web Dashboard Widget] Initial commit

Dynatrace · Aug 11, 2016 · f2fb06d · f2fb06d
1 parent f0ac0f8
commit f2fb06d
Show file tree

Hide file tree

Showing 14 changed files with 558 additions and 0 deletions.
diff --git a/web-dashboard-widget/.babelrc b/web-dashboard-widget/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}
diff --git a/web-dashboard-widget/.gitignore b/web-dashboard-widget/.gitignore
@@ -0,0 +1,2 @@
+/js
+/node_modules
diff --git a/web-dashboard-widget/index.html b/web-dashboard-widget/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Test overview</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    </head>
+    <body class="container-fluid">
+        <div id="app"></div>
+        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+        <script type="text/javascript" src="./js/bundle.js"></script>
+    </body>
+</html>
diff --git a/web-dashboard-widget/package.json b/web-dashboard-widget/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "dynatrace-web-dashboard-test-automation-widget",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "superagent": "^2.1.0",
+    "superagent-jsonp": "^0.1.1",
+    "vue": "^1.0.26",
+    "vue-router": "^0.7.13"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.11.4",
+    "babel-core": "^6.13.2",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-runtime": "^6.12.0",
+    "babel-preset-es2015": "^6.13.2",
+    "css-loader": "^0.23.1",
+    "vue-hot-reload-api": "^1.2.0",
+    "vue-html-loader": "^1.2.3",
+    "vue-loader": "^8.5.3",
+    "vue-style-loader": "^1.0.0",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "scripts": {
+    "dev": "webpack-dev-server --inline --hot --no-info --host localhost --https",
+    "build": "NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:Dynatrace/Dynatrace-Test-Automation-Samples.git"
+  },
+  "author": "Maciej Mionskowski",
+  "license": "Dynatrace BSD"
+}
diff --git a/web-dashboard-widget/src/components/App.vue b/web-dashboard-widget/src/components/App.vue
@@ -0,0 +1,3 @@
+<template>
+    <router-view></router-view>
+</template>
diff --git a/web-dashboard-widget/src/components/overview/BuildsColumnChart.vue b/web-dashboard-widget/src/components/overview/BuildsColumnChart.vue
@@ -0,0 +1,48 @@
+<script>
+    import Chart from './Chart.vue'
+
+    export default {
+        name: 'BuildsColumnChart',
+        props: ['testRuns'],
+        mixins: [Chart],
+        ready() {
+            this.chart = new google.visualization.ColumnChart(document.getElementById("chart"));
+        },
+        methods: {
+            formatVersion(testRun) {
+                let verToStr = (ver) => {
+                    return ver !== undefined ? ver : '-'
+                }
+                return verToStr(testRun.versionMajor) + '.' + verToStr(testRun.versionMinor) + '.' + verToStr(testRun.versionRevision) + '.' + verToStr(testRun.versionBuild)
+            },
+            convertTestRuns() {
+                let data = []
+                for (let testRun of this.testRuns) {
+                    data.push([this.formatVersion(testRun), testRun.numPassed, testRun.numFailed, testRun.numVolatile, testRun.numImproved, testRun.numDegraded, testRun.numInvalidated])
+                }
+                return data;
+            },
+            draw() {
+                let data = new google.visualization.DataTable()
+                data.addColumn('string', 'Name')
+                data.addColumn('number', 'Passed')
+                data.addColumn('number', 'Failed')
+                data.addColumn('number', 'Volatile')
+                data.addColumn('number', 'Improved')
+                data.addColumn('number', 'Degraded')
+                data.addColumn('number', 'Invalidated')
+                data.addRows(this.convertTestRuns())
+
+                // Set chart options
+                let options = {}
+                Object.assign(options, this.chartOptions, {
+                    isStacked: true,
+                    bar: {
+                        groupWidth: '90%'
+                    }
+                });
+                this.chart.draw(data, options)
+            }
+        }
+    }
+</script>
diff --git a/web-dashboard-widget/src/components/overview/BuildsPieChart.vue b/web-dashboard-widget/src/components/overview/BuildsPieChart.vue
@@ -0,0 +1,40 @@
+<script>
+    import Chart from './Chart.vue'
+    export default {
+        name: 'BuildsPieChart',
+        mixins: [Chart],
+        ready() {
+            this.chart = new google.visualization.PieChart(document.getElementById("chart"));
+        },
+        methods: {
+            draw() {
+                let data = [
+                    ["Status", "Count"],
+                    ["Passed", 0],
+                    ["Failed", 0],
+                    ["Volatile", 0],
+                    ["Improved", 0],
+                    ["Degraded", 0],
+                    ["Invalidated", 0]
+                ];
+
+                for (let testRun of this.testRuns) {
+                    data[1][1] += testRun.numPassed
+                    data[2][1] += testRun.numFailed
+                    data[3][1] += testRun.numVolatile
+                    data[4][1] += testRun.numImproved
+                    data[5][1] += testRun.numDegraded
+                    data[6][1] += testRun.numInvalidated
+                }
+
+                let tableData = google.visualization.arrayToDataTable(data)
+
+                // Set chart options
+                this.chartOptions.chartArea.bottom = 50
+                this.chartOptions.chartArea.top = 0
+
+                this.chart.draw(tableData, this.chartOptions)
+            }
+        }
+    }
+</script>
diff --git a/web-dashboard-widget/src/components/overview/Chart.vue b/web-dashboard-widget/src/components/overview/Chart.vue
@@ -0,0 +1,113 @@
+<template>
+    <div>
+        <div v-if="message" class="message text-center">
+            <p class="bg-warning"><small>{{message}}</small></p>
+            <a class="btn-default btn configure" v-link="{path: '/'}">Go to settings wizard</a>
+        </div>
+        <div id="chart" v-show="!message"></div>
+    </div>
+</template>
+<style>
+    .message p {
+        padding: 5px;
+    }
+    
+    .message small {
+        font-size: 80%;
+        line-height: 0.5;
+    }
+    
+    .configure {
+        font-size: 200%;
+        color: #bbb;
+        display: inline-block;
+    }
+</style>
+<script>
+    import Endpoint from '../../endpoint.js'
+    import * as Utils from '../../utils.js'
+    import Chart from './Chart.vue'
+
+    export default {
+        props: ['testRuns', 'message'],
+        data: () => {
+            return {
+                parameters: Utils.getTestFilters(),
+                chartOptions: {
+                    width: '100%',
+                    chartArea: {
+                        top: 5,
+                        left: 25,
+                        right: 15,
+                        bottom: 100
+                    },
+                    animation: {
+                        duration: 1000,
+                        easing: 'out',
+                        startup: true
+                    },
+                    height: window.innerHeight,
+                    legend: {
+                        position: 'bottom',
+                        maxLines: 3
+                    },
+                    hAxis: {
+                        slantedText: true,
+                        slantedTextAngle: 60,
+                        textStyle: {
+                            fontSize: 10
+                        }
+                    },
+                    vAxis: {
+                        minValue: 0,
+                        textStyle: {
+                            fontSize: 10
+                        }
+                    },
+                    colors: ['#2ab06f', '#dc172a', '#ffe11c', '#2ab6f4', '#ef651f', '#b7b7b7']
+                }
+            }
+        },
+        watch: {
+            testRuns: 'draw'
+        },
+        created() {
+            this.handleSettings()
+        },
+        ready() {
+            if (this.testRuns) {
+                this.draw()
+            }
+            window.addEventListener('resize', this.handleResize)
+        },
+        beforeDestroy() {
+            clearInterval(this.interval)
+            window.removeEventListener('resize', this.handleResize)
+        },
+        events: {
+            'settings-saved': 'handleSettings'
+        },
+        methods: {
+            handleSettings() {
+                if(this.interval) {
+                    clearInterval(this.interval)
+                }
+                this.interval = setInterval(this.fetch, Utils.getParameter('update')*1000)
+                this.fetch()
+            },
+            fetch() {
+                Endpoint.fetch('rest/management/profiles/' + Utils.getParameter('profile') + '/testruns.jsonp' + Utils.convertParametersToQuery(this.parameters)).then((response) => {
+                    this.testRuns = response.testRuns
+                    this.message = response.message
+                }).catch((err) => {
+                    this.testRuns = {}
+                    this.message = err
+                })
+            },
+            handleResize(event) {
+                this.chartOptions.height = window.innerHeight,
+                this.draw()
+            },
+        }
+    }
+</script>
diff --git a/web-dashboard-widget/src/components/settings/Settings.vue b/web-dashboard-widget/src/components/settings/Settings.vue
@@ -0,0 +1,97 @@
+<template>
+    <div class="settings">
+        <h1>Settings</h1>
+        <form v-on:submit.prevent="updateURL" class="form-inline">
+            <settings-parameters :parameters="defaultParameters"></settings-parameters>
+            <fieldset>
+                <label for="selected-component">Chart type</label>
+                <select class="form-control" id="selected-component" v-model="selected">
+                    <option v-for="(k,v) in components" value="{{k}}">{{v.name}}</option>
+                </select>
+            </fieldset>
+            <settings-parameters :parameters="components[selected].parameters" :selected="selected"></settings-parameters>
+            <fieldset class="text-center">
+                <input type="submit" class="btn btn-primary save-settings" value="Generate">
+            </fieldset>
+        </form>
+        <code><a href="{{url}}">{{ url }}</a></code>
+    </div>
+</template>
+<style>
+    code {
+        display: inline-block;
+        padding: 20px;
+        text-align: center;
+        width: 100%;
+        margin: 10px 0;
+    }
+</style>
+<script>
+    import SettingsParameters from './SettingsParameters.vue'
+    import {
+        getTestFilters,
+        parametersToQuery
+    } from '../../utils.js'
+
+    export default {
+        name: 'Settings',
+        components: {
+            settingsParameters: SettingsParameters
+        },
+        data: () => {
+            return {
+                url: '',
+                selected: 0,
+                defaultParameters: [{
+                    name: 'protocol',
+                    value: 'https'
+                }, {
+                    name: 'host',
+                    value: 'localhost'
+                }, {
+                    name: 'port',
+                    type: 'number',
+                    value: 8021,
+                }, {
+                    name: 'username',
+                    value: 'admin'
+                }, {
+                    name: 'password',
+                    type: 'password',
+                    value: 'admin'
+                }, {
+                    name: 'profile',
+                    value: 'Monitoring'
+                }, {
+                    name: 'update',
+                    display: 'Update (s)',
+                    type: 'number',
+                    value: '30'
+                }],
+                components: [{
+                    name: 'Pie Chart',
+                    internal: 'pie',
+                    parameters: getTestFilters()
+                }, {
+                    name: 'Column Chart',
+                    internal: 'column',
+                    parameters: getTestFilters()
+                }],
+            }
+        },
+        props: ["parameters"],
+        methods: {
+            updateURL() {
+                let addr = window.location.href.replace(window.location.hash, '');
+                let selectedComponent = this.components[this.selected]
+                addr += '#!/'+selectedComponent.internal + '?'
+                for (let param of this.defaultParameters.concat(selectedComponent.parameters)) {
+                    if (param.value) {
+                        addr += param.name + '=' + param.value + '&'
+                    }
+                }
+                this.url = addr
+            }
+        }
+    }
+</script>