Load prometheus datasource using BE endpoint

11 files changed, 163 insertions, 65 deletions

diff --git a/app/assets/javascripts/AAgeneric_chart/components/generic_chart.vue b/app/assets/javascripts/AAgeneric_chart/components/generic_chart.vue
index 61c9f0f8a59..9bbdfa72833 100644
--- a/app/assets/javascripts/AAgeneric_chart/components/generic_chart.vue
+++ b/app/assets/javascripts/AAgeneric_chart/components/generic_chart.vue
@@ -1,15 +1,24 @@
 <script>
   import { __ } from '~/locale';
   import { mapActions, mapState } from 'vuex';
-  import { GlAreaChart, GlLineChart, GlDiscreteScatterChart, GlColumnChart } from '@gitlab/ui/dist/charts';
-  import { GlLoadingIcon, GlDropdown, GlDropdownItem, GlFormTextarea, GlButton } from '@gitlab/ui';
+  import { GlAreaChart, GlLineChart } from '@gitlab/ui/dist/charts';
+  import {
+    GlLoadingIcon,
+    GlDropdown,
+    GlDropdownItem,
+    GlFormTextarea,
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+  } from '@gitlab/ui';
   import syntaxHighlight from './../utils/beautify';
 
   import Icon from '~/vue_shared/components/icon.vue';
   import json2json from 'awesome-json2json';
   import formatHighlight from 'json-format-highlight';
+  import prometheus from '../sample_data/prometheus';
   // eslint-disable-next-line global-require
-  const grafanaJSON = require('./../sample_data/grafana.json');
+  // const grafanaJSON = require('./../sample_data/grafana.json');
 
   export default {
     components: {
@@ -17,32 +26,35 @@
       GlLoadingIcon,
       GlAreaChart,
       GlLineChart,
-      GlDiscreteScatterChart,
-      GlColumnChart,
       GlDropdown,
       GlDropdownItem,
       GlFormTextarea,
       GlButton,
+      GlFormGroup,
+      GlFormInput,
     },
     data() {
       return {
         chartUrl: '',
-        userJson: '',
+        //userJson: '',
         chartJson: '',
         formatterFn: '',
         syntaxHighlight,
         formatHighlight,
         formattedInput: '',
+        config: {
+          prometheus,
+        },
       };
     },
     computed: {
-      ...mapState('dataSource', ['chartData', 'loading']),
+      ...mapState('dataSource', ['chartData', 'loading', 'userJson']),
       data() {
         return this.chartHasData() && this.chartData.source;
       },
       dataSources() {
         return [
-          'Grafana', 'Prometheus', 'InfluxDB',
+          'grafana', 'prometheus', 'influxdb',
         ];
       },
       chartOptions() {
@@ -56,6 +68,9 @@
       showChart() {
         return !this.loading && this.chartHasData();
       },
+      formattedJSON() {
+        return this.formatHighlight(this.userJson);
+      },
     },
     methods: {
       ...mapActions('dataSource', ['fetchChartData', 'setChartData']),
@@ -63,14 +78,14 @@
         this.chart = chart;
       },
       onBlur(event) {
-        this.formattedInput = this.formatHighlight(event.target.value);
+        this.formattedInput = this.syntaxHighlight(event.target.value);
         this.json2json();
       },
       chartHasData() {
         return Boolean(this.chartData);
       },
-      getChartData(event) {
-        this.fetchChartData(event.target.value);
+      getChartData() {
+        this.fetchChartData(this.chartUrl);
       },
       updateJSON() {
         this.formattedInput = '';
@@ -87,6 +102,12 @@
         this.setChartData(transformed);
         this.chartJson = this.formatHighlight(transformed.source);
       },
+      setDataSource(source) {
+        if (this.config[source]) {
+          const config = this.config[source];
+          this.chartUrl = config.url;
+        }
+      },
     },
   };
 </script>
@@ -96,35 +117,51 @@
             <gl-loading-icon :inline="true" :size="4"/>
         </div>
 
-        <!--   <h4 class="chart-title">Select data source</h4>
-         <div class="row">
-           <gl-dropdown
-                   class="col-8 col-md-9 gl-pr-0"
-                   menu-class="w-100 mw-100"
-                   toggle-class="dropdown-menu-toggle w-100 gl-field-error-outline"
-                   text="&#45;&#45; Select datasource &#45;&#45;"
-           >
-             <gl-dropdown-item
-                     v-for="source in dataSources"
-                     class="w-100"
-                     @click="$emit('select-project', source)">
-               <li>{{source}}</li>
-             </gl-dropdown-item>
+        <h4 class="chart-title">Select data source</h4>
+        <div class="row">
+            <gl-dropdown
+                    class="col-8 col-md-9 gl-pr-0"
+                    menu-class="w-100 mw-100"
+                    toggle-class="dropdown-menu-toggle w-100 gl-field-error-outline"
+                    text="-- Select datasource --"
+            >
+                <gl-dropdown-item
+                        v-for="source in dataSources"
+                        class="w-100"
+                        @click="setDataSource(source)">
+                    <li>{{source}}</li>
+                </gl-dropdown-item>
 
-           </gl-dropdown>
-         </div>-->
+            </gl-dropdown>
+        </div>
+
+        <div class="row">
+            <label class="col-8 col-md-9 gl-pr-0 w-100 mt-2" @click.stop>
+                <input
+                        ref="searchInput"
+                        v-model="chartUrl"
+                        :placeholder="__('Chart url')"
+                        type="search"
+                        class="form-control dropdown-input-field"
+                />
+            </label>
+            <gl-button
+                    @click="getChartData">
+                Request sample data
+            </gl-button>
+        </div>
 
         <div class="row">
             <div class="col-4">
                 <h5>User sample json</h5>
-                <gl-form-textarea
-                        v-if="!formattedInput"
-                        v-model="userJson"
-                        rows="15"
-                        @blur="onBlur"
-                ></gl-form-textarea>
-                <div v-if="formattedInput">
-                    <pre v-html="formattedInput"/>
+                <!--                <gl-form-textarea-->
+                <!--                        v-if="!formattedInput"-->
+                <!--                        v-model="userJson"-->
+                <!--                        rows="15"-->
+                <!--                        @blur="onBlur"-->
+                <!--                ></gl-form-textarea>-->
+                <div v-if="formattedJSON">
+                    <pre v-html="formattedJSON"/>
 
                     <gl-button
                             @click="updateJSON">
@@ -148,18 +185,19 @@
                 <pre v-html="chartJson"/>
             </div>
         </div>
-        <!--        <div class="row">
-                    <label class="dropdown-input pt-3 pb-3 mb-0 border-bottom block position-relative" @click.stop>
-                        <input
-                                ref="searchInput"
-                                v-model="chartUrl"
-                                :placeholder="__('Chart url')"
-                                type="search"
-                                class="form-control dropdown-input-field"
-                                @blur="getChartData"
-                        />
-                    </label>
-                </div>-->
+
+        <!--   <div class="row">
+               <gl-form-group
+                       :label="xAxisLabel"
+                       label-for="xAxislabel"
+               >
+                   <gl-form-input
+                           id="xAxislabel"
+                           v-model="xAxislabel"
+                           placeholder="XAxis Label"
+                   />
+               </gl-form-group>
+           </div>-->
 
 
         <div v-if="showChart" class="issues-analytics-chart">
@@ -169,12 +207,6 @@
             ></gl-area-chart>
             <gl-line-chart :data="data"
                            :option="chartOptions"/>
-            <gl-column-chart :data="data"
-                             :option="chartOptions"/>
-
-            <!--     <gl-discrete-scatter-chart
-                         :data="data"
-                         :option="chartOptions"/>-->
         </div>
 
     </div>
diff --git a/app/assets/javascripts/AAgeneric_chart/formatter/influx.js b/app/assets/javascripts/AAgeneric_chart/formatter/influx.js
new file mode 100644
index 00000000000..ed282af3dde
--- /dev/null
+++ b/app/assets/javascripts/AAgeneric_chart/formatter/influx.js
@@ -0,0 +1,14 @@
+export default {
+  source: {
+    $path: 'results[].series[]',
+    name: {
+      $path: 'name',
+    },
+    data: {
+      $path: 'values',
+      $formatting: (foo) => {
+        return foo;
+      },
+    },
+  },
+};
\ No newline at end of file
diff --git a/app/assets/javascripts/AAgeneric_chart/formatter/prometheus.js b/app/assets/javascripts/AAgeneric_chart/formatter/prometheus.js
new file mode 100644
index 00000000000..ad1c88d7eb7
--- /dev/null
+++ b/app/assets/javascripts/AAgeneric_chart/formatter/prometheus.js
@@ -0,0 +1,14 @@
+{
+  source: {
+    $path: 'data.result[]',
+      name: {
+      $path: '$item.metric.job',
+    },
+    data: {
+      $path: '$item.values[]',
+        $formatting(item) {
+        return [item[1], item[0] * Math.random()*1000];
+      },
+    },
+  },
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/AAgeneric_chart/sample_data/influx.json b/app/assets/javascripts/AAgeneric_chart/sample_data/influx.json
new file mode 100644
index 00000000000..9939e8465c4
--- /dev/null
+++ b/app/assets/javascripts/AAgeneric_chart/sample_data/influx.json
@@ -0,0 +1,32 @@
+{
+    "results": [
+        {
+            "statement_id": 0,
+            "series": [
+                {
+                    "name": "mymeas",
+                    "columns": [
+                        "time",
+                        "myfield",
+                        "mytag1",
+                        "mytag2"
+                    ],
+                    "values": [
+                        [
+                            "2017-03-01T00:16:18Z",
+                            33.1,
+                            null,
+                            null
+                        ],
+                        [
+                            "2017-03-01T00:17:18Z",
+                            12.4,
+                            "12",
+                            "14"
+                        ]
+                    ]
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/AAgeneric_chart/sample_data/prometheus.js b/app/assets/javascripts/AAgeneric_chart/sample_data/prometheus.js
new file mode 100644
index 00000000000..a48c4a7a6f2
--- /dev/null
+++ b/app/assets/javascripts/AAgeneric_chart/sample_data/prometheus.js
@@ -0,0 +1,3 @@
+export default {
+  url: 'http://demo.robustperception.io:9090/api/v1/query_range?query=scrape_duration_seconds&start=1567355404.093&end=1567528204.093&step=691&_=1568133003984',
+};
\ No newline at end of file
diff --git a/app/assets/javascripts/AAgeneric_chart/services/chart_data_service.js b/app/assets/javascripts/AAgeneric_chart/services/chart_data_service.js
index f91fb5e8509..25270c95a71 100644
--- a/app/assets/javascripts/AAgeneric_chart/services/chart_data_service.js
+++ b/app/assets/javascripts/AAgeneric_chart/services/chart_data_service.js
@@ -1,13 +1,7 @@
 import axios from '~/lib/utils/axios_utils';
-// eslint-disable-next-line global-require
-const sampleData = require('./../sample_data/data.json');
 
 export default {
   fetchChartData(url) {
-    if (Math.random() < 0.5) {
-      return Promise.resolve(sampleData);
-
-    }
     return axios.get(`${url}`);
-  }
+  },
 };
diff --git a/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/actions.js b/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/actions.js
index a40c6e29a61..959dc83c638 100644
--- a/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/actions.js
+++ b/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/actions.js
@@ -19,17 +19,19 @@ export const setLoadingState = ({ commit }, value) => {
   commit(types.SET_LOADING_STATE, value);
 };
 
-export const fetchChartData = ({ commit, dispatch, getters }, url) => {
+export const fetchChartData = ({ commit, dispatch }, url) => {
   dispatch('setLoadingState', true);
 
+  const datasourceUrl = `http://localhost:3000/h5bp/html5-boilerplate/chart?url=${encodeURIComponent(url)}`;
+
   removeFlashError();
 
   return service
-    .fetchChartData(url)
+    .fetchChartData(datasourceUrl)
     .then(res => res)
-    .then(data => commit(types.SET_CHART_DATA, data))
+    .then(data => commit(types.SET_USER_JSON, data))
     .catch(() => {
-      commit(types.SET_CHART_DATA, null);
+      commit(types.SET_USER_JSON, null);
       flash(__('An error occurred while loading chart data'));
       setTimeout(removeFlashError, 2000);
     })
diff --git a/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/mutation_types.js b/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/mutation_types.js
index 7d89d99622b..c0a5c0efdc8 100644
--- a/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/mutation_types.js
+++ b/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/mutation_types.js
@@ -1,3 +1,4 @@
 export const SET_FILTERS = 'SET_FILTERS';
 export const SET_CHART_DATA = 'SET_CHART_DATA';
+export const SET_USER_JSON = 'SET_USER_JSON';
 export const SET_LOADING_STATE = 'SET_LOADING_STATE';
diff --git a/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/mutations.js b/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/mutations.js
index 9b0f0152879..88dd6fff646 100644
--- a/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/mutations.js
+++ b/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/mutations.js
@@ -9,6 +9,11 @@ export default {
       chartData,
     });
   },
+  [types.SET_USER_JSON](state, userJson) {
+    Object.assign(state, {
+      userJson: JSON.stringify(userJson.data),
+    });
+  },
   [types.SET_FILTERS](state, value) {
     state.filters = value;
   },
diff --git a/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/state.js b/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/state.js
index 1fa6e91b5d5..e868e15e2c5 100644
--- a/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/state.js
+++ b/app/assets/javascripts/AAgeneric_chart/stores/modules/generic_chart/state.js
@@ -2,4 +2,5 @@ export default () => ({
   loading: false,
   filters: '',
   chartData: null,
+  userJson: '',
 });
diff --git a/app/controllers/projects/charts_controller.rb b/app/controllers/projects/charts_controller.rb
index 144ffc94d88..b17dc67cfcd 100644
--- a/app/controllers/projects/charts_controller.rb
+++ b/app/controllers/projects/charts_controller.rb
@@ -19,7 +19,7 @@ module Projects
       return { error: 'No URL provided' } if params[:url].blank?
 
       result = Gitlab::HTTP.get(params[:url])
-      JSON.parse(result.bokdy)
+      JSON.parse(result.body)
     rescue
       { error: 'The content is not a valid JSON' }
     end