From 38f97d5cc9be64e4af0eb2b32941aa563ba18a90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 24 Oct 2017 20:13:34 +0200 Subject: [PATCH] grid: worked on row options modal and row removal --- public/app/core/app_events.ts | 2 - public/app/features/dashboard/all.js | 3 +- .../app/features/dashboard/dashboard_model.ts | 2 - .../dashboard/dashgrid/DashboardRow.tsx | 43 +++++- .../features/dashboard/dashgrid/RowOptions.ts | 45 ++++++ .../dashboard/partials/row_options.html | 29 ++++ .../dashboard/repeat_option/repeat_option.ts | 4 +- .../app/features/dashboard/row/add_panel.html | 26 ---- .../app/features/dashboard/row/add_panel.ts | 114 --------------- .../app/features/dashboard/row/options.html | 34 ----- public/app/features/dashboard/row/options.ts | 34 ----- public/app/features/dashboard/row/row.html | 11 -- .../app/features/dashboard/row/row_model.ts | 134 ------------------ public/app/partials/panelgeneral.html | 2 +- public/sass/base/_icons.scss | 4 +- public/sass/components/_dashboard_grid.scss | 4 - tslint.json | 2 +- 17 files changed, 118 insertions(+), 375 deletions(-) create mode 100644 public/app/features/dashboard/dashgrid/RowOptions.ts create mode 100644 public/app/features/dashboard/partials/row_options.html delete mode 100644 public/app/features/dashboard/row/add_panel.html delete mode 100644 public/app/features/dashboard/row/add_panel.ts delete mode 100644 public/app/features/dashboard/row/options.html delete mode 100644 public/app/features/dashboard/row/options.ts delete mode 100644 public/app/features/dashboard/row/row.html delete mode 100644 public/app/features/dashboard/row/row_model.ts diff --git a/public/app/core/app_events.ts b/public/app/core/app_events.ts index 4507246d2be..b9a77a5f7b7 100644 --- a/public/app/core/app_events.ts +++ b/public/app/core/app_events.ts @@ -1,5 +1,3 @@ -/// - import {Emitter} from './utils/emitter'; var appEvents = new Emitter(); diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js index 75009abc4ca..620a66e09e8 100644 --- a/public/app/features/dashboard/all.js +++ b/public/app/features/dashboard/all.js @@ -24,7 +24,8 @@ define([ './repeat_option/repeat_option', './dashgrid/DashboardGrid', './dashgrid/PanelLoader', - './row/add_panel', + './dashgrid/RowOptions', + './acl/acl', './acl/acl', './folder_picker/picker', './folder_modal/folder' diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts index fb84d1a7cd1..3257fe7bac7 100644 --- a/public/app/features/dashboard/dashboard_model.ts +++ b/public/app/features/dashboard/dashboard_model.ts @@ -7,7 +7,6 @@ import {Emitter} from 'app/core/utils/emitter'; import {contextSrv} from 'app/core/services/context_srv'; import sortByKeys from 'app/core/utils/sort_by_keys'; -import {DashboardRow} from './row/row_model'; import {PanelModel} from './panel_model'; export class DashboardModel { @@ -20,7 +19,6 @@ export class DashboardModel { timezone: any; editable: any; graphTooltip: any; - rows: DashboardRow[]; time: any; timepicker: any; hideControls: any; diff --git a/public/app/features/dashboard/dashgrid/DashboardRow.tsx b/public/app/features/dashboard/dashgrid/DashboardRow.tsx index 6a425d9c176..7192b59e13f 100644 --- a/public/app/features/dashboard/dashgrid/DashboardRow.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardRow.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; -import {PanelModel} from '../panel_model'; -import {PanelContainer} from './PanelContainer'; +import { PanelModel } from '../panel_model'; +import { PanelContainer } from './PanelContainer'; import appEvents from 'app/core/app_events'; export interface DashboardRowProps { @@ -28,20 +28,49 @@ export class DashboardRow extends React.Component { dashboard.toggleRow(this.props.panel); this.setState(prevState => { - return {collapsed: !prevState.collapsed}; + return { collapsed: !prevState.collapsed }; }); } openSettings() { appEvents.emit('show-modal', { - src: 'public/app/features/dashboard/partials/shareModal.html', - scope: shareScope + templateHtml: ``, + modalClass: 'modal--narrow', + model: { + row: this.props.panel, + onUpdated: this.forceUpdate.bind(this), + onDelete: this.onDelete.bind(this), + }, + }); + } + + onDelete() { + let text2 = ''; + + if (this.props.panel.panels.length) { + text2 = 'This will also remove ' + this.props.panel.panels.length + ' panels'; + } + + appEvents.emit('confirm-modal', { + title: 'Delete Row', + text: 'Are you sure you want to remove this row?', + text2: text2, + icon: 'fa-trash', + onConfirm: () => { + const panelContainer = this.props.getPanelContainer(); + const dashboard = panelContainer.getDashboard(); + dashboard.removePanel(this.props.panel); + }, }); } render() { - const classes = classNames({'dashboard-row': true, 'dashboard-row--collapsed': this.state.collapsed}); - const chevronClass = classNames({'fa': true, 'fa-chevron-down': !this.state.collapsed, 'fa-chevron-right': this.state.collapsed}); + const classes = classNames({ 'dashboard-row': true, 'dashboard-row--collapsed': this.state.collapsed }); + const chevronClass = classNames({ + fa: true, + 'fa-chevron-down': !this.state.collapsed, + 'fa-chevron-right': this.state.collapsed, + }); const hiddenPanels = this.props.panel.panels ? this.props.panel.panels.length : 0; return ( diff --git a/public/app/features/dashboard/dashgrid/RowOptions.ts b/public/app/features/dashboard/dashgrid/RowOptions.ts new file mode 100644 index 00000000000..c75ec02adf0 --- /dev/null +++ b/public/app/features/dashboard/dashgrid/RowOptions.ts @@ -0,0 +1,45 @@ +import {coreModule} from 'app/core/core'; + +export class RowOptionsCtrl { + row: any; + source: any; + dismiss: any; + onUpdated: any; + onDelete: any; + + /** @ngInject */ + constructor() { + this.source = this.row; + this.row = this.row.getSaveModel(); + } + + update() { + this.source.title = this.row.title; + this.source.repeat = this.row.repeat; + this.onUpdated(); + this.dismiss(); + } + + delete() { + this.onDelete(); + this.dismiss(); + } +} + +export function rowOptionsDirective() { + return { + restrict: 'E', + templateUrl: 'public/app/features/dashboard/partials/row_options.html', + controller: RowOptionsCtrl, + bindToController: true, + controllerAs: 'ctrl', + scope: { + row: "=", + dismiss: "&", + onUpdated: "&", + onDelete: "&" + }, + }; +} + +coreModule.directive('rowOptions', rowOptionsDirective); diff --git a/public/app/features/dashboard/partials/row_options.html b/public/app/features/dashboard/partials/row_options.html new file mode 100644 index 00000000000..70260e98927 --- /dev/null +++ b/public/app/features/dashboard/partials/row_options.html @@ -0,0 +1,29 @@ +
+
+

+ + Row Options +

+ + + + +
+ +
+
+ Title + +
+
+ Repeat for + +
+ +
+ + + +
+
+
diff --git a/public/app/features/dashboard/repeat_option/repeat_option.ts b/public/app/features/dashboard/repeat_option/repeat_option.ts index cd9a2c3700b..8c3b9664092 100644 --- a/public/app/features/dashboard/repeat_option/repeat_option.ts +++ b/public/app/features/dashboard/repeat_option/repeat_option.ts @@ -2,7 +2,7 @@ import {coreModule} from 'app/core/core'; var template = `
-
`; @@ -13,7 +13,7 @@ function dashRepeatOptionDirective(variableSrv) { restrict: 'E', template: template, scope: { - model: "=", + panel: "=", }, link: function(scope, element) { element.css({display: 'block', width: '100%'}); diff --git a/public/app/features/dashboard/row/add_panel.html b/public/app/features/dashboard/row/add_panel.html deleted file mode 100644 index 2065cd8c2fd..00000000000 --- a/public/app/features/dashboard/row/add_panel.html +++ /dev/null @@ -1,26 +0,0 @@ -
-

- Add Panel -

- - - - -
- -
-
-
-
- -
{{panel.name}}
-
-
-
-
diff --git a/public/app/features/dashboard/row/add_panel.ts b/public/app/features/dashboard/row/add_panel.ts deleted file mode 100644 index dd21e1ceaa0..00000000000 --- a/public/app/features/dashboard/row/add_panel.ts +++ /dev/null @@ -1,114 +0,0 @@ -/// - -import _ from 'lodash'; - -import config from 'app/core/config'; -import {coreModule} from 'app/core/core'; - -export class AddPanelCtrl { - dashboard: any; - allPanels: any; - panelHits: any; - activeIndex: any; - panelSearch: any; - - /** @ngInject */ - constructor(private $rootScope, dashboardSrv) { - this.dashboard = dashboardSrv.getCurrent(); - this.activeIndex = 0; - - this.allPanels = _.chain(config.panels) - .filter({hideFromList: false}) - .map(item => item) - .orderBy('sort') - .value(); - - this.panelHits = this.allPanels; - } - - dismiss() { - this.$rootScope.appEvent('hide-dash-editor'); - } - - keyDown(evt) { - if (evt.keyCode === 27) { - this.dismiss(); - return; - } - - if (evt.keyCode === 40 || evt.keyCode === 39) { - this.moveSelection(1); - } - - if (evt.keyCode === 38 || evt.keyCode === 37) { - this.moveSelection(-1); - } - - if (evt.keyCode === 13) { - var selectedPanel = this.panelHits[this.activeIndex]; - if (selectedPanel) { - this.addPanel(selectedPanel); - } - } - } - - moveSelection(direction) { - var max = this.panelHits.length; - var newIndex = this.activeIndex + direction; - this.activeIndex = ((newIndex %= max) < 0) ? newIndex + max : newIndex; - } - - panelSearchChanged() { - var items = this.allPanels.slice(); - var startsWith = []; - var contains = []; - var searchLower = this.panelSearch.toLowerCase(); - var item; - - while (item = items.shift()) { - var nameLower = item.name.toLowerCase(); - if (nameLower.indexOf(searchLower) === 0) { - startsWith.push(item); - } else if (nameLower.indexOf(searchLower) !== -1) { - contains.push(item); - } - } - - this.panelHits = startsWith.concat(contains); - this.activeIndex = 0; - } - - addPanel(panelPluginInfo) { - let defaultHeight = 6; - let defaultWidth = 6; - - if (panelPluginInfo.id === "singlestat") { - defaultWidth = 3; - defaultHeight = 3; - } - - this.dashboard.addPanel({ - type: panelPluginInfo.id, - x: 0, - y: 0, - width: defaultWidth, - height: defaultHeight, - title: 'New panel', - }); - - this.dismiss(); - } -} - -export function addPanelDirective() { - return { - restrict: 'E', - templateUrl: 'public/app/features/dashboard/row/add_panel.html', - controller: AddPanelCtrl, - bindToController: true, - controllerAs: 'ctrl', - scope: {}, - }; -} - -coreModule.directive('addPanel', addPanelDirective); diff --git a/public/app/features/dashboard/row/options.html b/public/app/features/dashboard/row/options.html deleted file mode 100644 index f54c88796e0..00000000000 --- a/public/app/features/dashboard/row/options.html +++ /dev/null @@ -1,34 +0,0 @@ -
- - - - -
-
-
- Title - -
-
-
- -
- -
-
- - -
-
-
-
- Height - -
-
- Repeat for - -
-
-
-
diff --git a/public/app/features/dashboard/row/options.ts b/public/app/features/dashboard/row/options.ts deleted file mode 100644 index 5de0186ac95..00000000000 --- a/public/app/features/dashboard/row/options.ts +++ /dev/null @@ -1,34 +0,0 @@ -/// - -import {coreModule} from 'app/core/core'; -// import VirtualScroll from 'virtual-scroll'; -// console.log(VirtualScroll); - -export class RowOptionsCtrl { - row: any; - dashboard: any; - rowCtrl: any; - fontSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; - - /** @ngInject */ - constructor() { - this.row = this.rowCtrl.row; - this.dashboard = this.rowCtrl.dashboard; - this.row.titleSize = this.row.titleSize || 'h6'; - } -} - -export function rowOptionsDirective() { - return { - restrict: 'E', - templateUrl: 'public/app/features/dashboard/row/options.html', - controller: RowOptionsCtrl, - bindToController: true, - controllerAs: 'ctrl', - scope: { - rowCtrl: "=", - }, - }; -} - -coreModule.directive('dashRowOptions', rowOptionsDirective); diff --git a/public/app/features/dashboard/row/row.html b/public/app/features/dashboard/row/row.html deleted file mode 100644 index b772860cae1..00000000000 --- a/public/app/features/dashboard/row/row.html +++ /dev/null @@ -1,11 +0,0 @@ -
- - - - - - {{ctrl.row.title | interpolateTemplateVars:this}} - -
- - diff --git a/public/app/features/dashboard/row/row_model.ts b/public/app/features/dashboard/row/row_model.ts deleted file mode 100644 index ecdffb8c8a8..00000000000 --- a/public/app/features/dashboard/row/row_model.ts +++ /dev/null @@ -1,134 +0,0 @@ -/// - -import _ from 'lodash'; -import {Emitter, appEvents, assignModelProperties} from 'app/core/core'; - -export class DashboardRow { - panels: any; - title: any; - showTitle: any; - titleSize: any; - events: Emitter; - span: number; - height: number; - collapse: boolean; - - defaults = { - title: 'Dashboard Row', - panels: [], - showTitle: false, - titleSize: 'h6', - height: 250, - isNew: false, - repeat: null, - repeatRowId: null, - repeatIteration: null, - collapse: false, - }; - - constructor(private model) { - assignModelProperties(this, model, this.defaults); - this.events = new Emitter(); - this.updateRowSpan(); - } - - getSaveModel() { - this.model = {}; - assignModelProperties(this.model, this, this.defaults); - - // remove properties that dont server persisted purpose - delete this.model.isNew; - return this.model; - } - - updateRowSpan() { - this.span = 0; - for (let panel of this.panels) { - this.span += panel.span; - } - } - - panelSpanChanged(alwaysSendEvent?) { - var oldSpan = this.span; - this.updateRowSpan(); - - if (alwaysSendEvent || oldSpan !== this.span) { - this.events.emit('span-changed'); - } - } - - addPanel(panel) { - var rowSpan = this.span; - var panelCount = this.panels.length; - var space = (12 - rowSpan) - panel.span; - - // try to make room of there is no space left - if (space <= 0) { - if (panelCount === 1) { - this.panels[0].span = 6; - panel.span = 6; - } else if (panelCount === 2) { - this.panels[0].span = 4; - this.panels[1].span = 4; - panel.span = 4; - } else if (panelCount === 3) { - this.panels[0].span = 3; - this.panels[1].span = 3; - this.panels[2].span = 3; - panel.span = 3; - } - } - - this.panels.push(panel); - this.events.emit('panel-added', panel); - this.panelSpanChanged(); - } - - removePanel(panel, ask?) { - if (ask !== false) { - var text2, confirmText; - if (panel.alert) { - text2 = "Panel includes an alert rule, removing panel will also remove alert rule"; - confirmText = "YES"; - } - - appEvents.emit('confirm-modal', { - title: 'Remove Panel', - text: 'Are you sure you want to remove this panel?', - text2: text2, - icon: 'fa-trash', - confirmText: confirmText, - yesText: 'Remove', - onConfirm: () => { - this.removePanel(panel, false); - } - }); - return; - } - - var index = _.indexOf(this.panels, panel); - this.panels.splice(index, 1); - this.events.emit('panel-removed', panel); - this.panelSpanChanged(); - } - - movePanel(fromIndex, toIndex) { - this.panels.splice(toIndex, 0, this.panels.splice(fromIndex, 1)[0]); - } - - destroy() { - this.events.removeAllListeners(); - } - - copyPropertiesFromRowSource(source) { - this.height = source.height; - this.title = source.title; - this.showTitle = source.showTitle; - this.titleSize = source.titleSize; - } - - toggleCollapse() { - this.collapse = !this.collapse; - } -} - diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index 5f17730f228..2054aea1e7f 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -16,7 +16,7 @@
Repeat
For each value of - +
Min width diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index 414ca44c1a9..e3361e9e9e5 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -1,8 +1,8 @@ .gicon { line-height: 1; display: inline-block; - width: 1.2057142857em; - height: 1.2057142857em; + width: 1.1057142857em; + height: 1.1057142857em; text-align: center; background-repeat: no-repeat; background-position: center; diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index 4c1337ec6f5..a2f1c9d20e7 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/public/sass/components/_dashboard_grid.scss @@ -21,10 +21,6 @@ } } -.react-grid-item { - overflow: hidden; -} - .theme-dark { .react-grid-item > .react-resizable-handle { background-image: url('../img/resize-handle-white.svg'); diff --git a/tslint.json b/tslint.json index f1b414c916e..6135e8300cf 100644 --- a/tslint.json +++ b/tslint.json @@ -14,7 +14,7 @@ "forin": false, "indent": [true, "spaces", 2], "label-position": true, - "max-line-length": [true, 140], + "max-line-length": [true, 150], "member-access": false, "no-arg": true, "no-bitwise": true,