gsadmin/flowfish
1
0
Fork 0
mirror of https://github.com/taylanbakircioglu/flowfish.git synced 2026-09-12 05:48:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: make upgrade version indicator look clickable with pill badge

Browse Source 
Adds subtle orange border, rounded corners and light background to the
version text when upgrade is available, making it visually distinct as
an interactive element while staying compact under the HEALTHY tag.

Made-with: Cursor
This commit is contained in:
taylanbakircioglu
2026-04-08 09:26:05 +03:00
parent 499472da16
commit ce62c644bc
2 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/ClusterManagement.tsx
+14 -4
View File
@@ -629,8 +629,18 @@ const ClusterManagement: React.FC = () => {
{record.gadget_version && (
needsUpgrade ? (
<Tooltip title={`Upgrade available: ${supportedGadgetVersion}. Click to view upgrade script.`}>
<Typography.Text
style={{ fontSize: '11px', color: '#fa8c16', cursor: 'pointer' }}
<span
style={{
fontSize: '11px',
color: '#fa8c16',
cursor: 'pointer',
border: '1px solid #ffd591',
borderRadius: '10px',
padding: '1px 8px',
background: '#fff7e6',
display: 'inline-block',
lineHeight: '18px',
}}
onClick={(e) => {
e.stopPropagation();
setUpgradeCluster(record);
@@ -645,8 +655,8 @@ const ClusterManagement: React.FC = () => {
});
}}
>
{record.gadget_version} <ArrowUpOutlined style={{ fontSize: '10px' }} />
</Typography.Text>
{record.gadget_version} <ArrowUpOutlined style={{ fontSize: '9px' }} />
</span>
</Tooltip>
) : (
<Typography.Text type="secondary" style={{ fontSize: '11px' }}>
frontend/src/pages/Dashboard/tabs/OperationsTab.tsx
+15 -3
View File
@@ -269,9 +269,21 @@ const OperationsTab: React.FC<OperationsTabProps> = ({ clusterId, analysisId })
}
return needsUpgrade ? (
<Tooltip title={`Upgrade available: ${supportedGadgetVersion}. Go to Cluster Management to upgrade.`}>
<Text style={{ marginLeft: 8, fontSize: 12, color: '#fa8c16' }}>
{currentCluster.gadget_version} <ArrowUpOutlined style={{ fontSize: 10 }} />
</Text>
<span
style={{
marginLeft: 8,
fontSize: 11,
color: '#fa8c16',
cursor: 'pointer',
border: '1px solid #ffd591',
borderRadius: 10,
padding: '1px 8px',
background: '#fff7e6',
lineHeight: '18px',
}}
>
{currentCluster.gadget_version} <ArrowUpOutlined style={{ fontSize: 9 }} />
</span>
</Tooltip>
) : (
<Text type="secondary" style={{ marginLeft: 8 }}>