+
+
+
+
+
+
+
+ {@render children?.()}
+
+
+
+
+
+
+
+
+
+
+
+
+ humanFormat(d)}
+ rule={{
+ class: 'stroke-border dark:stroke-border'
+ }}
+ ticks={2}
+ />
+
+
+
+
+
+ {data.name}
+
+
+
+
+
+
diff --git a/new-web/src/lib/components/custom/CreateVM/Advanced.svelte b/new-web/src/lib/components/custom/CreateVM/Advanced.svelte
new file mode 100644
index 00000000..3407f2e8
--- /dev/null
+++ b/new-web/src/lib/components/custom/CreateVM/Advanced.svelte
@@ -0,0 +1,112 @@
+
+
+
+
diff --git a/new-web/src/lib/components/custom/CreateVM/Basic.svelte b/new-web/src/lib/components/custom/CreateVM/Basic.svelte
new file mode 100644
index 00000000..94625d75
--- /dev/null
+++ b/new-web/src/lib/components/custom/CreateVM/Basic.svelte
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/new-web/src/lib/components/custom/CreateVM/CreateVM.svelte b/new-web/src/lib/components/custom/CreateVM/CreateVM.svelte
new file mode 100644
index 00000000..b14a3130
--- /dev/null
+++ b/new-web/src/lib/components/custom/CreateVM/CreateVM.svelte
@@ -0,0 +1,298 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Configure your virtual machine with custom hardware and network settings +
+
+
+
+
+
+ {#if value === 'basic'}
+
+
+
+
+
+
diff --git a/new-web/src/lib/components/custom/CreateVM/Network.svelte b/new-web/src/lib/components/custom/CreateVM/Network.svelte
new file mode 100644
index 00000000..b05f5ef8
--- /dev/null
+++ b/new-web/src/lib/components/custom/CreateVM/Network.svelte
@@ -0,0 +1,95 @@
+
+
+{#snippet radioItem(id: number, name: string)}
+ {@const i = `radio-${id}`}
+
+
+
+ {#if pptDevices && pptDevices.length > 0}
+ PCI Passthrough
+
+
+ {#each checkboxItems as item (item.pptId)}
+
+
+ {/if}
+
+
+ {/each}
+
+ {
+ if (typeof v === 'boolean') toggle(item.pptId, v);
+ }}
+ />
+
+
+
+
+ + pci{item.device.domain}:{item.device.bus}:{item.device.device}:{item.device + .function} +
+
+
+{/snippet}
+
+
+
+
+ {#if switches && switches.standard}
+ {#each switches.standard ?? [] as sw}
+ {@render radioItem(sw.id, sw.name)}
+ {/each}
+ {/if}
+ {@render radioItem(0, 'None')}
+
+
+
+ {#if swStr !== '0'}
+
diff --git a/new-web/src/lib/components/custom/CreateVM/Storage.svelte b/new-web/src/lib/components/custom/CreateVM/Storage.svelte
new file mode 100644
index 00000000..c41434a9
--- /dev/null
+++ b/new-web/src/lib/components/custom/CreateVM/Storage.svelte
@@ -0,0 +1,230 @@
+
+
+{#snippet radioItem(type: string)}
+
+
+ {/if}
+
+
+{/snippet}
+
+{#snippet storageDetail(type: string)}
+ {#if type === 'zvol'}
+
+
+ {/if}
+
+
+
+
+ {#each ['zvol', 'raw', 'none'] as storageType}
+ {@render radioItem(storageType)}
+ {/each}
+
+
+
+ {#if type !== 'none'}
+ {@render storageDetail(type)}
+ {/if}
+
+
diff --git a/new-web/src/lib/components/custom/Header.svelte b/new-web/src/lib/components/custom/Header.svelte
new file mode 100644
index 00000000..2c823ea6
--- /dev/null
+++ b/new-web/src/lib/components/custom/Header.svelte
@@ -0,0 +1,181 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {#each menuData.menuItems as { icon, label, shortcut }}
+ label === 'Color Theme' && toggleMode()}
+ >
+ {shortcut}
+ {/if}
+
+ {/each}
+
+
+ logOut()}>
+ ⌘⇧Q
+
+
+
+
+
+
+
+
+
+ {#if menuData.createVM.open}
+
+
+
+
+
+
+
+ {#if titles.icon}
+
+
+ {titles.main}
+
+
+
+
+ {#if tableHeaders.length > 0}
+ {#each tableHeaders as header}
+ {header}
+ {/each}
+ {:else}
+ {titles.key}
+ {titles.value}
+ {/if}
+
+
+
+
+ {#if tableHeaders.length > 0}
+ {#each KV as Array> as row}
+
+ {#each tableHeaders as header}
+ {row[header]}
+ {/each}
+
+ {/each}
+ {:else}
+ {#each Object.entries(KV) as [key, value]}
+ {#if typeof value === 'object' && value !== null && !Array.isArray(value)}
+
+
+
+
+
+ Object ({Object.keys(value).length} properties)
+
+
+ {#if expandedObjects[key]}
+ {#each Object.entries(value) as [nestedKey, nestedValue]}
+
+
+ {nestedKey}
+
+
+ {nestedValue}
+
+
+ {/each}
+ {/if}
+ {:else}
+
+ {key}
+ {value}
+
+ {/if}
+ {/each}
+ {/if}
+
+
+
+
+
+
+ {#if mode.current === 'dark'}
+ 
+ {:else}
+ 
+ {/if}
+
+
+
+
+
+
+
+
+
diff --git a/new-web/src/lib/components/custom/PieChart.svelte b/new-web/src/lib/components/custom/PieChart.svelte
new file mode 100644
index 00000000..6827401f
--- /dev/null
+++ b/new-web/src/lib/components/custom/PieChart.svelte
@@ -0,0 +1,34 @@
+
+
+
+ {:else}
+
+ {/if}
+ SYLVE
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {authTypeValue}
+
+
+ {$_('auth.pam')}
+ {$_('auth.sylve')}
+
+
+
+
+
+
+
+
+ {languageValue}
+
+
+ English
+ Malayalam
+
+
+
+
+
+
+
+ d.color)}
+ renderContext="svg"
+ legend
+ >
+
+
+
+
+
+
+
diff --git a/new-web/src/lib/components/custom/Terminal.svelte b/new-web/src/lib/components/custom/Terminal.svelte
new file mode 100644
index 00000000..1e3d22c2
--- /dev/null
+++ b/new-web/src/lib/components/custom/Terminal.svelte
@@ -0,0 +1,274 @@
+
+
+
+
+{/if}
diff --git a/new-web/src/lib/components/custom/Throbber.svelte b/new-web/src/lib/components/custom/Throbber.svelte
new file mode 100644
index 00000000..64ec04e2
--- /dev/null
+++ b/new-web/src/lib/components/custom/Throbber.svelte
@@ -0,0 +1,195 @@
+
+
+
+
+
+
+
+
+
+
+ {$terminalStore.title}
+
+
+
+
+
+
+
+ {#each $terminalStore.tabs as tab}
+
+
+
+ visiblityAction('tab-select', tab.id)}
+ onkeydown={(e) =>
+ (e.key === 'Enter' || e.key === ' ') && visiblityAction('tab-select', tab.id)}
+ role="button"
+ tabindex="0"
+ >
+ {tab.title}
+ {#if tabsCount > 1}
+
+ {/if}
+
+ {/each}
+
+
+
+
+ {#each $terminalStore.tabs as tab}
+ {#if tab.id === $terminalStore.activeTabId}
+
+
+
+ {/if}
+ {/each}
+
+
+
+
+
diff --git a/new-web/src/lib/components/custom/TreeTable.svelte b/new-web/src/lib/components/custom/TreeTable.svelte
new file mode 100644
index 00000000..4a83f238
--- /dev/null
+++ b/new-web/src/lib/components/custom/TreeTable.svelte
@@ -0,0 +1,158 @@
+
+
+
diff --git a/new-web/src/lib/components/custom/TreeTable/Search.svelte b/new-web/src/lib/components/custom/TreeTable/Search.svelte
new file mode 100644
index 00000000..a9420569
--- /dev/null
+++ b/new-web/src/lib/components/custom/TreeTable/Search.svelte
@@ -0,0 +1,64 @@
+
+
++ SYLVE +
+
+
diff --git a/new-web/src/lib/components/custom/TreeView.svelte b/new-web/src/lib/components/custom/TreeView.svelte
new file mode 100644
index 00000000..e4a8caa1
--- /dev/null
+++ b/new-web/src/lib/components/custom/TreeView.svelte
@@ -0,0 +1,100 @@
+
+
+
+
+
+ {#if expanded}
+ {
+ if (e.key === 'Escape') {
+ query = '';
+ expanded = false;
+ }
+ }}
+ />
+ {/if}
+
+
+
+ {#if item.children}
+ + {getTranslation(`node.${item.label}`, item.label)} +
+- t }} style="overflow: hidden;">
+ {#each item.children as child}
+
+
+ Create Partitions
+
+
+
+
+
+
+
+
+
+
+
+
+ Name
+ Size
+ Usage
+ Actions
+
+
+
+ {#if disk && disk.partitions && disk.partitions.length > 0}
+ {#each disk.partitions as partition}
+
+ {partition.name}
+ {humanFormat(partition.size)}
+ {partition.usage}
+
+ Existing
+
+
+ {/each}
+ {/if}
+
+ {#if newPartitions.length > 0}
+ {#each newPartitions as partition, index}
+
+ {partition.name}
+ {humanFormat(partition.size)}
+ -
+
+
+
+
+ {/each}
+ {/if}
+
+ {#if (!disk || !disk.partitions || disk.partitions.length === 0) && newPartitions.length === 0}
+
+
+ No partitions created yet
+
+
+ {/if}
+
+
+
+
+
+
+ {#if newPartitions.length > 0}
+
+
+
+
+ {
+ const value = Math.floor(e[0]);
+ currentPartition = value <= 0 ? 0 : value;
+ currentPartitionInput = humanFormat(currentPartition);
+ }}
+ />
+
+
+
+
+ 0 ? '' : 'cursor-not-allowed'}>
+
+
+
+
+ + Size: {humanFormat(currentPartition)} +
++ Remaining space: {humanFormat(remainingSpace)} +
+
+
+
+
+ {/if}
+
+
+
+
+
+
+
+ Start Time
+ End Time
+ Node
+ User
+ Action
+ Status
+
+
+
+
+ {#each logs as log, i (i)}
+
+ {convertDbTime(log.started)}
+ {convertDbTime(log.ended)}
+ {log.node}
+ {log.user}@{log.authType}
+ {formatAction(log.action)}
+ {formatStatus(log.status)}
+
+ {/each}
+
+
+
+
+
+
diff --git a/new-web/src/lib/components/skeleton/Shell.svelte b/new-web/src/lib/components/skeleton/Shell.svelte
new file mode 100644
index 00000000..b403b760
--- /dev/null
+++ b/new-web/src/lib/components/skeleton/Shell.svelte
@@ -0,0 +1,52 @@
+
+
+
+
+
+
diff --git a/new-web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/new-web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
new file mode 100644
index 00000000..a0056912
--- /dev/null
+++ b/new-web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -0,0 +1,18 @@
+
+
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/new-web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
new file mode 100644
index 00000000..c8fa7625
--- /dev/null
+++ b/new-web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -0,0 +1,20 @@
+
+
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/new-web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
new file mode 100644
index 00000000..a64ee768
--- /dev/null
+++ b/new-web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -0,0 +1,20 @@
+
+
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/card/card-content.svelte b/new-web/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 00000000..bc90b837
--- /dev/null
+++ b/new-web/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,15 @@
+
+
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/card/card-description.svelte b/new-web/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 00000000..9b20ac70
--- /dev/null
+++ b/new-web/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,20 @@
+
+
++ {@render children?.()} +
diff --git a/new-web/src/lib/components/ui/card/card-footer.svelte b/new-web/src/lib/components/ui/card/card-footer.svelte new file mode 100644 index 00000000..cf433539 --- /dev/null +++ b/new-web/src/lib/components/ui/card/card-footer.svelte @@ -0,0 +1,20 @@ + + +
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/card/card-header.svelte b/new-web/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 00000000..8a91abbf
--- /dev/null
+++ b/new-web/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,23 @@
+
+
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/card/card-title.svelte b/new-web/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 00000000..22586e61
--- /dev/null
+++ b/new-web/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,20 @@
+
+
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/card/card.svelte b/new-web/src/lib/components/ui/card/card.svelte
new file mode 100644
index 00000000..99448cc9
--- /dev/null
+++ b/new-web/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,23 @@
+
+
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/card/index.ts b/new-web/src/lib/components/ui/card/index.ts
new file mode 100644
index 00000000..4d3fce48
--- /dev/null
+++ b/new-web/src/lib/components/ui/card/index.ts
@@ -0,0 +1,25 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";
+
+export {
+ Root,
+ Content,
+ Description,
+ Footer,
+ Header,
+ Title,
+ Action,
+ //
+ Root as Card,
+ Content as CardContent,
+ Description as CardDescription,
+ Footer as CardFooter,
+ Header as CardHeader,
+ Title as CardTitle,
+ Action as CardAction,
+};
diff --git a/new-web/src/lib/components/ui/checkbox/checkbox.svelte b/new-web/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100644
index 00000000..1622e05c
--- /dev/null
+++ b/new-web/src/lib/components/ui/checkbox/checkbox.svelte
@@ -0,0 +1,36 @@
+
+
+
+ {#if checked}
+
+ {/snippet}
+
+
diff --git a/new-web/src/lib/components/ui/command/command-item.svelte b/new-web/src/lib/components/ui/command/command-item.svelte
new file mode 100644
index 00000000..2297c978
--- /dev/null
+++ b/new-web/src/lib/components/ui/command/command-item.svelte
@@ -0,0 +1,20 @@
+
+
+
+
diff --git a/new-web/src/lib/components/ui/custom-input/combobox.svelte b/new-web/src/lib/components/ui/custom-input/combobox.svelte
new file mode 100644
index 00000000..5ebc232d
--- /dev/null
+++ b/new-web/src/lib/components/ui/custom-input/combobox.svelte
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+
+
+
+
+
+ No data
+
+
+
+
diff --git a/new-web/src/lib/components/ui/custom-input/value.svelte b/new-web/src/lib/components/ui/custom-input/value.svelte
new file mode 100644
index 00000000..80b4b564
--- /dev/null
+++ b/new-web/src/lib/components/ui/custom-input/value.svelte
@@ -0,0 +1,49 @@
+
+
+
+
+ {#each filteredData as element}
+ selectItem(element.value)}
+ onkeydown={(e) => {
+ if (e.key === 'Enter') selectItem(element.value);
+ }}
+ >
+
+ {/each}
+
+
+
+ {#if label}
+
+ {/if}
+ {#if type === 'textarea'}
+
+ {:else}
+
+ {/if}
+
diff --git a/new-web/src/lib/components/ui/dialog/dialog-close.svelte b/new-web/src/lib/components/ui/dialog/dialog-close.svelte
new file mode 100644
index 00000000..840b2f68
--- /dev/null
+++ b/new-web/src/lib/components/ui/dialog/dialog-close.svelte
@@ -0,0 +1,7 @@
+
+
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/dialog/dialog-header.svelte b/new-web/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 00000000..fc90cd9b
--- /dev/null
+++ b/new-web/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+
+
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/dialog/dialog-overlay.svelte b/new-web/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 00000000..f81ad833
--- /dev/null
+++ b/new-web/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,20 @@
+
+
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/new-web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 00000000..189aef40
--- /dev/null
+++ b/new-web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+
+
+
+ {#if checked}
+
+ {/snippet}
+
+
+ {/if}
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/select/select-scroll-down-button.svelte b/new-web/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 00000000..36292058
--- /dev/null
+++ b/new-web/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,20 @@
+
+
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/sheet/sheet-header.svelte b/new-web/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 00000000..757a6a56
--- /dev/null
+++ b/new-web/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,20 @@
+
+
+
+ {@render children?.()}
+
diff --git a/new-web/src/lib/components/ui/sheet/sheet-overlay.svelte b/new-web/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 00000000..345e197b
--- /dev/null
+++ b/new-web/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,20 @@
+
+
+
+
+ {@render children?.()}
+
+
diff --git a/new-web/src/lib/components/ui/tabs/index.ts b/new-web/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 00000000..12d4327a
--- /dev/null
+++ b/new-web/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,16 @@
+import Root from "./tabs.svelte";
+import Content from "./tabs-content.svelte";
+import List from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+
+export {
+ Root,
+ Content,
+ List,
+ Trigger,
+ //
+ Root as Tabs,
+ Content as TabsContent,
+ List as TabsList,
+ Trigger as TabsTrigger,
+};
diff --git a/new-web/src/lib/components/ui/tabs/tabs-content.svelte b/new-web/src/lib/components/ui/tabs/tabs-content.svelte
new file mode 100644
index 00000000..340d65cf
--- /dev/null
+++ b/new-web/src/lib/components/ui/tabs/tabs-content.svelte
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+ close()}
+ >
+
+
+
+
+
+
+
+
+
+ ID
+ Dataset
+ Prefix
+ Interval
+ Last Run
+
+
+
+ {#if periodicSnapshots && periodicSnapshots.length > 0}
+ {#each periodicSnapshots as snapshot, index}
+
+ {snapshot.id}
+ {getDatasetName(snapshot.guid)}
+ {snapshot.prefix}
+ {intervalToString(snapshot.interval)}
+ {dateToAgo(snapshot.lastRunAt)}
+
+ {#if !shadowDeleted.includes(snapshot.id)}
+
+
+
+ {:else}
+
+ Deleted
+
+ {/if}
+
+ {/each}
+ {:else}
+
+
+ No snapshot jobs
+
+
+ {/if}
+
+
+
+
+
+
+ {#if shadowDeleted.length > 0}
+
+ {/if}
+
+
+
+
+
+
+
+
+
diff --git a/new-web/src/routes/[node]/+layout.ts b/new-web/src/routes/[node]/+layout.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/new-web/src/routes/[node]/+page.svelte b/new-web/src/routes/[node]/+page.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/new-web/src/routes/[node]/network/interfaces/+page.svelte b/new-web/src/routes/[node]/network/interfaces/+page.svelte
new file mode 100644
index 00000000..02010a2e
--- /dev/null
+++ b/new-web/src/routes/[node]/network/interfaces/+page.svelte
@@ -0,0 +1,103 @@
+
+
+{#snippet button(type: string)}
+ {#if type === 'view' && activeRow !== null && activeRow.length > 0}
+
+ {/if}
+{/snippet}
+
+
+
+
+ {capitalizeFirstLetter(getTranslation('common.datacenter', 'Datacenter'))}
+ +
+
+
+
+
+
+ {@render children?.()}
+
+
+
diff --git a/new-web/src/routes/[node]/network/interfaces/+page.ts b/new-web/src/routes/[node]/network/interfaces/+page.ts
new file mode 100644
index 00000000..6d0e8230
--- /dev/null
+++ b/new-web/src/routes/[node]/network/interfaces/+page.ts
@@ -0,0 +1,13 @@
+import { getInterfaces } from '$lib/api/network/iface';
+import { cachedFetch } from '$lib/utils/http';
+
+export async function load() {
+ const cacheDuration = 1000 * 60000;
+ const [interfaces] = await Promise.all([
+ cachedFetch('networkInterfaces', async () => await getInterfaces(), cacheDuration)
+ ]);
+
+ return {
+ interfaces
+ };
+}
diff --git a/new-web/src/routes/[node]/network/switches/+page.svelte b/new-web/src/routes/[node]/network/switches/+page.svelte
new file mode 100644
index 00000000..ae7b957e
--- /dev/null
+++ b/new-web/src/routes/[node]/network/switches/+page.svelte
@@ -0,0 +1,605 @@
+
+
+{#snippet button(type: string)}
+ {#if activeRow && Object.keys(activeRow).length > 0}
+ {#if type === 'edit'}
+
+ {:else if type === 'delete'}
+
+ {/if}
+ {/if}
+{/snippet}
+
+
+
+
+
+
+
+{#if confirmModals.active === 'newSwitch' || confirmModals.active === 'editSwitch'}
+
+
+
+
+
+
+
+
+
+
+
+ {#if confirmModals.active === 'newSwitch'}
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if confirmModals.active === 'newSwitch'}
+
+
+
+
+ {#if confirmModals.active === 'editSwitch'}
+
+ {:else}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+ {
+ const id = activeRow ? activeRow[0]?.id : null;
+ const result = await deleteNote(id as number);
+ if (isAPIResponse(result) && result.status === 'success') {
+ handleNote(undefined, false, true);
+ } else {
+ handleValidationErrors(result as APIResponse, 'notes');
+ }
+ },
+ onCancel: () => {
+ modalState.isDeleteOpen = false;
+ }
+ }}
+ >
+
+ {
+ const ids = activeRow
+ ? activeRow.map((row) => (typeof row.id === 'number' ? row.id : parseInt(row.id)))
+ : [];
+ const result = await deleteNotes(ids);
+ if (isAPIResponse(result) && result.status === 'success') {
+ handleNote(undefined, false, true);
+ } else {
+ handleValidationErrors(result as APIResponse, 'notes');
+ }
+ },
+ onCancel: () => {
+ modalState.isBulkDeleteOpen = false;
+ }
+ }}
+ >
+
diff --git a/new-web/src/routes/[node]/notes/+page.ts b/new-web/src/routes/[node]/notes/+page.ts
new file mode 100644
index 00000000..bc95bccc
--- /dev/null
+++ b/new-web/src/routes/[node]/notes/+page.ts
@@ -0,0 +1,13 @@
+import { getNotes } from '$lib/api/info/notes';
+import type { Note } from '$lib/types/info/notes';
+import { SEVEN_DAYS } from '$lib/utils';
+import { cachedFetch } from '$lib/utils/http';
+
+export async function load() {
+ const cacheDuration = SEVEN_DAYS;
+ const [notes] = await Promise.all([cachedFetch('notes', async () => getNotes(), cacheDuration)]);
+
+ return {
+ notes: notes as Note[]
+ };
+}
diff --git a/new-web/src/routes/[node]/settings/device-passthrough/+page.svelte b/new-web/src/routes/[node]/settings/device-passthrough/+page.svelte
new file mode 100644
index 00000000..6afc6e4e
--- /dev/null
+++ b/new-web/src/routes/[node]/settings/device-passthrough/+page.svelte
@@ -0,0 +1,176 @@
+
+
+{#snippet button(type: string)}
+ {#if activeRow !== null && activeRow.length === 1}
+ {#if type === 'enable-passthrough' && !activeRow[0].name.startsWith('ppt')}
+
+ {/if}
+
+ {#if type === 'disable-passthrough' && activeRow[0].name.startsWith('ppt')}
+
+ {/if}
+ {/if}
+{/snippet}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if modalState.isEditMode}
+
+
+
+
+ {:else}
+
+
+ {@html markdownToTailwindHTML(modalState.content)}
+
+
+ {/if}
+ + {capitalizeFirstLetter(getTranslation('common.content', 'Content'))} +
+
+ {#if modalState.isEditMode}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ smartModal.open = false;
+ }
+ }}
+ >
+
+
+
+
+
+
+
+
+ + {counts[type as CardType]} +
+
+
diff --git a/new-web/src/routes/[node]/storage/zfs/dashboard/+page.ts b/new-web/src/routes/[node]/storage/zfs/dashboard/+page.ts
new file mode 100644
index 00000000..7d83a1ad
--- /dev/null
+++ b/new-web/src/routes/[node]/storage/zfs/dashboard/+page.ts
@@ -0,0 +1,19 @@
+import { getDatasets } from '$lib/api/zfs/datasets';
+import { getPools, getPoolStats } from '$lib/api/zfs/pool';
+import { SEVEN_DAYS } from '$lib/utils';
+import { cachedFetch } from '$lib/utils/http';
+
+export async function load() {
+ const cacheDuration = SEVEN_DAYS;
+ const [datasets, pools, poolStats] = await Promise.all([
+ cachedFetch('datasets', async () => await getDatasets(), cacheDuration),
+ cachedFetch('pools', getPools, cacheDuration),
+ cachedFetch('pool-stats', async () => await getPoolStats(1, 128), cacheDuration)
+ ]);
+
+ return {
+ pools: pools,
+ datasets: datasets,
+ poolStats: poolStats
+ };
+}
diff --git a/new-web/src/routes/[node]/storage/zfs/datasets/fs/+page.svelte b/new-web/src/routes/[node]/storage/zfs/datasets/fs/+page.svelte
new file mode 100644
index 00000000..5fbcd7b5
--- /dev/null
+++ b/new-web/src/routes/[node]/storage/zfs/datasets/fs/+page.svelte
@@ -0,0 +1,1008 @@
+
+
+{#snippet button(type: string)}
+ {#if activeRows && activeRows.length == 1}
+ {#if type === 'rollback-snapshot' && activeDataset?.type === 'snapshot'}
+
+ {/if}
+
+ {#if type === 'delete-snapshot' && activeDataset?.type === 'snapshot'}
+
+ {/if}
+
+ {#if type === 'create-snapshot' && activeDataset?.type === 'filesystem'}
+
+ {/if}
+
+ {#if type === 'delete-filesystem' && activeDataset?.type === 'filesystem' && activeDataset?.name.includes('/')}
+
+ {/if}
+ {:else if activeRows && activeRows.length > 1}
+ {#if activeDatasets.length > 0 && !poolsSelected}
+ {#if type === 'bulk-delete'}
+
+ {/if}
+ {/if}
+ {/if}
+{/snippet}
+
+
+ {#each ['pools', 'datasets', 'file_systems', 'volumes', 'snapshots'] as type}
+
+
+
+ {@render card(type)}
+
+ {/each}
+
+ {#if pools.length > 0}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if histograms.compression.data.length === 0}
+
+ No data available
+ {:else} +
+
+
+
+
+
+
+
+
+
+
+ {/if}
+
+
+
+
+
+
+
+
+ {#if poolStatsData.length === 0}
+
+ No data available
+ {:else} +
+
+
+{#if confirmModals.active == 'deleteSnapshot' || confirmModals.active == 'deleteFilesystem'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ confirmModals.createFilesystem.data.properties.parent = value?.value || '';
+ }}
+ >
+
+
+
+
+
+ {#each grouped as pool}
+ {#each pool.filesystems as fs}
+ {fs.name}
+ {/each}
+ {/each}
+
+
+
+
+
+
+
+ {
+ confirmModals.createFilesystem.data.properties.atime = value?.value || '';
+ }}
+ >
+
+
+
+
+ {#each zfsProperties.atime as option}
+ {option.label}
+ {/each}
+
+
+
+
+
+
+
+ {
+ confirmModals.createFilesystem.data.properties.checksum = value?.value || '';
+ }}
+ >
+
+
+
+
+ {#each zfsProperties.checksum as option}
+ {option.label}
+ {/each}
+
+
+
+
+
+
+
+ {
+ confirmModals.createFilesystem.data.properties.compression = value?.value || '';
+ }}
+ >
+
+
+
+
+ {#each zfsProperties.compression as option}
+ {option.label}
+ {/each}
+
+
+
+
+
+
+
+ {
+ confirmModals.createFilesystem.data.properties.dedup = value?.value || '';
+ }}
+ >
+
+
+
+
+ {#each zfsProperties.dedup as option}
+ {option.label}
+ {/each}
+
+
+
+
+
+
+
+ {
+ confirmModals.createFilesystem.data.properties.encryption = value?.value || '';
+ }}
+ >
+
+
+
+
+ {#each zfsProperties.encryption as option}
+ {option.label}
+ {/each}
+
+
+
+
+
+ {#if confirmModals.createFilesystem.data.properties.encryption !== 'off'}
+
+
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{#if confirmModals.active === 'createSnapshot'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {getTranslation(
+ 'common.permanent_delete_msg',
+ 'This action cannot be undone. This will permanently delete'
+ )}
+ {confirmModals.parent}
+ {confirmModals[confirmModals.active].title}.
+
+
+
+
+
+
+
+
+{#snippet simpleSlect(prop: keyof props, label: string, placeholder: string)}
+
+
+
+
+
+ option.value === confirmModals.createVolume.data.properties[prop]
+ )?.label || confirmModals.createVolume.data.properties[prop],
+ value: confirmModals.createVolume.data.properties[prop]
+ }}
+ onSelectedChange={(value) => {
+ confirmModals.createVolume.data.properties[prop] = value?.value || '';
+ }}
+ >
+
+
+
+
+
+ {#each zfsProperties[prop] as option}
+ {option.label}
+ {/each}
+
+
+
+
+{/snippet}
+
+{#if confirmModals.active === 'createVolume'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ confirmModals.createVolume.data.properties.parent = value?.value || '';
+ }}
+ >
+
+
+
+
+
+ {#each grouped as group}
+ {group.pool.name}
+ {/each}
+
+
+
+
+
+ {@render simpleSlect('volblocksize', 'Block Size', 'Select block size')}
+ {@render simpleSlect('checksum', 'Checksum', 'Select checksum algorithm')}
+ {@render simpleSlect('compression', 'Compression', 'Select compression type')}
+ {@render simpleSlect('dedup', 'Deduplication', 'Select deduplication mode')}
+ {@render simpleSlect('encryption', 'Encryption', 'Select encryption')}
+ {@render simpleSlect('primarycache', 'Primary Cache', 'Select primary cache mode')}
+ {@render simpleSlect('volmode', 'Volume Mode', 'Select volume mode')}
+
+ {#if confirmModals.createVolume.data.properties.encryption !== 'off'}
+
+
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{/snippet}
+
+{#snippet partitionsContainer()}
+
+
+
+
+
+ {#each useableDisks.filter((disk) => disk.type === type && disk.partitions.length === 0 && !isDiskInVdev(disk.uuid)) as disk (disk.uuid)}
+
+
+
+ {/each}
+
+ {#if useableDisks.filter((disk) => disk.type === type).length === 0 || useableDisks.filter((disk) => disk.type === type && disk.partitions.length === 0 && !isDiskInVdev(disk.uuid)).length === 0}
+
+ {#if type === 'HDD'}
+
+
+ {disk.device.replaceAll('/dev/', '')}
+
+
+ {humanFormat(disk.size)}
+
+
+ {getTranslation('zfs.pool.no_available_disks', 'No available disks')}
+
+ {/if}
+
+
+
+{/snippet}
+
+{#snippet vdevContainer(id: number)}
+ {#each modal.vdevContainers[id]?.disks || [] as disk (disk.uuid)}
+
+
+
+
+
+ {#each useablePartitions.filter((partition) => !modal.vdevContainers
+ .flatMap((vdev) => vdev.partitions)
+ .some((p) => p.name === partition.name)) as partition (partition.name)}
+
+
+
+ {/each}
+
+ {#if useablePartitions.length === 0 || useablePartitions.filter((partition) => !modal.vdevContainers
+ .flatMap((vdev) => vdev.partitions)
+ .some((p) => p.name === partition.name)).length === 0}
+
+
+
+ {partition.name}
+
+
+ {humanFormat(partition.size)}
+
+
+ {getTranslation('zfs.pool.no_available_partitions', 'No available partitions')}
+
+ {/if}
+
+ {#if disk.type === 'HDD'}
+
+ {/each}
+
+ {#each modal.vdevContainers[id]?.partitions || [] as partition (partition.name)}
+
+ {disk.device.split('/').pop()}
+
+
+
+
+
+ {/each}
+{/snippet}
+
+{#snippet vdevErrors(id: number)}
+ {#if getVdevErrors(id) !== ''}
+
+ {partition.name.split('/').pop()}
+
+
+
+
+
+
+
+
+
+ {/if}
+{/snippet}
+
++ {@html getVdevErrors(id)} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ rt.value === modal.raidType)?.label,
+ value: raidTypes.find((rt) => rt.value === modal.raidType)?.value
+ }}
+ onSelectedChange={(value) => {
+ modal.raidType = value?.value as ZpoolRaidType;
+ setRedundancyAvailability();
+ }}
+ >
+
+
+
+
+ {#each raidTypes as raidType}
+ {#if raidType.available}
+ {raidType.label}
+ {/if}
+ {/each}
+
+
+
+
+
+
+
+
+
+
+ {#each Array(modal.vdevCount) as _, i}
+
+ {@render vdevErrors(i)}
+
+
+ {/each}
+ handleDropToVdev(i, event),
+ dragover_class: 'droppable'
+ }}
+ >
+ {#if !vdevContains(i)}
+
+
+ {i + 1}
+ Drop disks here
+
+ {:else}
+
+ {@render vdevContainer(i)}
+
+ {/if}
+
+
+
+
+ {@render diskContainer('HDD')}
+ {@render diskContainer('SSD')}
+ {@render diskContainer('NVMe')}
+ {@render partitionsContainer()}
+
+
+
+
+ {#if modal.advanced}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/if}
+
+
+ {
+ const val = i + 9;
+ return { value: val, label: `${val}` };
+ })
+ ].find((opt) => opt.value === modal.properties.ashift)?.label,
+ value: [
+ { value: 0, label: '0 (auto)' },
+ ...Array.from({ length: 8 }, (_, i) => {
+ const val = i + 9;
+ return { value: val, label: `${val}` };
+ })
+ ].find((opt) => opt.value === modal.properties.ashift)?.value
+ }}
+ onSelectedChange={(value) => {
+ modal.properties.ashift = value?.value || 0;
+ }}
+ >
+
+
+
+
+ 0 (auto)
+ {#each Array.from({ length: 8 }, (_, i) => i + 9) as val}
+ {val}
+ {/each}
+
+
+
+
+
+
+
+
+ {
+ modal.properties.autoexpand = value?.value || 'off';
+ }}
+ >
+
+
+
+
+ Yes
+ No
+
+
+
+
+
+
+
+
+ {
+ modal.properties.autotrim = value?.value || 'off';
+ }}
+ >
+
+
+
+
+ Yes
+ No
+
+
+
+
+
+
+
+
+ {
+ modal.properties.delegation = value?.value || 'off';
+ }}
+ >
+
+
+
+
+ Yes
+ No
+
+
+
+
+
+
+
+
+ {
+ modal.properties.failmode = value?.value || 'wait';
+ }}
+ >
+
+
+
+
+ Wait
+ Continue
+ Panic
+
+
+
+
+
+ {#if possibleSpares && possibleSpares.length > 0 && modal.raidType !== 'stripe'}
+
+
+ {
+ modal.spares = v as SelectSpares[];
+ }}
+ >
+
+ {#if possibleSpares.length > 0}
+
+ {modal.spares.length > 0
+ ? modal.spares.map((s) => s.label).join(', ')
+ : 'Select spares'}
+
+ {:else}
+ Select spares
+ {/if}
+
+
+
+ {#each possibleSpares as spare}
+
+ {spare}
+
+ {/each}
+
+
+
+
+ {/if}
+
+
+
+
+
+
+ {#if device.read > 0 || device.write > 0 || device.cksum > 0}
+ {device.name}
+ {#if device.note && showNote}
+
+ {#if device.note === '(resilvering)'}
+ Resilvering
+ {:else}
+ {device.note}
+ {/if}
+
+ {/if}
+
+ {#if device.read > 0}
+ READ: {device.read}
+ {/if}
+ {#if device.write > 0}
+ WRITE: {device.write}
+ {/if}
+ {#if device.cksum > 0}
+ CKSUM: {device.cksum}
+ {/if}
+
+ {/if}
+{/snippet}
+
+{#snippet deviceTreeNode(device: Zpool['status']['devices'][0], showNote: boolean)}
+
+
+{/snippet}
+
+{#if confirmModals.active == 'statusPool'}
+
+ {#if showNote && !device.__isLast}
+
+ {:else}
+
+ {/if}
+ {@render dtEl(device, showNote)}
+
+
+ {#if device.children && device.children.length > 0 && !device.name.startsWith('replacing')}
+
+ {#each device.children as child, index (child.name)}
+
+ {/if}
+
+ {#if device.name.startsWith('replacing') && device.children && device.children.length > 0}
+
+
+ {@render deviceTreeNode(
+ { ...child, __isLast: index === device.children.length - 1 },
+ true
+ )}
+
+ {/each}
+
+ {#each device.children as replaceDisk}
+ {@render deviceTreeNode(replaceDisk, true)}
+ {/each}
+
+ {/if}
+
+
+
+ Pool Status
+ •
+ {confirmModals.statusPool.data.status.name}
+ {sPool.state}
+
+
+
+ {
+ confirmModals.statusPool.open = false;
+ }}
+ >
+
+
+
+
+ {#if sPool}
+ {#if sPool.status && sPool.status.length > 0}
+
+
+
+ {/if}
+
+
+
+
+
+ {sPool.status}
+ {#if sPool.action && sPool.action.length > 0} +{sPool.action}
+ {/if} +
+
+ {/if}
+
+
+
+
+
+
+ {#if sPool.scan && sPool.scan.length > 0}
+ {#if sPool.scan.includes('in progress') || sPool.scan.includes('resilver in progress')}
+ {@const progressMatch = sPool.scan.match(/(\d+\.\d+)%/)}
+ {@const progress = progressMatch ? parseFloat(progressMatch[1]) : 0}
+ {@const isResilver = sPool.scan.includes('resilver')}
+
+
+
+ {capitalizeFirstLetter(sPool.scan)}
+
+
+
+
+ {:else}
+
+ {capitalizeFirstLetter(sPool.scan)}
+
+ {/if}
+ {:else}
+
+
+ {/if}
+
+
+
+
+
+
+ {#if sPool.devices && sPool.devices.length > 0}
+
+
+ {#each sPool.devices as device, index (device.name)}
+ {@render deviceTreeNode(
+ { ...device, __isLast: index === device.children.length - 1 },
+ false
+ )}
+ {/each}
+
+
+ {#if sPoolSpares && sPoolSpares.length > 0}
+
+
+ {/if}
+ {:else}
+
+
+
+
+
+ {#each sPoolSpares as spare, index (spare.name)}
+
+
+
+
+ {/each}
+
+
+
+
+
+
+ {spare.name}
+
+
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+ d.device === confirmModals.replaceDevice.data?.new)
+ ?.device ||
+ useablePartitions.find((d) => d.name === confirmModals.replaceDevice.data?.new)
+ ?.name,
+ value: confirmModals.replaceDevice.data?.new
+ }}
+ onSelectedChange={(value) => {
+ confirmModals.replaceDevice.data = {
+ ...confirmModals.replaceDevice.data,
+ new: value?.value as string
+ };
+ }}
+ >
+
+
+
+
+ {#each useableDisks as disk}
+
+ {disk.device}
+
+ {/each}
+
+ {#each useablePartitions as partition}
+
+ {partition.name}
+
+ {/each}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ editModal.properties.autoexpand = value?.value || 'off';
+ }}
+ >
+
+
+
+
+ Yes
+ No
+
+
+
+
+
+
+
+
+ {
+ editModal.properties.autotrim = value?.value || 'off';
+ }}
+ >
+
+
+
+
+ Yes
+ No
+
+
+
+
+
+
+
+
+ {
+ editModal.properties.delegation = value?.value || 'off';
+ }}
+ >
+
+
+
+
+ Yes
+ No
+
+
+
+
+
+
+
+
+ {
+ editModal.properties.failmode = value?.value || 'wait';
+ }}
+ >
+
+
+
+
+ Wait
+ Continue
+ Panic
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/new-web/src/routes/[node]/summary/+page.ts b/new-web/src/routes/[node]/summary/+page.ts
new file mode 100644
index 00000000..932e0ed1
--- /dev/null
+++ b/new-web/src/routes/[node]/summary/+page.ts
@@ -0,0 +1,57 @@
+import { getBasicInfo } from '$lib/api/info/basic';
+import { getCPUInfo } from '$lib/api/info/cpu';
+import { getRAMInfo, getSwapInfo } from '$lib/api/info/ram';
+import { getIODelay } from '$lib/api/zfs/pool';
+import { SEVEN_DAYS } from '$lib/utils';
+import { cachedFetch } from '$lib/utils/http';
+import { getTotalDiskUsage } from '$lib/utils/zfs';
+
+export async function load() {
+ const cacheDuration = SEVEN_DAYS;
+ const [
+ basicInfo,
+ cpuInfo,
+ cpuInfoHistorical,
+ ramInfo,
+ swapInfo,
+ ioDelay,
+ ioDelayHistorical,
+ totalDiskUsage
+ ] = await Promise.all([
+ cachedFetch('basicInfo', getBasicInfo, cacheDuration),
+ cachedFetch('cpuInfo', getCPUInfo, cacheDuration),
+ cachedFetch(
+ 'cpuInfoHistorical',
+ () =>
+ getCPUInfo({
+ queryKey: ['cpuInfoHistorical'],
+ meta: undefined
+ }),
+ cacheDuration
+ ),
+ cachedFetch('ramInfo', getRAMInfo, cacheDuration),
+ cachedFetch('swapInfo', getSwapInfo, cacheDuration),
+ cachedFetch(
+ 'ioDelay',
+ () => getIODelay({ queryKey: ['ioDelay'], meta: undefined }),
+ cacheDuration
+ ),
+ cachedFetch(
+ 'ioDelayHistorical',
+ () => getIODelay({ queryKey: ['ioDelayHistorical'], meta: undefined }),
+ cacheDuration
+ ),
+ cachedFetch('totalDiskUsage', getTotalDiskUsage, cacheDuration)
+ ]);
+
+ return {
+ basicInfo,
+ cpuInfo,
+ cpuInfoHistorical,
+ ramInfo,
+ swapInfo,
+ ioDelay,
+ ioDelayHistorical,
+ totalDiskUsage
+ };
+}
diff --git a/new-web/src/routes/[node]/utilities/downloader/+page.svelte b/new-web/src/routes/[node]/utilities/downloader/+page.svelte
new file mode 100644
index 00000000..66c14928
--- /dev/null
+++ b/new-web/src/routes/[node]/utilities/downloader/+page.svelte
@@ -0,0 +1,340 @@
+
+
+{#snippet button(type: string)}
+ {#if type === 'delete' && onlyParentsSelected}
+ {#if activeRows && activeRows.length >= 1}
+
+ {/if}
+ {/if}
+
+ {#if type === 'download' && onlyChildSelected && isDownloadCompleted}
+ {#if activeRows && activeRows.length == 1}
+
+ {/if}
+ {/if}
+
+ {#if type === 'download' && httpDownloadSelected && isDownloadCompleted}
+ {#if activeRows && activeRows.length == 1}
+
+ {/if}
+ {/if}
+{/snippet}
+
+
+
+
+
+
+
+
+ {basicInfo.hostname} (Started {secondsToHoursAgo(
+ basicInfo.uptime
+ )})
+
+
+
+
+
+ {getTranslation('summary.CPU_s', 'CPU(s)')}
+ {cpuInfo.logicalCores} x {cpuInfo.name}
+
+
+ {getTranslation('summary.operating_system', 'Operating System')}
+ {basicInfo.os}
+
+
+ {getTranslation('summary.load_average', 'Load Average')}
+ {basicInfo.loadAverage}
+
+
+ {getTranslation('summary.boot_mode', 'Boot Mode')}
+ {basicInfo.bootMode}
+
+
+
+ {getTranslation('summary.sylve_version', 'Sylve Version')}
+ {basicInfo.sylveVersion}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {floatToNDecimals(cpuInfo.usage, 2)}% {getTranslation('common.of', 'of')} + {cpuInfo.logicalCores} + {getTranslation('summary.CPU_s', 'CPU(s)')} +
+
+
+
+
+
+
+
+ {floatToNDecimals(ramInfo.usedPercent, 2)}% of {bytesToHumanReadable( + ramInfo.total + )} +
+
+
+
+
+
+
+
+ {floatToNDecimals(totalDiskUsage, 2)} % +
+
+
+
+
+
+
+
{floatToNDecimals(ioDelay.delay, 3) || 0} %
+
+
+
+
+
+
+
+ {floatToNDecimals(swapInfo.usedPercent, 2)}% of {bytesToHumanReadable( + swapInfo.total + )} +
+
+
+ {getTranslation('summary.cpu_usage', 'CPU Usage')}
+
+
+
+
+
+
+
+
+ {
+ const id = activeRows ? activeRows[0]?.id : null;
+ const result = await deleteDownload(id as number);
+ if (isAPIResponse(result) && result.status === 'success') {
+ modalState.isDelete = false;
+ modalState.title = '';
+ activeRows = null;
+ } else {
+ handleValidationErrors(result as APIResponse, 'downloads');
+ }
+ },
+ onCancel: () => {
+ modalState.isDelete = false;
+ modalState.title = '';
+ }
+ }}
+ >
+
+ {
+ const ids = activeRows ? activeRows.map((row) => row.id) : [];
+ const result = await bulkDeleteDownloads(ids as number[]);
+ if (isAPIResponse(result) && result.status === 'success') {
+ modalState.isBulkDelete = false;
+ modalState.title = '';
+ activeRows = null;
+ } else {
+ handleValidationErrors(result as APIResponse, 'downloads');
+ }
+ },
+ onCancel: () => {
+ modalState.isBulkDelete = false;
+ modalState.title = '';
+ }
+ }}
+ >
+
diff --git a/new-web/src/routes/[node]/utilities/downloader/+page.ts b/new-web/src/routes/[node]/utilities/downloader/+page.ts
new file mode 100644
index 00000000..83b1778d
--- /dev/null
+++ b/new-web/src/routes/[node]/utilities/downloader/+page.ts
@@ -0,0 +1,14 @@
+import { getDownloads } from '$lib/api/utilities/downloader';
+import { SEVEN_DAYS } from '$lib/utils';
+import { cachedFetch } from '$lib/utils/http';
+
+export async function load() {
+ const cacheDuration = SEVEN_DAYS;
+ const [downloads] = await Promise.all([
+ cachedFetch('downloads', async () => getDownloads(), cacheDuration)
+ ]);
+
+ return {
+ downloads
+ };
+}
diff --git a/new-web/src/routes/[node]/vm/[node]/+page.svelte b/new-web/src/routes/[node]/vm/[node]/+page.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/new-web/src/routes/[node]/vm/[node]/console/+page.svelte b/new-web/src/routes/[node]/vm/[node]/console/+page.svelte
new file mode 100644
index 00000000..848a9429
--- /dev/null
+++ b/new-web/src/routes/[node]/vm/[node]/console/+page.svelte
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/new-web/src/routes/[node]/vm/[node]/console/+page.ts b/new-web/src/routes/[node]/vm/[node]/console/+page.ts
new file mode 100644
index 00000000..743dde65
--- /dev/null
+++ b/new-web/src/routes/[node]/vm/[node]/console/+page.ts
@@ -0,0 +1,19 @@
+import { getVMs } from '$lib/api/vm/vm';
+
+export async function load({ params }) {
+ const vms = (await getVMs()) || [];
+ const vm = vms.find((vm) => vm.vmId === Number(params.node));
+
+ let port = 0;
+ let password = '';
+
+ if (vm) {
+ port = vm.vncPort;
+ password = vm.vncPassword;
+ }
+
+ return {
+ port,
+ password
+ };
+}
diff --git a/new-web/src/routes/[node]/vm/[node]/storage/+page.svelte b/new-web/src/routes/[node]/vm/[node]/storage/+page.svelte
new file mode 100644
index 00000000..05f0ee29
--- /dev/null
+++ b/new-web/src/routes/[node]/vm/[node]/storage/+page.svelte
@@ -0,0 +1,161 @@
+
+
+{#snippet button(type: string)}
+ {#if domain && domain.status === 'Shutoff' && activeRows && activeRows.length === 1}
+ {#if type === 'detach'}
+
+ {/if}
+ {/if}
+{/snippet}
+
+
+
+
+
+
+
+ {@html status}
+ + +
+
diff --git a/new-web/src/routes/[node]/vm/[node]/storage/+page.ts b/new-web/src/routes/[node]/vm/[node]/storage/+page.ts
new file mode 100644
index 00000000..aeac4536
--- /dev/null
+++ b/new-web/src/routes/[node]/vm/[node]/storage/+page.ts
@@ -0,0 +1,27 @@
+import { getDownloads } from '$lib/api/utilities/downloader';
+import { getVMDomain, getVMs } from '$lib/api/vm/vm';
+import { getDatasets } from '$lib/api/zfs/datasets';
+import { getPools } from '$lib/api/zfs/pool';
+import { SEVEN_DAYS } from '$lib/utils.js';
+import { cachedFetch } from '$lib/utils/http';
+
+export async function load({ params }) {
+ const cacheDuration = SEVEN_DAYS;
+ const vmId = params.node;
+
+ const [vms, domain, datasets, pools, downloads] = await Promise.all([
+ cachedFetch('vm-list', async () => getVMs(), cacheDuration),
+ cachedFetch(`vm-domain-${vmId}`, async () => getVMDomain(Number(vmId)), cacheDuration),
+ cachedFetch('datasets', async () => await getDatasets(), cacheDuration),
+ cachedFetch('pools', getPools, cacheDuration),
+ cachedFetch('downloads', async () => getDownloads(), cacheDuration)
+ ]);
+
+ return {
+ vms: vms,
+ domain: domain,
+ datasets: datasets,
+ pools: pools,
+ downloads: downloads
+ };
+}
diff --git a/new-web/src/routes/[node]/vm/[node]/summary/+page.svelte b/new-web/src/routes/[node]/vm/[node]/summary/+page.svelte
new file mode 100644
index 00000000..4c963d67
--- /dev/null
+++ b/new-web/src/routes/[node]/vm/[node]/summary/+page.svelte
@@ -0,0 +1,405 @@
+
+
+{#snippet button(type: string)}
+ {#if type === 'start' && domain.id == -1 && domain.status !== 'Running'}
+
+
+
+ {:else if type === 'stop' && domain.id !== -1 && domain.status === 'Running'}
+
+ {/if}
+{/snippet}
+
+
+
+
+ {@render button('detach')}
+
+
+
+
+
+
+ {@render button('start')}
+ {@render button('stop')}
+
+
+
+
+
+
+
+
+
+ {vm.name} {udTime ? `(${udTime})` : ''}
+
+
+
+
+
+
+
+
+ Description
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {domain.status}
+
+
+
+
+
+
+
+
+
+ {floatToNDecimals(recentStat.cpuUsage, 2)}% {getTranslation('common.of', 'of')} + {vm.cpuCores * vm.cpuThreads * vm.cpuSockets} + vCPU(s) +
+
+
+
+
+
+
+
+ {floatToNDecimals(recentStat.memoryUsage, 2)}% {getTranslation('common.of', 'of')} + {humanFormat(vm.ram)} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {getTranslation('summary.cpu_usage', 'CPU Usage')}
+
+
+
+
+
+
+
+
+
+
+
+
+ {getTranslation('summary.memory_usage', 'Memory Usage')}
+