diff --git a/frontend-config.json b/frontend-config.json index 2bc53ad4..5d421989 100644 --- a/frontend-config.json +++ b/frontend-config.json @@ -8,4 +8,4 @@ "issuerUrl": "issuer-url", "scopes": [] } -} \ No newline at end of file +} diff --git a/public/locales/en.json b/public/locales/en.json index 3a36410d..d81e383e 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -62,7 +62,14 @@ "typeHeader": "Type", "messageHeader": "Message", "reasonHeader": "Reason", - "transitionHeader": "Last transition time" + "transitionHeader": "Last transition time", + "createSupportTicketButton": "Create Support Ticket", + "supportTicketTitleReady": "MCP Ready", + "supportTicketTitleNotReady": "MCP Not Ready", + "supportTicketTitleDeletion": "MCP in Deletion", + "supportTicketTitleIssues": "Issues with Control Plane", + "statusDetailsLabel": "MCP Status", + "detailsLabel": "Details:" }, "CopyKubeconfigButton": { "copiedMessage": "Copied to Clipboard", diff --git a/src/components/ControlPlane/MCPHealthPopoverButton.tsx b/src/components/ControlPlane/MCPHealthPopoverButton.tsx index e99b7c16..373601f3 100644 --- a/src/components/ControlPlane/MCPHealthPopoverButton.tsx +++ b/src/components/ControlPlane/MCPHealthPopoverButton.tsx @@ -1,4 +1,11 @@ -import { AnalyticalTable, Icon, Popover } from '@ui5/webcomponents-react'; +import { + AnalyticalTable, + Icon, + Popover, + FlexBox, + FlexBoxJustifyContent, + Button, +} from '@ui5/webcomponents-react'; import { AnalyticalTableColumnDefinition } from '@ui5/webcomponents-react/wrappers'; import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'; import '@ui5/webcomponents-icons/dist/copy'; @@ -10,14 +17,21 @@ import { import ReactTimeAgo from 'react-time-ago'; import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx'; import { useTranslation } from 'react-i18next'; - +import { useFrontendConfig } from '../../context/FrontendConfigContext.tsx'; export default function MCPHealthPopoverButton({ mcpStatus, + projectName, + workspaceName, + mcpName, }: { mcpStatus: ControlPlaneStatusType | undefined; + projectName: string; + workspaceName: string; + mcpName: string; }) { const popoverRef = useRef(null); const [open, setOpen] = useState(false); + const { links } = useFrontendConfig(); const { t } = useTranslation(); @@ -31,6 +45,46 @@ export default function MCPHealthPopoverButton({ } }; + const getTicketTitle = () => { + switch (mcpStatus?.status) { + case ReadyStatus.Ready: + return t('MCPHealthPopoverButton.supportTicketTitleReady'); + case ReadyStatus.NotReady: + return t('MCPHealthPopoverButton.supportTicketTitleNotReady'); + case ReadyStatus.InDeletion: + return t('MCPHealthPopoverButton.supportTicketTitleDeletion'); + default: + return t('MCPHealthPopoverButton.supportTicketTitleIssues'); + } + }; + + const constructGithubIssuesLink = () => { + const clusterDetails = `${projectName}/${workspaceName}/${mcpName}`; + + const statusDetails = mcpStatus?.conditions + ? `${t('MCPHealthPopoverButton.statusDetailsLabel')}: ${mcpStatus.status}\n\n${t('MCPHealthPopoverButton.detailsLabel')}\n` + + mcpStatus.conditions + .map((condition) => { + let text = `- ${condition.type}: ${condition.status}\n`; + if (condition.reason) + text += ` - ${t('MCPHealthPopoverButton.reasonHeader')}: ${condition.reason}\n`; + if (condition.message) + text += ` - ${t('MCPHealthPopoverButton.messageHeader')}: ${condition.message}\n`; + return text; + }) + .join('') + : ''; + + const params = new URLSearchParams({ + template: '1-mcp_issue.yml', + title: `[${clusterDetails}]: ${getTicketTitle()}`, + 'cluster-link': clusterDetails, + 'what-happened': statusDetails, + }); + + return `${links.COM_PAGE_SUPPORT_GITHUB_ISSUE}?${params}`; + }; + const statusTableColumns: AnalyticalTableColumnDefinition[] = [ { Header: t('MCPHealthPopoverButton.statusHeader'), @@ -77,7 +131,13 @@ export default function MCPHealthPopoverButton({ onClick={handleOpenerClick} /> - {} + { + + } ); @@ -86,10 +146,14 @@ export default function MCPHealthPopoverButton({ function StatusTable({ status, tableColumns, + githubIssuesLink, }: { status: ControlPlaneStatusType | undefined; tableColumns: AnalyticalTableColumnDefinition[]; + githubIssuesLink: string; }) { + const { t } = useTranslation(); + return (
+ + + + +
); } diff --git a/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx index 443bdb54..8309286e 100644 --- a/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx +++ b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx @@ -87,7 +87,12 @@ export function ControlPlaneCard({ alignItems="Center" className={styles.row} > - + - +