-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Adds a new component that combines all meta tags for OpenGraph - Refactors GroupedTestStatus to receive a precalculated status count in order to reuse it for the TreeDetails description - Refactors TestDetails so that it receives the testId directly instead of as a component parameter - Fixes buildDetails general section title to consider null configs - Adds a function that returns the culprit code of an issue as a string so that it can be used in the description Closes #935
- Loading branch information
1 parent
721571a
commit 7a231bc
Showing
21 changed files
with
633 additions
and
137 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains 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 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
53 changes: 53 additions & 0 deletions
53
dashboard/src/components/OpenGraphTags/BuildDetailsOGTags.tsx
This file contains 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,53 @@ | ||
| import type { JSX } from 'react'; | ||
| import { memo, useMemo } from 'react'; | ||
|
|
||
| import { useIntl } from 'react-intl'; | ||
|
|
||
| import { getBuildStatus } from '@/utils/utils'; | ||
| import type { TBuildDetails } from '@/types/tree/BuildDetails'; | ||
|
|
||
| import { OpenGraphTags } from './OpenGraphTags'; | ||
|
|
||
| const BuildDetailsOGTags = ({ | ||
| descriptionTitle, | ||
| tabTitle, | ||
| data, | ||
| }: { | ||
| descriptionTitle: string; | ||
| tabTitle: string; | ||
| data?: TBuildDetails; | ||
| }): JSX.Element => { | ||
| const { formatMessage } = useIntl(); | ||
|
|
||
| const buildDetailsDescription: string = useMemo(() => { | ||
| if (!data) { | ||
| return formatMessage({ id: 'buildDetails.buildDetails' }); | ||
| } | ||
|
|
||
| const statusDescription = | ||
| formatMessage({ id: 'global.status' }) + | ||
| ': ' + | ||
| getBuildStatus(data.valid).toUpperCase(); | ||
|
|
||
| const treeDescription = | ||
| formatMessage({ id: 'global.treeBranch' }) + | ||
| ': ' + | ||
| data.tree_name + | ||
| ' / ' + | ||
| data.git_repository_branch; | ||
|
|
||
| const descriptionChunks = [ | ||
| descriptionTitle, | ||
| statusDescription, | ||
| treeDescription, | ||
| ]; | ||
|
|
||
| return descriptionChunks.join(';\n'); | ||
| }, [descriptionTitle, data, formatMessage]); | ||
|
|
||
| return ( | ||
| <OpenGraphTags title={tabTitle} description={buildDetailsDescription} /> | ||
| ); | ||
| }; | ||
|
|
||
| export const MemoizedBuildDetailsOGTags = memo(BuildDetailsOGTags); |
51 changes: 51 additions & 0 deletions
51
dashboard/src/components/OpenGraphTags/IssueDetailsOGTags.tsx
This file contains 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,51 @@ | ||
| import { memo, useMemo, type JSX } from 'react'; | ||
|
|
||
| import { useIntl } from 'react-intl'; | ||
|
|
||
| import type { TIssueDetails } from '@/types/issueDetails'; | ||
|
|
||
| import { OpenGraphTags } from './OpenGraphTags'; | ||
|
|
||
| const IssueDetailsOGTags = ({ | ||
| title, | ||
| issueCulprit, | ||
| issueId, | ||
| data, | ||
| }: { | ||
| title: string; | ||
| issueCulprit: string; | ||
| issueId: string; | ||
| data?: TIssueDetails; | ||
| }): JSX.Element => { | ||
| const { formatMessage } = useIntl(); | ||
|
|
||
| const issueDetailsDescription: string = useMemo(() => { | ||
| if (!data) { | ||
| return formatMessage({ id: 'issueDetails.issueDetails' }); | ||
| } | ||
| const versionDescription = | ||
| formatMessage({ id: 'issueDetails.version' }) + ': ' + data?.version; | ||
|
|
||
| const culpritDescription = | ||
| formatMessage({ id: 'issueDetails.culpritTitle' }) + ': ' + issueCulprit; | ||
|
|
||
| const firstSeen = data.extra?.[issueId]?.first_incident.first_seen; | ||
| const firstSeenDescription = firstSeen | ||
| ? formatMessage({ id: 'issue.firstSeen' }) + | ||
| ': ' + | ||
| new Date(firstSeen).toLocaleDateString() | ||
| : ''; | ||
|
|
||
| const descriptionChunks = [ | ||
| versionDescription, | ||
| culpritDescription, | ||
| firstSeenDescription, | ||
| ].filter(chunk => chunk !== ''); | ||
|
|
||
| return descriptionChunks.join(';\n'); | ||
| }, [data, formatMessage, issueCulprit, issueId]); | ||
|
|
||
| return <OpenGraphTags title={title} description={issueDetailsDescription} />; | ||
| }; | ||
|
|
||
| export const MemoizedIssueDetailsOGTags = memo(IssueDetailsOGTags); |
This file contains 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,58 @@ | ||
| import type { JSX } from 'react'; | ||
| import { memo, useMemo } from 'react'; | ||
|
|
||
| import { useIntl } from 'react-intl'; | ||
|
|
||
| import type { PossibleMonitorPath } from '@/types/general'; | ||
| import type { MessagesKey } from '@/locales/messages'; | ||
|
|
||
| import { OpenGraphTags } from './OpenGraphTags'; | ||
|
|
||
| const ListingOGTags = ({ | ||
| monitor, | ||
| search, | ||
| }: { | ||
| monitor: PossibleMonitorPath; | ||
| search: string; | ||
| }): JSX.Element => { | ||
| const { formatMessage } = useIntl(); | ||
|
|
||
| const listingDescription = useMemo(() => { | ||
| let descriptionId: MessagesKey; | ||
|
|
||
| switch (monitor) { | ||
| case '/tree': | ||
| descriptionId = 'treeListing.description'; | ||
| break; | ||
| case '/hardware': | ||
| descriptionId = 'hardwareListing.description'; | ||
| break; | ||
| case '/issue': | ||
| descriptionId = 'issueListing.description'; | ||
| break; | ||
| } | ||
| return ( | ||
| formatMessage({ id: descriptionId }) + | ||
| (search !== '' | ||
| ? ';\n' + formatMessage({ id: 'global.search' }) + ': ' + search | ||
| : '') | ||
| ); | ||
| }, [formatMessage, monitor, search]); | ||
|
|
||
| const listingTitle = useMemo(() => { | ||
| switch (monitor) { | ||
| case '/tree': | ||
| return formatMessage({ id: 'treeListing.title' }); | ||
| case '/hardware': | ||
| return formatMessage({ id: 'hardwareListing.title' }); | ||
| case '/issue': | ||
| return formatMessage({ id: 'issueListing.title' }); | ||
| } | ||
| }, [formatMessage, monitor]); | ||
|
|
||
| return ( | ||
| <OpenGraphTags title={listingTitle} description={listingDescription} /> | ||
| ); | ||
| }; | ||
|
|
||
| export const MemoizedListingOGTags = memo(ListingOGTags); |
This file contains 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,29 @@ | ||
| import type { JSX } from 'react'; | ||
|
|
||
| export const OpenGraphTags = ({ | ||
| title, | ||
| url, | ||
| description, | ||
| imageUrl = 'https://dashboard.kernelci.org/kernelci-logo-card.png', | ||
| type = 'website', | ||
| }: { | ||
| title: string; | ||
| url?: string; | ||
| description: string; | ||
| imageUrl?: string; | ||
| type?: string; | ||
| }): JSX.Element => { | ||
| return ( | ||
| <> | ||
| <meta property="og:title" content={title} /> | ||
| <meta property="og:url" content={url ?? window.location.href} /> | ||
| <meta property="og:description" content={description} /> | ||
| <meta property="og:image" content={imageUrl} /> | ||
| <meta property="og:type" content={type} /> | ||
| <meta property="twitter:title" content={title} /> | ||
| <meta property="twitter:site" content={url ?? window.location.href} /> | ||
| <meta property="twitter:description" content={description} /> | ||
| <meta property="twitter:image" content={imageUrl} /> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.