Skip to content

N
nexpie-grafana-theme
Commit 09efa24f by Torkel Ödegaard
Options

Added more buttons in dashboard nav

parent 2cb1733c
Showing with 95 additions and 48 deletions
public/app/features/dashboard/components/DashNav/DashNav.tsx
...@@ -12,7 +12,7 @@ import { updateLocation } from 'app/core/actions'; ...@@ -12,7 +12,7 @@ import { updateLocation } from 'app/core/actions';
import { DashboardModel } from '../../state/DashboardModel'; import { DashboardModel } from '../../state/DashboardModel';
export interface Props { export interface Props {
dashboard: DashboardModel | null; dashboard: DashboardModel;
editview: string; editview: string;
isEditing: boolean; isEditing: boolean;
isFullscreen: boolean; isFullscreen: boolean;
...@@ -25,7 +25,20 @@ export class DashNav extends PureComponent<Props> { ...@@ -25,7 +25,20 @@ export class DashNav extends PureComponent<Props> {
appEvents.emit('show-dash-search'); appEvents.emit('show-dash-search');
}; };
onAddPanel = () => {}; onAddPanel = () => {
const { dashboard } = this.props;
// Return if the "Add panel" exists already
if (dashboard.panels.length > 0 && dashboard.panels[0].type === 'add-panel') {
return;
}
dashboard.addPanel({
type: 'add-panel',
gridPos: { x: 0, y: 0, w: 12, h: 8 },
title: 'Panel Title',
});
};
onClose = () => { onClose = () => {
this.props.updateLocation({ this.props.updateLocation({
...@@ -34,6 +47,16 @@ export class DashNav extends PureComponent<Props> { ...@@ -34,6 +47,16 @@ export class DashNav extends PureComponent<Props> {
}); });
}; };
onToggleTVMode = () => {
appEvents.emit('toggle-kiosk-mode');
};
onSave = () => {
const { $injector } = this.props;
const dashboardSrv = $injector.get('dashboardSrv');
dashboardSrv.saveDashboard();
};
onOpenSettings = () => { onOpenSettings = () => {
this.props.updateLocation({ this.props.updateLocation({
query: { editview: 'settings' }, query: { editview: 'settings' },
...@@ -51,30 +74,25 @@ export class DashNav extends PureComponent<Props> { ...@@ -51,30 +74,25 @@ export class DashNav extends PureComponent<Props> {
}); });
}; };
renderLoadingState() { onOpenShare = () => {
return ( const $rootScope = this.props.$injector.get('$rootScope');
<div className="navbar"> const modalScope = $rootScope.$new();
<div> modalScope.tabIndex = 0;
<a className="navbar-page-btn" onClick={this.onOpenSearch}> modalScope.dashboard = this.props.dashboard;
<i className="gicon gicon-dashboard" />
Loading...
<i className="fa fa-caret-down" />
</a>
</div>
</div>
);
}
appEvents.emit('show-modal', {
src: 'public/app/features/dashboard/components/ShareModal/template.html',
scope: modalScope,
});
};
render() { render() {
const { dashboard, isFullscreen, editview } = this.props; const { dashboard, isFullscreen, editview } = this.props;
const { canEdit, canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta;
if (!dashboard) { const { snapshot } = dashboard;
return this.renderLoadingState();
}
const haveFolder = dashboard.meta.folderId > 0; const haveFolder = dashboard.meta.folderId > 0;
const { canEdit, canStar, canSave, folderTitle, showSettings, isStarred } = dashboard.meta; const snapshotUrl = snapshot && snapshot.originalUrl;
return ( return (
<div className="navbar"> <div className="navbar">
...@@ -124,34 +142,50 @@ export class DashNav extends PureComponent<Props> { ...@@ -124,34 +142,50 @@ export class DashNav extends PureComponent<Props> {
</button> </button>
)} )}
{canShare && (
<button
className="btn navbar-button navbar-button--share"
onClick={this.onOpenShare}
title="Share Dashboard"
>
<i className="fa fa-share-square-o" />
</button>
)}
{canSave && (
<button
className="btn navbar-button navbar-button--save"
onClick={this.onSave}
title="Save dashboard <br> CTRL+S"
>
<i className="fa fa-save" />
</button>
)}
{snapshotUrl && (
<a
className="btn navbar-button navbar-button--snapshot-origin"
href={snapshotUrl}
title="Open original dashboard"
>
<i className="fa fa-link" />
</a>
)}
<div className="navbar-buttons navbar-buttons--tv">
<button
className="btn navbar-button navbar-button--tv"
onClick={this.onToggleTVMode}
title="Cycle view mode"
>
<i className="fa fa-desktop" />
</button>
</div>
{ {
//
// <button class="btn navbar-button navbar-button--share" ng-show="::ctrl.dashboard.meta.canShare" ng-click="ctrl.shareDashboard(0)" bs-tooltip="'Share dashboard'" data-placement="bottom">
// <i class="fa fa-share-square-o"></i></a>
// </button>
//
// <button class="btn navbar-button navbar-button--save" ng-show="ctrl.dashboard.meta.canSave" ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom">
// <i class="fa fa-save"></i>
// </button>
//
// <a class="btn navbar-button navbar-button--snapshot-origin" ng-if="::ctrl.dashboard.snapshot.originalUrl" href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom">
// <i class="fa fa-link"></i>
// </a>
//
// <button class="btn navbar-button navbar-button--settings" ng-click="ctrl.toggleSettings()" bs-tooltip="'Dashboard Settings'" data-placement="bottom" ng-show="ctrl.dashboard.meta.showSettings">
// <i class="fa fa-cog"></i>
// </button>
// </div>
//
// <div class="navbar-buttons navbar-buttons--tv">
// <button class="btn navbar-button navbar-button--tv" ng-click="ctrl.toggleViewMode()" bs-tooltip="'Cycle view mode'" data-placement="bottom">
// <i class="fa fa-desktop"></i>
// </button>
// </div>
//
// <gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker> // <gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker>
//
} }
{(isFullscreen || editview) && ( {(isFullscreen || editview) && (
<div className="navbar-buttons navbar-buttons--close"> <div className="navbar-buttons navbar-buttons--close">
<button <button
......
public/app/features/dashboard/containers/DashboardPage.tsx
...@@ -166,11 +166,19 @@ export class DashboardPage extends PureComponent<Props, State> { ...@@ -166,11 +166,19 @@ export class DashboardPage extends PureComponent<Props, State> {
const { dashboard, editview, $injector } = this.props; const { dashboard, editview, $injector } = this.props;
const { isSettingsOpening, isEditing, isFullscreen } = this.state; const { isSettingsOpening, isEditing, isFullscreen } = this.state;
if (!dashboard) {
return null;
}
const classes = classNames({ const classes = classNames({
'dashboard-page--settings-opening': isSettingsOpening, 'dashboard-page--settings-opening': isSettingsOpening,
'dashboard-page--settings-open': !isSettingsOpening && editview, 'dashboard-page--settings-open': !isSettingsOpening && editview,
}); });
const gridWrapperClasses = classNames({
'dashboard-container': true,
'dashboard-container--has-submenu': dashboard.meta.submenuEnabled,
});
return ( return (
<div className={classes}> <div className={classes}>
<DashNav <DashNav
...@@ -180,8 +188,13 @@ export class DashboardPage extends PureComponent<Props, State> { ...@@ -180,8 +188,13 @@ export class DashboardPage extends PureComponent<Props, State> {
editview={editview} editview={editview}
$injector={$injector} $injector={$injector}
/> />
{!dashboard && this.renderLoadingState()} <div className="scroll-canvas scroll-canvas--dashboard">
{dashboard && this.renderDashboard()} {dashboard && editview && <DashboardSettings dashboard={dashboard} />}
<div className={gridWrapperClasses}>
<DashboardGrid dashboard={dashboard} isEditing={isEditing} isFullscreen={isFullscreen} />
</div>
</div>
</div> </div>
); );
} }
......
public/app/features/dashboard/state/initDashboard.ts
...@@ -88,7 +88,7 @@ export function initDashboard({ $injector, $scope, urlUid, urlSlug, urlType }: I ...@@ -88,7 +88,7 @@ export function initDashboard({ $injector, $scope, urlUid, urlSlug, urlType }: I
try { try {
await $injector.get('variableSrv').init(dashboard); await $injector.get('variableSrv').init(dashboard);
} catch (err) { } catch (err) {
dispatch(notifyApp(createErrorNotification('Templating init failed', err.toString()))); dispatch(notifyApp(createErrorNotification('Templating init failed')));
console.log(err); console.log(err);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment