Live: improve dashboard editing notifications (#28094)

public/app/features/live/dashboard/DashboardChangedModal.tsx

 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<Props, State> {
         title="Dashboard Changed"
         icon="copy"
         onDismiss={this.onDismiss}
+        onClickBackdrop={() => {}}
         className={styles.modal}
       >
         <div>
@@ -80,16 +81,14 @@ export class DashboardChangedModal extends PureComponent<Props, State> {
             <div>This dashboard has been modifed by another session</div>
           )}
           <br />
-          <VerticalGroup>
-            {options.map(opt => {
-              return (
-                <div key={opt.label} onClick={opt.action} className={styles.radioItem}>
-                  <h3>{opt.label}</h3>
-                  {opt.description}
-                </div>
-              );
-            })}
-          </VerticalGroup>
+          {options.map(opt => {
+            return (
+              <div key={opt.label} onClick={opt.action} className={styles.radioItem}>
+                <h3>{opt.label}</h3>
+                {opt.description}
+              </div>
+            );
+          })}
           <br />
         </div>
       </Modal>
@@ -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};
+      }
     `,
   };
 });

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<DashboardEvent>) => {
       // 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;

public/app/features/live/dashboard/types.ts

@@ -11,4 +11,5 @@ export interface DashboardEvent {
   userId?: number;
   message?: string;
   sessionId?: string;
+  timestamp?: number;
 }