Skip to content

Commit

Permalink
Dashboard group controls revision #1
Browse files Browse the repository at this point in the history 
- added styles for the row of disclosure, group name, save & delete controls
- changed the behavior of editing the group:
   - - focus on the group name shows save and delete icons
   - - blur or clicking save/delete hides the icons & blurs the name field
   - - typing in the name field extends the width of the field dynamically!!
- added styles for vertical spacing of the groups from one another
- added a new HTML template for specifically deleting groups
- formatted A LOT of code >> attributes should be indented 3 spaces

Change-Id: I43450db86b6a115192518508341c138cf0488ba9
Reviewed-on: http://review.couchbase.org/106669
Reviewed-by: Pavel Blagodov <[email protected]>
Tested-by: Pavel Blagodov <[email protected]>
  • Loading branch information
@robashcom @pavel-blagodov
robashcom authored and pavel-blagodov committed Mar 25, 2019
1 parent d699f14 commit 2de8a89
Show file tree
Hide file tree
Showing 5 changed files with 200 additions and 98 deletions.
37 changes: 36 additions & 1 deletion priv/public/ui/app/css/cbui-components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2401,9 +2401,9 @@ nav.nav-sidebar-hidden {
}
.row.charts {
flex-wrap: wrap;
margin-left: -.5rem;
justify-content: flex-start;
align-items: stretch;
margin-left: -.5rem;
}
.row.header {
justify-content: flex-start;
Expand Down Expand Up @@ -2453,6 +2453,41 @@ nav.nav-sidebar-hidden {
.chart-adder:before {
content: "\f055";
}
.charts-group {
margin-bottom: 1rem;
}
.charts-group:nth-of-type(2) {
margin-bottom: 3rem;
}
.charts-group-row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.charts-group-row .disclosure {
padding-left: 1rem;
}
.charts-group-row .disclosure:before,
.charts-group-row .disclosed:before {
top: 3px;
}
input[type="text"].charts-group-name {
border-color: #fff;
font-size: .961rem;
font-weight: 600;
margin-right: .5rem;
}
input[type="text"]:focus.charts-group-name {
border-color: #d1d1d1;
}
.charts-group-row .icon {
padding: 0 .5rem;
color: #4287d6;
cursor: pointer;
}
.charts-group-row .icon:hover {
color: #000;
}

/* over-writes of nvd3 css -------------------------------------------------- */
.nvd3 .nv-axis line {
Expand Down
207 changes: 118 additions & 89 deletions priv/public/ui/app/mn_admin/mn_statistics/mn_statistics.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,84 +2,85 @@
<span>
<div class="inline margin-right-half">
<mn-dropdown
ng-click="$event.stopPropagation();"
on-select="statisticsNewCtl.onSelectScenario(scenario);"
model="statisticsNewCtl.statisticsService.scenarios"
class="scenario-dropdown">
ng-click="$event.stopPropagation();"
on-select="statisticsNewCtl.onSelectScenario(scenario);"
model="statisticsNewCtl.statisticsService.scenarios"
class="scenario-dropdown">
<inner-select>
{{statisticsNewCtl.statisticsService.scenarios.selected.name}}
</inner-select>
<inner-body ng-class="{'body-shorter' : statisticsNewCtl.scenarioCtrl.showRestOfMenu}">
<mn-dropdown-item
ng-repeat="scenario in statisticsNewCtl.statisticsService.scenarios track by scenario.id"
mn-item="scenario">
ng-repeat="scenario in statisticsNewCtl.statisticsService.scenarios track by scenario.id"
mn-item="scenario">
<p>{{scenario.name}}</p>
<p ng-if="scenario.desc">{{scenario.desc}}</p>
<div
class="scenario-controls"
ng-click="$event.stopPropagation();"
title="delete/edit scenario">
class="scenario-controls"
ng-click="$event.stopPropagation();"
title="delete/edit scenario">
<span
class="icon fa-ellipsis-v"
ng-click="showScenarioControls = !showScenarioControls"
ng-class="showScenarioControls ? 'fa-angle-right' : 'fa-ellipsis-v'">
class="icon fa-ellipsis-v"
ng-click="showScenarioControls = !showScenarioControls"
ng-class="showScenarioControls ? 'fa-angle-right' : 'fa-ellipsis-v'">
</span>
<span
title="edit chart"
class="icon fa-edit"
ng-click="statisticsNewCtl.scenarioCtrl.editScenario(scenario)"
ng-show="showScenarioControls"></span>
title="edit chart"
class="icon fa-edit"
ng-click="statisticsNewCtl.scenarioCtrl.editScenario(scenario)"
ng-show="showScenarioControls"></span>
<span
title="delete chart"
class="icon fa-trash"
ng-click="statisticsNewCtl.scenarioCtrl.deleteScenario(scenario)"
ng-show="showScenarioControls"></span>
title="delete chart"
class="icon fa-trash"
ng-click="statisticsNewCtl.scenarioCtrl.deleteScenario(scenario)"
ng-show="showScenarioControls"></span>
</div>
</mn-dropdown-item>
</inner-body>
<inner-footer ng-controller="mnScenarioDialogController as scenarioCtrl"
ng-init="statisticsNewCtl.scenarioCtrl = scenarioCtrl">
<inner-footer
ng-controller="mnScenarioDialogController as scenarioCtrl"
ng-init="statisticsNewCtl.scenarioCtrl = scenarioCtrl">
<form
novalidate
ng-submit="scenarioCtrl.onSubmit()"
name="form"
class="forms">
novalidate
ng-submit="scenarioCtrl.onSubmit()"
name="form"
class="forms">
<div class="scenario-add" ng-class="{'scenario-add-ext' : scenarioCtrl.showRestOfMenu}">
<input
type="text"
ng-model="scenarioCtrl.scenario.name"
placeholder="new scenario..."
autocorrect="off"
ng-click="scenarioCtrl.showRestOfMenu = true"
spellcheck="false"
autocapitalize="off"
ng-disabled="!rbac.bucketNames['.stats!read'].length">
type="text"
ng-model="scenarioCtrl.scenario.name"
placeholder="new scenario..."
autocorrect="off"
ng-click="scenarioCtrl.showRestOfMenu = true"
spellcheck="false"
autocapitalize="off"
ng-disabled="!rbac.bucketNames['.stats!read'].length">
<span class="icon fa-plus-square" ng-show="!scenarioCtrl.showRestOfMenu"></span>
</div>

<input
type="text"
ng-model="scenarioCtrl.scenario.desc"
placeholder="add optional description..."
autocorrect="off"
spellcheck="false"
autocapitalize="off"
ng-disabled="!rbac.bucketNames['.stats!read'].length"
ng-show="scenarioCtrl.showRestOfMenu"
class="scenario-desc">
type="text"
ng-model="scenarioCtrl.scenario.desc"
placeholder="add optional description..."
autocorrect="off"
spellcheck="false"
autocapitalize="off"
ng-disabled="!rbac.bucketNames['.stats!read'].length"
ng-show="scenarioCtrl.showRestOfMenu"
class="scenario-desc">
<div class="checkbox-list margin-bottom-half"
ng-show="!scenarioCtrl.isEditingMode && scenarioCtrl.showRestOfMenu">
<input
type="radio"
value="true"
ng-model="scenarioCtrl.copyScenario"
id="for-bucket-type-current">
type="radio"
value="true"
ng-model="scenarioCtrl.copyScenario"
id="for-bucket-type-current">
<label for="for-bucket-type-current">save current charts</label>
<input
type="radio"
value="false"
ng-model="scenarioCtrl.copyScenario"
id="for-bucket-type-blank">
type="radio"
value="false"
ng-model="scenarioCtrl.copyScenario"
id="for-bucket-type-blank">
<label for="for-bucket-type-blank">start blank</label>
</div>
<div class="scenario-save-controls" ng-show="scenarioCtrl.showRestOfMenu">
Expand All @@ -92,72 +93,100 @@
</div>

<a
ng-disabled="!statisticsNewCtl.statisticsService.scenarios.length"
ng-click="statisticsNewCtl.openGroupDialog(statisticsNewCtl.statisticsService.scenarios.selected)"
class="text-small">
ng-disabled="!statisticsNewCtl.statisticsService.scenarios.length"
ng-click="statisticsNewCtl.openGroupDialog(statisticsNewCtl.statisticsService.scenarios.selected)"
class="text-small">
Add Group
</a>
</span>

<select ng-model="statisticsNewCtl.statisticsService.scenarios.selected.zoom"
ng-change="statisticsNewCtl.onSelectZoom(
statisticsNewCtl.statisticsService.scenarios.selected.zoom)">
<select
ng-model="statisticsNewCtl.statisticsService.scenarios.selected.zoom"
ng-change="statisticsNewCtl.onSelectZoom(
statisticsNewCtl.statisticsService.scenarios.selected.zoom)">
<option value="minute">minute</option>
<option value="hour">hour</option>
<option value="day">day</option>
<option value="week">week</option>
<option value="month">month</option>
</select>

<select ng-model="statisticsNewCtl.selectedBucket"
ng-change="statisticsNewCtl.onBucketChange(statisticsNewCtl.selectedBucket)">
<select
ng-model="statisticsNewCtl.selectedBucket"
ng-change="statisticsNewCtl.onBucketChange(statisticsNewCtl.selectedBucket)">
<option ng-repeat="name in rbac.bucketNames['.stats!read']" value="{{name}}">
{{name}}
</option>
</select>
</div>

<div class="width-12">
<div ng-repeat="group in statisticsNewCtl.statisticsService.scenarios.selected.groups track by group.id">
<div
ng-repeat="group in statisticsNewCtl.statisticsService.scenarios.selected.groups track by group.id"

class="charts-group">
<div
ng-click="isDetailsOpened = !isDetailsOpened;"
ng-init="isDetailsOpened = true;"
class="disclosure"
ng-class="{disclosed: isDetailsOpened}">
<form
novalidate
style="display:inline-block;position:relative;"
ng-click="$event.stopPropagation()">
ng-click="scope.isDetailsOpened = !scope.isDetailsOpened;"
ng-init="scope.isDetailsOpened = true;"
class="disclosure"
ng-class="{disclosed: scope.isDetailsOpened}">
<form novalidate
style="display: inline-block;"
ng-mouseleave="statisticsNewCtl.hideGroupControls(scope, group);"
ng-click="$event.stopPropagation();"
ng-submit="scope.initName = group.name;
statisticsNewCtl.saveScenarios();
statisticsNewCtl.hideGroupControls(scope, group);
scope.focusOnSubmit = true;">
<input
ng-model="group.name"
ng-blur="statisticsNewCtl.saveScenarios()"
autocorrect="off"
spellcheck="false"
autocapitalize="off">
ng-model="group.name"
autocorrect="off"
spellcheck="false"
autocapitalize="off"
type="text"
class="charts-group-name"
ng-focus="scope.showGroupControls = true;
scope.initName = group.name;"
ng-blur="statisticsNewCtl.onGroupNameBlur(scope, group)"
ng-attr-size="{{group.name.length + 3}}">
<button
type="submit"
title="save chart"
class="outline icon fa-check"
mn-focus="scope.focusOnSubmit"
ng-show="scope.showGroupControls"
ng-mousedown="scope.onControlClick = true;">
</button>
<span
title="delete chart"
class="icon fa-trash"
ng-click="statisticsNewCtl.deleteGroup(group)"></span>
title="delete group"
class="icon fa-trash"
ng-show="scope.showGroupControls"
ng-mousedown="scope.onControlClick = true;
statisticsNewCtl.deleteGroup(group);
statisticsNewCtl.hideGroupControls(scope, group)">
</span>
</form>
</div>

<div ng-if="isDetailsOpened" class="row charts">
<div ng-if="scope.isDetailsOpened" class="row charts">
<div
ng-repeat="config in group.charts track by config.id"
ng-class="'statistics-' + config.size"
mn-statistics-chart
nodes="statisticsNewCtl.nodes"
class="panel"
rbac="rbac"
config="config"></div>
<div
ng-repeat="config in group.charts track by config.id"
ng-class="'statistics-' + config.size"
mn-statistics-chart
nodes="statisticsNewCtl.nodes"
class="panel"
rbac="rbac"
config="config"></div>
<div class="chart-adder"
ng-click="statisticsNewCtl.openChartBuilderDialog()">
class="chart-adder"
ng-click="statisticsNewCtl.openChartBuilderDialog()">
</div>
</div>
</div>
<div ng-show="statisticsNewCtl.statisticsService.scenarios.selected &&
!statisticsNewCtl.statisticsService.scenarios.selected.groups.length"
class="zero-content">
<div
ng-show="statisticsNewCtl.statisticsService.scenarios.selected &&
!statisticsNewCtl.statisticsService.scenarios.selected.groups.length"
class="zero-content">
No charts to display yet. Use Add Group to first add groups and then charts.<br>
NOTE: All your changes will be auto-saved.
</div>
Expand Down
22 changes: 20 additions & 2 deletions priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,19 @@
])
.controller('mnStatisticsNewController', mnStatisticsNewController);

function mnStatisticsNewController($scope, mnStatisticsNewService, $state, $http, mnPoller, mnBucketsService, $uibModal, $rootScope, mnHelper, $window, mnUserRolesService, permissions) {
function mnStatisticsNewController($scope, mnStatisticsNewService, $state, $http, mnPoller, mnBucketsService, $uibModal, $rootScope, mnHelper, $window, mnUserRolesService, permissions, $timeout, $document) {
var vm = this;

vm.onSelectScenario = onSelectScenario;
vm.onSelectZoom = onSelectZoom;
vm.$document = $document;

vm.statisticsService = mnStatisticsNewService.export;
vm.saveScenarios = mnStatisticsNewService.saveScenarios;

vm.hideGroupControls = hideGroupControls;
vm.onGroupNameBlur = onGroupNameBlur;

if (vm.statisticsService.scenarios.selected) {
$state.go("^.statistics", {
scenario: vm.statisticsService.scenarios.selected.id,
Expand All @@ -48,6 +52,20 @@

activate();

function onGroupNameBlur(scope, group) {
if (!scope.onControlClick) {
scope.showGroupControls = false;
group.name = scope.initName;
}
}

function hideGroupControls(scope, group) {
if (scope.onControlClick) {
scope.onControlClick = false;
onGroupNameBlur(scope, group);
}
}

function openScenarioDialog(scenario) {
$uibModal.open({
templateUrl: 'app/mn_admin/mn_statistics/mn_statistics_scenario.html',
Expand Down Expand Up @@ -77,7 +95,7 @@

function deleteGroup(group) {
$uibModal.open({
templateUrl: 'app/mn_admin/mn_statistics/mn_statistics_scenario_delete.html',
templateUrl: 'app/mn_admin/mn_statistics/mn_statistics_group_delete.html',
}).result.then(function () {
mnStatisticsNewService.deleteGroup(group);
});
Expand Down
17 changes: 17 additions & 0 deletions priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_group_delete.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<div class="dialog-small">
<h2 class="panel-header">
Delete Group
</h2>
<form ng-submit="$close()">
<div class="panel-content">
<div class="row flex-left">
<span class="icon fa-warning fa-2x red-3"></span>
<p>Delete this group and all its charts?</p>
</div>
</div>
<div class="panel-footer">
<a ng-click="$dismiss()">Cancel</a>
<button type="submit" mn-focus="">Delete Group</button>
</div>
</form>
</div>
Loading

0 comments on commit 2de8a89

Please sign in to comment.