Chore: Use uuid v4 as an identifier instead of Date.now() (#27178)

public/app/core/components/AppNotifications/AppNotificationItem.tsx

@@ -4,7 +4,7 @@ import { Alert } from '@grafana/ui';
 
 interface Props {
   appNotification: AppNotification;
-  onClearNotification: (id: number) => void;
+  onClearNotification: (id: string) => void;
 }
 
 export default class AppNotificationItem extends Component<Props> {

public/app/core/components/AppNotifications/AppNotificationList.tsx

@@ -27,7 +27,7 @@ export class AppNotificationList extends PureComponent<Props> {
     appEvents.on(AppEvents.alertError, payload => notifyApp(createErrorNotification(...payload)));
   }
 
-  onClearAppNotification = (id: number) => {
+  onClearAppNotification = (id: string) => {
     this.props.clearAppNotification(id);
   };
 

public/app/core/copy/appNotification.ts

@@ -1,5 +1,6 @@
 import { AppNotification, AppNotificationSeverity, AppNotificationTimeout } from 'app/types';
 import { getMessageFromError } from 'app/core/utils/errors';
+import { v4 as uuidv4 } from 'uuid';
 
 const defaultSuccessNotification = {
   title: '',
@@ -29,7 +30,7 @@ export const createSuccessNotification = (title: string, text = ''): AppNotifica
   ...defaultSuccessNotification,
   title: title,
   text: text,
-  id: Date.now(),
+  id: uuidv4(),
 });
 
 export const createErrorNotification = (
@@ -41,7 +42,7 @@ export const createErrorNotification = (
     ...defaultErrorNotification,
     text: getMessageFromError(text),
     title,
-    id: Date.now(),
+    id: uuidv4(),
     component,
   };
 };
@@ -50,5 +51,5 @@ export const createWarningNotification = (title: string, text = ''): AppNotifica
   ...defaultWarningNotification,
   title: title,
   text: text,
-  id: Date.now(),
+  id: uuidv4(),
 });

public/app/core/reducers/appNotification.test.ts

@@ -3,8 +3,8 @@ import { AppNotificationSeverity, AppNotificationTimeout } from 'app/types/';
 
 describe('clear alert', () => {
   it('should filter alert', () => {
-    const id1 = 1540301236048;
-    const id2 = 1540301248293;
+    const id1 = '1767d3d9-4b99-40eb-ab46-de734a66f21d';
+    const id2 = '4767b3de-12dd-40e7-b58c-f778bd59d675';
 
     const initialState = {
       appNotifications: [
@@ -48,9 +48,9 @@ describe('clear alert', () => {
 
 describe('notify', () => {
   it('create notify message', () => {
-    const id1 = 1540301236048;
-    const id2 = 1540301248293;
-    const id3 = 1540301248203;
+    const id1 = '696da53b-6ae7-4824-9e0e-d6a3b54a2c74';
+    const id2 = '4477fcd9-246c-45a5-8818-e22a16683dae';
+    const id3 = '55be87a8-bbab-45c7-b481-1f9d46f0d2ee';
 
     const initialState = {
       appNotifications: [

public/app/core/reducers/appNotification.ts

@@ -13,7 +13,7 @@ const appNotificationsSlice = createSlice({
       ...state,
       appNotifications: state.appNotifications.concat([action.payload]),
     }),
-    clearAppNotification: (state, action: PayloadAction<number>): AppNotificationsState => ({
+    clearAppNotification: (state, action: PayloadAction<string>): AppNotificationsState => ({
       ...state,
       appNotifications: state.appNotifications.filter(appNotification => appNotification.id !== action.payload),
     }),

public/app/core/utils/explore.ts

@@ -25,6 +25,7 @@ import {
 } from '@grafana/data';
 import store from 'app/core/store';
 import kbn from 'app/core/utils/kbn';
+import { v4 as uuidv4 } from 'uuid';
 import { getNextRefIdChar } from './query';
 // Types
 import { RefreshPicker } from '@grafana/ui';
@@ -265,7 +266,7 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState {
 }
 
 export function generateKey(index = 0): string {
-  return `Q-${Date.now()}-${Math.random()}-${index}`;
+  return `Q-${uuidv4()}-${index}`;
 }
 
 export function generateEmptyQuery(queries: DataQuery[], index = 0): DataQuery {