mirror of https://github.com/grafana/grafana
Dynamic dashboards: Copy paste rows tabs and auto grid items (#103237)
* copy paste tab row works * refactor to hook * add buttons to canvas * make i18n * remove paste from add pane and refactor * pasting auto grid panel works * add paste for default grid * set height/width and postion for auto grid items moving to default grid * clean uppull/102879/head
Oscar Kilhed
3 months ago
committed by
GitHub
parent
332f041c91
commit
6ff3af7e83
@ -0,0 +1,116 @@ |
|||||||
|
import { |
||||||
|
AutoGridLayoutItemKind, |
||||||
|
DashboardV2Spec, |
||||||
|
GridLayoutItemKind, |
||||||
|
RowsLayoutRowKind, |
||||||
|
TabsLayoutTabKind, |
||||||
|
} from '@grafana/schema/dist/esm/schema/dashboard/v2alpha0'; |
||||||
|
import { LS_PANEL_COPY_KEY, LS_ROW_COPY_KEY, LS_TAB_COPY_KEY } from 'app/core/constants'; |
||||||
|
import store from 'app/core/store'; |
||||||
|
|
||||||
|
import { deserializeGridItem } from '../../serialization/layoutSerializers/DefaultGridLayoutSerializer'; |
||||||
|
import { deserializeAutoGridItem } from '../../serialization/layoutSerializers/ResponsiveGridLayoutSerializer'; |
||||||
|
import { deserializeRow } from '../../serialization/layoutSerializers/RowsLayoutSerializer'; |
||||||
|
import { deserializeTab } from '../../serialization/layoutSerializers/TabsLayoutSerializer'; |
||||||
|
import { dashboardSceneGraph } from '../../utils/dashboardSceneGraph'; |
||||||
|
import { DashboardScene } from '../DashboardScene'; |
||||||
|
import { DashboardGridItem } from '../layout-default/DashboardGridItem'; |
||||||
|
import { GridCell } from '../layout-default/findSpaceForNewPanel'; |
||||||
|
import { AutoGridItem } from '../layout-responsive-grid/ResponsiveGridItem'; |
||||||
|
import { RowItem } from '../layout-rows/RowItem'; |
||||||
|
import { TabItem } from '../layout-tabs/TabItem'; |
||||||
|
|
||||||
|
export function clearClipboard() { |
||||||
|
store.delete(LS_PANEL_COPY_KEY); |
||||||
|
store.delete(LS_ROW_COPY_KEY); |
||||||
|
store.delete(LS_TAB_COPY_KEY); |
||||||
|
} |
||||||
|
|
||||||
|
export interface RowStore { |
||||||
|
elements: DashboardV2Spec['elements']; |
||||||
|
row: RowsLayoutRowKind; |
||||||
|
} |
||||||
|
|
||||||
|
export interface TabStore { |
||||||
|
elements: DashboardV2Spec['elements']; |
||||||
|
tab: TabsLayoutTabKind; |
||||||
|
} |
||||||
|
|
||||||
|
export interface PanelStore { |
||||||
|
elements: DashboardV2Spec['elements']; |
||||||
|
gridItem: GridLayoutItemKind | AutoGridLayoutItemKind; |
||||||
|
} |
||||||
|
|
||||||
|
export function getRowFromClipboard(scene: DashboardScene): RowItem { |
||||||
|
const jsonData = store.get(LS_ROW_COPY_KEY); |
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||||
|
const jsonObj: RowStore = JSON.parse(jsonData) as RowStore; |
||||||
|
clearClipboard(); |
||||||
|
const panelIdGenerator = getPanelIdGenerator(dashboardSceneGraph.getNextPanelId(scene)); |
||||||
|
|
||||||
|
let row; |
||||||
|
// We don't control the local storage content, so if it's out of sync with the code all bets are off.
|
||||||
|
try { |
||||||
|
row = deserializeRow(jsonObj.row, jsonObj.elements, false, panelIdGenerator); |
||||||
|
} catch (error) { |
||||||
|
throw new Error('Error pasting row from clipboard, please try to copy again'); |
||||||
|
} |
||||||
|
|
||||||
|
return row; |
||||||
|
} |
||||||
|
|
||||||
|
export function getTabFromClipboard(scene: DashboardScene): TabItem { |
||||||
|
const jsonData = store.get(LS_TAB_COPY_KEY); |
||||||
|
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||||
|
const jsonObj: TabStore = JSON.parse(jsonData) as TabStore; |
||||||
|
clearClipboard(); |
||||||
|
const panelIdGenerator = getPanelIdGenerator(dashboardSceneGraph.getNextPanelId(scene)); |
||||||
|
let tab; |
||||||
|
try { |
||||||
|
tab = deserializeTab(jsonObj.tab, jsonObj.elements, false, panelIdGenerator); |
||||||
|
} catch (error) { |
||||||
|
throw new Error('Error pasting tab from clipboard, please try to copy again'); |
||||||
|
} |
||||||
|
|
||||||
|
return tab; |
||||||
|
} |
||||||
|
|
||||||
|
export function getPanelFromClipboard(scene: DashboardScene): DashboardGridItem | AutoGridItem { |
||||||
|
const jsonData = store.get(LS_PANEL_COPY_KEY); |
||||||
|
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||||
|
const { elements, gridItem }: PanelStore = JSON.parse(jsonData) as PanelStore; |
||||||
|
|
||||||
|
if (gridItem.kind === 'GridLayoutItem') { |
||||||
|
return deserializeGridItem(gridItem, elements, getPanelIdGenerator(dashboardSceneGraph.getNextPanelId(scene))); |
||||||
|
} |
||||||
|
return deserializeAutoGridItem(gridItem, elements, getPanelIdGenerator(dashboardSceneGraph.getNextPanelId(scene))); |
||||||
|
} |
||||||
|
|
||||||
|
export function getAutoGridItemFromClipboard(scene: DashboardScene): AutoGridItem { |
||||||
|
const panel = getPanelFromClipboard(scene); |
||||||
|
if (panel instanceof AutoGridItem) { |
||||||
|
return panel; |
||||||
|
} |
||||||
|
// Convert to AutoGridItem
|
||||||
|
return new AutoGridItem({ body: panel.state.body, key: panel.state.key, variableName: panel.state.variableName }); |
||||||
|
} |
||||||
|
|
||||||
|
export function getDashboardGridItemFromClipboard(scene: DashboardScene, gridCell: GridCell | null): DashboardGridItem { |
||||||
|
const panel = getPanelFromClipboard(scene); |
||||||
|
if (panel instanceof DashboardGridItem) { |
||||||
|
return panel; |
||||||
|
} |
||||||
|
// Convert to DashboardGridItem
|
||||||
|
return new DashboardGridItem({ |
||||||
|
...gridCell, |
||||||
|
body: panel.state.body, |
||||||
|
key: panel.state.key, |
||||||
|
variableName: panel.state.variableName, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function getPanelIdGenerator(start: number) { |
||||||
|
let id = start; |
||||||
|
return () => id++; |
||||||
|
} |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
|
||||||
|
import { LS_PANEL_COPY_KEY, LS_ROW_COPY_KEY, LS_TAB_COPY_KEY } from 'app/core/constants'; |
||||||
|
import store from 'app/core/store'; |
||||||
|
|
||||||
|
export function useClipboardState() { |
||||||
|
const [hasCopiedPanel, setHasCopiedPanel] = useState(store.exists(LS_PANEL_COPY_KEY)); |
||||||
|
const [hasCopiedRow, setHasCopiedRow] = useState(store.exists(LS_ROW_COPY_KEY)); |
||||||
|
const [hasCopiedTab, setHasCopiedTab] = useState(store.exists(LS_TAB_COPY_KEY)); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const unsubscribe = store.subscribe(LS_PANEL_COPY_KEY, () => { |
||||||
|
setHasCopiedPanel(store.exists(LS_PANEL_COPY_KEY)); |
||||||
|
}); |
||||||
|
|
||||||
|
const unsubscribeRow = store.subscribe(LS_ROW_COPY_KEY, () => { |
||||||
|
setHasCopiedRow(store.exists(LS_ROW_COPY_KEY)); |
||||||
|
}); |
||||||
|
|
||||||
|
const unsubscribeTab = store.subscribe(LS_TAB_COPY_KEY, () => { |
||||||
|
setHasCopiedTab(store.exists(LS_TAB_COPY_KEY)); |
||||||
|
}); |
||||||
|
|
||||||
|
return () => { |
||||||
|
unsubscribe(); |
||||||
|
unsubscribeRow(); |
||||||
|
unsubscribeTab(); |
||||||
|
}; |
||||||
|
}, []); |
||||||
|
|
||||||
|
return { |
||||||
|
hasCopiedPanel, |
||||||
|
hasCopiedRow, |
||||||
|
hasCopiedTab, |
||||||
|
}; |
||||||
|
} |
||||||
Loading…
Reference in new issue