fix: UI redesign — horizontal instance rows, proper scaling, readable tag cards

- Backend: add replicas field to InstanceResponse (extracted from values.replicaCount)
- InstanceCard: complete redesign as horizontal row layout
  - Status bar | Name+Chart | Replicas +/- | Action buttons
  - Scale controls show for deployed AND failed statuses (scale to 0)
  - Fix replicas display using new instance.replicas backend field
- InstancesManagementPage: vertical row list + onScale callback to update state
- TagCard: restore proper padding (p-4), min-width, readable button sizes
- ArtifactBrowserPage: reduce grid density (sm:1 md:2 lg:3)
- ModifyModal: simplify to YAML-only editing with current values pre-populated
  - Remove schema-based form generator
  - Keep values-diff as collapsible reference panel
This commit is contained in:
Ivan087
2026-05-13 12:30:52 +08:00
parent 28ecb2e636
commit 49b92e66c3
8 changed files with 247 additions and 462 deletions

View File

@ -188,6 +188,22 @@ const InstancesManagementPage: React.FC = () => {
};
}, [autoRefresh]);
const handleScale = useCallback((updatedInstance: InstanceResponse) => {
setInstancesByCluster((prev) => {
const next = new Map(prev);
for (const [clusterId, insts] of next) {
const idx = insts.findIndex((i) => i.id === updatedInstance.id);
if (idx !== -1) {
const updated = [...insts];
updated[idx] = updatedInstance;
next.set(clusterId, updated);
break;
}
}
return next;
});
}, []);
const handleModify = useCallback((instance: Instance) => {
setModifyInstance(instance);
}, []);
@ -421,7 +437,7 @@ const InstancesManagementPage: React.FC = () => {
</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<div className="flex flex-col gap-2">
{instances.map((instance) => (
<InstanceCard
key={instance.id}
@ -429,6 +445,7 @@ const InstancesManagementPage: React.FC = () => {
onModify={handleModify}
onTerminate={handleTerminate}
onScale={handleScale}
onViewEntries={handleViewEntries}
onViewDiagnostics={handleViewDiagnostics}
/>