Merge branch 'main' into refactor/rework-doclinkcreator-class

Author: fabianwolski

frontend-config.json

@@ -8,4 +8,4 @@
     "issuerUrl": "issuer-url",
     "scopes": []
   }
-}
+}

package-lock.json

@@ -53,7 +53,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.13.5",
     "@types/react": "^19.0.10",
-    "@types/react-dom": "19.1.2",
+    "@types/react-dom": "19.1.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@ui5/webcomponents-cypress-commands": "^2.7.2",
     "@vitejs/plugin-react": "^4.3.4",

package.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",

public/locales/en.json

@@ -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}
       />
       <Popover ref={popoverRef} open={open} placement={PopoverPlacement.Bottom}>
-        {<StatusTable status={mcpStatus} tableColumns={statusTableColumns} />}
+        {
+          <StatusTable
+            status={mcpStatus}
+            tableColumns={statusTableColumns}
+            githubIssuesLink={constructGithubIssuesLink()}
+          />
+        }
       </Popover>
     </div>
   );
@@ -86,10 +146,14 @@ export default function MCPHealthPopoverButton({
 function StatusTable({
   status,
   tableColumns,
+  githubIssuesLink,
 }: {
   status: ControlPlaneStatusType | undefined;
   tableColumns: AnalyticalTableColumnDefinition[];
+  githubIssuesLink: string;
 }) {
+  const { t } = useTranslation();
+
   return (
     <div style={{ width: 600 }}>
       <AnalyticalTable
@@ -101,6 +165,16 @@ function StatusTable({
           }) ?? []
         }
       />
+      <FlexBox
+        justifyContent={FlexBoxJustifyContent.End}
+        style={{ marginTop: '0.5rem' }}
+      >
+        <a href={githubIssuesLink} target="_blank" rel="noreferrer">
+          <Button>
+            {t('MCPHealthPopoverButton.createSupportTicketButton')}
+          </Button>
+        </a>
+      </FlexBox>
     </div>
   );
 }

src/components/ControlPlane/MCPHealthPopoverButton.tsx

@@ -87,7 +87,12 @@ export function ControlPlaneCard({
               alignItems="Center"
               className={styles.row}
             >
-              <MCPHealthPopoverButton mcpStatus={controlPlane.status} />
+              <MCPHealthPopoverButton
+                mcpStatus={controlPlane.status}
+                projectName={projectName}
+                workspaceName={workspace.metadata.name ?? ''}
+                mcpName={controlPlane.metadata.name}
+              />
               <FlexBox
                 direction="Row"
                 justifyContent="SpaceBetween"

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx

@@ -23,7 +23,6 @@ export function FrontendConfigProvider({
   children,
 }: FrontendConfigProviderProps) {
   const config = use(fetchPromise);
-
   return (
     <FrontendConfigContext.Provider value={config}>
       {children}

src/context/FrontendConfigContext.tsx

@@ -81,7 +81,12 @@ export default function ControlPlaneView() {
                     justifyContent: 'space-between',
                   }}
                 >
-                  <MCPHealthPopoverButton mcpStatus={mcp?.status} />
+                  <MCPHealthPopoverButton
+                    mcpStatus={mcp?.status}
+                    projectName={projectName}
+                    workspaceName={workspaceName ?? ''}
+                    mcpName={controlPlaneName}
+                  />
 
                   <CopyKubeconfigButton />
                 </div>