From 85d633f1b98b7b4e03ca155e7d48bfc7f4ef1767 Mon Sep 17 00:00:00 2001 From: Haris Rozajac <58232930+harisrozajac@users.noreply.github.com> Date: Fri, 19 Jan 2024 09:25:56 -0700 Subject: [PATCH] Dashboards-Scenes: ability to edit and save JSON model (#80757) * View JSON Model tab * Use correct translation field * saving functionality * Remove TODO * Update button tittle --- .../settings/JsonModelEditView.tsx | 40 ++++++++++++++++--- public/locales/de-DE/grafana.json | 1 + public/locales/en-US/grafana.json | 1 + public/locales/es-ES/grafana.json | 1 + public/locales/fr-FR/grafana.json | 1 + public/locales/pseudo-LOCALE/grafana.json | 1 + public/locales/zh-Hans/grafana.json | 1 + 7 files changed, 40 insertions(+), 6 deletions(-) diff --git a/public/app/features/dashboard-scene/settings/JsonModelEditView.tsx b/public/app/features/dashboard-scene/settings/JsonModelEditView.tsx index c85348d7870..34e08210cc6 100644 --- a/public/app/features/dashboard-scene/settings/JsonModelEditView.tsx +++ b/public/app/features/dashboard-scene/settings/JsonModelEditView.tsx @@ -2,21 +2,33 @@ import { css } from '@emotion/css'; import React from 'react'; import { GrafanaTheme2, PageLayoutType } from '@grafana/data'; -import { SceneComponentProps, SceneObjectBase } from '@grafana/scenes'; +import { SceneComponentProps, SceneObjectBase, sceneUtils } from '@grafana/scenes'; import { Button, CodeEditor, useStyles2 } from '@grafana/ui'; import { Page } from 'app/core/components/Page/Page'; import { Trans } from 'app/core/internationalization'; import { getPrettyJSON } from 'app/features/inspector/utils/utils'; +import { DashboardDTO } from 'app/types'; import { DashboardScene } from '../scene/DashboardScene'; +import { transformSaveModelToScene } from '../serialization/transformSaveModelToScene'; import { transformSceneToSaveModel } from '../serialization/transformSceneToSaveModel'; import { getDashboardSceneFor } from '../utils/utils'; import { DashboardEditView, DashboardEditViewState, useDashboardEditPageNav } from './utils'; -export interface JsonModelEditViewState extends DashboardEditViewState {} +export interface JsonModelEditViewState extends DashboardEditViewState { + jsonText: string; +} export class JsonModelEditView extends SceneObjectBase implements DashboardEditView { + constructor(state: Omit) { + super({ + ...state, + jsonText: '', + }); + + this.addActivationHandler(() => this.setState({ jsonText: this.getJsonText() })); + } public getUrlKey(): string { return 'json-model'; } @@ -31,11 +43,27 @@ export class JsonModelEditView extends SceneObjectBase i return getPrettyJSON(jsonData); } + public onCodeEditorBlur = (value: string) => { + this.setState({ jsonText: value }); + }; + + public onApplyChange = () => { + const jsonModel = JSON.parse(this.state.jsonText); + const dashboard = this.getDashboard(); + const rsp: DashboardDTO = { + dashboard: jsonModel, + meta: dashboard.state.meta, + }; + const newDashboardScene = transformSaveModelToScene(rsp); + const newState = sceneUtils.cloneSceneObjectState(newDashboardScene.state); + dashboard.setState(newState); + }; + static Component = ({ model }: SceneComponentProps) => { - const jsonText = model.getJsonText(); const dashboard = model.getDashboard(); const { navModel, pageNav } = useDashboardEditPageNav(dashboard, model.getUrlKey()); const canSave = dashboard.useState().meta.canSave; + const { jsonText } = model.useState(); const styles = useStyles2(getStyles); @@ -53,12 +81,12 @@ export class JsonModelEditView extends SceneObjectBase i showLineNumbers={true} showMiniMap={true} containerStyles={styles.codeEditor} + onBlur={model.onCodeEditorBlur} /> {canSave && (
- {/**TODO: add saving functionality */} -
)} diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json index 9bd9ccb9be1..05bb27eb5df 100644 --- a/public/locales/de-DE/grafana.json +++ b/public/locales/de-DE/grafana.json @@ -361,6 +361,7 @@ "title-label": "Titel" }, "json-editor": { + "apply-button": "", "save-button": "Änderungen speichern", "subtitle": "Das JSON-Modell unten ist die Datenstruktur, die das Dashboard definiert. Dazu gehören Dashboard-Einstellungen, Fenster-Einstellungen, Layout, Abfragen und so weiter.", "title": "JSON-Modell" diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 24ad3f6f952..818ba96104b 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -361,6 +361,7 @@ "title-label": "Title" }, "json-editor": { + "apply-button": "Apply changes", "save-button": "Save changes", "subtitle": "The JSON model below is the data structure that defines the dashboard. This includes dashboard settings, panel settings, layout, queries, and so on.", "title": "JSON Model" diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json index 467288d40f2..6ed41d098e0 100644 --- a/public/locales/es-ES/grafana.json +++ b/public/locales/es-ES/grafana.json @@ -366,6 +366,7 @@ "title-label": "Título" }, "json-editor": { + "apply-button": "", "save-button": "Guardar cambios", "subtitle": "El siguiente modelo JSON es la estructura de datos que define el tablero. Incluye ajustes del tablero, ajustes del panel, diseño, consultas, etc.", "title": "Modelo JSON" diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json index 7d3e5ff837e..2986a549801 100644 --- a/public/locales/fr-FR/grafana.json +++ b/public/locales/fr-FR/grafana.json @@ -366,6 +366,7 @@ "title-label": "Titre" }, "json-editor": { + "apply-button": "", "save-button": "Enregistrer les modifications", "subtitle": "Le modèle JSON ci-dessous est la structure de données qui définit le tableau de bord. Il inclut les paramètres du tableau de bord, les paramètres du panneau, la mise en page, les requêtes, etc.", "title": "Modèle JSON" diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index afd1b579502..189e2ebdb08 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -361,6 +361,7 @@ "title-label": "Ŧįŧľę" }, "json-editor": { + "apply-button": "Åppľy čĥäʼnģęş", "save-button": "Ŝävę čĥäʼnģęş", "subtitle": "Ŧĥę ĴŜØŃ mőđęľ þęľőŵ įş ŧĥę đäŧä şŧřūčŧūřę ŧĥäŧ đęƒįʼnęş ŧĥę đäşĥþőäřđ. Ŧĥįş įʼnčľūđęş đäşĥþőäřđ şęŧŧįʼnģş, päʼnęľ şęŧŧįʼnģş, ľäyőūŧ, qūęřįęş, äʼnđ şő őʼn.", "title": "ĴŜØŃ Mőđęľ" diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json index aec40e87453..9c58fe35444 100644 --- a/public/locales/zh-Hans/grafana.json +++ b/public/locales/zh-Hans/grafana.json @@ -356,6 +356,7 @@ "title-label": "标题" }, "json-editor": { + "apply-button": "", "save-button": "保存更改", "subtitle": "下面的 JSON 模型是定义仪表板的数据结构。这包括仪表板设置、面板设置、布局和查询等等。", "title": "JSON 模型"