revamping the approach a bit

Signed-off-by: Harsh Pratap Singh <[email protected]>

pkg/api/api.go

@@ -252,8 +252,9 @@ func Respond(w http.ResponseWriter, data interface{}, warnings []error) {
 	w.WriteHeader(http.StatusOK)
 
 	resp := &response{
-		Status: StatusSuccess,
-		Data:   data,
+		Status:   StatusSuccess,
+		Warnings: warningsToString(warnings),
+		Data:     data,
 	}
 	for _, warn := range warnings {
 		resp.Warnings = append(resp.Warnings, warn.Error())
@@ -287,3 +288,15 @@ func RespondError(w http.ResponseWriter, apiErr *ApiError, data interface{}) {
 		Data:      data,
 	})
 }
+
+func warningsToString(errors []error) []string {
+	warningStrings := make([]string, len(errors))
+
+	for i, err := range errors {
+		if err != nil {
+			warningStrings[i] = err.Error()
+		}
+	}
+
+	return warningStrings
+}

pkg/ui/react-app/src/pages/targets/ScrapePoolList.tsx

@@ -8,7 +8,7 @@ import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { ToggleMoreLess } from '../../components/ToggleMoreLess';
 import { KVSearch } from '@nexucis/kvsearch';
 import styles from './ScrapePoolPanel.module.css';
-import { Col, Collapse, Row } from 'reactstrap';
+import { Col, Collapse, Row, UncontrolledAlert } from 'reactstrap';
 import SearchBar from '../../components/SearchBar';
 import { ScrapePoolContent } from './ScrapePoolContent';
 
@@ -111,27 +111,27 @@ ScrapePoolListContent.displayName = 'ScrapePoolListContent';
 
 const ScrapePoolListWithStatusIndicator = withStatusIndicator(ScrapePoolListContent);
 
-const ScrapePoolList: FC<PathPrefixProps & { setWarnings: (warnings: string[]) => void }> = ({
-  pathPrefix,
-  setWarnings,
-}) => {
+const ScrapePoolList: FC<PathPrefixProps> = ({ pathPrefix }) => {
   const { response, error, isLoading } = useFetch<ScrapePoolListProps>(`${pathPrefix}/api/v1/targets?state=active`);
   const { status: responseStatus, warnings: responseWarnings } = response;
   const badResponse = responseStatus !== 'success' && responseStatus !== 'start fetching';
 
-  useEffect(() => {
-    if (responseWarnings?.length > 0) {
-      setWarnings(responseWarnings);
-    }
-  }, [responseWarnings, setWarnings]);
-
   return (
-    <ScrapePoolListWithStatusIndicator
-      {...response.data}
-      error={badResponse ? new Error(responseStatus) : error}
-      isLoading={isLoading}
-      componentTitle="Targets information"
-    />
+    <>
+      <div>
+        {responseWarnings?.map((warning, index) => (
+          <UncontrolledAlert key={index} color="warning">
+            {warning}
+          </UncontrolledAlert>
+        ))}
+      </div>
+      <ScrapePoolListWithStatusIndicator
+        {...response.data}
+        error={badResponse ? new Error(responseStatus) : error}
+        isLoading={isLoading}
+        componentTitle="Targets information"
+      />
+    </>
   );
 };
 

pkg/ui/react-app/src/pages/targets/Targets.tsx

@@ -1,28 +1,15 @@
-import React, { FC, useState } from 'react';
+import React, { FC } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import Filter from './Filter';
 import ScrapePoolList from './ScrapePoolList';
 import PathPrefixProps from '../../types/PathPrefixProps';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
-import { UncontrolledAlert } from 'reactstrap';
 
 const Targets: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => {
-  const [warnings, setWarnings] = useState<string[]>([]);
   return (
     <>
-      {
-        <>
-          <div>
-            {warnings.map((warning, index) => (
-              <UncontrolledAlert key={index} color="warning">
-                {warning}
-              </UncontrolledAlert>
-            ))}
-          </div>
-          <h2>Targets</h2>
-          <ScrapePoolList pathPrefix={pathPrefix} setWarnings={setWarnings} />
-        </>
-      }
+      <h2>Targets</h2>
+      <ScrapePoolList pathPrefix={pathPrefix} />
     </>
   );
 };