Skip to content

N
nexpie-grafana-theme
Commit 70974c01 by Torkel Ödegaard
Options

Added playlist controls to new react DashNav

parent d978a66e
Showing with 55 additions and 30 deletions
pkg/api/dtos/playlist.go
...@@ -5,6 +5,7 @@ type PlaylistDashboard struct { ...@@ -5,6 +5,7 @@ type PlaylistDashboard struct {
Slug string `json:"slug"` Slug string `json:"slug"`
Title string `json:"title"` Title string `json:"title"`
Uri string `json:"uri"` Uri string `json:"uri"`
Url string `json:"url"`
Order int `json:"order"` Order int `json:"order"`
} }
......
pkg/api/playlist_play.go
...@@ -26,6 +26,7 @@ func populateDashboardsByID(dashboardByIDs []int64, dashboardIDOrder map[int64]i ...@@ -26,6 +26,7 @@ func populateDashboardsByID(dashboardByIDs []int64, dashboardIDOrder map[int64]i
Slug: item.Slug, Slug: item.Slug,
Title: item.Title, Title: item.Title,
Uri: "db/" + item.Slug, Uri: "db/" + item.Slug,
Url: m.GetDashboardUrl(item.Uid, item.Slug),
Order: dashboardIDOrder[item.Id], Order: dashboardIDOrder[item.Id],
}) })
} }
......
public/app/features/dashboard/components/DashNav/DashNav.tsx
...@@ -28,6 +28,13 @@ export interface Props { ...@@ -28,6 +28,13 @@ export interface Props {
export class DashNav extends PureComponent<Props> { export class DashNav extends PureComponent<Props> {
timePickerEl: HTMLElement; timePickerEl: HTMLElement;
timepickerCmp: AngularComponent; timepickerCmp: AngularComponent;
playlistSrv: PlaylistSrv;
constructor(props: Props) {
super(props);
this.playlistSrv = this.props.$injector.get('playlistSrv');
}
componentDidMount() { componentDidMount() {
const loader = getAngularLoader(); const loader = getAngularLoader();
...@@ -95,7 +102,7 @@ export class DashNav extends PureComponent<Props> { ...@@ -95,7 +102,7 @@ export class DashNav extends PureComponent<Props> {
}; };
onStarDashboard = () => { onStarDashboard = () => {
const { $injector, dashboard } = this.props; const { dashboard, $injector } = this.props;
const dashboardSrv = $injector.get('dashboardSrv'); const dashboardSrv = $injector.get('dashboardSrv');
dashboardSrv.starDashboard(dashboard.id, dashboard.meta.isStarred).then(newState => { dashboardSrv.starDashboard(dashboard.id, dashboard.meta.isStarred).then(newState => {
...@@ -104,6 +111,19 @@ export class DashNav extends PureComponent<Props> { ...@@ -104,6 +111,19 @@ export class DashNav extends PureComponent<Props> {
}); });
}; };
onPlaylistPrev = () => {
this.playlistSrv.prev();
};
onPlaylistNext = () => {
this.playlistSrv.next();
};
onPlaylistStop = () => {
this.playlistSrv.stop();
this.forceUpdate();
};
onOpenShare = () => { onOpenShare = () => {
const $rootScope = this.props.$injector.get('$rootScope'); const $rootScope = this.props.$injector.get('$rootScope');
const modalScope = $rootScope.$new(); const modalScope = $rootScope.$new();
...@@ -117,13 +137,12 @@ export class DashNav extends PureComponent<Props> { ...@@ -117,13 +137,12 @@ export class DashNav extends PureComponent<Props> {
}; };
render() { render() {
const { dashboard, isFullscreen, editview, $injector } = this.props; const { dashboard, isFullscreen, editview } = this.props;
const { canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta; const { canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta;
const { snapshot } = dashboard; const { snapshot } = dashboard;
const haveFolder = dashboard.meta.folderId > 0; const haveFolder = dashboard.meta.folderId > 0;
const snapshotUrl = snapshot && snapshot.originalUrl; const snapshotUrl = snapshot && snapshot.originalUrl;
const playlistSrv: PlaylistSrv = $injector.get('playlistSrv');
return ( return (
<div className="navbar"> <div className="navbar">
...@@ -138,25 +157,25 @@ export class DashNav extends PureComponent<Props> { ...@@ -138,25 +157,25 @@ export class DashNav extends PureComponent<Props> {
<div className="navbar__spacer" /> <div className="navbar__spacer" />
{playlistSrv.isPlaying && ( {this.playlistSrv.isPlaying && (
<div className="navbar-buttons navbar-buttons--playlist"> <div className="navbar-buttons navbar-buttons--playlist">
<DashNavButton <DashNavButton
tooltip="Jump to previous dashboard" tooltip="Go to previous dashboard"
classSuffix="tight" classSuffix="tight"
icon="fa fa-step-backward" icon="fa fa-step-backward"
onClick={() => playlistSrv.prev()} onClick={this.onPlaylistPrev}
/> />
<DashNavButton <DashNavButton
tooltip="Stop playlist" tooltip="Stop playlist"
classSuffix="tight" classSuffix="tight"
icon="fa fa-stop" icon="fa fa-stop"
onClick={() => playlistSrv.stop()} onClick={this.onPlaylistStop}
/> />
<DashNavButton <DashNavButton
tooltip="Jump forward" tooltip="Go to next dashboard"
classSuffix="tight" classSuffix="tight"
icon="fa fa-forward" icon="fa fa-forward"
onClick={() => playlistSrv.next()} onClick={this.onPlaylistNext}
/> />
</div> </div>
)} )}
......
public/app/features/dashboard/containers/DashboardPage.tsx
...@@ -100,12 +100,6 @@ export class DashboardPage extends PureComponent<Props, State> { ...@@ -100,12 +100,6 @@ export class DashboardPage extends PureComponent<Props, State> {
}, 10); }, 10);
} }
// // when dashboard has loaded subscribe to somme events
// if (prevProps.dashboard === null) {
// // set initial fullscreen class state
// this.setPanelFullscreenClass();
// }
// Sync url state with model // Sync url state with model
if (urlFullscreen !== dashboard.meta.fullscreen || urlEdit !== dashboard.meta.isEditing) { if (urlFullscreen !== dashboard.meta.fullscreen || urlEdit !== dashboard.meta.isEditing) {
// entering fullscreen/edit mode // entering fullscreen/edit mode
......
public/app/features/playlist/playlist_srv.ts
import coreModule from '../../core/core_module'; // Libraries
import kbn from 'app/core/utils/kbn';
import appEvents from 'app/core/app_events';
import _ from 'lodash'; import _ from 'lodash';
// Utils
import { toUrlParams } from 'app/core/utils/url'; import { toUrlParams } from 'app/core/utils/url';
import coreModule from '../../core/core_module';
import appEvents from 'app/core/app_events';
import locationUtil from 'app/core/utils/location_util';
import kbn from 'app/core/utils/kbn';
export class PlaylistSrv { export class PlaylistSrv {
private cancelPromise: any; private cancelPromise: any;
private dashboards: Array<{ uri: string }>; private dashboards: Array<{ url: string }>;
private index: number; private index: number;
private interval: number; private interval: number;
private startUrl: string; private startUrl: string;
...@@ -36,7 +40,12 @@ export class PlaylistSrv { ...@@ -36,7 +40,12 @@ export class PlaylistSrv {
const queryParams = this.$location.search(); const queryParams = this.$location.search();
const filteredParams = _.pickBy(queryParams, value => value !== null); const filteredParams = _.pickBy(queryParams, value => value !== null);
this.$location.url('dashboard/' + dash.uri + '?' + toUrlParams(filteredParams)); // this is done inside timeout to make sure digest happens after
// as this can be called from react
this.$timeout(() => {
const stripedUrl = locationUtil.stripBaseFromUrl(dash.url);
this.$location.url(stripedUrl + '?' + toUrlParams(filteredParams));
});
this.index++; this.index++;
this.cancelPromise = this.$timeout(() => this.next(), this.interval); this.cancelPromise = this.$timeout(() => this.next(), this.interval);
...@@ -54,6 +63,8 @@ export class PlaylistSrv { ...@@ -54,6 +63,8 @@ export class PlaylistSrv {
this.index = 0; this.index = 0;
this.isPlaying = true; this.isPlaying = true;
appEvents.emit('playlist-started');
return this.backendSrv.get(`/api/playlists/${playlistId}`).then(playlist => { return this.backendSrv.get(`/api/playlists/${playlistId}`).then(playlist => {
return this.backendSrv.get(`/api/playlists/${playlistId}/dashboards`).then(dashboards => { return this.backendSrv.get(`/api/playlists/${playlistId}/dashboards`).then(dashboards => {
this.dashboards = dashboards; this.dashboards = dashboards;
...@@ -77,6 +88,8 @@ export class PlaylistSrv { ...@@ -77,6 +88,8 @@ export class PlaylistSrv {
if (this.cancelPromise) { if (this.cancelPromise) {
this.$timeout.cancel(this.cancelPromise); this.$timeout.cancel(this.cancelPromise);
} }
appEvents.emit('playlist-stopped');
} }
} }
......
public/app/routes/GrafanaCtrl.ts
...@@ -120,12 +120,13 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop ...@@ -120,12 +120,13 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
body.toggleClass('sidemenu-hidden'); body.toggleClass('sidemenu-hidden');
}); });
scope.$watch( appEvents.on('playlist-started', () => {
() => playlistSrv.isPlaying, elem.toggleClass('view-mode--playlist', true);
newValue => { });
elem.toggleClass('view-mode--playlist', newValue === true);
} appEvents.on('playlist-stopped', () => {
); elem.toggleClass('view-mode--playlist', false);
});
// check if we are in server side render // check if we are in server side render
if (document.cookie.indexOf('renderKey') !== -1) { if (document.cookie.indexOf('renderKey') !== -1) {
...@@ -258,10 +259,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop ...@@ -258,10 +259,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
}, 100); }, 100);
} }
if (target.parents('.navbar-buttons--playlist').length === 0) {
playlistSrv.stop();
}
// hide search // hide search
if (body.find('.search-container').length > 0) { if (body.find('.search-container').length > 0) {
if (target.parents('.search-results-container, .search-field-wrapper').length === 0) { if (target.parents('.search-results-container, .search-field-wrapper').length === 0) {
......
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