diff --git a/managed/ui/src/actions/graph.js b/managed/ui/src/actions/graph.js index e9dcf4322be8..f611cd4fb340 100644 --- a/managed/ui/src/actions/graph.js +++ b/managed/ui/src/actions/graph.js @@ -69,3 +69,8 @@ export function togglePrometheusQuery() { type: TOGGLE_PROMETHEUS_QUERY }; } + +export function getGrafanaJson() { + return axios + .get(`${ROOT_URL}/grafana_dashboard`); +} diff --git a/managed/ui/src/components/metrics/GraphPanelHeader/GraphPanelHeader.js b/managed/ui/src/components/metrics/GraphPanelHeader/GraphPanelHeader.js index c39c7cc87519..606503477634 100644 --- a/managed/ui/src/components/metrics/GraphPanelHeader/GraphPanelHeader.js +++ b/managed/ui/src/components/metrics/GraphPanelHeader/GraphPanelHeader.js @@ -6,6 +6,7 @@ import { Dropdown, MenuItem, FormControl } from 'react-bootstrap'; import momentLocalizer from 'react-widgets-moment'; import { withRouter, browserHistory } from 'react-router'; import moment from 'moment'; +import { toast } from 'react-toastify'; import _ from 'lodash'; @@ -488,6 +489,33 @@ class GraphPanelHeader extends Component { ? 'Disable Prometheus query' : 'Enable Prometheus query'} + { + self.props.getGrafanaJson() + .then((response) => { + return new Blob([JSON.stringify(response.data, null, 2)], { + type: 'application/json' + }); + }) + .catch((error) => { + toast.error("Error in downloading Grafana JSON: " + error.message); + return null; + }) + .then((blob) => { + if (blob != null) { + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.style.display = 'none'; + a.href = url; + a.download = 'Grafana_Dashboard.json'; + document.body.appendChild(a); + a.click(); + window.URL.revokeObjectURL(url); + a.remove(); + } + }) + }}> + {'Download Grafana JSON'} + diff --git a/managed/ui/src/components/metrics/GraphPanelHeader/GraphPanelHeaderContainer.js b/managed/ui/src/components/metrics/GraphPanelHeader/GraphPanelHeaderContainer.js index 8384f214990d..2b24879b9fd3 100644 --- a/managed/ui/src/components/metrics/GraphPanelHeader/GraphPanelHeaderContainer.js +++ b/managed/ui/src/components/metrics/GraphPanelHeader/GraphPanelHeaderContainer.js @@ -6,7 +6,8 @@ import { GraphPanelHeader } from '../../metrics'; import { changeGraphQueryPeriod, resetGraphQueryPeriod, - togglePrometheusQuery + togglePrometheusQuery, + getGrafanaJson } from '../../../actions/graph'; import { fetchUniverseList, fetchUniverseListResponse } from '../../../actions/universe'; import {closeDialog, openDialog} from "../../../actions/modal"; @@ -27,6 +28,7 @@ const mapDispatchToProps = (dispatch) => { togglePrometheusQuery: () => { dispatch(togglePrometheusQuery()); }, + getGrafanaJson: getGrafanaJson, showModal: (modalName) => { dispatch(openDialog(modalName)); },