From cda336a98a9faa3d0f78270e4ec2d7a2d453e1a8 Mon Sep 17 00:00:00 2001 From: Andreas Pfau Date: Wed, 4 Sep 2024 12:05:09 +0200 Subject: [PATCH] fix(supernova-ui): fix preselected support group (#371) --- alerts/ui/public/index.html | 19 ++++--- alerts/ui/src/AppContent.jsx | 1 - alerts/ui/src/api/apiService.js | 2 +- alerts/ui/src/components/AsyncWorker.jsx | 1 - .../ui/src/components/alerts/AlertsList.jsx | 2 +- .../components/silences/SilenceScheduled.jsx | 2 +- alerts/ui/src/helpers.js | 2 +- alerts/ui/src/hooks/useAlertmanagerAPI.js | 28 ++++----- alerts/ui/src/hooks/useCommunication.js | 57 ++++++++++++++----- alerts/ui/src/hooks/useUrlState.js | 22 ++----- 10 files changed, 76 insertions(+), 60 deletions(-) diff --git a/alerts/ui/public/index.html b/alerts/ui/public/index.html index 0d8092cc..ca936aef 100644 --- a/alerts/ui/public/index.html +++ b/alerts/ui/public/index.html @@ -6,8 +6,8 @@ - - + + Supernova Dev - + data-props-debug="true" + > -->
- \ No newline at end of file + diff --git a/alerts/ui/src/AppContent.jsx b/alerts/ui/src/AppContent.jsx index 74f007b4..f0260539 100644 --- a/alerts/ui/src/AppContent.jsx +++ b/alerts/ui/src/AppContent.jsx @@ -30,7 +30,6 @@ const AppContent = () => { const { addMessage } = useActions() // alerts - const alertsError = useAlertsError() const isAlertsLoading = useAlertsIsLoading() const totalCounts = useAlertsTotalCounts() const isAlertsUpdating = useAlertsIsUpdating() diff --git a/alerts/ui/src/api/apiService.js b/alerts/ui/src/api/apiService.js index 1bc73363..c323fa87 100644 --- a/alerts/ui/src/api/apiService.js +++ b/alerts/ui/src/api/apiService.js @@ -102,7 +102,7 @@ function ApiService(initialConfig) { ) if (config?.debug) - console.log( + console.debug( `ApiService::${config.serviceName || ""}: new config: `, config ) diff --git a/alerts/ui/src/components/AsyncWorker.jsx b/alerts/ui/src/components/AsyncWorker.jsx index c8a43c7d..c6a39b72 100644 --- a/alerts/ui/src/components/AsyncWorker.jsx +++ b/alerts/ui/src/components/AsyncWorker.jsx @@ -3,7 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from "react" import useCommunication from "../hooks/useCommunication" import useAlertmanagerAPI from "../hooks/useAlertmanagerAPI" import useUrlState from "../hooks/useUrlState" diff --git a/alerts/ui/src/components/alerts/AlertsList.jsx b/alerts/ui/src/components/alerts/AlertsList.jsx index 90732da3..0e690134 100644 --- a/alerts/ui/src/components/alerts/AlertsList.jsx +++ b/alerts/ui/src/components/alerts/AlertsList.jsx @@ -44,7 +44,7 @@ const AlertsList = () => { if (alertsIsLoading || isAddingItems) return if (observer.current) observer.current.disconnect() observer.current = new IntersectionObserver((entries) => { - console.log("IntersectionObserver: callback") + console.debug("IntersectionObserver: callback") if (entries[0].isIntersecting && visibleAmount <= alertsSorted.length) { // setVisibleAmount((prev) => prev + 10) clearTimeout(timeoutRef.current) diff --git a/alerts/ui/src/components/silences/SilenceScheduled.jsx b/alerts/ui/src/components/silences/SilenceScheduled.jsx index 46a42d09..288d6d14 100644 --- a/alerts/ui/src/components/silences/SilenceScheduled.jsx +++ b/alerts/ui/src/components/silences/SilenceScheduled.jsx @@ -115,7 +115,7 @@ const SilenceScheduled = (props) => { .then((data) => { setSuccess(data) - console.log("data", data) + console.debug("data", data) let newSilence = { ...silence, diff --git a/alerts/ui/src/helpers.js b/alerts/ui/src/helpers.js index 903721bc..c8d72a6e 100644 --- a/alerts/ui/src/helpers.js +++ b/alerts/ui/src/helpers.js @@ -13,7 +13,7 @@ export const parseError = (error) => { // check if the error is a object containing message if (typeof error === "object") { - console.log("Error parsing error message::object") + console.debug("Error parsing error message::object") if (error?.message) { errMsg = parseMessage(error?.message) } diff --git a/alerts/ui/src/hooks/useAlertmanagerAPI.js b/alerts/ui/src/hooks/useAlertmanagerAPI.js index 35c70751..505b7c1f 100644 --- a/alerts/ui/src/hooks/useAlertmanagerAPI.js +++ b/alerts/ui/src/hooks/useAlertmanagerAPI.js @@ -59,26 +59,26 @@ const useAlertmanagerAPI = (apiEndpoint) => { alertsWorker.then(({ createWorker, stopWorker }) => { const worker = createWorker() - console.log("Worker::Setting up ALERTS worker", worker) + console.debug("Worker::Setting up ALERTS worker", worker) // receive messages from worker worker.onmessage = (e) => { const action = e.data.action switch (action) { case "ALERTS_UPDATE": - console.log("Worker::ALERT_UPDATE::", e.data) + console.debug("Worker::ALERT_UPDATE::", e.data) setAlertsData({ items: e.data.alerts, counts: e.data.counts }) break case "ALERTS_FETCH_START": - console.log("Worker::ALERTS_FETCH_START::") + console.debug("Worker::ALERTS_FETCH_START::") setAlertsIsUpdating(true) break case "ALERTS_FETCH_END": - console.log("Worker::ALERTS_FETCH_END::") + console.debug("Worker::ALERTS_FETCH_END::") setAlertsIsUpdating(false) break case "ALERTS_FETCH_ERROR": - console.log("Worker::ALERTS_FETCH_ERROR::", e.data.error) + console.debug("Worker::ALERTS_FETCH_ERROR::", e.data.error) setAlertsIsUpdating(false) // error comes as object string and have to be parsed setAlertsError(e.data.error) @@ -87,21 +87,21 @@ const useAlertmanagerAPI = (apiEndpoint) => { } cleanupAlertsWorker = () => { - console.log("Worker::Terminating Alerts Worker") + console.debug("Worker::Terminating Alerts Worker") return stopWorker() } }) silencesWorker.then(({ createWorker, stopWorker }) => { const worker = createWorker() - console.log("Worker::Setting up SILENCES worker") + console.debug("Worker::Setting up SILENCES worker") // receive messages from worker worker.onmessage = (e) => { const action = e.data.action switch (action) { case "SILENCES_UPDATE": - console.log("Worker::SILENCES_UPDATE::", e.data) + console.debug("Worker::SILENCES_UPDATE::", e.data) setSilences({ items: e.data?.silences, itemsHash: e.data?.silencesHash, @@ -109,15 +109,15 @@ const useAlertmanagerAPI = (apiEndpoint) => { }) break case "SILENCES_FETCH_START": - console.log("Worker::SILENCES_FETCH_START::") + console.debug("Worker::SILENCES_FETCH_START::") setSilencesIsUpdating(true) break case "SILENCES_FETCH_END": - console.log("Worker::SILENCES_FETCH_END::") + console.debug("Worker::SILENCES_FETCH_END::") setSilencesIsUpdating(false) break case "SILENCES_FETCH_ERROR": - console.log("Worker::SILENCES_FETCH_ERROR::", e.data.error) + console.debug("Worker::SILENCES_FETCH_ERROR::", e.data.error) setSilencesIsUpdating(false) // error comes as object string and have to be parsed setSilencesError(e.data.error) @@ -126,7 +126,7 @@ const useAlertmanagerAPI = (apiEndpoint) => { } cleanupSilencesWorker = () => { - console.log("Worker::Terminating Silences Worker") + console.debug("Worker::Terminating Silences Worker") return stopWorker() } }) @@ -190,11 +190,11 @@ const useAlertmanagerAPI = (apiEndpoint) => { const localItems = useSilencesLocalItems() useEffect(() => { if (!localItems) return - // if we have no silences locally we don't need to refetch them otherwise + // if we have no silences locally we don't need to refetch them otherwise // we will end up in an infinite loop if (Object.keys(localItems).length <= 0) return - // Use setTimeout to delay the worker call delayed by 10s + // Use setTimeout to delay the worker call delayed by 10s setTimeout(() => { silencesWorker.then(({ createWorker, stopWorker }) => { const worker = createWorker() diff --git a/alerts/ui/src/hooks/useCommunication.js b/alerts/ui/src/hooks/useCommunication.js index 95de967e..ed118a12 100644 --- a/alerts/ui/src/hooks/useCommunication.js +++ b/alerts/ui/src/hooks/useCommunication.js @@ -3,15 +3,47 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { useEffect } from "react" +import { useEffect, useCallback } from "react" import { get, watch } from "@cloudoperators/juno-communicator" -import { useUserActivityActions, useAuthActions } from "./useAppStore" +import { + useUserActivityActions, + useAuthActions, + useActiveFilters, + useFilterActions, + useFilterLabels, +} from "./useAppStore" const useCommunication = () => { - console.log("[supernova] useCommunication setup") + console.debug("[supernova] useCommunication setup") const { setIsActive } = useUserActivityActions() - const { setData: authSetData, setAppLoaded: authSetAppLoaded } = - useAuthActions() + const { setData: authSetData } = useAuthActions() + const activeFilters = useActiveFilters() + const { setActiveFilters } = useFilterActions() + const filterLabels = useFilterLabels() + + const setAuthData = useCallback( + (data) => { + if (!data) return + + // set the auth data + authSetData(data) + + // The following code exists of historical reasons and should be refactored + // We preset the support group filter based on auth data. This should be done + // with predefined filters prop + + // check if support group filter is set in activeFilters + // activeFilters example: {support_group: Array(1)} + if ( + !activeFilters?.support_group && + data?.auth?.parsed?.supportGroups && + filterLabels?.includes("support_group") + ) { + setActiveFilters({ support_group: data.auth.parsed.supportGroups }) + } + }, + [authSetData, filterLabels] + ) useEffect(() => { // watch for user activity updates messages @@ -19,7 +51,7 @@ const useCommunication = () => { const unwatch = watch( "USER_ACTIVITY_UPDATE_DATA", (data) => { - console.log("got message USER_ACTIVITY_UPDATE_DATA: ", data) + console.debug("got message USER_ACTIVITY_UPDATE_DATA: ", data) setIsActive(data?.isActive) }, { debug: true } @@ -28,19 +60,16 @@ const useCommunication = () => { }, [setIsActive]) useEffect(() => { - if (!authSetData || !authSetAppLoaded) return - - get("AUTH_APP_LOADED", authSetAppLoaded) - const unwatchLoaded = watch("AUTH_APP_LOADED", authSetAppLoaded) + authSetData({ auth: { parsed: { fullName: "anonymous" } } }) + if (!setAuthData) return - get("AUTH_GET_DATA", authSetData) - const unwatchUpdate = watch("AUTH_UPDATE_DATA", authSetData) + get("AUTH_GET_DATA", setAuthData) + const unwatchUpdate = watch("AUTH_UPDATE_DATA", setAuthData) return () => { - if (unwatchLoaded) unwatchLoaded() if (unwatchUpdate) unwatchUpdate() } - }, [authSetData, authSetAppLoaded]) + }, [setAuthData]) } export default useCommunication diff --git a/alerts/ui/src/hooks/useUrlState.js b/alerts/ui/src/hooks/useUrlState.js index 08425a10..a5b6a77a 100644 --- a/alerts/ui/src/hooks/useUrlState.js +++ b/alerts/ui/src/hooks/useUrlState.js @@ -7,7 +7,6 @@ import { useLayoutEffect, useEffect, useState } from "react" import { registerConsumer } from "@cloudoperators/juno-url-state-provider-v1" import { useAuthLoggedIn, - useAuthData, useFilterLabels, useFilterActions, useActiveFilters, @@ -38,7 +37,6 @@ const SILENCE_DETAIL = "sd" const useUrlState = () => { const [isURLRead, setIsURLRead] = useState(false) const loggedIn = useAuthLoggedIn() - const authData = useAuthData() const { setActiveFilters, setPausedFilters, @@ -63,9 +61,9 @@ const useUrlState = () => { // useLayoutEffect so this is done before rendering anything useLayoutEffect(() => { // do not read the url state until the user is logged in and do it just once - if (!loggedIn || isURLRead) return + if (isURLRead) return - console.log( + console.debug( "SUPERNOVA:: setting up state from url with state::", urlStateManager.currentState() ) @@ -77,18 +75,6 @@ const useUrlState = () => { // check if there are active filters in the url state if (activeFiltersFromURL && Object.keys(activeFiltersFromURL).length > 0) { setActiveFilters(activeFiltersFromURL) - } else { - // otherwise set the support group filter - // we just add this default filter when no other filters are set via URL - const label = "support_group" - if ( - authData?.parsed?.supportGroups?.length > 0 && - filterLabels?.length > 0 && - filterLabels.includes(label) - ) { - // this will also trigger a filterItems() call from the store self - setActiveFilters({ [label]: authData.parsed.supportGroups }) - } } // get paused filters from url state and set it in store @@ -148,12 +134,12 @@ const useUrlState = () => { } setIsURLRead(true) - }, [loggedIn, isURLRead, authData, filterLabels]) + }, [isURLRead, filterLabels]) // sync URL with the desired states useEffect(() => { // do not synchronize the states until the url state is read and user logged in - if (!loggedIn || !isURLRead) return + if (!isURLRead) return // encode searchTerm before pushing it to the URL to avoid missinterpretation of special characters const encodedSearchTerm = btoa(searchTerm)