Split warnings and info annotations in API response (#14327)

* split warnings and info annotations in API response

Signed-off-by: Jeanette Tan <jeanette.tan@grafana.com>

* update according to code review

Signed-off-by: Jeanette Tan <jeanette.tan@grafana.com>

* minimal UI change: show infos in different colour

Signed-off-by: Jeanette Tan <jeanette.tan@grafana.com>

* Update web/ui/react-app/src/pages/graph/Panel.tsx

Co-authored-by: Julius Volz <julius.volz@gmail.com>
Signed-off-by: zenador <zenador@users.noreply.github.com>

---------

Signed-off-by: Jeanette Tan <jeanette.tan@grafana.com>
Signed-off-by: zenador <zenador@users.noreply.github.com>
Co-authored-by: Julius Volz <julius.volz@gmail.com>

storage/fanout_test.go

@@ -181,7 +181,8 @@ func TestFanoutErrors(t *testing.T) {
 				require.NotEmpty(t, ss.Warnings(), "warnings expected")
 				w := ss.Warnings()
 				require.Error(t, w.AsErrors()[0])
-				require.Equal(t, tc.warning.Error(), w.AsStrings("", 0)[0])
+				warn, _ := w.AsStrings("", 0, 0)
+				require.Equal(t, tc.warning.Error(), warn[0])
 			}
 		})
 		t.Run("chunks", func(t *testing.T) {
@@ -207,7 +208,8 @@ func TestFanoutErrors(t *testing.T) {
 				require.NotEmpty(t, ss.Warnings(), "warnings expected")
 				w := ss.Warnings()
 				require.Error(t, w.AsErrors()[0])
-				require.Equal(t, tc.warning.Error(), w.AsStrings("", 0)[0])
+				warn, _ := w.AsStrings("", 0, 0)
+				require.Equal(t, tc.warning.Error(), warn[0])
 			}
 		})
 	}

util/annotations/annotations.go

@@ -71,31 +71,49 @@ func (a Annotations) AsErrors() []error {
 	return arr
 }
 
-// AsStrings is a convenience function to return the annotations map as a slice
+// AsStrings is a convenience function to return the annotations map as 2 slices
-// of strings. The query string is used to get the line number and character offset
+// of strings, separated into warnings and infos. The query string is used to get the
-// positioning info of the elements which trigger an annotation. We limit the number
+// line number and character offset positioning info of the elements which trigger an
-// of annotations returned here with maxAnnos (0 for no limit).
+// annotation. We limit the number of warnings and infos returned here with maxWarnings
-func (a Annotations) AsStrings(query string, maxAnnos int) []string {
+// and maxInfos respectively (0 for no limit).
-	arr := make([]string, 0, len(a))
+func (a Annotations) AsStrings(query string, maxWarnings, maxInfos int) (warnings, infos []string) {
+	warnings = make([]string, 0, maxWarnings+1)
+	infos = make([]string, 0, maxInfos+1)
+	warnSkipped := 0
+	infoSkipped := 0
 	for _, err := range a {
-		if maxAnnos > 0 && len(arr) >= maxAnnos {
-			break
-		}
 		var anErr annoErr
 		if errors.As(err, &anErr) {
 			anErr.Query = query
 			err = anErr
 		}
-		arr = append(arr, err.Error())
+		switch {
+		case errors.Is(err, PromQLInfo):
+			if maxInfos == 0 || len(infos) < maxInfos {
+				infos = append(infos, err.Error())
+			} else {
+				infoSkipped++
+			}
+		default:
+			if maxWarnings == 0 || len(warnings) < maxWarnings {
+				warnings = append(warnings, err.Error())
+			} else {
+				warnSkipped++
+			}
+		}
 	}
-	if maxAnnos > 0 && len(a) > maxAnnos {
+	if warnSkipped > 0 {
-		arr = append(arr, fmt.Sprintf("%d more annotations omitted", len(a)-maxAnnos))
+		warnings = append(warnings, fmt.Sprintf("%d more warning annotations omitted", warnSkipped))
 	}
-	return arr
+	if infoSkipped > 0 {
+		infos = append(infos, fmt.Sprintf("%d more info annotations omitted", infoSkipped))
+	}
+	return
 }
 
-func (a Annotations) CountWarningsAndInfo() (int, int) {
+// CountWarningsAndInfo counts and returns the number of warnings and infos in the
-	var countWarnings, countInfo int
+// annotations wrapper.
+func (a Annotations) CountWarningsAndInfo() (countWarnings, countInfo int) {
 	for _, err := range a {
 		if errors.Is(err, PromQLWarning) {
 			countWarnings++
@@ -104,7 +122,7 @@ func (a Annotations) CountWarningsAndInfo() (int, int) {
 			countInfo++
 		}
 	}
-	return countWarnings, countInfo
+	return
 }
 
 //nolint:revive // error-naming.

web/api/v1/api.go

@@ -159,6 +159,7 @@ type Response struct {
 	ErrorType errorType   `json:"errorType,omitempty"`
 	Error     string      `json:"error,omitempty"`
 	Warnings  []string    `json:"warnings,omitempty"`
+	Infos     []string    `json:"infos,omitempty"`
 }
 
 type apiFuncResult struct {
@@ -1747,11 +1748,13 @@ func (api *API) cleanTombstones(*http.Request) apiFuncResult {
 // can be empty if the position information isn't needed.
 func (api *API) respond(w http.ResponseWriter, req *http.Request, data interface{}, warnings annotations.Annotations, query string) {
 	statusMessage := statusSuccess
+	warn, info := warnings.AsStrings(query, 10, 10)
 
 	resp := &Response{
 		Status:   statusMessage,
 		Data:     data,
-		Warnings: warnings.AsStrings(query, 10),
+		Warnings: warn,
+		Infos:    info,
 	}
 
 	codec, err := api.negotiateCodec(req, resp)

web/ui/module/codemirror-promql/src/client/prometheus.ts

@@ -66,6 +66,7 @@ interface APIResponse<T> {
   data?: T;
   error?: string;
   warnings?: string[];
+  infos?: string[];
 }
 
 // These are status codes where the Prometheus API still returns a valid JSON body,

web/ui/react-app/src/pages/graph/Panel.tsx

@@ -37,6 +37,7 @@ interface PanelState {
   lastQueryParams: QueryParams | null;
   loading: boolean;
   warnings: string[] | null;
+  infos: string[] | null;
   error: string | null;
   stats: QueryStats | null;
   exprInputValue: string;
@@ -87,6 +88,7 @@ class Panel extends Component<PanelProps, PanelState> {
       lastQueryParams: null,
       loading: false,
       warnings: null,
+      infos: null,
       error: null,
       stats: null,
       exprInputValue: props.options.expr,
@@ -204,6 +206,7 @@ class Panel extends Component<PanelProps, PanelState> {
         data: query.data,
         exemplars: exemplars?.data,
         warnings: query.warnings,
+        infos: query.infos,
         lastQueryParams: {
           startTime,
           endTime,
@@ -307,6 +310,11 @@ class Panel extends Component<PanelProps, PanelState> {
             <Col>{warning && <Alert color="warning">{warning}</Alert>}</Col>
           </Row>
         ))}
+        {this.state.infos?.map((info, index) => (
+          <Row key={index}>
+            <Col>{info && <Alert color="info">{info}</Alert>}</Col>
+          </Row>
+        ))}
         <Row>
           <Col>
             <Nav tabs>