Skip to content

Commit

Permalink
View Edit Mode Iteration #4
Browse files Browse the repository at this point in the history
  • Loading branch information
@stacey-gammon
stacey-gammon committed Feb 17, 2017
2 parents 2fb2b4c + b2b7eea commit d74b468
Show file tree
Hide file tree
Showing 26 changed files with 967 additions and 199 deletions.
3 changes: 2 additions & 1 deletion src/core_plugins/kibana/public/dashboard/__tests__/dashboard_state.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import ngMock from 'ng_mock';
import expect from 'expect.js';

import { DashboardState } from '../dashboard_state';
import { DashboardViewMode } from '../dashboard_view_mode';

describe('DashboardState', function () {
let AppState;
Expand All @@ -12,7 +13,7 @@ describe('DashboardState', function () {
let quickTimeRanges;

function initDashboardState() {
dashboardState = new DashboardState(savedDashboard, timefilter, true, quickTimeRanges, AppState);
dashboardState = new DashboardState(savedDashboard, timefilter, true, DashboardViewMode.VIEW, quickTimeRanges, AppState);
}

beforeEach(ngMock.module('kibana'));
Expand Down
9 changes: 9 additions & 0 deletions src/core_plugins/kibana/public/dashboard/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
ng-model="model.query"
placeholder="Filter..."
aria-label="Filter input"
data-test-subj="dashboardQuery"
type="text"
class="kuiLocalSearchInput"
ng-class="{'kuiLocalSearchInput-isInvalid': queryInput.$invalid}"
Expand All @@ -41,6 +42,7 @@
type="submit"
aria-label="Filter Dashboards"
class="kuiLocalSearchButton"
data-test-subj="dashboardQueryFilterButton"
ng-disabled="queryInput.$invalid"
>
<span class="fa fa-search" aria-hidden="true"></span>
Expand All @@ -60,9 +62,15 @@ <h2>This dashboard is empty. Let's fill it up!</h2>
<p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="kbnTopNav.open('add'); toggleAddVisualization = !toggleAddVisualization" aria-label="Add visualization">Add</a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't setup a visualization yet visit <a href="#/visualize" title="Visualize">"Visualize"</a> to create your first visualization.</p>
</div>

<div ng-show="showViewHelpText()" class="text-center start-screen">
<h2>This dashboard is empty. Let's fill it up!</h2>
<p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="kbnTopNav.open('edit');" aria-label="Edit">Edit</a> button in the menu bar above to start working on your new dashboard.
</div>

<dashboard-grid
ng-show="!hasExpandedPanel()"
on-panel-removed="onPanelRemoved"
dashboard-view-mode="dashboardViewMode"
panels="panels"
get-vis-click-handler="getFilterBarClickHandler"
get-vis-brush-handler="getBrushEvent"
Expand All @@ -77,6 +85,7 @@ <h2>This dashboard is empty. Let's fill it up!</h2>
panel="expandedPanel"
is-full-screen-mode="!chrome.getVisible()"
is-expanded="true"
dashboard-view-mode="dashboardViewMode"
get-vis-click-handler="getFilterBarClickHandler"
get-vis-brush-handler="getBrushEvent"
save-state="saveState"
Expand Down
117 changes: 93 additions & 24 deletions src/core_plugins/kibana/public/dashboard/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import chrome from 'ui/chrome';
import 'plugins/kibana/dashboard/grid';
import 'plugins/kibana/dashboard/panel/panel';

import { DashboardStrings } from './dashboard_strings';
import { DashboardViewMode } from './dashboard_view_mode';
import dashboardTemplate from 'plugins/kibana/dashboard/dashboard.html';
import FilterBarQueryFilterProvider from 'ui/filter_bar/query_filter';
import DocTitleProvider from 'ui/doc_title';
Expand All @@ -15,7 +17,9 @@ import { DashboardConstants } from './dashboard_constants';
import { VisualizeConstants } from 'plugins/kibana/visualize/visualize_constants';
import UtilsBrushEventProvider from 'ui/utils/brush_event';
import FilterBarFilterBarClickHandlerProvider from 'ui/filter_bar/filter_bar_click_handler';
import { getPersistedStateId } from 'plugins/kibana/dashboard/panel/panel_state';
import { DashboardState } from './dashboard_state';
import { TopNavIds } from './top_nav/top_nav_ids';

const app = uiModules.get('app/dashboard', [
'elasticsearch',
Expand Down Expand Up @@ -50,7 +54,7 @@ uiRoutes
}
});

app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter, quickRanges, kbnUrl, Private) {
app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter, quickRanges, kbnUrl, confirmModal, Private) {
const brushEvent = Private(UtilsBrushEventProvider);
const filterBarClickHandler = Private(FilterBarFilterBarClickHandlerProvider);

Expand All @@ -67,10 +71,18 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
docTitle.change(dash.title);
}

// Brand new dashboards are defaulted to edit mode, existing ones default to view mode, except when trumped
// by a url param.
const defaultViewMode =
$route.current.params[DashboardConstants.VIEW_MODE_PARAM] ||
(dash.id ? DashboardViewMode.VIEW : DashboardViewMode.EDIT);
kbnUrl.removeParam(DashboardConstants.VIEW_MODE_PARAM);

const dashboardState = new DashboardState(
dash,
timefilter,
!getAppState.previouslyStored(),
defaultViewMode,
quickRanges,
AppState);

Expand All @@ -83,20 +95,22 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,

// Following the "best practice" of always have a '.' in your ng-models –
// https://github.com/angular/angular.js/wiki/Understanding-Scopes
$scope.model = { query: dashboardState.getQuery() };
$scope.model = {
query: dashboardState.getQuery(),
darkTheme: dashboardState.getDarkTheme(),
timeRestore: dashboardState.getTimeRestore(),
title: dashboardState.getTitle()
};

$scope.panels = dashboardState.getPanels();
$scope.topNavMenu = getTopNavConfig(kbnUrl);
$scope.refresh = _.bindKey(courier, 'fetch');
$scope.timefilter = timefilter;
$scope.expandedPanel = null;

$scope.getBrushEvent = () => brushEvent(dashboardState.getAppState());
$scope.getFilterBarClickHandler = () => filterBarClickHandler(dashboardState.getAppState());
$scope.expandedPanel = null;

$scope.hasExpandedPanel = () => $scope.expandedPanel !== null;
$scope.getDashTitle = () => {
return dashboardState.dashboard.lastSavedTitle || `${dashboardState.dashboard.title} (unsaved)`;
};
$scope.getDashTitle = () => DashboardStrings.getDashboardTitle(dashboardState);
$scope.newDashboard = () => { kbnUrl.change(DashboardConstants.CREATE_NEW_DASHBOARD_URL, {}); };
$scope.saveState = () => dashboardState.saveState();

Expand Down Expand Up @@ -129,7 +143,11 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
};

$scope.showEditHelpText = () => {
return !dashboardState.getPanels().length;
return !dashboardState.getPanels().length && dashboardState.getViewMode() === DashboardViewMode.EDIT;
};

$scope.showViewHelpText = () => {
return !dashboardState.getPanels().length && dashboardState.getViewMode() === DashboardViewMode.VIEW;
};

/**
Expand All @@ -145,14 +163,26 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,

$scope.onPanelRemoved = (panelIndex) => dashboardState.removePanel(panelIndex);

$scope.$watch('model.query', () => dashboardState.setQuery($scope.model.query));
$scope.$watch('model.darkTheme', () => {
dashboardState.setDarkTheme($scope.model.darkTheme);
updateTheme();
});
$scope.$watch('model.title', () => dashboardState.setTitle($scope.model.title));
$scope.$watch('model.timeRestore', () => dashboardState.setTimeRestore($scope.model.timeRestore));

$scope.$listen(timefilter, 'fetch', $scope.refresh);

$scope.save = function () {
// Make sure to save the latest query, even if 'enter' hasn't been hit.
dashboardState.updateFilters(queryFilter);
return dashboardState.saveDashboard(angular.toJson).then(function (id) {
$scope.kbnTopNav.close('save');
if (id) {
notify.info(`Saved Dashboard as "${dash.title}"`);
if (dash.id !== $routeParams.id) {
kbnUrl.change(
`${DashboardConstants.EXISTING_DASHBOARD_URL}`,
`${DashboardConstants.EXISTING_DASHBOARD_URL}?${DashboardConstants.VIEW_MODE_PARAM}=${DashboardViewMode.EDIT}`,
{ id: dash.id });
} else {
docTitle.change(dash.lastSavedTitle);
Expand All @@ -161,15 +191,6 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
}).catch(notify.fatal);
};

$scope.$watchCollection(() => dashboardState.getOptions(), () => dashboardState.saveState());
$scope.$watch(() => dashboardState.getOptions().darkTheme, updateTheme);

$scope.$watch('model.query', function () {
dashboardState.setQuery($scope.model.query);
});

$scope.$listen(timefilter, 'fetch', $scope.refresh);

// update root source when filters update
$scope.$listen(queryFilter, 'update', function () {
dashboardState.updateFilters(queryFilter);
Expand All @@ -186,8 +207,7 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
});

function updateTheme() {
const useDarkTheme = dashboardState.getOptions().darkTheme;
useDarkTheme ? setDarkTheme() : setLightTheme();
dashboardState.getDarkTheme() ? setDarkTheme() : setLightTheme();
}

function setDarkTheme() {
Expand All @@ -200,6 +220,57 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
chrome.addApplicationClass('theme-light');
}

// Defined up here, but filled in below, to avoid 'Defined before use' warning due to circular reference:
// changeViewMode uses navActions, and navActions uses changeViewMode.
const navActions = {};

const changeViewMode = (newMode) => {
const isPageRefresh = newMode === dashboardState.getViewMode();
const leavingEditMode = !isPageRefresh && newMode === DashboardViewMode.VIEW;

function doModeSwitch() {
$scope.dashboardViewMode = newMode;
$scope.topNavMenu = getTopNavConfig(newMode, navActions);
dashboardState.switchViewMode(newMode);
}

function onCancel() {
dashboardState.reloadLastSavedFilters();
const refreshUrl = dashboardState.getReloadDashboardUrl();
dashboardState.resetState();
kbnUrl.change(refreshUrl.url, refreshUrl.options, new AppState());
doModeSwitch();
}

if (leavingEditMode && dashboardState.getIsDirty()) {
confirmModal(
DashboardStrings.getUnsavedChangesWarningMessage(dashboardState),
{
onConfirm: () => $scope.save().then(doModeSwitch),
onCancel,
onClose: _.noop,
confirmButtonText: 'Save dashboard',
cancelButtonText: 'Lose changes',
title: `Save dashboard ${dashboardState.getTitle()}`,
showClose: true
}
);
} else {
// No special handling, just make the switch.
doModeSwitch();
}
};

navActions[TopNavIds.SAVE] = () => $scope.save();
navActions[TopNavIds.CLONE] = () => {
dashboardState.setTitle(dashboardState.getTitle() + ' (Copy)');
$scope.save();
};
navActions[TopNavIds.EXIT_EDIT_MODE] = () => changeViewMode(DashboardViewMode.VIEW);
navActions[TopNavIds.ENTER_EDIT_MODE] = () => changeViewMode(DashboardViewMode.EDIT);

changeViewMode(dashboardState.getViewMode());

$scope.$on('ready:vis', function () {
if (pendingVisCount > 0) pendingVisCount--;
if (pendingVisCount === 0) {
Expand All @@ -219,10 +290,8 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
`${VisualizeConstants.WIZARD_STEP_1_PAGE_PATH}?${DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM}`);
};

// Setup configurable values for config directive, after objects are initialized

$scope.opts = {
dashboard: dash,
ui: dashboardState.getOptions(),
save: $scope.save,
addVis: $scope.addVis,
addNewVis,
Expand Down
3 changes: 2 additions & 1 deletion src/core_plugins/kibana/public/dashboard/dashboard_constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@ export const DashboardConstants = {
NEW_VISUALIZATION_ID_PARAM: 'addVisualization',
LANDING_PAGE_PATH: '/dashboard',
CREATE_NEW_DASHBOARD_URL: '/dashboard/create',
EXISTING_DASHBOARD_URL: '/dashboard/{{id}}'
EXISTING_DASHBOARD_URL: '/dashboard/{{id}}',
VIEW_MODE_PARAM: 'viewMode'
};
Loading

0 comments on commit d74b468

Please sign in to comment.