diff --git a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx index 9b1d941567e..d0362d0f1f3 100644 --- a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx +++ b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx @@ -1,8 +1,10 @@ import React from 'react'; +import _ from 'lodash'; + import config from 'app/core/config'; import {PanelModel} from '../panel_model'; import {PanelContainer} from './PanelContainer'; -import _ from 'lodash'; +import {GRID_COLUMN_COUNT} from 'app/core/constants'; export interface AddPanelPanelProps { panel: PanelModel; @@ -27,30 +29,38 @@ export class AddPanelPanel extends React.Component item) - .orderBy('sort') .value(); + + // add special row type + panels.push({id: 'row', name: 'Row', sort: 8, info: {logos: {small: 'public/img/icn-panel.svg'}}}); + + // add sort by sort property + return _.sortBy(panels, 'sort'); } onPanelSelected(panelPluginInfo) { const panelContainer = this.props.getPanelContainer(); const dashboard = panelContainer.getDashboard(); + const {gridPos} = this.props.panel; // remove add-panel panel dashboard.removePanel(this.props.panel); - dashboard.addPanel({ + var newPanel: any = { type: panelPluginInfo.id, title: 'Panel Title', - gridPos: { - x: this.props.panel.gridPos.x, - y: this.props.panel.gridPos.y, - w: this.props.panel.gridPos.w, - h: this.props.panel.gridPos.h - } - }); + gridPos: {x: gridPos.x, y: gridPos.y, w: gridPos.w, h: gridPos.h} + }; + + if (panelPluginInfo.id === 'row') { + newPanel.title = 'Row title'; + newPanel.gridPos = {x: 0, y: 0, w: GRID_COLUMN_COUNT, h: 1, static: true}; + } + + dashboard.addPanel(newPanel); } renderPanelItem(panel) { diff --git a/public/sass/components/_panel_add_panel.scss b/public/sass/components/_panel_add_panel.scss index 239da6058e7..6a5f210ce2b 100644 --- a/public/sass/components/_panel_add_panel.scss +++ b/public/sass/components/_panel_add_panel.scss @@ -3,7 +3,7 @@ display: flex; flex-direction: row; flex-wrap: wrap; - overflow: hidden; + overflow: auto; height: 100%; align-content: flex-start; justify-content: space-around;