fix: error messages for custom queries

packages/main/plugins/Cardinality/Chart.tsx

@@ -28,10 +28,8 @@ const CardinalityChart = forwardRef(
                 setWidth(ref?.current?.offsetWidth - 8);
             }
         }, [ref?.current]);
-
         const chartRenderer = (isChartGroup, chartData) => {
             if (chartData && isChartGroup && chart !== "") {
-                console.log(chartData?.valueTypesMapped[chart]?.names);
                 return (
                     <BarChart
                         colors={["#babc00", "#ff5555"]}
@@ -68,8 +66,8 @@ const CardinalityChart = forwardRef(
                         height={300}
                     />
                 );
-            } else {
-                return (
+            } else if (chartData && !isChartGroup) {
+                return ( 
                     <BarChart
                         colors={["#babc00", "#ff5555"]}
                         xAxis={[

packages/main/plugins/Cardinality/ChartsGroup.tsx

@@ -31,6 +31,7 @@ export const formatValueTypesMapped = (
 };
 
 export const formatChartProps = (rows: SeriesRowProps[]) => {
+
     const xAxisData = rows?.map((row) => row.name);
     const valueData = rows?.map((row) => row.value);
     const diffData = rows?.map((row) =>
@@ -95,6 +96,9 @@ export const useChartData = (rows: SeriesRowProps[]) => {
 export const ChartsGroup: React.FC<ChartsGroupProps> = ({ rows, theme }) => {
     const chartData = useChartData(rows);
 
+
+    if(rows.length === 0) return null
+
     return (
         <CardinalityChartsContainer>
             {chartData?.valueTypes[0] !== undefined ? (

packages/main/plugins/Cardinality/Configurator.tsx

@@ -8,7 +8,7 @@ import useConfigurator from "./useConfigurator";
 import CardinalityInput from "./CardinalityInput";
 import { ConfigContainerStyles } from "./ConfigContainerStyles";
 import { useCardinalityRequest } from "./api/CardinalityRequest";
-
+import useCardinalityStore from "./store/CardinalityStore";
 type ConfiguratorProps = {
     theme: any;
     percent?: number;
@@ -45,15 +45,23 @@ const Configurator: React.FC<ConfiguratorProps> = ({
         limit,
         totalSeries,
         reset,
+        date,
     } = useConfigurator({ setHistoryItem });
 
     //a handler for making a get request to the api
 
     const { handleCardinalityRequest } = useCardinalityRequest(true);
-
+    const { setTimeSeriesSelector, setFocusLabel, setLimitEntries } =
+        useCardinalityStore();
     const handleReset = () => {
         reset();
-        handleCardinalityRequest();
+
+        handleCardinalityRequest({
+            match: "",
+            focusLabel: "",
+            topN: limit,
+            date,
+        });
     };
 
     // this feature is not implemented yet
@@ -142,7 +150,17 @@ const Configurator: React.FC<ConfiguratorProps> = ({
                         Reset
                     </button>
                     <button
-                        onClick={handleCardinalityRequest}
+                        onClick={() => {
+                            setTimeSeriesSelector(query);
+                            setFocusLabel(focus);
+                            setLimitEntries(Number(limit));
+
+                            handleCardinalityRequest({
+                                match: query,
+                                focusLabel: focus,
+                                topN: limit,
+                            });
+                        }}
                         className="query-button"
                     >
                         <ChevronRightOutlinedIcon fontSize="small" />

packages/main/plugins/Cardinality/api/CardinalityRequest.tsx

@@ -15,7 +15,7 @@ import useCardinalityStore from "../store/CardinalityStore";
 
 export type CardinalityRequestResponse = {
     handleDelete?: (query: string, amount: number) => void;
-    handleCardinalityRequest?: () => void;
+    handleCardinalityRequest?: (params: any) => void;
     handleGetDeletedFingerprints?: () => void;
     result?: any;
 };
@@ -95,10 +95,26 @@ export const deleteFingerprints = async (
 
         await fetch(urlDelete, {
             method: "POST",
+
             headers: {
                 ...headers,
             },
         }).then((response) => {
+            if (
+                (response && response?.status === 500) ||
+                response?.status === 400
+            ) {
+                setError(response.statusText);
+                setIsLoading(false);
+                let error = response.text();
+                store.dispatch(
+                    createAlert({
+                        message: error,
+                        type: "error",
+                    })
+                );
+            }
+
             if (
                 (response && response?.status === 204) ||
                 response?.status === 200
@@ -114,7 +130,6 @@ export const deleteFingerprints = async (
             }
         });
     } catch (e) {
-        console.log(e);
         setError(JSON.stringify(e));
         setIsLoading(false);
         setDeleteQueries((prev) => [...prev, query]);
@@ -157,6 +172,7 @@ const requestCardinality = async (
 
     const urls = [urlBase, urlPrev, urlTotal];
     if (!url) return;
+
     setError("");
     setIsLoading(true);
     // set
@@ -166,6 +182,22 @@ const requestCardinality = async (
         const responses = await Promise.all(
             urls.map((url) => fetch(url, { headers }))
         ); // add headers and auth in here . make it with axios
+
+        if (responses[0].status === 400 || responses[0].status === 500) {
+            const res = await responses[0].text();
+
+            setError(res);
+            setIsLoading(false);
+            store.dispatch(
+                createAlert({
+                    message: res,
+                    type: "error",
+                })
+            );
+
+            return;
+        }
+
         const [resp, respPrev, respTotals] = await Promise.all(
             responses.map((resp) => resp.json())
         );
@@ -225,7 +257,9 @@ export const useCardinalityRequest = (
         setTsdbStatus,
         error,
     } = useCardinalityStore();
+
     const reqDate = date || dayjs().format(DATE_FORMAT);
+
     const reqParams = { match, focusLabel, topN, date: reqDate };
 
     const { url, headers } = useDataSourceData("logs");
@@ -264,7 +298,14 @@ export const useCardinalityRequest = (
         );
     };
 
-    const handleCardinalityRequest = async () => {
+    const handleCardinalityRequest = async (params: any) => {
+        const reqDate = date || dayjs().format(DATE_FORMAT);
+
+        let reqParams = { match, focusLabel, topN, date: reqDate };
+        if (params !== undefined) {
+            reqParams = { ...reqParams, ...params };
+        }
+
         await requestCardinality(
             url,
             reqParams,

packages/main/plugins/Cardinality/api/useCardinalityData.tsx

@@ -82,9 +82,6 @@ export const useCardinalityData = (historyManager?, setHistoryItem?) => {
 
     useEffect(() => {
 
-        console.log(result, "result")
-        console.log(isLoading, "isLoading")
-
         if (result) {
 
             setTotal({
@@ -99,9 +96,6 @@ export const useCardinalityData = (historyManager?, setHistoryItem?) => {
             });
         }
     }, [result]);
-
-
-
     return {
         data,
         totalSeries: data?.data?.totalSeries ?? 0,

packages/main/plugins/Cardinality/store/CardinalityStore.tsx

@@ -2,7 +2,6 @@ import { create } from "zustand";
 import dayjs from "dayjs";
 import { DATE_FORMAT } from "../consts";
 
-
 type CardinalityTotal = {
     amount: number;
     prev: number;
@@ -24,7 +23,7 @@ export const timeMinusOneDay = (time: Date) => {
 
 type CardinalityState = {
     total: CardinalityTotal;
-    timeRange: TimeRange; // this should be calculated in seconds from actual date 
+    timeRange: TimeRange; // this should be calculated in seconds from actual date
     timeSeriesSelector: string;
     focusLabel: string;
     limitEntries: number;
@@ -67,9 +66,15 @@ const initialData = {
     tsdbStatus: {},
 };
 
-const useCardinalityStore =  create<CardinalityState>((set) => ({
+const initialParams = {
+    topN: 10,
+    timeSeriesSelector: "",
+    focusLabel: "",
+};
+
+const useCardinalityStore = create<CardinalityState>((set) => ({
     ...initialData,
-   
+
     setIsUpdating: (isUpdating: boolean) => set(() => ({ isUpdating })),
     setTotal: (t: CardinalityTotal) => set(() => ({ total: t })),
     setTimeSeriesSelector: (text: string) =>
@@ -80,11 +85,10 @@ const useCardinalityStore =  create<CardinalityState>((set) => ({
     setDate: (day: string) => set(() => ({ date: day })),
     setDeletedQueries: (query: string) =>
         set((state) => ({ deletedQueries: [...state.deletedQueries, query] })),
-    reset: () => set(() => ({ ...initialData })),
+    reset: () => set(() => ({ ...initialParams })),
     setIsLoading: (isLoading: boolean) => set(() => ({ isLoading })),
     setError: (error: any) => set(() => ({ error })),
     setTsdbStatus: (tsdbStatus: any) => set(() => ({ tsdbStatus })),
-
 }));
 
 export default useCardinalityStore;

packages/main/plugins/Cardinality/useConfigurator.tsx

@@ -17,6 +17,7 @@ const useConfigurator = ({setHistoryItem}:useConfiguratorProps) => {
         limitEntries,
         setLimitEntries,
         reset,
+        date,
     } = useCardinalityStore();
 
     const { total: totalSeries } = useCardinalityStore();
@@ -47,7 +48,7 @@ const {handleCardinalityRequest} = useCardinalityRequest();
     const onKeyDownTimeSeries = (e: any) => {
         if (e.keyCode === 13) {
             setTimeSeriesSelector(query);
-            handleCardinalityRequest();
+            handleCardinalityRequest({match:query});
             setHistoryItem("timeSeriesSelector", query);
         }
     };
@@ -59,7 +60,7 @@ const {handleCardinalityRequest} = useCardinalityRequest();
     const onKeyDownFocusLabel = (e: any) => {
         if (e.keyCode === 13) {
             setFocusLabel(focus);
-            handleCardinalityRequest();
+            handleCardinalityRequest({focusLabel:focus});
             setHistoryItem("focusLabel", focus);
         }
     };
@@ -72,31 +73,30 @@ const {handleCardinalityRequest} = useCardinalityRequest();
     const onKeyDownLimitEntries = (e: any) => {
         if (e.keyCode === 13) {
             setLimitEntries(Number(limit));
-            handleCardinalityRequest();
+            handleCardinalityRequest({topN:limit});
             setHistoryItem("limitEntries", Number(limit));
 
         }
     };
 
     const onQueryHistoryChange = (e: ChangeEvent<HTMLSelectElement>) => {
         e.preventDefault();
+        setTimeSeriesSelector(e.target.innerText);
 
-        setQuery(e.target.innerText);
-        handleCardinalityRequest();
+        handleCardinalityRequest({match:e.target.innerText});
     };
 
     const onFocusHistoryChange = (e: ChangeEvent<HTMLSelectElement>) => {
         e.preventDefault();
-
         setFocus(e.target.innerText);
-        handleCardinalityRequest();
+        handleCardinalityRequest({focusLabel:e.target.innerText});
     }
 
     const onLimitHistoryChange = (e: ChangeEvent<HTMLSelectElement>) => {
         e.preventDefault();
 
         setLimit(Number(e.target.innerText));
-        handleCardinalityRequest();
+        handleCardinalityRequest({topN:Number(e.target.innerText)});
     }   
 
     return {
@@ -114,6 +114,7 @@ const {handleCardinalityRequest} = useCardinalityRequest();
         limit,
         totalSeries,
         reset,
+        date
     }
 
 }