fix: direct K8s scaling, replicas from K8s API, button labels, modify fetch

- Add ScaleClient using K8s API (like kubectl scale deploy --replicas=N)
  - ScaleDeployment: patch Deployment.Spec.Replicas directly
  - GetDeploymentReplicas: query actual K8s deployment replicas
  - Search by labels then fallback to deployment name match
- Wire ScaleClient to InstanceService via SetScaleClient in main.go
- ModifyModal: fetch full instance detail on open (list excludes values)
- InstanceCard: add text labels to action buttons (Entries/Diag/Modify/Delete)
  - Text visible on sm+ screens, icon-only on xs
This commit is contained in:
Ivan087
2026-05-13 14:54:24 +08:00
parent 49b92e66c3
commit 4441f58299
6 changed files with 212 additions and 51 deletions

View File

@ -229,34 +229,38 @@ export const InstanceCard: React.FC<InstanceCardProps> = ({
</div>
{/* Action buttons */}
<div className="flex items-center gap-1 flex-shrink-0">
<div className="flex items-center gap-1.5 flex-shrink-0">
<button
onClick={() => onViewEntries(instance)}
className="p-1.5 rounded-md text-slate-400 hover:text-blue-500 hover:bg-blue-50 transition-colors"
className="flex items-center gap-1 px-2 py-1.5 rounded-md text-slate-500 hover:text-blue-600 hover:bg-blue-50 transition-colors text-xs font-medium"
title="Entries"
>
<Network className="w-4 h-4" />
<Network className="w-3.5 h-3.5" />
<span className="hidden sm:inline">Entries</span>
</button>
<button
onClick={() => onViewDiagnostics(instance)}
className="p-1.5 rounded-md text-slate-400 hover:text-amber-500 hover:bg-amber-50 transition-colors"
className="flex items-center gap-1 px-2 py-1.5 rounded-md text-slate-500 hover:text-amber-600 hover:bg-amber-50 transition-colors text-xs font-medium"
title="Diagnostics"
>
<Activity className="w-4 h-4" />
<Activity className="w-3.5 h-3.5" />
<span className="hidden sm:inline">Diag</span>
</button>
<button
onClick={() => onModify(instance)}
className="p-1.5 rounded-md text-slate-400 hover:text-indigo-500 hover:bg-indigo-50 transition-colors"
className="flex items-center gap-1 px-2 py-1.5 rounded-md text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 transition-colors text-xs font-medium"
title="Modify"
>
<Settings className="w-4 h-4" />
<Settings className="w-3.5 h-3.5" />
<span className="hidden sm:inline">Modify</span>
</button>
<button
onClick={() => onTerminate(instance)}
className="p-1.5 rounded-md text-slate-400 hover:text-rose-500 hover:bg-rose-50 transition-colors"
className="flex items-center gap-1 px-2 py-1.5 rounded-md text-slate-500 hover:text-rose-600 hover:bg-rose-50 transition-colors text-xs font-medium"
title="Delete"
>
<StopCircle className="w-4 h-4" />
<StopCircle className="w-3.5 h-3.5" />
<span className="hidden sm:inline">Delete</span>
</button>
</div>
</div>

View File

@ -7,7 +7,7 @@ import React, { useState, useEffect } from "react";
import { Settings } from "lucide-react";
import { parse as parseYaml, stringify as stringifyYaml } from "yaml";
import type { InstanceResponse, UpdateInstanceRequest } from "@/api";
import { getInstanceValuesDiff } from "@/api";
import { getInstance, getInstanceValuesDiff } from "@/api";
import {
Modal,
Button,
@ -45,26 +45,29 @@ export const ModifyModal: React.FC<ModifyModalProps> = ({
} | null>(null);
const [diffError, setDiffError] = useState<string | null>(null);
// Initialize with current values
// Fetch full instance detail (list excludes values) and load diff
useEffect(() => {
setTag(instance.version || "");
setDescription("");
// Parse and display existing values as YAML
if (instance.values) {
try {
const parsedValues = typeof instance.values === 'string'
? JSON.parse(instance.values)
: instance.values;
setValuesYaml(typeof parsedValues === 'object' ? stringifyYaml(parsedValues) : String(parsedValues));
} catch (err) {
console.error('[ModifyModal] Failed to parse existing values:', err);
setValuesYaml(String(instance.values) || "");
const loadFullInstance = async () => {
if (instance.clusterId && instance.id) {
try {
const detail = await getInstance(
{ clusterId: instance.clusterId, instanceId: instance.id },
);
// Parse and display existing values as YAML
if (detail.values && Object.keys(detail.values).length > 0) {
setValuesYaml(stringifyYaml(detail.values));
}
} catch (err) {
console.error('[ModifyModal] Failed to fetch instance detail:', err);
}
}
}
loadValuesDiff();
};
// Load values diff for reference
loadValuesDiff();
loadFullInstance();
}, [instance]);
const loadValuesDiff = async () => {