[PLAT-3333] Add dropdown menu option to download grafana dashboard js…

…on on metrics page

Summary:
- Option downloads the json file with content from GET /grafana_dashboard API call
- If dashboard is missing, pop-up appears with error message.
- Is a low priority option hence kept in the dropdown menu

{F23881} {F23883}

Test Plan: Manually test with success and failure case

Reviewers: kkannan

Reviewed By: kkannan

Subscribers: jenkins-bot

Differential Revision: https://phabricator.dev.yugabyte.com/D15966

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`);
+}

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'}
                         </MenuItem>
+                        <MenuItem onClick={() => {
+                          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'}
+                        </MenuItem>
                       </Dropdown.Menu>
                     </Dropdown>
                   </div>

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));
     },