From 3215f8abfe049f91be7076d27ae4f1e4bb2814a0 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Fri, 14 Dec 2018 14:33:49 +0100 Subject: [PATCH 1/2] replaced content in addpanelpanel with three buttons that can create new panel, paste copied panel, and add a new row, to paste panel one must copy one first, code is still quite rough --- .../dashboard/dashgrid/AddPanelPanel.tsx | 241 ++++++++---------- public/sass/components/_panel_add_panel.scss | 32 +-- 2 files changed, 119 insertions(+), 154 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx index 68cee112f42..ce5b12d8489 100644 --- a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx +++ b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx @@ -1,6 +1,5 @@ import React from 'react'; import _ from 'lodash'; -import classNames from 'classnames'; import config from 'app/core/config'; import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; @@ -8,6 +7,8 @@ import ScrollBar from 'app/core/components/ScrollBar/ScrollBar'; import store from 'app/core/store'; import { LS_PANEL_COPY_KEY } from 'app/core/constants'; import Highlighter from 'react-highlight-words'; +import { updateLocation } from 'app/core/actions'; +import { store as reduxStore } from 'app/store/store'; export interface AddPanelPanelProps { panel: PanelModel; @@ -27,12 +28,11 @@ export class AddPanelPanel extends React.Component item) .value(); + const panels = []; + + for (let i = 0; i < panelsList.length; i++) { + if (panelsList[i].id === 'graph') { + panels.push(panelsList[i]); + } + } // add special row type panels.push({ id: 'row', name: 'Row', sort: 8, info: { logos: { small: 'public/img/icn-row.svg' } } }); - - panels = this.filterPanels(panels, filter); - // add sort by sort property - return _.sortBy(panels, 'sort'); + return panels; } - getCopiedPanelPlugins(filter) { + getCopiedPanelPlugins() { const panels = _.chain(config.panels) .filter({ hideFromList: false }) .map(item => item) .value(); - let copiedPanels = []; + const copiedPanels = []; const copiedPanelJson = store.get(LS_PANEL_COPY_KEY); if (copiedPanelJson) { @@ -86,40 +90,9 @@ export class AddPanelPanel extends React.Component { - const dashboard = this.props.dashboard; - const { gridPos } = this.props.panel; - - const newPanel: any = { - type: panelPluginInfo.id, - title: 'Panel Title', - 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 }; - } - - // apply panel template / defaults - if (panelPluginInfo.defaults) { - _.defaults(newPanel, panelPluginInfo.defaults); - newPanel.gridPos.w = panelPluginInfo.defaults.gridPos.w; - newPanel.gridPos.h = panelPluginInfo.defaults.gridPos.h; - newPanel.title = panelPluginInfo.defaults.title; - store.delete(LS_PANEL_COPY_KEY); - } - - dashboard.addPanel(newPanel); - dashboard.removePanel(this.props.panel); - }; - handleCloseAddPanel(evt) { evt.preventDefault(); this.props.dashboard.removePanel(this.props.dashboard.panels[0]); @@ -130,82 +103,101 @@ export class AddPanelPanel extends React.Component; } - renderPanelItem(panel, index) { - return ( -
this.onAddPanel(panel)} title={panel.name}> - -
{this.renderText(panel.name)}
-
- ); - } - noCopiedPanelPlugins() { return
No copied panels yet.
; } - filterChange(evt) { - this.setState({ - filter: evt.target.value, - panelPlugins: this.getPanelPlugins(evt.target.value), - copiedPanelPlugins: this.getCopiedPanelPlugins(evt.target.value), - }); + copyButton(panel) { + return ( + + ); } - filterKeyPress(evt) { - if (evt.key === 'Enter') { - const panel = _.head(this.state.panelPlugins); - if (panel) { - this.onAddPanel(panel); - } + moveToEdit(panel) { + reduxStore.dispatch( + updateLocation({ + query: { + panelId: panel.id, + edit: true, + fullscreen: true, + }, + partial: true, + }) + ); + } + + onCreateNewPanel = panelPluginInfo => { + const dashboard = this.props.dashboard; + const { gridPos } = this.props.panel; + + const newPanel: any = { + type: panelPluginInfo.id, + title: 'Panel Title', + gridPos: { x: gridPos.x, y: gridPos.y, w: gridPos.w, h: gridPos.h }, + }; + + // apply panel template / defaults + if (panelPluginInfo.defaults) { + _.defaults(newPanel, panelPluginInfo.defaults); + newPanel.gridPos.w = panelPluginInfo.defaults.gridPos.w; + newPanel.gridPos.h = panelPluginInfo.defaults.gridPos.h; + newPanel.title = panelPluginInfo.defaults.title; + store.delete(LS_PANEL_COPY_KEY); } - } - filterPanels(panels, filter) { - const regex = new RegExp(filter, 'i'); - return panels.filter(panel => { - return regex.test(panel.name); - }); - } + dashboard.addPanel(newPanel); + this.moveToEdit(newPanel); - openCopy() { - this.setState({ - tab: 'Copy', - filter: '', - panelPlugins: this.getPanelPlugins(''), - copiedPanelPlugins: this.getCopiedPanelPlugins(''), - }); - } + dashboard.removePanel(this.props.panel); + }; - openAdd() { - this.setState({ - tab: 'Add', - filter: '', - panelPlugins: this.getPanelPlugins(''), - copiedPanelPlugins: this.getCopiedPanelPlugins(''), - }); - } + onPasteCopiedPanel = panelPluginInfo => { + const dashboard = this.props.dashboard; + const { gridPos } = this.props.panel; + + const newPanel: any = { + type: panelPluginInfo.id, + title: 'Panel Title', + gridPos: { x: gridPos.x, y: gridPos.y, w: gridPos.w, h: gridPos.h }, + }; + + // apply panel template / defaults + if (panelPluginInfo.defaults) { + _.defaults(newPanel, panelPluginInfo.defaults); + newPanel.gridPos.w = panelPluginInfo.defaults.gridPos.w; + newPanel.gridPos.h = panelPluginInfo.defaults.gridPos.h; + newPanel.title = panelPluginInfo.defaults.title; + store.delete(LS_PANEL_COPY_KEY); + } + + dashboard.addPanel(newPanel); + + dashboard.removePanel(this.props.panel); + }; + + onCreateNewRow = panelPluginInfo => { + const dashboard = this.props.dashboard; + + const newRow: any = { + type: panelPluginInfo.id, + title: 'Row title', + gridPos: { x: 0, y: 0 }, + }; + + dashboard.addPanel(newRow); + dashboard.removePanel(this.props.panel); + }; render() { - const addClass = classNames({ - 'active active--panel': this.state.tab === 'Add', - '': this.state.tab === 'Copy', - }); + const panel = this.state.panelPlugins[0]; + const row = this.state.panelPlugins[1]; - const copyClass = classNames({ - '': this.state.tab === 'Add', - 'active active--panel': this.state.tab === 'Copy', - }); + let addCopyButton; - let panelTab; - - if (this.state.tab === 'Add') { - panelTab = this.state.panelPlugins.map(this.renderPanelItem); - } else if (this.state.tab === 'Copy') { - if (this.state.copiedPanelPlugins.length > 0) { - panelTab = this.state.copiedPanelPlugins.map(this.renderPanelItem); - } else { - panelTab = this.noCopiedPanelPlugins(); - } + if (this.state.copiedPanelPlugins.length === 1) { + addCopyButton = this.copyButton(this.state.copiedPanelPlugins[0]); } return ( @@ -213,40 +205,21 @@ export class AddPanelPanel extends React.Component
- New Panel -
    -
  • -
    - Add -
    -
    • -
  • -
    - Paste -
    -
    • -
- (this.scrollbar = element)} className="add-panel__items"> -
- +
+
+ + {addCopyButton} +
- {panelTab} - +
); diff --git a/public/sass/components/_panel_add_panel.scss b/public/sass/components/_panel_add_panel.scss index 263b181262e..e8dcea7049b 100644 --- a/public/sass/components/_panel_add_panel.scss +++ b/public/sass/components/_panel_add_panel.scss @@ -4,20 +4,17 @@ .add-panel { height: 100%; - - .baron__root { - height: calc(100% - 43px); - } + //display: flex; + //flex-direction: column; } .add-panel__header { + top: 0; + position: absolute; padding: 0 15px; display: flex; align-items: center; - background: $page-header-bg; - box-shadow: $page-header-shadow; - border-bottom: 1px solid $page-header-border-color; - + width: 100%; .gicon { font-size: 30px; margin-right: $spacer; @@ -32,18 +29,6 @@ margin-right: -10px; } -.add-panel__title { - font-size: $font-size-md; - margin-right: $spacer*2; -} - -.add-panel__sub-title { - font-style: italic; - color: $text-muted; - position: relative; - top: 1px; -} - .add-panel__items { padding: 3px 8px; display: flex; @@ -97,3 +82,10 @@ width: 100%; padding: 3px 8px; } + +.add-panel-btn-container { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} From 3c059bc9d66eedecad19b4ec48fc055842042901 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Fri, 14 Dec 2018 14:50:46 +0100 Subject: [PATCH 2/2] removed a test that isn't neccessery any more --- public/app/features/dashboard/specs/AddPanelPanel.test.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/public/app/features/dashboard/specs/AddPanelPanel.test.tsx b/public/app/features/dashboard/specs/AddPanelPanel.test.tsx index 4136883880b..82171177edd 100644 --- a/public/app/features/dashboard/specs/AddPanelPanel.test.tsx +++ b/public/app/features/dashboard/specs/AddPanelPanel.test.tsx @@ -32,11 +32,6 @@ describe('AddPanelPanel', () => { wrapper = shallow(); }); - it('should fetch all panels sorted with core plugins first', () => { - expect(wrapper.find('.add-panel__item').get(1).props.title).toBe('singlestat'); - expect(wrapper.find('.add-panel__item').get(4).props.title).toBe('piechart'); - }); - it('should filter', () => { wrapper.find('input').simulate('change', { target: { value: 'p' } });