From 675bba9ad828238311121b1b273c1fc73fe59ce3 Mon Sep 17 00:00:00 2001 From: d065895 Date: Tue, 24 Sep 2024 16:42:40 +0200 Subject: [PATCH 01/10] feat(heureka): separates total count and page info from main data request --- .../src/components/filters/FilterSelect.jsx | 5 +- .../src/components/shared/ListController.jsx | 48 +++++-- apps/heureka/src/hooks/useQueryClientFn.js | 45 ++++-- apps/heureka/src/lib/queries/components.js | 62 +++++++- apps/heureka/src/lib/queries/issueMatches.js | 132 ++++++++++++++++- apps/heureka/src/lib/queries/services.js | 134 +++++++++++++++++- 6 files changed, 400 insertions(+), 26 deletions(-) diff --git a/apps/heureka/src/components/filters/FilterSelect.jsx b/apps/heureka/src/components/filters/FilterSelect.jsx index 48253e3f5..1259443ed 100644 --- a/apps/heureka/src/components/filters/FilterSelect.jsx +++ b/apps/heureka/src/components/filters/FilterSelect.jsx @@ -50,8 +50,9 @@ const FilterSelect = ({ entityName, isLoading, filterLabels, filterLabelValues, disabled={!filterLabelValues[filterLabel]?.length} className="filter-value-select w-96 bg-theme-background-lvl-0" > - {filterLabelValues[filterLabel] //Ensure already selected values are not displayed in filterValue drop down to avoid duplicate selections - ?.filter((value) => !activeFilters[filterLabel]?.includes(value)) // Filter out values that are already active + {/* Ensure already selected values are not displayed in filterValue drop down */} + {filterLabelValues?.[filterLabel] // Safely access filterLabelValues + ?.filter((value) => !activeFilters?.[filterLabel]?.includes(value)) // Safely access activeFilters and filter out already active values .map((value) => ( ))} diff --git a/apps/heureka/src/components/shared/ListController.jsx b/apps/heureka/src/components/shared/ListController.jsx index 93cd29652..67f98744a 100644 --- a/apps/heureka/src/components/shared/ListController.jsx +++ b/apps/heureka/src/components/shared/ListController.jsx @@ -18,9 +18,33 @@ const ListController = ({ queryKey, entityName, ListComponent, activeFilters, se const { addMessage, resetMessages } = messageActions() const activeNavEntry = useGlobalsActiveNavEntry() - const { isLoading, data, error } = useQuery({ + // Fetch view main data + const { + isLoading: isLoadingMain, + data: mainData, + error: mainError, + } = useQuery({ queryKey: [ - queryKey, + `${queryKey}Main`, + { + ...queryOptions, + filter: { + ...activeFilters, + ...(!!enableSearchAndFilter && searchTerm && searchTerm.length > 0 && { search: searchTerm }), + }, + }, + ], + enabled: !!queryClientFnReady && queryKey === activeNavEntry, + }) + + // Fetch view count and pageInfo + const { + isLoading: isLoadingCount, + data: countData, + error: countError, + } = useQuery({ + queryKey: [ + `${queryKey}Count`, { ...queryOptions, filter: { @@ -35,22 +59,22 @@ const ListController = ({ queryKey, entityName, ListComponent, activeFilters, se const [currentPage, setCurrentPage] = useState(1) const items = useMemo(() => { - if (!data) return null - return data?.[entityName]?.edges || [] - }, [data, entityName]) + if (!mainData) return null + return mainData?.[entityName]?.edges || [] + }, [mainData, entityName]) useEffect(() => { - if (!error) return resetMessages() + if (!mainError && !countError) return resetMessages() addMessage({ variant: "error", - text: parseError(error), + text: parseError(mainError || countError), }) - }, [error, addMessage, resetMessages]) + }, [mainError, countError, addMessage, resetMessages]) const pageInfo = useMemo(() => { - if (!data) return null - return data?.[entityName]?.pageInfo - }, [data, entityName]) + if (!countData) return null + return countData?.[entityName]?.pageInfo + }, [countData, entityName]) const totalPages = useMemo(() => { if (!pageInfo?.pages) return 0 @@ -74,7 +98,7 @@ const ListController = ({ queryKey, entityName, ListComponent, activeFilters, se return ( <> - + { useEffect(() => { if (!queryClient || !endpoint) return - queryClient.setQueryDefaults(["Services"], { + // Services main query + queryClient.setQueryDefaults(["ServicesMain"], { queryFn: async ({ queryKey }) => { const [_key, options] = queryKey - return await request(endpoint, servicesQuery(), options) + return await request(endpoint, servicesMainQuery(), options) }, }) - queryClient.setQueryDefaults(["IssueMatches"], { + // Services count query (for totalCount and pageInfo) + queryClient.setQueryDefaults(["ServicesCount"], { queryFn: async ({ queryKey }) => { const [_key, options] = queryKey - return await request(endpoint, issueMatchesQuery(), options) + return await request(endpoint, servicesCountQuery(), options) }, }) - queryClient.setQueryDefaults(["Components"], { + // Components main query + queryClient.setQueryDefaults(["ComponentsMain"], { queryFn: async ({ queryKey }) => { const [_key, options] = queryKey - return await request(endpoint, componentsQuery(), options) + return await request(endpoint, componentsMainQuery(), options) + }, + }) + + // Components count query (for totalCount and pageInfo) + queryClient.setQueryDefaults(["ComponentsCount"], { + queryFn: async ({ queryKey }) => { + const [_key, options] = queryKey + return await request(endpoint, componentsCountQuery(), options) + }, + }) + + // Main IssueMatches query + queryClient.setQueryDefaults(["IssueMatchesMain"], { + queryFn: async ({ queryKey }) => { + const [_key, options] = queryKey + return await request(endpoint, issueMatchesMainQuery(), options) + }, + }) + + // IssueMatches count query (for totalCount and pageInfo) + queryClient.setQueryDefaults(["IssueMatchesCount"], { + queryFn: async ({ queryKey }) => { + const [_key, options] = queryKey + return await request(endpoint, issueMatchesCountQuery(), options) }, }) diff --git a/apps/heureka/src/lib/queries/components.js b/apps/heureka/src/lib/queries/components.js index f39041f0e..24e10f140 100644 --- a/apps/heureka/src/lib/queries/components.js +++ b/apps/heureka/src/lib/queries/components.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { gql } from "graphql-request" +/*import { gql } from "graphql-request" // gql // It is there for convenience so that you can get the tooling support @@ -57,4 +57,64 @@ export default () => gql` } } } +`*/ +import { gql } from "graphql-request" + +// Main query for fetching Components data (excluding totalCount and pageInfo) +export const componentsMainQuery = () => gql` + query ($filter: ComponentFilter, $first: Int, $after: String) { + Components(filter: $filter, first: $first, after: $after) { + edges { + node { + id + name + type + componentVersions { + totalCount + edges { + node { + id + version + issues { + totalCount + } + componentInstances { + totalCount + edges { + node { + id + } + } + } + } + cursor + } + } + } + cursor + } + } + } +` + +// Count query for fetching totalCount and pageInfo for Components +export const componentsCountQuery = () => gql` + query ($filter: ComponentFilter, $first: Int, $after: String) { + Components(filter: $filter, first: $first, after: $after) { + totalCount + pageInfo { + hasNextPage + hasPreviousPage + isValidPage + pageNumber + nextPageAfter + pages { + after + isCurrent + pageNumber + pageCount + } + } + } + } ` diff --git a/apps/heureka/src/lib/queries/issueMatches.js b/apps/heureka/src/lib/queries/issueMatches.js index 04b4e36d6..4188b43f8 100644 --- a/apps/heureka/src/lib/queries/issueMatches.js +++ b/apps/heureka/src/lib/queries/issueMatches.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { gql } from "graphql-request" +/*import { gql } from "graphql-request" // gql // It is there for convenience so that you can get the tooling support @@ -126,4 +126,134 @@ export default () => gql` } } } +`*/ +import { gql } from "graphql-request" + +// Main query for fetching IssueMatches data excluding totalCount and pageInfo +export const issueMatchesMainQuery = () => gql` + query ($filter: IssueMatchFilter, $first: Int, $after: String) { + IssueMatches(filter: $filter, first: $first, after: $after) { + __typename + edges { + node { + id + status + remediationDate + discoveryDate + targetRemediationDate + severity { + value + score + } + effectiveIssueVariants { + edges { + node { + id + secondaryName + description + } + } + } + evidences { + totalCount + edges { + node { + id + description + } + cursor + } + pageInfo { + hasNextPage + nextPageAfter + } + } + issueId + issue { + id + primaryName + lastModified + type + } + componentInstanceId + componentInstance { + id + ccrn + count + componentVersion { + version + component { + name + } + } + service { + name + owners { + totalCount + edges { + node { + id + uniqueUserId + name + } + cursor + } + pageInfo { + hasNextPage + nextPageAfter + } + } + supportGroups { + edges { + node { + name + } + } + } + } + } + issueMatchChanges { + totalCount + edges { + node { + id + action + issueMatchId + activityId + } + cursor + } + pageInfo { + hasNextPage + nextPageAfter + } + } + } + cursor + } + } + } +` + +// Separate query for fetching totalCount and pageInfo only +export const issueMatchesCountQuery = () => gql` + query ($filter: IssueMatchFilter, $first: Int, $after: String) { + IssueMatches(filter: $filter, first: $first, after: $after) { + __typename + totalCount + pageInfo { + hasNextPage + hasPreviousPage + isValidPage + pageNumber + nextPageAfter + pages { + after + isCurrent + pageNumber + pageCount + } + } + } + } ` diff --git a/apps/heureka/src/lib/queries/services.js b/apps/heureka/src/lib/queries/services.js index 09129eae1..4c71196cf 100644 --- a/apps/heureka/src/lib/queries/services.js +++ b/apps/heureka/src/lib/queries/services.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { gql } from "graphql-request" +/*import { gql } from "graphql-request" // gql // It is there for convenience so that you can get the tooling support @@ -130,3 +130,135 @@ export default () => gql` } } ` +*/ +import { gql } from "graphql-request" + +// Main query for fetching Services data (excluding totalCount and pageInfo) +export const servicesMainQuery = () => gql` + query ($filter: ServiceFilter, $first: Int, $after: String) { + Services(filter: $filter, first: $first, after: $after) { + edges { + node { + id + name + owners { + totalCount + edges { + node { + id + uniqueUserId + name + } + cursor + } + pageInfo { + hasNextPage + nextPageAfter + } + } + supportGroups { + totalCount + edges { + node { + id + name + } + cursor + } + pageInfo { + hasNextPage + nextPageAfter + } + } + activities { + totalCount + edges { + node { + id + } + cursor + } + pageInfo { + hasNextPage + nextPageAfter + } + } + componentInstances { + edges { + node { + id + ccrn + count + componentVersion { + version + component { + name + } + } + issueMatches { + totalCount + edges { + node { + id + severity { + value + score + } + issue { + id + primaryName + } + } + } + } + } + } + } + issueRepositories { + totalCount + edges { + node { + id + name + url + created_at + updated_at + } + cursor + priority + created_at + updated_at + } + pageInfo { + hasNextPage + nextPageAfter + } + } + } + cursor + } + } + } +` + +// Count query for fetching totalCount and pageInfo for Services +export const servicesCountQuery = () => gql` + query ($filter: ServiceFilter, $first: Int, $after: String) { + Services(filter: $filter, first: $first, after: $after) { + totalCount + pageInfo { + hasNextPage + hasPreviousPage + isValidPage + pageNumber + nextPageAfter + pages { + after + isCurrent + pageNumber + pageCount + } + } + } + } +` From 70aaa5515b69e2b5d435eaa798aa7be2c64e7393 Mon Sep 17 00:00:00 2001 From: d065895 Date: Tue, 24 Sep 2024 17:25:46 +0200 Subject: [PATCH 02/10] fix(heureka): deletes the commented code --- apps/heureka/src/lib/queries/components.js | 53 +------- apps/heureka/src/lib/queries/issueMatches.js | 122 +----------------- apps/heureka/src/lib/queries/services.js | 126 +------------------ 3 files changed, 3 insertions(+), 298 deletions(-) diff --git a/apps/heureka/src/lib/queries/components.js b/apps/heureka/src/lib/queries/components.js index 24e10f140..a3bea8e14 100644 --- a/apps/heureka/src/lib/queries/components.js +++ b/apps/heureka/src/lib/queries/components.js @@ -3,62 +3,11 @@ * SPDX-License-Identifier: Apache-2.0 */ -/*import { gql } from "graphql-request" - +import { gql } from "graphql-request" // gql // It is there for convenience so that you can get the tooling support // like prettier formatting and IDE syntax highlighting. // You can use gql from graphql-tag if you need it for some reason too. -export default () => gql` - query ($filter: ComponentFilter, $first: Int, $after: String) { - Components(filter: $filter, first: $first, after: $after) { - totalCount - edges { - node { - id - name - type - componentVersions { - totalCount - edges { - node { - id - version - issues { - totalCount - } - componentInstances { - totalCount - edges { - node { - id - } - } - } - } - cursor - } - } - } - cursor - } - pageInfo { - hasNextPage - hasPreviousPage - isValidPage - pageNumber - nextPageAfter - pages { - after - isCurrent - pageNumber - pageCount - } - } - } - } -`*/ -import { gql } from "graphql-request" // Main query for fetching Components data (excluding totalCount and pageInfo) export const componentsMainQuery = () => gql` diff --git a/apps/heureka/src/lib/queries/issueMatches.js b/apps/heureka/src/lib/queries/issueMatches.js index 4188b43f8..459c03bec 100644 --- a/apps/heureka/src/lib/queries/issueMatches.js +++ b/apps/heureka/src/lib/queries/issueMatches.js @@ -3,131 +3,11 @@ * SPDX-License-Identifier: Apache-2.0 */ -/*import { gql } from "graphql-request" - +import { gql } from "graphql-request" // gql // It is there for convenience so that you can get the tooling support // like prettier formatting and IDE syntax highlighting. // You can use gql from graphql-tag if you need it for some reason too. -export default () => gql` - query ($filter: IssueMatchFilter, $first: Int, $after: String) { - IssueMatches(filter: $filter, first: $first, after: $after) { - __typename - totalCount - edges { - node { - id - status - remediationDate - discoveryDate - targetRemediationDate - severity { - value - score - } - effectiveIssueVariants { - edges { - node { - id - secondaryName - description - } - } - } - evidences { - totalCount - edges { - node { - id - description - } - cursor - } - pageInfo { - hasNextPage - nextPageAfter - } - } - issueId - issue { - id - primaryName - lastModified - type - } - componentInstanceId - componentInstance { - id - ccrn - count - componentVersion { - version - component { - name - } - } - service { - name - owners { - totalCount - edges { - node { - id - uniqueUserId - name - } - cursor - } - pageInfo { - hasNextPage - nextPageAfter - } - } - supportGroups { - edges { - node { - name - } - } - } - } - } - issueMatchChanges { - totalCount - edges { - node { - id - action - issueMatchId - activityId - } - cursor - } - pageInfo { - hasNextPage - nextPageAfter - } - } - } - cursor - } - pageInfo { - hasNextPage - hasPreviousPage - isValidPage - pageNumber - nextPageAfter - pages { - after - isCurrent - pageNumber - pageCount - } - } - } - } -`*/ -import { gql } from "graphql-request" // Main query for fetching IssueMatches data excluding totalCount and pageInfo export const issueMatchesMainQuery = () => gql` diff --git a/apps/heureka/src/lib/queries/services.js b/apps/heureka/src/lib/queries/services.js index 4c71196cf..5d9cd7e7c 100644 --- a/apps/heureka/src/lib/queries/services.js +++ b/apps/heureka/src/lib/queries/services.js @@ -3,135 +3,11 @@ * SPDX-License-Identifier: Apache-2.0 */ -/*import { gql } from "graphql-request" - +import { gql } from "graphql-request" // gql // It is there for convenience so that you can get the tooling support // like prettier formatting and IDE syntax highlighting. // You can use gql from graphql-tag if you need it for some reason too. -export default () => gql` - query ($filter: ServiceFilter, $first: Int, $after: String) { - Services(filter: $filter, first: $first, after: $after) { - __typename - totalCount - edges { - node { - id - name - owners { - totalCount - edges { - node { - id - uniqueUserId - name - } - cursor - } - pageInfo { - hasNextPage - nextPageAfter - } - } - supportGroups { - totalCount - edges { - node { - id - name - } - cursor - } - pageInfo { - hasNextPage - nextPageAfter - } - } - activities { - totalCount - edges { - node { - id - } - cursor - } - pageInfo { - hasNextPage - nextPageAfter - } - } - componentInstances { - edges { - node { - id - ccrn - count - componentVersion { - version - component { - name - } - } - issueMatches { - totalCount - edges { - node { - id - severity { - value - score - } - issue { - id - primaryName - } - } - } - } - } - } - } - issueRepositories { - totalCount - edges { - node { - id - name - url - created_at - updated_at - } - cursor - priority - created_at - updated_at - } - pageInfo { - hasNextPage - nextPageAfter - } - } - } - cursor - } - pageInfo { - hasNextPage - hasPreviousPage - isValidPage - pageNumber - nextPageAfter - pages { - after - isCurrent - pageNumber - pageCount - } - } - } - } -` -*/ -import { gql } from "graphql-request" // Main query for fetching Services data (excluding totalCount and pageInfo) export const servicesMainQuery = () => gql` From 4c25b3e7a86f2eec3f73e0395f624765440e2ceb Mon Sep 17 00:00:00 2001 From: d065895 Date: Tue, 24 Sep 2024 17:59:10 +0200 Subject: [PATCH 03/10] chore(heureka): adds changeset --- .changeset/kind-tigers-dream.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/kind-tigers-dream.md diff --git a/.changeset/kind-tigers-dream.md b/.changeset/kind-tigers-dream.md new file mode 100644 index 000000000..ac839544a --- /dev/null +++ b/.changeset/kind-tigers-dream.md @@ -0,0 +1,5 @@ +--- +"@cloudoperators/juno-app-heureka": minor +--- + +split fetch request: separates total count and page info from main data request From 7f2497a99ed95f806d571d78e6c31d95f0ea5338 Mon Sep 17 00:00:00 2001 From: d065895 Date: Wed, 25 Sep 2024 06:42:26 +0200 Subject: [PATCH 04/10] chore(heureka): adjusts queries on details pages --- .../heureka/src/components/issueMatches/IssueMatchesDetails.jsx | 2 +- apps/heureka/src/components/services/ServicesDetails.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/heureka/src/components/issueMatches/IssueMatchesDetails.jsx b/apps/heureka/src/components/issueMatches/IssueMatchesDetails.jsx index 2488ae501..e112be292 100644 --- a/apps/heureka/src/components/issueMatches/IssueMatchesDetails.jsx +++ b/apps/heureka/src/components/issueMatches/IssueMatchesDetails.jsx @@ -16,7 +16,7 @@ const IssueMatchesDetails = () => { const queryClientFnReady = useGlobalsQueryClientFnReady() const issueElem = useQuery({ - queryKey: ["IssueMatches", { filter: { id: [showIssueDetail] } }], + queryKey: ["IssueMatchesMain", { filter: { id: [showIssueDetail] } }], enabled: !!queryClientFnReady, }) const issue = useMemo(() => { diff --git a/apps/heureka/src/components/services/ServicesDetails.jsx b/apps/heureka/src/components/services/ServicesDetails.jsx index 278da98ae..2b1108727 100644 --- a/apps/heureka/src/components/services/ServicesDetails.jsx +++ b/apps/heureka/src/components/services/ServicesDetails.jsx @@ -31,7 +31,7 @@ const ServicesDetail = () => { const { addMessage, resetMessages } = messageActions() const serviceElem = useQuery({ - queryKey: ["Services", { filter: { serviceName: [showServiceDetail] } }], + queryKey: ["ServicesMain", { filter: { serviceName: [showServiceDetail] } }], enabled: !!queryClientFnReady, }) From e08079725456cf55f48d29e18d283bb2c05a99a6 Mon Sep 17 00:00:00 2001 From: hodanoori <107242553+hodanoori@users.noreply.github.com> Date: Wed, 25 Sep 2024 06:44:52 +0200 Subject: [PATCH 05/10] Update kind-tigers-dream.md --- .changeset/kind-tigers-dream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/kind-tigers-dream.md b/.changeset/kind-tigers-dream.md index ac839544a..9152d009c 100644 --- a/.changeset/kind-tigers-dream.md +++ b/.changeset/kind-tigers-dream.md @@ -2,4 +2,4 @@ "@cloudoperators/juno-app-heureka": minor --- -split fetch request: separates total count and page info from main data request +split fetch request to improve performance: separates total count and page info from main data request From ba33c9a91b96310e33081fea3398e029ff507cb7 Mon Sep 17 00:00:00 2001 From: d065895 Date: Wed, 25 Sep 2024 07:12:12 +0200 Subject: [PATCH 06/10] chore(heureka): hides the panel after switching --- .../heureka/src/components/navEntries/NavEntryContext.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/heureka/src/components/navEntries/NavEntryContext.jsx b/apps/heureka/src/components/navEntries/NavEntryContext.jsx index eb7fef70c..d3d790125 100644 --- a/apps/heureka/src/components/navEntries/NavEntryContext.jsx +++ b/apps/heureka/src/components/navEntries/NavEntryContext.jsx @@ -11,6 +11,7 @@ import { useGlobalsActions, useGlobalsActiveNavEntry } from "../../hooks/useAppS import ServicesView from "../services/ServicesView" import IssueMatchesView from "../issueMatches/IssueMatchesView" import ComponentsView from "../components/ComponentsView" +import constants from "../shared/constants" const NAV_CONFIG = [ { @@ -34,7 +35,7 @@ const NAV_CONFIG = [ ] const NavEntryContext = () => { - const { setActiveNavEntry } = useGlobalsActions() + const { setActiveNavEntry, setShowPanel } = useGlobalsActions() const activeNavEntry = useGlobalsActiveNavEntry() // Memorized top navigation items @@ -45,7 +46,10 @@ const NavEntryContext = () => { key={nav.value} label={nav.label} active={activeNavEntry === nav.value} // Set the active item - onClick={() => setActiveNavEntry(nav.value)} // Trigger tab change + onClick={() => { + setActiveNavEntry(nav.value) // Trigger tab change + setShowPanel(constants.PANEL_NONE) // Hide the panel after switching + }} /> )), [activeNavEntry, setActiveNavEntry] From df0ec9e7a4e7bdc3f6b7c7ef06badb72ee3f79d2 Mon Sep 17 00:00:00 2001 From: d065895 Date: Wed, 25 Sep 2024 09:28:29 +0200 Subject: [PATCH 07/10] feat(heureka): adds ccrn to issueMatches list and desc to its details panel --- .../src/components/issueMatches/IssueMatchesDetails.jsx | 7 +++++++ .../src/components/issueMatches/IssueMatchesList.jsx | 8 ++++---- .../src/components/issueMatches/IssueMatchesListItem.jsx | 7 +------ apps/heureka/src/hooks/useUrlState.js | 6 +++--- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/apps/heureka/src/components/issueMatches/IssueMatchesDetails.jsx b/apps/heureka/src/components/issueMatches/IssueMatchesDetails.jsx index e112be292..5ccd6a7f2 100644 --- a/apps/heureka/src/components/issueMatches/IssueMatchesDetails.jsx +++ b/apps/heureka/src/components/issueMatches/IssueMatchesDetails.jsx @@ -36,6 +36,13 @@ const IssueMatchesDetails = () => { + + Description + + {/* // Take description from the first issueVariant, because if there are multiple, they have the same priority (edge case). */} + + + Target Remediation Date diff --git a/apps/heureka/src/components/issueMatches/IssueMatchesList.jsx b/apps/heureka/src/components/issueMatches/IssueMatchesList.jsx index ae3678b02..6ec750705 100644 --- a/apps/heureka/src/components/issueMatches/IssueMatchesList.jsx +++ b/apps/heureka/src/components/issueMatches/IssueMatchesList.jsx @@ -13,10 +13,10 @@ const IssueMatchesList = ({ items, isLoading }) => { return ( <> {/* clickableTable Table allow changes the background by css when hovering or active*/} - + Primary Name - {/* Secondary Name */} + CCRN Target Remediation Date Status Severity @@ -25,7 +25,7 @@ const IssueMatchesList = ({ items, isLoading }) => { {isLoading && !items ? ( - + @@ -39,7 +39,7 @@ const IssueMatchesList = ({ items, isLoading }) => { ) : ( - + diff --git a/apps/heureka/src/components/issueMatches/IssueMatchesListItem.jsx b/apps/heureka/src/components/issueMatches/IssueMatchesListItem.jsx index 643896606..3815b3696 100644 --- a/apps/heureka/src/components/issueMatches/IssueMatchesListItem.jsx +++ b/apps/heureka/src/components/issueMatches/IssueMatchesListItem.jsx @@ -34,12 +34,7 @@ const IssueMatchesListItem = ({ item }) => { onClick={() => handleClick()} > {item?.node?.issue?.primaryName} - {/* - {listOfCommaSeparatedObjs( - item?.node?.effectiveIssueVariants, - "secondaryName" - )} - */} + {item?.node?.componentInstance?.ccrn} {formatDate(item?.node?.targetRemediationDate)} {item?.node?.status} {item?.node?.severity?.value} diff --git a/apps/heureka/src/hooks/useUrlState.js b/apps/heureka/src/hooks/useUrlState.js index d14c178e4..8467e6228 100644 --- a/apps/heureka/src/hooks/useUrlState.js +++ b/apps/heureka/src/hooks/useUrlState.js @@ -22,7 +22,7 @@ const useUrlState = () => { const { setFiltersFromURL, syncFiltersWithURL } = useFilterActions() const activeNavEntry = useGlobalsActiveNavEntry() - const { setShowDetailsFor, setActiveNavEntry } = useGlobalsActions() + const { setShowPanel, setActiveNavEntry } = useGlobalsActions() const detailsFor = useGlobalsShowPanel() // Set initial state from URL (on login) @@ -32,7 +32,7 @@ const useUrlState = () => { const urlState = urlStateManager.currentState() if (urlState) { setFiltersFromURL(urlState[constants.ACTIVE_FILTERS], urlState[constants.SEARCH_TERM]) - if (urlState[constants.DETAILS_FOR]) setShowDetailsFor(urlState[constants.DETAILS_FOR]) + if (urlState[constants.DETAILS_FOR]) setShowPanel(urlState[constants.DETAILS_FOR]) if (urlState[constants.ACTIVE_NAV]) setActiveNavEntry(urlState[constants.ACTIVE_NAV]) } @@ -53,7 +53,7 @@ const useUrlState = () => { useEffect(() => { const unregisterStateListener = urlStateManager.onChange((state) => { setFiltersFromURL(state?.[constants.ACTIVE_FILTERS], state?.[constants.SEARCH_TERM]) - setShowDetailsFor(state?.[constants.DETAILS_FOR]) + setShowPanel(state?.[constants.DETAILS_FOR]) setActiveNavEntry(state?.[constants.ACTIVE_NAV]) }) From 89ba528e51746fd8fe04ffc947e976aa3c2ac48c Mon Sep 17 00:00:00 2001 From: d065895 Date: Wed, 25 Sep 2024 10:43:17 +0200 Subject: [PATCH 08/10] chore(heureka): adds variables based on code review comments --- .../src/components/filters/FilterSelect.jsx | 14 ++++++++------ .../issueMatches/IssueMatchesDetails.jsx | 7 ++++--- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/apps/heureka/src/components/filters/FilterSelect.jsx b/apps/heureka/src/components/filters/FilterSelect.jsx index 1259443ed..17ea82c6f 100644 --- a/apps/heureka/src/components/filters/FilterSelect.jsx +++ b/apps/heureka/src/components/filters/FilterSelect.jsx @@ -28,6 +28,11 @@ const FilterSelect = ({ entityName, isLoading, filterLabels, filterLabelValues, handleFilterAdd(value) } + // Define filter options by filtering out already selected values + const filterOptions = filterLabelValues?.[filterLabel]?.filter( + (value) => !activeFilters?.[filterLabel]?.includes(value) + ) + return ( @@ -50,12 +55,9 @@ const FilterSelect = ({ entityName, isLoading, filterLabels, filterLabelValues, disabled={!filterLabelValues[filterLabel]?.length} className="filter-value-select w-96 bg-theme-background-lvl-0" > - {/* Ensure already selected values are not displayed in filterValue drop down */} - {filterLabelValues?.[filterLabel] // Safely access filterLabelValues - ?.filter((value) => !activeFilters?.[filterLabel]?.includes(value)) // Safely access activeFilters and filter out already active values - .map((value) => ( - - ))} + {filterOptions?.map((value) => ( + + ))}