diff --git a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx index aeb840c317a..8d4ebfb3a10 100644 --- a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx +++ b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx @@ -16,6 +16,8 @@ export interface AddPanelPanelProps { export interface AddPanelPanelState { filter: string; panelPlugins: any[]; + copiedPanelPlugins: any[]; + tab: string; } export class AddPanelPanel extends React.Component { @@ -25,12 +27,14 @@ export class AddPanelPanel extends React.Component item) @@ -39,6 +43,19 @@ export class AddPanelPanel extends React.Component item) + .value(); + let copiedPanels = []; + let copiedPanelJson = store.get(LS_PANEL_COPY_KEY); if (copiedPanelJson) { let copiedPanel = JSON.parse(copiedPanelJson); @@ -48,12 +65,13 @@ export class AddPanelPanel extends React.Component { @@ -101,19 +119,85 @@ export class AddPanelPanel extends React.Component { + return regex.test(panel.name); + }); + } + + openCopy() { + this.setState({ tab: 'Copy' }); + this.setState({ filter: '' }); + this.setState({ panelPlugins: this.getPanelPlugins('') }); + this.setState({ copiedPanelPlugins: this.getCopiedPanelPlugins('') }); + } + + openAdd() { + this.setState({ tab: 'Add' }); + this.setState({ filter: '' }); + this.setState({ panelPlugins: this.getPanelPlugins('') }); + this.setState({ copiedPanelPlugins: this.getCopiedPanelPlugins('') }); + } + render() { + let addClass; + let copyClass; + let panelTab; + + if (this.state.tab === 'Add') { + addClass = 'active active--panel'; + copyClass = ''; + panelTab = this.state.panelPlugins.map(this.renderPanelItem); + } else if (this.state.tab === 'Copy') { + addClass = ''; + copyClass = 'active active--panel'; + panelTab = this.state.copiedPanelPlugins.map(this.renderPanelItem); + } + return (
New Panel - Select a visualization +
    +
  • +
    + Add +
    +
  • +
  • +
    + Copy +
    +
  • +
- {this.state.panelPlugins.map(this.renderPanelItem)} + +
+ +
+ {panelTab} +
); diff --git a/public/sass/components/_panel_add_panel.scss b/public/sass/components/_panel_add_panel.scss index 51754a54d92..70aff32a945 100644 --- a/public/sass/components/_panel_add_panel.scss +++ b/public/sass/components/_panel_add_panel.scss @@ -3,9 +3,12 @@ } .add-panel__header { - padding: 5px 15px; + 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; .gicon { font-size: 30px; @@ -23,7 +26,7 @@ .add-panel__title { font-size: $font-size-md; - margin-right: $spacer/2; + margin-right: $spacer*2; } .add-panel__sub-title { @@ -39,9 +42,9 @@ flex-direction: row; flex-wrap: wrap; overflow: auto; - height: calc(100% - 43px); + height: calc(100% - 50px); align-content: flex-start; - justify-content: space-around; + justify-content: space-between; position: relative; } @@ -51,7 +54,7 @@ border-radius: 3px; padding: $spacer/3 $spacer; - width: 31%; + width: 32%; height: 60px; text-align: center; margin: $gf-form-margin; @@ -77,3 +80,9 @@ .add-panel__item-icon { padding: 2px; } + +.add-panel__searchbar { + width: 100%; + margin-bottom: 10px; + margin-top: 7px; +} diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 197d5892652..eb3c8ce13f5 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -44,18 +44,16 @@ &::before { display: block; - content: " "; + content: ' '; position: absolute; left: 0; right: 0; height: 2px; top: 0; - background-image: linear-gradient( - to right, - #ffd500 0%, - #ff4400 99%, - #ff4400 100% - ); + background-image: linear-gradient(to right, #ffd500 0%, #ff4400 99%, #ff4400 100%); } } + &.active--panel { + background: $panel-bg !important; + } }