|
|
|
@ -30,6 +30,32 @@ interface PanelEditorTab { |
|
|
|
|
text: string; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
enum PanelEditorTabIds { |
|
|
|
|
Queries = 'queries', |
|
|
|
|
Visualization = 'visualization', |
|
|
|
|
Advanced = 'advanced', |
|
|
|
|
Alert = 'alert' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
interface PanelEditorTab { |
|
|
|
|
id: string; |
|
|
|
|
text: string; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const panelEditorTabTexts = { |
|
|
|
|
[PanelEditorTabIds.Queries]: 'Queries', |
|
|
|
|
[PanelEditorTabIds.Visualization]: 'Visualization', |
|
|
|
|
[PanelEditorTabIds.Advanced]: 'Panel Options', |
|
|
|
|
[PanelEditorTabIds.Alert]: 'Alert', |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const getPanelEditorTab = (tabId: PanelEditorTabIds): PanelEditorTab => { |
|
|
|
|
return { |
|
|
|
|
id: tabId, |
|
|
|
|
text: panelEditorTabTexts[tabId] |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export class PanelEditor extends PureComponent<PanelEditorProps> { |
|
|
|
|
constructor(props) { |
|
|
|
|
super(props); |
|
|
|
@ -72,31 +98,26 @@ export class PanelEditor extends PureComponent<PanelEditorProps> { |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
const { plugin } = this.props; |
|
|
|
|
let activeTab = store.getState().location.query.tab || 'queries'; |
|
|
|
|
let activeTab: PanelEditorTabIds = store.getState().location.query.tab || PanelEditorTabIds.Queries; |
|
|
|
|
|
|
|
|
|
const tabs: PanelEditorTab[] = [ |
|
|
|
|
{ id: 'queries', text: 'Queries' }, |
|
|
|
|
{ id: 'visualization', text: 'Visualization' }, |
|
|
|
|
{ id: 'advanced', text: 'Panel Options' }, |
|
|
|
|
getPanelEditorTab(PanelEditorTabIds.Queries), |
|
|
|
|
getPanelEditorTab(PanelEditorTabIds.Visualization), |
|
|
|
|
getPanelEditorTab(PanelEditorTabIds.Advanced), |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
// handle panels that do not have queries tab
|
|
|
|
|
if (plugin.exports.PanelCtrl) { |
|
|
|
|
if (!plugin.exports.PanelCtrl.prototype.onDataReceived) { |
|
|
|
|
// remove queries tab
|
|
|
|
|
tabs.shift(); |
|
|
|
|
// switch tab
|
|
|
|
|
if (activeTab === 'queries') { |
|
|
|
|
activeTab = 'visualization'; |
|
|
|
|
} |
|
|
|
|
if (!plugin.isDataPanel) { |
|
|
|
|
// remove queries tab
|
|
|
|
|
tabs.shift(); |
|
|
|
|
// switch tab
|
|
|
|
|
if (activeTab === PanelEditorTabIds.Queries) { |
|
|
|
|
activeTab = PanelEditorTabIds.Visualization; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (config.alertingEnabled && plugin.id === 'graph') { |
|
|
|
|
tabs.push({ |
|
|
|
|
id: 'alert', |
|
|
|
|
text: 'Alert', |
|
|
|
|
}); |
|
|
|
|
tabs.push(getPanelEditorTab(PanelEditorTabIds.Alert)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|