-
Notifications
You must be signed in to change notification settings - Fork 1
feat(heureka): adds issue list to service image version details panel #869
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
b1a91e8
feat(heureka): adds issue list to service image version details panel
hodanoori 74e730e
Merge branch 'main' into hoda-heureka-issuues-table
hodanoori 7722934
chore(heureka): fixes conflicts and adds msg handling
hodanoori f2e0fc2
chore(heureka): adds missing license header
hodanoori 59feb3a
chore(heureka): adjusts code review comments
hodanoori 4f94b72
chore(heureka): adjusts grid layouting
hodanoori 4a8f785
chore(heureka): shows issue link when it is filled
hodanoori 2f17992
chore(heureka): adjusts code review comments
hodanoori bc199a4
chore(heureka): adds changeset
hodanoori ce97359
chore(heureka): adjusts code review comments
hodanoori 8dc0481
chore(heureka): deletes the duplicated useFetchIssues
hodanoori File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
95 changes: 95 additions & 0 deletions
95
...eka/src/components/Services/common/ImageVersionDetailsPanel/ImageVersionIssueListItem.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| /* | ||
| * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import React, { useState } from "react" | ||
| import { DataGridRow, DataGridCell, Badge, Stack } from "@cloudoperators/juno-ui-components" | ||
| import { Icon } from "@cloudoperators/juno-ui-components" | ||
| import { IssueIcon } from "../../../common/IssueIcon/IssueIcon" | ||
| import { IssueTimestamp } from "../../../common/IssueTimestamp/IssueTimestamp" | ||
|
|
||
| type Issue = { | ||
|
hodanoori marked this conversation as resolved.
Outdated
|
||
| severity: string | ||
| name: string | ||
| earliestTargetRemediation: string | ||
| description: string | ||
| sourceLink: string | ||
| } | ||
|
|
||
| const cellSeverityClasses = (severity: string) => { | ||
| let borderColor = "border-text-theme-default" | ||
| switch (severity.toLowerCase()) { | ||
|
hodanoori marked this conversation as resolved.
Outdated
|
||
| case "critical": | ||
| borderColor = "border-theme-danger" | ||
| break | ||
| case "high": | ||
| borderColor = "border-theme-warning" | ||
| break | ||
| case "medium": | ||
| borderColor = "border-theme-info" | ||
| break | ||
| } | ||
|
|
||
| return ` | ||
| border-l-2 | ||
| ${borderColor} | ||
| h-full | ||
| pl-5 | ||
| ` | ||
| } | ||
|
|
||
| type ImageVersionIssueListItemProps = { | ||
| issue: Issue | ||
| } | ||
|
|
||
| export const ImageVersionIssueListItem = ({ issue }: ImageVersionIssueListItemProps) => { | ||
| const [isExpanded, setIsExpanded] = useState(false) | ||
|
|
||
| const toggleDescription = (e: React.MouseEvent) => { | ||
| e.preventDefault() | ||
| setIsExpanded(!isExpanded) | ||
| } | ||
|
|
||
| return ( | ||
| <DataGridRow> | ||
| <DataGridCell className="pl-0"> | ||
| <div className={cellSeverityClasses(issue.severity)}> | ||
| <IssueIcon severity={issue.severity} /> | ||
| </div> | ||
| </DataGridCell> | ||
|
|
||
| <DataGridCell className="whitespace-nowrap"> | ||
| <Stack gap="2" direction="vertical"> | ||
| <span>{issue.name}</span> | ||
| <a href={issue.sourceLink} target="_blank" rel="noopener noreferrer" className="link-hover"> | ||
|
hodanoori marked this conversation as resolved.
Outdated
|
||
| <Stack gap="1.5" alignment="center"> | ||
| <Icon icon="openInNew" size="16" /> | ||
| <span>Issue source</span> | ||
| </Stack> | ||
| </a> | ||
| </Stack> | ||
| </DataGridCell> | ||
| <DataGridCell className="whitespace-nowrap"> | ||
| <IssueTimestamp targetDate={issue.earliestTargetRemediation} /> | ||
| </DataGridCell> | ||
| <DataGridCell> | ||
| {isExpanded ? ( | ||
|
hodanoori marked this conversation as resolved.
Outdated
|
||
| <Stack gap="2" direction="vertical"> | ||
| <span>{issue.description}</span> | ||
| <a href="#" onClick={toggleDescription} className="link-hover"> | ||
| Show less | ||
| </a> | ||
| </Stack> | ||
| ) : ( | ||
| <Stack gap="2" direction="vertical"> | ||
| <span>{issue.description.substring(0, 95)}...</span> | ||
| <a href="#" onClick={toggleDescription} className="link-hover"> | ||
| Show more | ||
| </a> | ||
| </Stack> | ||
| )} | ||
| </DataGridCell> | ||
| </DataGridRow> | ||
| ) | ||
| } | ||
59 changes: 59 additions & 0 deletions
59
...eureka/src/components/Services/common/ImageVersionDetailsPanel/ImageVersionIssuesList.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| /* | ||
| * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import React, { useEffect } from "react" | ||
| import { DataGrid, DataGridRow, DataGridHeadCell, Stack, Icon } from "@cloudoperators/juno-ui-components" | ||
| import { EmptyDataGridRow } from "../../../common/EmptyDataGridRow/EmptyDataGridRow" | ||
| import { useFetchServiceImageVersionIssues } from "../../useFetchServiceImageVersionIssues" | ||
| import { ImageVersionIssueListItem } from "./ImageVersionIssueListItem" | ||
| import { useActions as useMessageActions } from "@cloudoperators/juno-messages-provider" | ||
|
|
||
| type ImageVersionIssuesListProps = { | ||
| serviceCcrn: string | ||
| imageVersion: string | ||
| } | ||
|
|
||
| export const ImageVersionIssuesList = ({ serviceCcrn, imageVersion }: ImageVersionIssuesListProps) => { | ||
| const { addMessage } = useMessageActions() | ||
| const { | ||
| issues, | ||
| loading: isLoading, | ||
| error, | ||
| } = useFetchServiceImageVersionIssues({ | ||
| serviceCcrn, | ||
| imageVersion, | ||
| }) | ||
|
|
||
| useEffect(() => { | ||
| if (error) { | ||
| addMessage({ | ||
| variant: "error", | ||
| text: error, | ||
| }) | ||
| } | ||
| }, [error]) | ||
| return ( | ||
| <Stack gap="4" direction="vertical"> | ||
|
hodanoori marked this conversation as resolved.
Outdated
|
||
| <DataGrid columns={4} minContentColumns={[0, 1, 2]}> | ||
| <DataGridRow> | ||
| <DataGridHeadCell> | ||
| <Icon icon="monitorHeart" /> | ||
| </DataGridHeadCell> | ||
| <DataGridHeadCell>Issue</DataGridHeadCell> | ||
| <DataGridHeadCell>Target Date</DataGridHeadCell> | ||
| <DataGridHeadCell>Description</DataGridHeadCell> | ||
| </DataGridRow> | ||
|
|
||
| {isLoading ? ( | ||
| <EmptyDataGridRow colSpan={4}>Loading issues...</EmptyDataGridRow> | ||
| ) : issues.length === 0 ? ( | ||
| <EmptyDataGridRow colSpan={4}>No issues found.</EmptyDataGridRow> | ||
| ) : ( | ||
| !error && issues.map((issue, index) => <ImageVersionIssueListItem key={index} issue={issue} />) | ||
| )} | ||
| </DataGrid> | ||
| </Stack> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.