mirror of
https://github.com/grafana/grafana.git
synced 2025-02-09 23:16:16 -06:00
Added more buttons in dashboard nav
This commit is contained in:
Torkel Ödegaard
parent
2cb1733c59
commit
09efa24f28
@ -12,7 +12,7 @@ import { updateLocation } from 'app/core/actions';
|
||||
import { DashboardModel } from '../../state/DashboardModel';
|
||||
|
||||
export interface Props {
|
||||
dashboard: DashboardModel | null;
|
||||
dashboard: DashboardModel;
|
||||
editview: string;
|
||||
isEditing: boolean;
|
||||
isFullscreen: boolean;
|
||||
@ -25,7 +25,20 @@ export class DashNav extends PureComponent<Props> {
|
||||
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 = () => {
|
||||
this.props.updateLocation({
|
||||
@ -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 = () => {
|
||||
this.props.updateLocation({
|
||||
query: { editview: 'settings' },
|
||||
@ -51,30 +74,25 @@ export class DashNav extends PureComponent<Props> {
|
||||
});
|
||||
};
|
||||
|
||||
renderLoadingState() {
|
||||
return (
|
||||
<div className="navbar">
|
||||
<div>
|
||||
<a className="navbar-page-btn" onClick={this.onOpenSearch}>
|
||||
<i className="gicon gicon-dashboard" />
|
||||
Loading...
|
||||
<i className="fa fa-caret-down" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
onOpenShare = () => {
|
||||
const $rootScope = this.props.$injector.get('$rootScope');
|
||||
const modalScope = $rootScope.$new();
|
||||
modalScope.tabIndex = 0;
|
||||
modalScope.dashboard = this.props.dashboard;
|
||||
|
||||
appEvents.emit('show-modal', {
|
||||
src: 'public/app/features/dashboard/components/ShareModal/template.html',
|
||||
scope: modalScope,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dashboard, isFullscreen, editview } = this.props;
|
||||
|
||||
if (!dashboard) {
|
||||
return this.renderLoadingState();
|
||||
}
|
||||
const { canEdit, canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta;
|
||||
const { snapshot } = dashboard;
|
||||
|
||||
const haveFolder = dashboard.meta.folderId > 0;
|
||||
const { canEdit, canStar, canSave, folderTitle, showSettings, isStarred } = dashboard.meta;
|
||||
const snapshotUrl = snapshot && snapshot.originalUrl;
|
||||
|
||||
return (
|
||||
<div className="navbar">
|
||||
@ -124,34 +142,50 @@ export class DashNav extends PureComponent<Props> {
|
||||
</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>
|
||||
//
|
||||
}
|
||||
|
||||
{(isFullscreen || editview) && (
|
||||
<div className="navbar-buttons navbar-buttons--close">
|
||||
<button
|
||||
|
||||
@ -166,11 +166,19 @@ export class DashboardPage extends PureComponent<Props, State> {
|
||||
const { dashboard, editview, $injector } = this.props;
|
||||
const { isSettingsOpening, isEditing, isFullscreen } = this.state;
|
||||
|
||||
if (!dashboard) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const classes = classNames({
|
||||
'dashboard-page--settings-opening': isSettingsOpening,
|
||||
'dashboard-page--settings-open': !isSettingsOpening && editview,
|
||||
});
|
||||
|
||||
const gridWrapperClasses = classNames({
|
||||
'dashboard-container': true,
|
||||
'dashboard-container--has-submenu': dashboard.meta.submenuEnabled,
|
||||
});
|
||||
return (
|
||||
<div className={classes}>
|
||||
<DashNav
|
||||
@ -180,8 +188,13 @@ export class DashboardPage extends PureComponent<Props, State> {
|
||||
editview={editview}
|
||||
$injector={$injector}
|
||||
/>
|
||||
{!dashboard && this.renderLoadingState()}
|
||||
{dashboard && this.renderDashboard()}
|
||||
<div className="scroll-canvas scroll-canvas--dashboard">
|
||||
{dashboard && editview && <DashboardSettings dashboard={dashboard} />}
|
||||
|
||||
<div className={gridWrapperClasses}>
|
||||
<DashboardGrid dashboard={dashboard} isEditing={isEditing} isFullscreen={isFullscreen} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -88,7 +88,7 @@ export function initDashboard({ $injector, $scope, urlUid, urlSlug, urlType }: I
|
||||
try {
|
||||
await $injector.get('variableSrv').init(dashboard);
|
||||
} catch (err) {
|
||||
dispatch(notifyApp(createErrorNotification('Templating init failed', err.toString())));
|
||||
dispatch(notifyApp(createErrorNotification('Templating init failed')));
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user