mirror/QuickStack
1
0
Fork 0
mirror of https://github.com/biersoeckli/QuickStack.git synced 2026-02-10 13:39:07 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance volume management with storage class validation and node info integration

Browse Source
This commit is contained in:
biersoeckli
2025-12-23 12:16:30 +00:00
parent 873c659d29
commit 0ca93150ee
6 changed files with 122 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/project/app/[appId]/app-tabs.tsx
View File

@@ -23,19 +23,22 @@ import NetworkPolicy from "./advanced/network-policy";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import DbToolsCard from "./credentials/db-tools";
import { RolePermissionEnum } from "@/shared/model/role-extended.model.ts";
import { NodeInfoModel } from "@/shared/model/node-info.model";
export default function AppTabs({
app,
role,
tabName,
s3Targets,
volumeBackups
volumeBackups,
nodesInfo
}: {
app: AppExtendedModel;
role: RolePermissionEnum;
tabName: string;
s3Targets: S3Target[],
volumeBackups: VolumeBackupExtendedModel[]
s3Targets: S3Target[];
volumeBackups: VolumeBackupExtendedModel[];
nodesInfo: NodeInfoModel[];
}) {
const router = useRouter();
const readonly = role !== RolePermissionEnum.READWRITE;
@@ -79,7 +82,7 @@ export default function AppTabs({
<InternalHostnames readonly={readonly} app={app} />
</TabsContent>
<TabsContent value="storage" className="space-y-4">
<StorageList readonly={readonly} app={app} />
<StorageList readonly={readonly} app={app} nodesInfo={nodesInfo} />
<FileMount readonly={readonly} app={app} />
<VolumeBackupList
readonly={readonly}

7
src/app/project/app/[appId]/page.tsx
View File

@@ -5,6 +5,7 @@ import AppBreadcrumbs from "./app-breadcrumbs";
import s3TargetService from "@/server/services/s3-target.service";
import volumeBackupService from "@/server/services/volume-backup.service";
import { UserGroupUtils } from "@/shared/utils/role.utils";
import clusterService from "@/server/services/node.service";
export default async function AppPage({
searchParams,
@@ -19,10 +20,11 @@ export default async function AppPage({
}
const session = await isAuthorizedReadForApp(appId);
const role = UserGroupUtils.getRolePermissionForApp(session, appId);
const [app, s3Targets, volumeBackups] = await Promise.all([
const [app, s3Targets, volumeBackups, nodesInfo] = await Promise.all([
appService.getExtendedById(appId),
s3TargetService.getAll(),
volumeBackupService.getForApp(appId)
volumeBackupService.getForApp(appId),
clusterService.getNodeInfo()
]);
return (<>
@@ -31,6 +33,7 @@ export default async function AppPage({
volumeBackups={volumeBackups}
s3Targets={s3Targets}
app={app}
nodesInfo={nodesInfo}
tabName={searchParams?.tabName ?? 'overview'} />
<AppBreadcrumbs app={app} />
</>

6
src/app/project/app/[appId]/volumes/actions.ts
View File

@@ -47,9 +47,15 @@ export const saveVolume = async (prevState: any, inputData: z.infer<typeof actio
if (existingVolume && existingVolume.size > validatedData.size) {
throw new ServiceException('Volume size cannot be decreased');
}
if (existingVolume && existingVolume.storageClassName !== validatedData.storageClassName) {
throw new ServiceException('Storage class cannot be changed for existing volumes');
}
if (existingApp.replicas > 1 && validatedData.accessMode === 'ReadWriteOnce') {
throw new ServiceException('Volume access mode must be ReadWriteMany because your app has more than one replica configured.');
}
if (validatedData.accessMode === 'ReadWriteMany' && validatedData.storageClassName === 'local-path') {
throw new ServiceException('The Local Path storage class does not support ReadWriteMany access mode. Please choose another storage class / access mode.');
}
await appService.saveVolume({
...validatedData,
id: validatedData.id ?? undefined,

183
src/app/project/app/[appId]/volumes/storage-edit-overlay.tsx
View File

@@ -39,6 +39,7 @@ import { toast } from "sonner"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { QuestionMarkCircledIcon } from "@radix-ui/react-icons"
import { AppExtendedModel } from "@/shared/model/app-extended.model"
import { NodeInfoModel } from "@/shared/model/node-info.model"
const accessModes = [
{ label: "ReadWriteOnce", value: "ReadWriteOnce" },
@@ -46,11 +47,16 @@ const accessModes = [
] as const
const storageClasses = [
{ label: "Longhorn (HA)", value: "longhorn", description: "Distributed, replicated storage recommended for HA workloads." },
{ label: "Local Path", value: "local-path", description: "Node-local volumes, no replication. Ideal for single-node setups." }
{ label: "Longhorn (Default)", value: "longhorn", description: "Distributed, replicated storage recommended workloads in a cluster of multiple nodes." },
{ label: "Local Path", value: "local-path", description: "Node-local volumes, no replication. Data is stored on the master node. Only works in a single node setup." }
] as const
export default function DialogEditDialog({ children, volume, app }: { children: React.ReactNode; volume?: AppVolume; app: AppExtendedModel; }) {
export default function DialogEditDialog({ children, volume, app, nodesInfo }: {
children: React.ReactNode;
volume?: AppVolume;
app: AppExtendedModel;
nodesInfo: NodeInfoModel[];
}) {
const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -60,7 +66,7 @@ export default function DialogEditDialog({ children, volume, app }: { children:
defaultValues: {
...volume,
accessMode: volume?.accessMode ?? (app.replicas > 1 ? "ReadWriteMany" : "ReadWriteOnce"),
storageClassName: volume?.storageClassName ?? "longhorn"
storageClassName: (volume?.storageClassName ?? "longhorn") as 'longhorn' | 'local-path',
}
});
@@ -86,7 +92,7 @@ export default function DialogEditDialog({ children, volume, app }: { children:
form.reset({
...volume,
accessMode: volume?.accessMode ?? (app.replicas > 1 ? "ReadWriteMany" : "ReadWriteOnce"),
storageClassName: volume?.storageClassName ?? "longhorn"
storageClassName: (volume?.storageClassName ?? "longhorn") as 'longhorn' | 'local-path',
});
}, [volume]);
@@ -217,88 +223,88 @@ export default function DialogEditDialog({ children, volume, app }: { children:
</FormItem>
)}
/>
<FormField
control={form.control}
name="storageClassName"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel className="flex gap-2">
<div>Storage Class</div>
<div className="self-center">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild><QuestionMarkCircledIcon /></TooltipTrigger>
<TooltipContent>
<p className="max-w-[350px]">
Choose where the volume is provisioned.<br /><br />
<b>Longhorn</b> keeps data replicated across nodes.<br />
<b>Local Path</b> stores data on a single node (no HA).
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-full justify-between",
!field.value && "text-muted-foreground"
)}
disabled={!!volume}
>
{field.value
? storageClasses.find(
(storageClass) => storageClass.value === field.value
)?.label
: "Select storage class"}
<ChevronsUpDown className="opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[260px] p-0">
<Command>
<CommandList>
<CommandGroup>
{storageClasses.map((storageClass) => (
<CommandItem
value={storageClass.label}
key={storageClass.value}
onSelect={() => {
form.setValue("storageClassName", storageClass.value);
}}
>
<div className="flex flex-col gap-1">
<span>{storageClass.label}</span>
<span className="text-xs text-muted-foreground">{storageClass.description}</span>
</div>
<Check
className={cn(
"ml-auto",
storageClass.value === field.value
? "opacity-100"
: "opacity-0"
)}
/>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormDescription>
Longhorn is recommended for HA. Local Path is faster to provision on single-node clusters.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
{nodesInfo.length === 1 &&
<FormField
control={form.control}
name="storageClassName"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel className="flex gap-2">
<div>Storage Class</div>
<div className="self-center">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild><QuestionMarkCircledIcon /></TooltipTrigger>
<TooltipContent>
<p className="max-w-[350px]">
Choose where the volume is provisioned.<br /><br />
<b>Longhorn</b> keeps data replicated across nodes.<br />
<b>Local Path</b> stores data on a the master node and works only in single-node clusters.
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-full justify-between",
!field.value && "text-muted-foreground"
)}
disabled={!!volume}
>
{field.value
? storageClasses.find(
(storageClass) => storageClass.value === field.value
)?.label
: "Select storage class"}
<ChevronsUpDown className="opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="max-w-[280px] p-0">
<Command>
<CommandList>
<CommandGroup>
{storageClasses.map((storageClass) => (
<CommandItem
value={storageClass.label}
key={storageClass.value}
onSelect={() => {
form.setValue("storageClassName", storageClass.value);
}}
>
<div className="flex flex-col gap-1">
<span>{storageClass.label}</span>
<span className="text-xs text-muted-foreground">{storageClass.description}</span>
</div>
<Check
className={cn(
"ml-auto",
storageClass.value === field.value
? "opacity-100"
: "opacity-0"
)}
/>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormDescription>
This cannot be changed after creation.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>}
<p className="text-red-500">{state.message}</p>
<SubmitButton>Save</SubmitButton>
</div>
@@ -308,7 +314,4 @@ export default function DialogEditDialog({ children, volume, app }: { children:
</Dialog>
</>
)
}

8
src/app/project/app/[appId]/volumes/storages.tsx
View File

@@ -22,11 +22,13 @@ import { Code } from "@/components/custom/code";
import { Label } from "@/components/ui/label";
import { KubeSizeConverter } from "@/shared/utils/kubernetes-size-converter.utils";
import { Progress } from "@/components/ui/progress";
import { NodeInfoModel } from "@/shared/model/node-info.model";
type AppVolumeWithCapacity = (AppVolume & { usedBytes?: number; capacityBytes?: number; usedPercentage?: number });
export default function StorageList({ app, readonly }: {
export default function StorageList({ app, readonly, nodesInfo }: {
app: AppExtendedModel;
nodesInfo: NodeInfoModel[];
readonly: boolean;
}) {
@@ -211,7 +213,7 @@ export default function StorageList({ app, readonly }: {
</TooltipProvider>
</StorageRestoreDialog>*/}
{!readonly && <>
<DialogEditDialog app={app} volume={volume}>
<DialogEditDialog app={app} volume={volume} nodesInfo={nodesInfo}>
<TooltipProvider>
<Tooltip delayDuration={200}>
<TooltipTrigger>
@@ -243,7 +245,7 @@ export default function StorageList({ app, readonly }: {
</Table>
</CardContent>
{!readonly && <CardFooter>
<DialogEditDialog app={app}>
<DialogEditDialog app={app} nodesInfo={nodesInfo}>
<Button>Add Volume</Button>
</DialogEditDialog>
</CardFooter>}

9
src/server/services/qs.service.ts
View File

@@ -232,6 +232,11 @@ class QuickStackService {
private async createOrUpdatePvc() {
const pvcName = KubeObjectNameUtils.toPvcName(this.QUICKSTACK_DEPLOYMENT_NAME);
const allPvcs = await k3s.core.listNamespacedPersistentVolumeClaim(this.QUICKSTACK_NAMESPACE);
const existingPvc = allPvcs.body.items.find(p => p.metadata!.name === pvcName);
const storageClassName = existingPvc?.spec?.storageClassName || 'longhorn';
const pvc = {
apiVersion: 'v1',
kind: 'PersistentVolumeClaim',
@@ -241,7 +246,7 @@ class QuickStackService {
},
spec: {
accessModes: ['ReadWriteOnce'],
storageClassName: 'longhorn',
storageClassName,
resources: {
requests: {
storage: '1Gi'
@@ -249,8 +254,6 @@ class QuickStackService {
}
}
};
const allPvcs = await k3s.core.listNamespacedPersistentVolumeClaim(this.QUICKSTACK_NAMESPACE);
const existingPvc = allPvcs.body.items.find(p => p.metadata!.name === pvcName);
if (existingPvc) {
if (existingPvc.spec!.resources!.requests!.storage === pvc.spec!.resources!.requests!.storage) {
console.log(`PVC already exists with the same size, no changes`);