fixes

lucasgoral · lucasgoral · commit 8d4e30119e05 · 2025-07-31T13:53:27.000+02:00
diff --git a/src/components/ControlPlane/FluxList.tsx b/src/components/ControlPlane/FluxList.tsx
@@ -59,7 +59,7 @@ export default function FluxList() {
       {
         Header: t('FluxList.tableStatusHeader'),
         accessor: 'status',
-        width: 85,
+        width: 125,
         hAlign: 'Center',
         Filter: ({ column }) => <StatusFilter column={column} />,
         Cell: (cellData: CellData<FluxRow>) =>
@@ -78,7 +78,7 @@ export default function FluxList() {
       {
         Header: t('yaml.YAML'),
         hAlign: 'Center',
-        width: 85,
+        width: 75,
         accessor: 'yaml',
         disableFilters: true,
         Cell: (cellData: CellData<KustomizationsResponse['items']>) => (
@@ -103,7 +103,7 @@ export default function FluxList() {
       {
         Header: t('FluxList.tableStatusHeader'),
         accessor: 'status',
-        width: 85,
+        width: 125,
         hAlign: 'Center',
         Filter: ({ column }) => <StatusFilter column={column} />,
         Cell: (cellData: CellData<FluxRow['isReady']>) =>
@@ -125,7 +125,7 @@ export default function FluxList() {
       {
         Header: t('yaml.YAML'),
         hAlign: 'Center',
-        width: 85,
+        width: 75,
         accessor: 'yaml',
         disableFilters: true,
         Cell: (cellData: CellData<FluxRow>) => <YamlViewButton resourceObject={cellData.cell.row.original?.item} />,
diff --git a/src/components/ControlPlane/MCPHealthPopoverButton.tsx b/src/components/ControlPlane/MCPHealthPopoverButton.tsx
@@ -133,7 +133,7 @@ const MCPHealthPopoverButton = ({ mcpStatus, projectName, workspaceName, mcpName
     {
       Header: t('MCPHealthPopoverButton.transitionHeader'),
       accessor: 'lastTransitionTime',
-      width: 110,
+      width: 125,
       Cell: (instance: CellData<ControlPlaneStatusCondition>) => {
         const rawDate = instance.cell.value;
         const date = new Date(rawDate as string);
diff --git a/src/components/ControlPlane/ManagedResources.tsx b/src/components/ControlPlane/ManagedResources.tsx
@@ -12,7 +12,7 @@ import IllustratedError from '../Shared/IllustratedError';
 import '@ui5/webcomponents-icons/dist/sys-enter-2';
 import '@ui5/webcomponents-icons/dist/sys-cancel-2';
 import { resourcesInterval } from '../../lib/shared/constants';
-import { ResourceStatusCell } from '../Shared/ResourceStatusCell';
+
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
@@ -69,7 +69,7 @@ export function ManagedResources() {
         Header: t('ManagedResources.tableHeaderSynced'),
         accessor: 'synced',
         hAlign: 'Center',
-        width: 85,
+        width: 125,
         Filter: ({ column }) => <StatusFilter column={column} />,
         Cell: (cellData: CellData<ResourceRow['synced']>) =>
           cellData.cell.row.original?.synced != null ? (
@@ -86,7 +86,7 @@ export function ManagedResources() {
         Header: t('ManagedResources.tableHeaderReady'),
         accessor: 'ready',
         hAlign: 'Center',
-        width: 85,
+        width: 125,
         Filter: ({ column }) => <StatusFilter column={column} />,
         Cell: (cellData: CellData<ResourceRow['ready']>) =>
           cellData.cell.row.original?.ready != null ? (
@@ -102,7 +102,7 @@ export function ManagedResources() {
       {
         Header: t('yaml.YAML'),
         hAlign: 'Center',
-        width: 85,
+        width: 75,
         accessor: 'yaml',
         disableFilters: true,
         Cell: (cellData: CellData<ResourceRow>) =>
diff --git a/src/components/ControlPlane/Providers.tsx b/src/components/ControlPlane/Providers.tsx
@@ -18,6 +18,7 @@ import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import '@ui5/webcomponents-icons/dist/sys-enter-2';
 import '@ui5/webcomponents-icons/dist/sys-cancel-2';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
+import { ResourceStatusCellWithButton } from '../Shared/ResourceStatusCellWithButton.tsx';
 
 interface CellData<T> {
   cell: {
@@ -33,8 +34,10 @@ type ProvidersRow = {
   version: string;
   healthy: string;
   healthyTransitionTime: string;
+  healthyMessage: string;
   installed: string;
   installedTransitionTime: string;
+  installedMessage: string;
   created: string;
   item: unknown;
 };
@@ -68,39 +71,44 @@ export function Providers() {
         Header: t('Providers.tableHeaderInstalled'),
         accessor: 'installed',
         hAlign: 'Center',
-        width: 85,
+        width: 125,
         Filter: ({ column }) => <StatusFilter column={column} />,
         filter: 'equals',
         Cell: (cellData: CellData<ProvidersRow['installed']>) =>
           cellData.cell.row.original?.installed != null ? (
-            <ResourceStatusCell
+            <ResourceStatusCellWithButton
               value={cellData.cell.row.original?.installed === 'true'}
               transitionTime={cellData.cell.row.original?.installedTransitionTime}
+              positiveText={'Installed'}
+              negativeText={'Install error'}
+              message={cellData.cell.row.original?.installedMessage}
             />
           ) : null,
       },
       {
         Header: t('Providers.tableHeaderHealthy'),
         accessor: 'healthy',
         hAlign: 'Center',
-        width: 85,
+        width: 125,
         Filter: ({ column }) => <StatusFilter column={column} />,
         filter: 'equals',
         Cell: (cellData: CellData<ProvidersRow['healthy']>) =>
           cellData.cell.row.original?.installed != null ? (
             <div>
-              <ResourceStatusCell
+              <ResourceStatusCellWithButton
                 value={cellData.cell.row.original?.healthy === 'true'}
                 transitionTime={cellData.cell.row.original?.healthyTransitionTime}
+                positiveText={'Healthy'}
+                negativeText={'Not healthy'}
+                message={cellData.cell.row.original?.healthyMessage}
               />
-              here2
             </div>
           ) : null,
       },
       {
         Header: t('yaml.YAML'),
         hAlign: 'Center',
-        width: 85,
+        width: 75,
         accessor: 'yaml',
         disableFilters: true,
         Cell: (cellData: CellData<ProvidersRow>) => (
@@ -124,6 +132,8 @@ export function Providers() {
         healthyTransitionTime: healthy?.lastTransitionTime ?? '',
         version: item.spec.package.match(/\d+(\.\d+)+/g)?.toString() ?? '',
         item: item,
+        healthyMessage: healthy?.message ?? healthy?.reason ?? '',
+        installedMessage: installed?.message ?? installed?.reason ?? '',
       };
     }) ?? [];
 
diff --git a/src/components/ControlPlane/ProvidersConfig.tsx b/src/components/ControlPlane/ProvidersConfig.tsx
@@ -74,7 +74,7 @@ export function ProvidersConfig() {
       {
         Header: t('yaml.YAML'),
         hAlign: 'Center',
-        width: 85,
+        width: 75,
         accessor: 'yaml',
         disableFilters: true,
         Cell: (cellData: CellData<Rows>) =>
diff --git a/src/components/Projects/ProjectsList.tsx b/src/components/Projects/ProjectsList.tsx
@@ -75,7 +75,7 @@ export default function ProjectsList() {
       {
         Header: t('yaml.YAML'),
         accessor: 'yaml',
-        width: 85,
+        width: 75,
         disableFilters: true,
         hAlign: 'Center',
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -84,7 +84,7 @@ export default function ProjectsList() {
             style={{
               width: '100%',
               display: 'flex',
-              justifyContent: 'end',
+              justifyContent: 'center',
               alignItems: 'center',
             }}
           >
diff --git a/src/components/Shared/ResourceStatusCellWithButton.tsx b/src/components/Shared/ResourceStatusCellWithButton.tsx
@@ -1,8 +1,9 @@
-import { Icon, Popover, PopoverDomRef, Text } from '@ui5/webcomponents-react';
+import { FlexBox, Icon, PopoverDomRef, ResponsivePopover, Text } from '@ui5/webcomponents-react';
 import { timeAgo } from '../../utils/i18n/timeAgo';
 import { MouseEvent, useRef, useState } from 'react';
 import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
+
 export interface StatusCellProps {
   value: boolean;
   transitionTime: string;
@@ -26,10 +27,7 @@ export const ResourceStatusCellWithButton = ({
       setOpen((prev) => !prev);
     }
   };
-  // if (!value) {
-  // console.log(errorMessage);
-  // }
-  // alert(errorMessage);
+
   return (
     <span>
       <AnimatedHoverTextButton
@@ -44,12 +42,30 @@ export const ResourceStatusCellWithButton = ({
         text={value ? positiveText : negativeText}
         onClick={handleOpenerClick}
       />
-      <Popover ref={popoverRef} open={open} placement={PopoverPlacement.Bottom}>
-        <Text style={{ maxWidth: '60ch', textAlign: 'left', lineHeight: '1.5em' }}>{message}</Text>
-        <Text style={{ maxWidth: '60ch', textAlign: 'left', lineHeight: '1.5em', fontWeight: 'bold' }}>
-          {timeAgo.format(new Date(transitionTime))}
+      <ResponsivePopover ref={popoverRef} open={open} placement={PopoverPlacement.Bottom}>
+        <Text
+          style={{
+            maxWidth: '60ch',
+            textAlign: 'left',
+            lineHeight: '1.5em',
+            color: value ? 'var(--sapPositiveTextColor)' : 'var(--sapNegativeTextColor)',
+          }}
+        >
+          {message}
         </Text>
-      </Popover>
+
+        <FlexBox
+          style={{ borderTop: '1px solid gray', paddingTop: '1rem', marginTop: '1rem' }}
+          justifyContent={'Start'}
+          alignItems={'Center'}
+          gap={16}
+        >
+          <Icon name={'date-time'} />
+          <Text style={{ maxWidth: '60ch', textAlign: 'left', lineHeight: '1.5em', fontWeight: 'bold' }}>
+            {timeAgo.format(new Date(transitionTime))}
+          </Text>
+        </FlexBox>
+      </ResponsivePopover>
     </span>
   );
 };

Original file line number	Diff line number	Diff line change
`@@ -133,7 +133,7 @@ const MCPHealthPopoverButton = ({ mcpStatus, projectName, workspaceName, mcpName`
`133`	`133`	`{`
`134`	`134`	`Header: t('MCPHealthPopoverButton.transitionHeader'),`
`135`	`135`	`accessor: 'lastTransitionTime',`
`136`		`- width: 110,`
	`136`	`+ width: 125,`
`137`	`137`	`Cell: (instance: CellData<ControlPlaneStatusCondition>) => {`
`138`	`138`	`const rawDate = instance.cell.value;`
`139`	`139`	`const date = new Date(rawDate as string);`
Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@ export function ProvidersConfig() {`
`74`	`74`	`{`
`75`	`75`	`Header: t('yaml.YAML'),`
`76`	`76`	`hAlign: 'Center',`
`77`		`- width: 85,`
	`77`	`+ width: 75,`
`78`	`78`	`accessor: 'yaml',`
`79`	`79`	`disableFilters: true,`
`80`	`80`	`Cell: (cellData: CellData<Rows>) =>`