diff --git a/public/app/features/live/dashboard/DashboardChangedModal.tsx b/public/app/features/live/dashboard/DashboardChangedModal.tsx index 10550834063..2c944144f9e 100644 --- a/public/app/features/live/dashboard/DashboardChangedModal.tsx +++ b/public/app/features/live/dashboard/DashboardChangedModal.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { Modal, stylesFactory, VerticalGroup } from '@grafana/ui'; +import { Modal, stylesFactory } from '@grafana/ui'; import { css } from 'emotion'; import { dashboardWatcher } from './dashboardWatcher'; import { config } from '@grafana/runtime'; @@ -71,6 +71,7 @@ export class DashboardChangedModal extends PureComponent { title="Dashboard Changed" icon="copy" onDismiss={this.onDismiss} + onClickBackdrop={() => {}} className={styles.modal} >
@@ -80,16 +81,14 @@ export class DashboardChangedModal extends PureComponent {
This dashboard has been modifed by another session
)}
- - {options.map(opt => { - return ( -
-

{opt.label}

- {opt.description} -
- ); - })} -
+ {options.map(opt => { + return ( +
+

{opt.label}

+ {opt.description} +
+ ); + })}
@@ -104,9 +103,16 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { `, radioItem: css` margin: 0; - margin-left: ${theme.spacing.md}; font-size: ${theme.typography.size.sm}; color: ${theme.colors.textWeak}; + padding: 10px; + cursor: pointer; + width: 100%; + + &:hover { + background: ${theme.colors.formCheckboxBgCheckedHover}; + color: ${theme.colors.text}; + } `, }; }); diff --git a/public/app/features/live/dashboard/dashboardWatcher.ts b/public/app/features/live/dashboard/dashboardWatcher.ts index 313299d4eaf..0522e0245fe 100644 --- a/public/app/features/live/dashboard/dashboardWatcher.ts +++ b/public/app/features/live/dashboard/dashboardWatcher.ts @@ -23,6 +23,7 @@ class DashboardWatcher { uid?: string; ignoreSave?: boolean; editing = false; + lastEditing?: DashboardEvent; setEditingState(state: boolean) { const changed = (this.editing = state); @@ -42,7 +43,8 @@ class DashboardWatcher { sessionId, uid: this.uid!, action: this.editing ? DashboardEventAction.EditingStarted : DashboardEventAction.EditingCanceled, - message: 'user (name)', + message: (window as any).grafanaBootData?.user?.name, + timestamp: Date.now(), }; this.channel!.publish!(msg); } @@ -79,6 +81,16 @@ class DashboardWatcher { this.ignoreSave = true; } + getRecentEditingEvent() { + if (this.lastEditing && this.lastEditing.timestamp) { + const elapsed = Date.now() - this.lastEditing.timestamp; + if (elapsed > 5000) { + this.lastEditing = undefined; + } + } + return this.lastEditing; + } + observer = { next: (event: LiveChannelEvent) => { // Send the editing state when connection starts @@ -121,10 +133,15 @@ class DashboardWatcher { } } else if (showPopup) { if (action === DashboardEventAction.EditingStarted) { - appEvents.emit(AppEvents.alertWarning, [ - 'Another session is editing this dashboard', - event.message.message, - ]); + const editingEvent = event.message; + const recent = this.getRecentEditingEvent(); + if (!recent || recent.message !== editingEvent.message) { + appEvents.emit(AppEvents.alertWarning, [ + 'Another session is editing this dashboard', + editingEvent.message, + ]); + } + this.lastEditing = editingEvent; } } return; diff --git a/public/app/features/live/dashboard/types.ts b/public/app/features/live/dashboard/types.ts index 0e360e31707..447fc2c9101 100644 --- a/public/app/features/live/dashboard/types.ts +++ b/public/app/features/live/dashboard/types.ts @@ -11,4 +11,5 @@ export interface DashboardEvent { userId?: number; message?: string; sessionId?: string; + timestamp?: number; }