AnnoList: Fix annotations not loading when in a repeated row (#111540)

eslint-suppressions.json

@@ -4418,11 +4418,6 @@
       "count": 1
     }
   },
-  "public/app/plugins/panel/annolist/AnnoListPanel.tsx": {
-    "@typescript-eslint/consistent-type-assertions": {
-      "count": 1
-    }
-  },
   "public/app/plugins/panel/annolist/AnnotationListItem.tsx": {
     "no-restricted-syntax": {
       "count": 1

packages/grafana-data/src/datetime/datemath.ts

@@ -15,7 +15,7 @@ import {
 
 const units: string[] = ['y', 'M', 'w', 'd', 'h', 'm', 's', 'Q'] satisfies DurationUnit[];
 
-const isDurationUnit = (value: string): value is DurationUnit => {
+export const isDurationUnit = (value: string): value is DurationUnit => {
   return units.includes(value);
 };
 

public/app/plugins/panel/annolist/AnnoListPanel.test.tsx

@@ -105,7 +105,7 @@ describe('AnnoListPanel', () => {
           tags: ['tag A', 'tag B'],
           type: 'annotation',
         },
-        'anno-list-panel-1'
+        expect.stringMatching(/^anno-list-panel-\d\.\d+/) // string is appended with Math.random()
       );
     });
   });
@@ -268,7 +268,7 @@ describe('AnnoListPanel', () => {
             tags: ['tag A', 'tag B', 'Result tag B'],
             type: 'annotation',
           },
-          'anno-list-panel-1'
+          expect.stringMatching(/^anno-list-panel-\d\.\d+/) // string is appended with Math.random()
         );
         expect(screen.getByText(/filter:/i)).toBeInTheDocument();
         expect(screen.getAllByText(/result tag b/i)).toHaveLength(2);
@@ -293,7 +293,7 @@ describe('AnnoListPanel', () => {
             type: 'annotation',
             userId: 1,
           },
-          'anno-list-panel-1'
+          expect.stringMatching(/^anno-list-panel-\d\.\d+/) // string is appended with Math.random()
         );
         expect(screen.getByText(/filter:/i)).toBeInTheDocument();
         expect(screen.getByRole('button', { name: /result email/i })).toBeInTheDocument();

public/app/plugins/panel/annolist/AnnoListPanel.tsx

@@ -7,7 +7,7 @@ import {
   AnnotationEvent,
   AppEvents,
   dateTime,
-  DurationUnit,
+  dateMath,
   GrafanaTheme2,
   locationUtil,
   PanelProps,
@@ -35,6 +35,7 @@ interface State {
   loaded: boolean;
   queryUser?: UserInfo;
   queryTags: string[];
+  requestId: string;
 }
 export class AnnoListPanel extends PureComponent<Props, State> {
   style = getStyles(config.theme2);
@@ -49,6 +50,7 @@ export class AnnoListPanel extends PureComponent<Props, State> {
       timeInfo: '',
       loaded: false,
       queryTags: [],
+      requestId: `anno-list-panel-${Math.random()}`,
     };
   }
 
@@ -126,7 +128,7 @@ export class AnnoListPanel extends PureComponent<Props, State> {
       params.tags = params.tags ? [...params.tags, ...queryTags] : queryTags;
     }
 
-    const annotations = await getBackendSrv().get('/api/annotations', params, `anno-list-panel-${this.props.id}`);
+    const annotations = await getBackendSrv().get('/api/annotations', params, this.state.requestId);
 
     this.setState({
       annotations,
@@ -180,7 +182,12 @@ export class AnnoListPanel extends PureComponent<Props, State> {
     if (subtract) {
       incr *= -1;
     }
-    return t.add(incr, unit as DurationUnit).valueOf();
+
+    if (!dateMath.isDurationUnit(unit)) {
+      return 0;
+    }
+
+    return t.add(incr, unit).valueOf();
   }
 
   onTagClick = (tag: string, remove?: boolean) => {