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

packages/grafana-e2e/src/flows/addDashboard.ts

+import { v4 as uuidv4 } from 'uuid';
 import { DashboardTimeRangeConfig, setDashboardTimeRange } from './setDashboardTimeRange';
 import { DeleteDashboardConfig } from './deleteDashboard';
 import { e2e } from '../index';
@@ -31,7 +32,7 @@ export const addDashboard = (config?: Partial<AddDashboardConfig>): any => {
       to: '2020-01-01 06:00:00',
     },
     timezone: 'Coordinated Universal Time',
-    title: `e2e-${Date.now()}`,
+    title: `e2e-${uuidv4()}`,
     variables: [],
     ...config,
   } as AddDashboardConfig;

packages/grafana-e2e/src/flows/addDataSource.ts

+import { v4 as uuidv4 } from 'uuid';
 import { DeleteDataSourceConfig } from './deleteDataSource';
 import { e2e } from '../index';
 import { fromBaseUrl, getDataSourceId } from '../support/url';
@@ -24,7 +25,7 @@ export const addDataSource = (config?: Partial<AddDataSourceConfig>): any => {
     checkHealth: false,
     expectedAlertMessage: 'Data source is working',
     form: () => {},
-    name: `e2e-${Date.now()}`,
+    name: `e2e-${uuidv4()}`,
     skipTlsVerify: false,
     type: 'TestData DB',
     ...config,

packages/grafana-e2e/src/flows/addPanel.ts

+import { v4 as uuidv4 } from 'uuid';
 import { configurePanel, ConfigurePanelConfig } from './configurePanel';
 import { getScenarioContext } from '../support/scenarioContext';
 
@@ -15,7 +16,7 @@ export const addPanel = (config?: Partial<AddPanelConfig>): any =>
     configurePanel(
       {
         dataSourceName: lastAddedDataSource,
-        panelTitle: `e2e-${Date.now()}`,
+        panelTitle: `e2e-${uuidv4()}`,
         visualizationName: 'Table',
         ...config,
       } as AddPanelConfig,

packages/grafana-ui/src/slate-plugins/braces.ts

 import { Plugin } from '@grafana/slate-react';
 import { Editor as CoreEditor, Annotation } from 'slate';
+import { v4 as uuidv4 } from 'uuid';
 
 const BRACES: any = {
   '[': ']',
@@ -43,7 +44,7 @@ export function BracesPlugin(): Plugin {
             keyEvent.preventDefault();
             const complement = BRACES[keyEvent.key];
             const matchAnnotation = {
-              key: `${MATCH_MARK}-${Date.now()}`,
+              key: `${MATCH_MARK}-${uuidv4()}`,
               type: `${MATCH_MARK}-${complement}`,
               anchor: {
                 key: startKey,

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

 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 {

public/app/features/explore/state/reducers.test.ts

@@ -37,7 +37,7 @@ import {
 import { updateLocation } from '../../../core/actions';
 import { serializeStateToUrlParam } from '@grafana/data/src/utils/url';
 
-const QUERY_KEY_REGEX = /Q-([0-9]+)-([0-9.]+)-([0-9]+)/;
+const QUERY_KEY_REGEX = /Q-(?:[a-z0-9]+-){5}(?:[0-9]+)/;
 
 describe('Explore item reducer', () => {
   describe('scanning', () => {

public/app/plugins/datasource/influxdb/datasource.ts

@@ -10,6 +10,7 @@ import {
   LoadingState,
   QueryResultMeta,
 } from '@grafana/data';
+import { v4 as uuidv4 } from 'uuid';
 import InfluxSeries from './influx_series';
 import InfluxQueryModel from './influx_query_model';
 import ResponseParser from './response_parser';
@@ -311,7 +312,7 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
       // TODO: eventually use the real /health endpoint
       const request: DataQueryRequest<InfluxQuery> = {
         targets: [{ refId: 'test', query: 'buckets()' }],
-        requestId: `${this.id}-health-${Date.now()}`,
+        requestId: `${this.id}-health-${uuidv4()}`,
         dashboardId: 0,
         panelId: 0,
         interval: '1m',

public/app/types/appNotifications.ts

 export interface AppNotification {
-  id: number;
+  id: string;
   severity: AppNotificationSeverity;
   icon: string;
   title: string;