Feat: Support button for MCP github issues with info dump

Author: fabianwolski

frontend-config.json

@@ -1,5 +1,5 @@
 {
   "backendUrl": "http://localhost:3000",
   "landscape": "LOCAL",
-  "documentationBaseUrl": "http://localhost:3000"
-}
+  "documentationBaseUrl": "https://github.tools.sap/openmcp"
+}

public/locales/en.json

@@ -55,7 +55,15 @@
     "typeHeader": "Type",
     "messageHeader": "Message",
     "reasonHeader": "Reason",
-    "transitionHeader": "Last transition time"
+    "transitionHeader": "Last transition time",
+    "createSupportTicketButton": "Create Support Ticket",
+    "templateId": "1-mcp_issue.yml",
+    "supportTicketTitle": "Control Plane Not Ready",
+    "supportTicketTitleIssues": "Issues with Control Plane",
+    "clusterIdentifierLabel": "cluster-link",
+    "whatHappenedLabel": "what-happened",
+    "statusDetailsLabel": "MCP Status",
+    "detailsLabel": "Details:"
   },
   "CopyKubeconfigButton": {
     "copiedMessage": "Copied to Clipboard",

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();
 
@@ -29,6 +43,37 @@ export default function MCPHealthPopoverButton({
     }
   };
 
+  const handleCopyStatusClick = () => {
+    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: t('MCPHealthPopoverButton.templateId'),
+      title: `[${clusterDetails}]: ${
+        mcpStatus?.status === ReadyStatus.NotReady
+          ? t('MCPHealthPopoverButton.supportTicketTitle')
+          : t('MCPHealthPopoverButton.supportTicketIssues')
+      }`,
+      'cluster-link': clusterDetails,
+      'what-happened': statusDetails,
+    });
+
+    window.open(`${links.COM_PAGE_SUPPORT_ISSUE}?${params}`, '_blank');
+  };
+
   const statusTableColumns: AnalyticalTableColumnDefinition[] = [
     {
       Header: t('MCPHealthPopoverButton.statusHeader'),
@@ -73,7 +118,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}
+            onCopyClick={handleCopyStatusClick}
+          />
+        }
       </Popover>
     </div>
   );
@@ -82,10 +133,16 @@ export default function MCPHealthPopoverButton({
 function StatusTable({
   status,
   tableColumns,
+  onCopyClick,
 }: {
   status: ControlPlaneStatusType | undefined;
   tableColumns: AnalyticalTableColumnDefinition[];
+  onCopyClick: () => void;
 }) {
+  const showSupportButton =
+    status?.status === ReadyStatus.NotReady ||
+    status?.status === ReadyStatus.InDeletion;
+
   return (
     <div style={{ width: 600 }}>
       <AnalyticalTable
@@ -97,6 +154,14 @@ function StatusTable({
           }) ?? []
         }
       />
+      {showSupportButton && (
+        <FlexBox
+          justifyContent={FlexBoxJustifyContent.End}
+          style={{ marginTop: '0.5rem' }}
+        >
+          <Button onClick={onCopyClick}>Create Support Ticket</Button>
+        </FlexBox>
+      )}
     </div>
   );
 }

src/components/ControlPlanes/ControlPlaneCard.tsx

@@ -83,7 +83,12 @@ export function ControlPlaneCard({
               alignItems="Center"
               style={{ paddingTop: '20px' }}
             >
-              <MCPHealthPopoverButton mcpStatus={controlPlane.status} />
+              <MCPHealthPopoverButton
+                mcpStatus={controlPlane.status}
+                projectName={projectName}
+                workspaceName={workspace.metadata.name ?? ''}
+                mcpName={controlPlane.metadata.name}
+              />
               <ConnectButton
                 disabled={controlPlane.status?.status !== ReadyStatus.Ready}
                 controlPlaneName={name}

src/lib/shared/links.ts

@@ -26,4 +26,7 @@ export class DocLinkCreator {
       '/docs/managed-control-planes/get-started/get-started-mcp#5-create-managedcontrolplane',
     );
   }
+  public get COM_PAGE_SUPPORT_ISSUE(): string {
+    return this.createLink('/support/issues/new');
+  }
 }