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 模型"