From 9735a6e5ce28bf7ffcc30d15b7b23931924a778e Mon Sep 17 00:00:00 2001 From: Srikanth Chekuri Date: Thu, 10 Nov 2022 16:49:54 +0530 Subject: [PATCH] feat: add ability to import Grafana dashboards (#1700) * feat: add ability to import Grafana dashboards * chore: remove unnecessary file * chore: more 9XX support * chore: some more hacks * chore: update deps * chore: arrange equal spaced widgets instead of inheriting from grafana --- frontend/public/locales/en-GB/dashboard.json | 1 + frontend/public/locales/en/dashboard.json | 1 + frontend/src/api/dashboard/create.ts | 3 +- .../ListOfDashboard/ImportJSON/index.tsx | 3 + .../src/container/ListOfDashboard/index.tsx | 19 +- frontend/src/types/api/dashboard/create.ts | 3 +- go.mod | 1 + go.sum | 2 + pkg/query-service/app/dashboards/model.go | 199 ++++++++++++++ pkg/query-service/app/http_handler.go | 35 +++ pkg/query-service/model/dashboards.go | 252 ++++++++++++++++++ 11 files changed, 514 insertions(+), 5 deletions(-) create mode 100644 pkg/query-service/model/dashboards.go diff --git a/frontend/public/locales/en-GB/dashboard.json b/frontend/public/locales/en-GB/dashboard.json index 7f21149511..b643f4727d 100644 --- a/frontend/public/locales/en-GB/dashboard.json +++ b/frontend/public/locales/en-GB/dashboard.json @@ -1,6 +1,7 @@ { "create_dashboard": "Create Dashboard", "import_json": "Import JSON", + "import_grafana_json": "Import Grafana JSON", "copy_to_clipboard": "Copy To ClipBoard", "download_json": "Download JSON", "view_json": "View JSON", diff --git a/frontend/public/locales/en/dashboard.json b/frontend/public/locales/en/dashboard.json index 7f21149511..b643f4727d 100644 --- a/frontend/public/locales/en/dashboard.json +++ b/frontend/public/locales/en/dashboard.json @@ -1,6 +1,7 @@ { "create_dashboard": "Create Dashboard", "import_json": "Import JSON", + "import_grafana_json": "Import Grafana JSON", "copy_to_clipboard": "Copy To ClipBoard", "download_json": "Download JSON", "view_json": "View JSON", diff --git a/frontend/src/api/dashboard/create.ts b/frontend/src/api/dashboard/create.ts index ab2ace2144..3796eb685e 100644 --- a/frontend/src/api/dashboard/create.ts +++ b/frontend/src/api/dashboard/create.ts @@ -7,8 +7,9 @@ import { PayloadProps, Props } from 'types/api/dashboard/create'; const create = async ( props: Props, ): Promise | ErrorResponse> => { + const url = props.uploadedGrafana ? '/dashboards/grafana' : '/dashboards'; try { - const response = await axios.post('/dashboards', { + const response = await axios.post(url, { ...props, }); diff --git a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx index e1107fd9f2..60f429a744 100644 --- a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx +++ b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx @@ -26,6 +26,7 @@ import { EditorContainer, FooterContainer } from './styles'; function ImportJSON({ isImportJSONModalVisible, + uploadedGrafana, onModalHandler, }: ImportJSONProps): JSX.Element { const [jsonData, setJsonData] = useState>(); @@ -89,6 +90,7 @@ function ImportJSON({ const response = await createDashboard({ ...parsedWidgets, + uploadedGrafana, }); if (response.statusCode === 200) { @@ -186,6 +188,7 @@ function ImportJSON({ interface ImportJSONProps { isImportJSONModalVisible: boolean; onModalHandler: VoidFunction; + uploadedGrafana: boolean; } export default ImportJSON; diff --git a/frontend/src/container/ListOfDashboard/index.tsx b/frontend/src/container/ListOfDashboard/index.tsx index cb375b9742..a2d1b0c37a 100644 --- a/frontend/src/container/ListOfDashboard/index.tsx +++ b/frontend/src/container/ListOfDashboard/index.tsx @@ -57,6 +57,7 @@ function ListOfAllDashboard(): JSX.Element { isImportJSONModalVisible, setIsImportJSONModalVisible, ] = useState(false); + const [uploadedGrafana, setUploadedGrafana] = useState(false); const [filteredDashboards, setFilteredDashboards] = useState(); @@ -137,6 +138,7 @@ function ListOfAllDashboard(): JSX.Element { title: t('new_dashboard_title', { ns: 'dashboard', }), + uploadedGrafana: false, }); if (response.statusCode === 200) { @@ -182,8 +184,9 @@ function ListOfAllDashboard(): JSX.Element { newDashboardState.loading, ]); - const onModalHandler = (): void => { + const onModalHandler = (uploadedGrafana: boolean): void => { setIsImportJSONModalVisible((state) => !state); + setUploadedGrafana(uploadedGrafana); }; const menu = useMemo( @@ -198,9 +201,18 @@ function ListOfAllDashboard(): JSX.Element { {t('create_dashboard')} )} - + onModalHandler(false)} + key={t('import_json').toString()} + > {t('import_json')} + onModalHandler(true)} + key={t('import_grafana_json').toString()} + > + {t('import_grafana_json')} + ), [createNewDashboard, loading, onNewDashboardHandler, t], @@ -256,7 +268,8 @@ function ListOfAllDashboard(): JSX.Element { onModalHandler(false)} />