From 772ab7812ff52385ff3f06a44dc8f1537334d563 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 16 Oct 2017 09:55:55 +0200 Subject: [PATCH] ux: worked on add panel function --- .../dashboard/dashgrid/AddPanelPanel.tsx | 72 ++++++++++ .../dashboard/dashgrid/DashboardGrid.tsx | 1 + .../dashboard/dashgrid/DashboardPanel.tsx | 18 ++- .../dashboard/dashgrid/DashboardRow.tsx | 2 +- .../features/dashboard/dashnav/dashnav.html | 53 ++++---- .../app/features/dashboard/dashnav/dashnav.ts | 4 +- public/app/features/dashboard/panel_model.ts | 1 + public/sass/_grafana.scss | 1 + public/sass/components/_panel_add_panel.scss | 41 ++++++ public/sass/components/_row.scss | 124 ------------------ public/sass/components/_sidemenu.scss | 2 +- public/sass/pages/_dashboard.scss | 2 + 12 files changed, 164 insertions(+), 157 deletions(-) create mode 100644 public/app/features/dashboard/dashgrid/AddPanelPanel.tsx create mode 100644 public/sass/components/_panel_add_panel.scss diff --git a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx new file mode 100644 index 00000000000..9b1d941567e --- /dev/null +++ b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import config from 'app/core/config'; +import {PanelModel} from '../panel_model'; +import {PanelContainer} from './PanelContainer'; +import _ from 'lodash'; + +export interface AddPanelPanelProps { + panel: PanelModel; + getPanelContainer: () => PanelContainer; +} + +export interface AddPanelPanelState { + filter: string; + panelPlugins: any[]; +} + +export class AddPanelPanel extends React.Component { + constructor(props) { + super(props); + + this.state = { + panelPlugins: this.getPanelPlugins(), + filter: '', + }; + + this.onPanelSelected = this.onPanelSelected.bind(this); + } + + getPanelPlugins() { + return _.chain(config.panels) + .filter({hideFromList: false}) + .map(item => item) + .orderBy('sort') + .value(); + } + + onPanelSelected(panelPluginInfo) { + const panelContainer = this.props.getPanelContainer(); + const dashboard = panelContainer.getDashboard(); + + // remove add-panel panel + dashboard.removePanel(this.props.panel); + + dashboard.addPanel({ + 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 + } + }); + } + + renderPanelItem(panel) { + return ( +
this.onPanelSelected(panel)} title={panel.name}> + +
{panel.name}
+
+ ); + } + + render() { + return ( +
+
{this.state.panelPlugins.map(this.renderPanelItem.bind(this))}
+
+ ); + } +} diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index 725f66e9798..2359dc1e3a1 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -91,6 +91,7 @@ export class DashboardGrid extends React.Component { y: panel.gridPos.y, w: panel.gridPos.w, h: panel.gridPos.h, + static: panel.gridPos.static, }); } diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx index 11f06113617..c72824aa0de 100644 --- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx @@ -2,6 +2,8 @@ import React from 'react'; import {PanelModel} from '../panel_model'; import {PanelContainer} from './PanelContainer'; import {AttachedPanel} from './PanelLoader'; +import {DashboardRow} from './DashboardRow'; +import {AddPanelPanel} from './AddPanelPanel'; export interface DashboardPanelProps { panel: PanelModel; @@ -18,10 +20,13 @@ export class DashboardPanel extends React.Component { } componentDidMount() { + if (!this.element) { + return; + } + const panelContainer = this.props.getPanelContainer(); const dashboard = panelContainer.getDashboard(); const loader = panelContainer.getPanelLoader(); - this.attachedPanel = loader.load(this.element, this.props.panel, dashboard); } @@ -31,9 +36,16 @@ export class DashboardPanel extends React.Component { } } - - render() { + // special handling for rows + if (this.props.panel.type === 'row') { + return ; + } + + if (this.props.panel.type === 'add-panel') { + return ; + } + return (
this.element = element} /> ); diff --git a/public/app/features/dashboard/dashgrid/DashboardRow.tsx b/public/app/features/dashboard/dashgrid/DashboardRow.tsx index 8b6aaf45722..d5723ccfe07 100644 --- a/public/app/features/dashboard/dashgrid/DashboardRow.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardRow.tsx @@ -5,7 +5,7 @@ export interface DashboardRowProps { panel: PanelModel; } -export class DashboardPanel extends React.Component { +export class DashboardRow extends React.Component { constructor(props) { super(props); diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index dc538fb5500..889c34d436d 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -22,32 +22,33 @@
    -
  • - - -
    • -
  • - -
    • + + + + + + + + + + + + + + + + + + + + + + + + + + +
    • diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index 6aa8c1a0c7e..20acfae590f 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -147,8 +147,8 @@ export class DashNavCtrl { addPanel() { this.dashboard.addPanel({ - type: 'graph', - gridPos: {x: 0, y: 0, w: 12, h: 9}, + type: 'add-panel', + gridPos: {x: 0, y: 0, w: 12, h: 9, static: true}, title: 'New Graph', }); } diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts index f4df8a1d7a5..9510a64ff2f 100644 --- a/public/app/features/dashboard/panel_model.ts +++ b/public/app/features/dashboard/panel_model.ts @@ -6,6 +6,7 @@ export interface GridPos { y: number; w: number; h: number; + static?: boolean; } const notPersistedProperties: {[str: string]: boolean} = { diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 739b9848338..70dc88522a6 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -54,6 +54,7 @@ @import "components/panel_table"; @import "components/panel_text"; @import "components/panel_heatmap"; +@import "components/panel_add_panel"; @import "components/settings_permissions"; @import "components/tagsinput"; @import "components/tables_lists"; diff --git a/public/sass/components/_panel_add_panel.scss b/public/sass/components/_panel_add_panel.scss new file mode 100644 index 00000000000..239da6058e7 --- /dev/null +++ b/public/sass/components/_panel_add_panel.scss @@ -0,0 +1,41 @@ + +.add-panel { + display: flex; + flex-direction: row; + flex-wrap: wrap; + overflow: hidden; + height: 100%; + align-content: flex-start; + justify-content: space-around; + padding: 3px 0; +} + +.add-panel__item { + background: $card-background; + box-shadow: $card-shadow; + + border: $panel-border; + padding: $spacer/3 $spacer; + width: 31%; + height: 60px; + text-align: center; + margin: $gf-form-margin; + cursor: pointer; + + &.active, + &:hover { + background: $card-background-hover; + } +} + +.add-panel__item-name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-size: $font-size-sm; +} + +.add-panel__item-img { + height: calc(100% - 15px); +} + diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss index e6eda0ec4bb..2305f103650 100644 --- a/public/sass/components/_row.scss +++ b/public/sass/components/_row.scss @@ -101,127 +101,3 @@ $dashboard-row-height: 30px; right: 0; } -.panels-wrapper { - flex-grow: 1; - position: relative; -} - -.dash-row-dropview { - position: relative; - background: $panel-bg; - border: $panel-border; - margin: 0 $panel-margin $panel-margin*2 $panel-margin; - padding: $panel-margin*2; - display: flex; -} - -.dash-row-dropview-close { - position: absolute; - right: -12px; - top: -10px; - width: 20px; - height: 20px; -} - -.add-panel-panels-scroll { - width: 100%; - overflow: auto; - -ms-overflow-style: none; - - &::-webkit-scrollbar { - display: none - } -} - -.add-panel-panels { - display: flex; - flex-direction: row; -} - -.add-panel-item { - background: $input-label-bg; - border: $panel-border; - padding: $spacer/3 $spacer; - min-width: 9rem; - max-width: 9rem; - text-align: center; - margin: $gf-form-margin; - cursor: pointer; - - &.active, - &:hover { - box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 1px rgba(82,168,236,5.8) - } -} - -.add-panel-item-name { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - font-size: $font-size-sm; -} - -.add-panel-item-img { - width: 2rem; -} - -$dash-row-menu-animation-speed: 0.20s; - -.dash-row-menu-container { - position: absolute; - top: 0px; - width: 138px; - min-height: 100%; - transform: translate(-131px, 0); - transition: 0.1s ease-out 0.4s; - z-index: 0; - display: flex; - flex-direction: row; - - &:hover { - transform: translate(-$panel-margin, 0); - transition: $dash-row-menu-animation-speed ease-in 0.05s; - z-index: 101; - - .dash-row-menu-grip { - opacity: 0; - transition: $dash-row-menu-animation-speed ease-in 0.05s; - } - } -} - -.dash-row-menu { - list-style: none; - flex-grow: 1; - box-shadow: $menu-dropdown-shadow; - background: $menu-dropdown-bg; - - li a { - display: block; - white-space: nowrap; - color: $dropdownLinkColor; - font-size: $font-size-sm; - padding: $spacer/2 $spacer; - border-left: 2px solid $menu-dropdown-bg; - i { - display: inline-block; - padding-right: $spacer/2; - } - - &:hover { - @include left-brand-border-gradient(); - color: $link-color; - background: $input-label-bg; - } - } -} - -.dash-row-menu-grip { - text-align: center; - font-size: 130%; - color: $text-color-weak; - opacity: 1; - transition: $dash-row-menu-animation-speed ease-out 0.5s; - width: 1rem; -} - diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index aea9cc4e69d..c7a1879ed39 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -169,7 +169,7 @@ li.sidemenu-org-switcher { img { width: 30px; position: relative; - top: 3px; + top: 5px; left: 4px; } } diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index d1c763e2d8d..11a298f43f9 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -14,6 +14,8 @@ div.flot-text { } .panel { + height: 100%; + &--solo { .panel-container { border: none;