+
+ );
+ }
+
+ return this.props.children;
+ }
+}
+
+export default ErrorBoundary;
diff --git a/src/utils/gui/frontend/src/components/Layout.tsx b/src/utils/gui/frontend/src/components/Layout.tsx
new file mode 100644
index 0000000000..a2ba9e9a15
--- /dev/null
+++ b/src/utils/gui/frontend/src/components/Layout.tsx
@@ -0,0 +1,259 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { ReactNode, useEffect } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useConfigStore } from '../features/configuration-wizard/configStore';
+import { WIZARD_STEPS } from '../features/configuration-wizard/constants';
+import ToastContainer from '../features/toast/ToastContainer';
+import ConfirmDialog from '../features/confirmDialog/ConfirmDialog';
+import omniaLogo from '../assets/omnia-logo.png';
+
+interface LayoutProps {
+ children: ReactNode;
+}
+
+const Layout = ({ children }: LayoutProps) => {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const { activeStep, setActiveStep, wizardExpanded, setWizardExpanded, catalogExpanded, setCatalogExpanded, buildConfigExpanded, setBuildConfigExpanded, localRepoExpanded, setLocalRepoExpanded, isStepEnabled } = useConfigStore();
+
+ // Close wizard expanded state when navigating away from /wizard
+ useEffect(() => {
+ if (location.pathname !== '/wizard' && wizardExpanded) {
+ setWizardExpanded(false);
+ }
+ }, [location.pathname, wizardExpanded, setWizardExpanded]);
+
+ // Expand/collapse local repo group based on route changes only
+ useEffect(() => {
+ const localRepoPages = ['/local-repo', '/local-repo/rhel'/*, '/local-repo/ubuntu' */];
+ if (localRepoPages.some((path) => location.pathname.startsWith(path))) {
+ setBuildConfigExpanded(true);
+ setLocalRepoExpanded(true);
+ } else {
+ setLocalRepoExpanded(false);
+ }
+ }, [location.pathname, setBuildConfigExpanded, setLocalRepoExpanded]);
+
+ const isActive = (path: string) => location.pathname === path;
+
+ const handleStepClick = (stepId: number) => {
+ setActiveStep(stepId);
+ };
+
+ const handleNavigation = (path: string) => {
+ navigate(path);
+ };
+
+ return (
+ Something went wrong
++ {this.state.error?.message || 'An unexpected error occurred'} +
+ + {process.env.NODE_ENV === 'development' && this.state.errorInfo && ( +
+
+ )}
+ Error Details
+
+ {this.state.error?.toString()}
+ {this.state.errorInfo.componentStack}
+
+
+ {/* Top Bar */}
+
+
+ 
+
+
+
+ {/* Main Content Area with Sidebar */}
+
+ );
+};
+
+export default Layout;
diff --git a/src/utils/gui/frontend/src/components/LoadingSpinner.tsx b/src/utils/gui/frontend/src/components/LoadingSpinner.tsx
new file mode 100644
index 0000000000..3b8bd87b06
--- /dev/null
+++ b/src/utils/gui/frontend/src/components/LoadingSpinner.tsx
@@ -0,0 +1,48 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+interface LoadingSpinnerProps {
+ size?: 'small' | 'medium' | 'large';
+}
+
+const LoadingSpinner = ({ size = 'medium' }: LoadingSpinnerProps) => {
+ const sizeStyles = {
+ small: { width: '16px', height: '16px', borderWidth: '2px' },
+ medium: { width: '24px', height: '24px', borderWidth: '3px' },
+ large: { width: '40px', height: '40px', borderWidth: '4px' },
+ };
+
+ return (
+
+ );
+};
+
+// Add keyframes to CSS
+const style = document.createElement('style');
+style.textContent = `
+ @keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+`;
+document.head.appendChild(style);
+
+export default LoadingSpinner;
diff --git a/src/utils/gui/frontend/src/components/NotFound.tsx b/src/utils/gui/frontend/src/components/NotFound.tsx
new file mode 100644
index 0000000000..060af413ef
--- /dev/null
+++ b/src/utils/gui/frontend/src/components/NotFound.tsx
@@ -0,0 +1,28 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Link } from 'react-router-dom';
+
+export const NotFound = () => {
+ return (
+
+ {/* Left Sidebar */}
+
+
+ {/* Main Content */}
+
+ {children}
+
+
+
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/adapter-policy/AdapterPolicyEditor.tsx b/src/utils/gui/frontend/src/features/adapter-policy/AdapterPolicyEditor.tsx
new file mode 100644
index 0000000000..b4b76ee8e9
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/adapter-policy/AdapterPolicyEditor.tsx
@@ -0,0 +1,407 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useState, useEffect, useRef } from 'react';
+import Layout from '../../components/Layout';
+import Button from '../../components/Button';
+import { adapterPolicySchema, type AdapterPolicyFormData } from './schemas/adapterPolicy';
+import { showAlert } from '../toast/toastStore';
+import { showConfirm } from '../confirmDialog/confirmDialogStore';
+import { useAdapterPolicy, useSaveAdapterPolicy, useDeleteAdapterPolicy } from './hooks/useAdapterPolicy';
+import { TargetListSection } from './components/TargetListSection';
+import { TargetEditSection } from './components/TargetEditSection';
+import { AddTargetSection } from './components/AddTargetSection';
+
+const DEFAULT_POLICY: AdapterPolicyFormData = {
+ version: '2.0.0',
+ description: 'Adapter policy for package transformation',
+ targets: {},
+};
+
+export const AdapterPolicyEditor = () => {
+ const [policy, setPolicy] = useStatePage Not Found
++ The page you're looking for doesn't exist or has been moved. +
+ + Go to Overview + +
+
+
+
+
+ {isLoading && (
+ Adapter Policy Editor
++ Create and edit adapter policies to transform source JSON files into target JSON files. +
+
+
+ )}
+
+ {loadError && (
+ Loading adapter policy...
+
+ {loadError instanceof Error ? loadError.message : 'Failed to load adapter policy. Using default template.'}
+
+ )}
+
+ {!isLoading && hasInitialized && (
+ <>
+
+
+
+
+
+ Current policy: {policySource === 'custom' ? 'Custom' : 'Default'}
+
+
+ {policySource === 'custom' && (
+
+ )}
+
+
+
+
+
+ setPolicy({ ...policy, description: e.target.value })}
+ placeholder="Describe this adapter policy"
+ />
+ {errors['description'] && (
+
+
+ {errors['description']}
+ )}
+
+
+
+ {
+ setNewTargetName(name);
+ setNewTargetNameError('');
+ }}
+ onAdd={addTarget}
+ error={newTargetNameError}
+ />
+
+
+ setSelectedTarget(null)}
+ onAddSource={addSource}
+ onRemoveSource={removeSource}
+ onAddPull={addPull}
+ onRemovePull={removePull}
+ onAddDerived={addDerived}
+ onRemoveDerived={removeDerived}
+ errors={errors}
+ />
+
+ )}
+
+ {/* Add new target section */}
+
+
+
+
+ {saveError && (
+
+ {saveError}
+
+ )}
+
+ )}
+
+ {
+ onNameChange(e.target.value);
+ }}
+ placeholder="Enter target filename (e.g., service_k8s.json)"
+ />
+
+
+ {error && (
+ {error}
+ )}
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/adapter-policy/components/TargetEditSection.tsx b/src/utils/gui/frontend/src/features/adapter-policy/components/TargetEditSection.tsx
new file mode 100644
index 0000000000..24b6b3bb72
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/adapter-policy/components/TargetEditSection.tsx
@@ -0,0 +1,421 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useRef } from 'react';
+import Button from '../../../components/Button';
+import type { AdapterPolicyFormData } from '../schemas/adapterPolicy';
+
+const FILTER_TYPES = [
+ { value: 'substring', label: 'Substring Match' },
+ { value: 'allowlist', label: 'Allowlist' },
+ { value: 'field_in', label: 'Field In' },
+ { value: 'any_of', label: 'Composite (Any Of)' },
+];
+
+interface TargetEditSectionProps {
+ targetName: string;
+ targetData: AdapterPolicyFormData['targets'][string];
+ policy: AdapterPolicyFormData;
+ onPolicyChange: (policy: AdapterPolicyFormData) => void;
+ onClose: () => void;
+ onAddSource: (targetName: string) => void;
+ onRemoveSource: (targetName: string, sourceIdx: number) => void;
+ onAddPull: (targetName: string, sourceIdx: number) => void;
+ onRemovePull: (targetName: string, sourceIdx: number, pullIdx: number) => void;
+ onAddDerived: (targetName: string) => void;
+ onRemoveDerived: (targetName: string, derivedIdx: number) => void;
+ errors: Record
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/adapter-policy/components/TargetListSection.tsx b/src/utils/gui/frontend/src/features/adapter-policy/components/TargetListSection.tsx
new file mode 100644
index 0000000000..d1fcc0cdf9
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/adapter-policy/components/TargetListSection.tsx
@@ -0,0 +1,47 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import Button from '../../../components/Button';
+import type { AdapterPolicyFormData } from '../schemas/adapterPolicy';
+
+interface TargetListSectionProps {
+ targets: AdapterPolicyFormData['targets'];
+ onEditTarget: (targetName: string) => void;
+ onRemoveTarget: (targetName: string) => void;
+}
+
+export const TargetListSection = ({ targets, onEditTarget, onRemoveTarget }: TargetListSectionProps) => {
+ return (
+ Edit: {targetName}
+ +
+
+
+
+
+
+
+
+
+
+
+
+ {targetData.sources?.map((source, sourceIdx) => (
+
+
+
+
+ ))}
+
+
+
+
+ Source {sourceIdx + 1}
+ +
+
+
+ {errors[`targets.${targetName}.sources.${sourceIdx}.source_file`] && (
+
+
+ {errors[`targets.${targetName}.sources.${sourceIdx}.source_file`]}
+ )}
+
+
+ {source.pulls?.map((pull, pullIdx) => (
+
+
+
+ ))}
+
+
+
+ Pull {pullIdx + 1}
+ +
+
+
+
+
+ {
+ updatePolicy((prev: AdapterPolicyFormData) => {
+ const newPolicy = { ...prev };
+ const target = { ...newPolicy.targets[targetName] };
+ const sources = [...target.sources];
+ const source = { ...sources[sourceIdx] };
+ const pulls = [...source.pulls];
+ pulls[pullIdx] = { ...pulls[pullIdx], source_key: e.target.value };
+ source.pulls = pulls;
+ sources[sourceIdx] = source;
+ target.sources = sources;
+ newPolicy.targets[targetName] = target;
+ return newPolicy;
+ });
+ }}
+ placeholder="e.g., name"
+ />
+ {errors[`targets.${targetName}.sources.${sourceIdx}.pulls.${pullIdx}.source_key`] && (
+
+ {errors[`targets.${targetName}.sources.${sourceIdx}.pulls.${pullIdx}.source_key`]}
+ )}
+
+
+ {
+ updatePolicy((prev: AdapterPolicyFormData) => {
+ const newPolicy = { ...prev };
+ const target = { ...newPolicy.targets[targetName] };
+ const sources = [...target.sources];
+ const source = { ...sources[sourceIdx] };
+ const pulls = [...source.pulls];
+ pulls[pullIdx] = { ...pulls[pullIdx], target_key: e.target.value };
+ source.pulls = pulls;
+ sources[sourceIdx] = source;
+ target.sources = sources;
+ newPolicy.targets[targetName] = target;
+ return newPolicy;
+ });
+ }}
+ placeholder="e.g., name"
+ />
+ {errors[`targets.${targetName}.sources.${sourceIdx}.pulls.${pullIdx}.target_key`] && (
+
+ {errors[`targets.${targetName}.sources.${sourceIdx}.pulls.${pullIdx}.target_key`]}
+ )}
+
+
+
+
+
+ {pull.filter?.type && pull.filter?.type !== 'any_of' && (
+
+
+ {
+ const values = e.target.value.split(',').map(v => v.trim()).filter(v => v);
+ updatePolicy((prev: AdapterPolicyFormData) => {
+ const newPolicy = { ...prev };
+ const target = { ...newPolicy.targets[targetName] };
+ const sources = [...target.sources];
+ const source = { ...sources[sourceIdx] };
+ const pulls = [...source.pulls];
+ const newPull = { ...pulls[pullIdx] };
+ newPull.filter = { ...newPull.filter, values };
+ pulls[pullIdx] = newPull;
+ source.pulls = pulls;
+ sources[sourceIdx] = source;
+ target.sources = sources;
+ newPolicy.targets[targetName] = target;
+ return newPolicy;
+ });
+ }}
+ placeholder="e.g., value1, value2, value3"
+ />
+
+ )}
+
+ {pull.filter?.type === 'any_of' && (
+
+
+
+ )}
+
+ {pull.filter.filters?.length || 0} filters configured
+
+
+
+ {targetData.derived?.map((derived, derivedIdx) => (
+
+
+
+ ))}
+
+
+
+
+ Derived Operation {derivedIdx + 1}
+ +
+
+
+
+
+ {
+ updatePolicy((prev: AdapterPolicyFormData) => {
+ const newPolicy = { ...prev };
+ const target = { ...newPolicy.targets[targetName] };
+ const derivedOps = [...(target.derived || [])];
+ derivedOps[derivedIdx] = { ...derivedOps[derivedIdx], target_key: e.target.value };
+ target.derived = derivedOps;
+ newPolicy.targets[targetName] = target;
+ return newPolicy;
+ });
+ }}
+ placeholder="e.g., common_name"
+ />
+
+
+
+ {
+ const fromKeys = e.target.value.split(',').map(k => k.trim()).filter(k => k);
+ updatePolicy((prev: AdapterPolicyFormData) => {
+ const newPolicy = { ...prev };
+ const target = { ...newPolicy.targets[targetName] };
+ const derivedOps = [...(target.derived || [])];
+ derivedOps[derivedIdx] = {
+ ...derivedOps[derivedIdx],
+ operation: { ...derivedOps[derivedIdx].operation, from_keys: fromKeys },
+ };
+ target.derived = derivedOps;
+ newPolicy.targets[targetName] = target;
+ return newPolicy;
+ });
+ }}
+ placeholder="e.g., key1, key2, key3"
+ />
+
+
+
+
+
+ {
+ updatePolicy((prev: AdapterPolicyFormData) => {
+ const newPolicy = { ...prev };
+ const target = { ...newPolicy.targets[targetName] };
+ const derivedOps = [...(target.derived || [])];
+ derivedOps[derivedIdx] = {
+ ...derivedOps[derivedIdx],
+ operation: { ...derivedOps[derivedIdx].operation, min_occurrences: parseInt(e.target.value) },
+ };
+ target.derived = derivedOps;
+ newPolicy.targets[targetName] = target;
+ return newPolicy;
+ });
+ }}
+ min="1"
+ />
+
+
+
+
+
+
+
+
+
+ {Object.keys(targets).map((targetName) => (
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/adapter-policy/hooks/useAdapterPolicy.ts b/src/utils/gui/frontend/src/features/adapter-policy/hooks/useAdapterPolicy.ts
new file mode 100644
index 0000000000..fabef9ae4b
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/adapter-policy/hooks/useAdapterPolicy.ts
@@ -0,0 +1,57 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import type { AdapterPolicyFormData } from '../schemas/adapterPolicy';
+
+export const useAdapterPolicy = () =>
+ useQuery({
+ queryKey: ['adapter-policy'],
+ queryFn: async () => {
+ const res = await fetch('/api/v1/adapter-policy');
+ if (!res.ok) throw new Error('Failed to load adapter policy');
+ const data = await res.json();
+ return data;
+ },
+ });
+
+export const useSaveAdapterPolicy = () => {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: async (policy: AdapterPolicyFormData) => {
+ const res = await fetch('/api/v1/adapter-policy', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(policy),
+ });
+ if (!res.ok) throw new Error('Failed to save adapter policy');
+ return res.json();
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['adapter-policy'] });
+ },
+ });
+};
+
+export const useDeleteAdapterPolicy = () => {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: async () => {
+ const res = await fetch('/api/v1/adapter-policy', { method: 'DELETE' });
+ if (!res.ok) throw new Error('Failed to delete custom adapter policy');
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['adapter-policy'] });
+ },
+ });
+};
diff --git a/src/utils/gui/frontend/src/features/adapter-policy/schemas/adapterPolicy.ts b/src/utils/gui/frontend/src/features/adapter-policy/schemas/adapterPolicy.ts
new file mode 100644
index 0000000000..fecba7e4f3
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/adapter-policy/schemas/adapterPolicy.ts
@@ -0,0 +1,130 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { z } from 'zod';
+
+// Filter Config Schema
+const filterConfigSchema: z.ZodType<{
+ type?: 'substring' | 'allowlist' | 'field_in' | 'any_of';
+ field?: string;
+ values?: string[];
+ case_sensitive?: boolean;
+ filters?: any[];
+}> = z.object({
+ type: z.enum(['substring', 'allowlist', 'field_in', 'any_of']).optional(),
+ field: z.string().optional().default('package'),
+ values: z.array(z.string()).optional(),
+ case_sensitive: z.boolean().optional().default(false),
+ filters: z.array(z.any()).min(1, 'At least one filter is required for any_of type').optional(),
+}).refine((data) => {
+ // If filter type is any_of, filters must be provided
+ if (data.type === 'any_of' && (!data.filters || data.filters.length === 0)) {
+ return false;
+ }
+ // If filter type is any_of, values should not be used
+ if (data.type === 'any_of' && data.values && data.values.length > 0) {
+ return false;
+ }
+ // If filter type is not any_of, values must be provided when type is provided
+ if (data.type && data.type !== 'any_of' && (!data.values || data.values.length === 0)) {
+ return false;
+ }
+ // If filters array is provided, it must have at least one item
+ if (data.filters && data.filters.length === 0) {
+ return false;
+ }
+ return true;
+}, {
+ message: 'Invalid filter configuration',
+});
+
+// Pull Config Schema
+const pullConfigSchema = z.object({
+ source_key: z.string().min(1, 'Source key is required'),
+ target_key: z.string().optional(),
+ filter: filterConfigSchema.optional(),
+ transform: z.object({
+ exclude_fields: z.array(z.string()).optional(),
+ rename_fields: z.record(z.string(), z.string()).optional(),
+ }).optional(),
+}).refine((data) => {
+ // If filter type is provided, validate target_key is also provided
+ if (data.filter?.type && !data.target_key) {
+ return false;
+ }
+ return true;
+}, {
+ message: 'Target key is required when filter is applied',
+});
+
+// Source Config Schema
+const sourceConfigSchema = z.object({
+ source_file: z.string().min(1, 'Source file is required'),
+ pulls: z.array(pullConfigSchema).min(1, 'At least one pull is required'),
+});
+
+// Derived Operation Schema
+const derivedSchema = z.object({
+ target_key: z.string(),
+ operation: z.object({
+ type: z.literal('extract_common'),
+ from_keys: z.array(z.string()).min(2, 'At least 2 keys are required for comparison'),
+ min_occurrences: z.number().default(2),
+ remove_from_sources: z.boolean().default(true),
+ }),
+});
+
+// Target Config Schema
+const targetConfigSchema = z.object({
+ transform: z.object({
+ exclude_fields: z.array(z.string()).optional(),
+ rename_fields: z.record(z.string(), z.string()).optional(),
+ }).optional(),
+ sources: z.array(sourceConfigSchema).min(1, 'At least one source is required'),
+ derived: z.array(derivedSchema).optional(),
+ conditions: z.object({
+ architectures: z.array(z.string()).optional(),
+ os_versions: z.array(z.string()).optional(),
+ os_families: z.array(z.string()).optional(),
+ }).optional(),
+});
+
+// Adapter Policy Schema
+export const adapterPolicySchema = z.object({
+ version: z.string().default('2.0.0'),
+ description: z.string().optional(),
+ architectures: z.array(z.string()).min(1).optional().refine((arr) => {
+ if (!arr) return true;
+ const unique = new Set(arr);
+ return unique.size === arr.length;
+ }, {
+ message: 'Architectures must be unique',
+ }),
+ targets: z.record(z.string(), targetConfigSchema),
+}).refine((data) => {
+ // Ensure at least one target is defined
+ if (!data.targets || Object.keys(data.targets).length === 0) {
+ return false;
+ }
+ return true;
+}, {
+ message: 'At least one target is required',
+});
+
+export type AdapterPolicyFormData = z.infer
+
+ ))}
+
+
+ {targetName}
+
+
+
+
+
+ Sources: {targets[targetName].sources?.length || 0} |
+ Derived: {targets[targetName].derived?.length || 0}
+
+
+ {/* Header */}
+
+
+
+
+ {/* Action Bar */}
+ Catalog Manager
+
+
+
+
+
+
+
+ {/* Sidebar + Content */}
+
+
+
+
+
+ Sections
+
+ {sections.map(([section, label]) => (
+
+ ))}
+
+
+ {activeSection === 'overview' && (
+
+ Loading bundles...
; + } + + if (error) { + returnFailed to load bundles
; + } + + if (filteredBundles.length === 0) { + returnNo bundles found
; + } + + return ( +
+
+ );
+};
+
+export default BundleSelector;
diff --git a/src/utils/gui/frontend/src/features/catalog-editor/components/CatalogOverview.tsx b/src/utils/gui/frontend/src/features/catalog-editor/components/CatalogOverview.tsx
new file mode 100644
index 0000000000..f6c1b92e94
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/catalog-editor/components/CatalogOverview.tsx
@@ -0,0 +1,105 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useCatalogStore } from '../catalogStore';
+
+const CatalogOverview = () => {
+ const catalogRoot = useCatalogStore((s) => s.catalogRoot);
+ const setCatalogRoot = useCatalogStore((s) => s.setCatalogRoot);
+
+ if (!catalogRoot) return
+
+ setSearchQuery(e.target.value)}
+ className="form-input"
+ />
+
+
+
+ {filteredBundles.map(bundle => {
+ const metadata = bundleMetadata[bundle.name] || { required: false, description: '' };
+ const isSelected = selectedBundles.has(bundle.name);
+
+ return (
+
+
+
+ );
+ })}
+
+
+ {onBundleExpand && (
+
+ )}
+
+
+
+ {bundle.package_count} packages
+
+
+
+ {bundle.type}
+
+
+ {metadata.description && (
+ + {metadata.description} +
+ )} + + {expandedBundles.has(bundle.name) && bundlePackageData[bundle.name] && ( +
+
+ )}
+
+ Select packages:
+
+ {Object.entries(bundlePackageData[bundle.name]).map(([section, packages]: [string, any[]]) => (
+
+
+ ))}
+
+ {section}
+
+ {packages.map((pkg: any) => {
+ const pkgId = `${pkg.package}_${pkg.type}`;
+ const bundlePkgs = selectedPackages[bundle.name] || new Set();
+ const isPkgSelected = bundlePkgs.has(pkgId);
+
+ return (
+
+ );
+ })}
+ No catalog loaded
; + + const inner = catalogRoot.Catalog; + + const updateMetadata = ( + field: 'Name' | 'Version' | 'Identifier', + value: string, + ) => { + setCatalogRoot({ + ...catalogRoot, + Catalog: { ...inner, [field]: value }, + }); + }; + + return ( +
+
+ );
+};
+
+export default CatalogOverview;
diff --git a/src/utils/gui/frontend/src/features/catalog-editor/components/DriverPackageEditor.tsx b/src/utils/gui/frontend/src/features/catalog-editor/components/DriverPackageEditor.tsx
new file mode 100644
index 0000000000..2c1ce5f26a
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/catalog-editor/components/DriverPackageEditor.tsx
@@ -0,0 +1,326 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import React, { useState, useEffect, useRef } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useCatalogStore } from '../catalogStore';
+import {
+ useAddDriverPackage,
+ useDeleteDriverPackage,
+ useUpdateDriverPackage,
+} from '../hooks/useCatalog';
+import { DriverPackageSchema, type DriverPackage, type PackageTypeValue } from '../schemas/catalogSchema';
+import PackageForm from './PackageForm';
+import { showConfirm } from '../../confirmDialog/confirmDialogStore';
+import { showAlert } from '../../toast/toastStore';
+
+const defaultPackage: DriverPackage = {
+ Name: '',
+ Type: 'rpm' as PackageTypeValue,
+ Architecture: ['x86_64'],
+ Uri: '',
+ Version: '',
+ Config: { DriverBrand: '', DriverType: '' },
+};
+
+const DriverPackageEditor: React.FC = () => {
+ const catalogRoot = useCatalogStore((s) => s.catalogRoot);
+ const setCatalogRoot = useCatalogStore((s) => s.setCatalogRoot);
+ const addPkg = useAddDriverPackage();
+ const deletePkg = useDeleteDriverPackage();
+ const updatePkg = useUpdateDriverPackage();
+ const [showAddForm, setShowAddForm] = useState(false);
+ const [editingId, setEditingId] = useStateCatalog Overview
+ +
+
+
+ Metadata
+
+
+
+
+
+ updateMetadata('Name', e.target.value)
+ }
+ className="form-input"
+ />
+
+
+
+
+ updateMetadata('Version', e.target.value)
+ }
+ className="form-input"
+ />
+
+
+
+
+ updateMetadata('Identifier', e.target.value)
+ }
+ className="form-input"
+ />
+
+
+
+ Statistics
+
+
+
+ Functional Layers:{' '}
+ {inner.FunctionalLayer.length}
+
+
+ Functional Packages:{' '}
+ {Object.keys(inner.FunctionalPackages).length}
+
+
+ OS Packages:{' '}
+ {Object.keys(inner.OSPackages).length}
+
+
+ Infrastructure Packages:{' '}
+ {
+ Object.keys(inner.InfrastructurePackages)
+ .length
+ }
+
+ No catalog loaded
; + const inner = catalogRoot.Catalog; + const packages = Object.entries(inner.DriverPackages); + + + const handleAddPackage = async (data: DriverPackage) => { + if (isDuplicateName(data.Name)) { + addMethods.setError('Name', { message: 'A package with this name already exists' }); + return; + } + + const payload = { ...data } as any; + if (!payload.Uri?.trim()) delete payload.Uri; + if (!payload.Version?.trim()) delete payload.Version; + + try { + await addPkg.mutateAsync(payload); + addMethods.reset(defaultPackage); + setShowAddForm(false); + if (catalogRoot && catalogRoot.Catalog.DriverPackages) { + const updatedCatalog = { + ...catalogRoot, + Catalog: { + ...catalogRoot.Catalog, + DriverPackages: { + ...catalogRoot.Catalog.DriverPackages, + [payload.Name]: payload + } + } + }; + setCatalogRoot(updatedCatalog); + } + } catch (err) { + console.error('Failed to add driver package to backend:', err); + showAlert('Failed to add driver package to backend'); + } + }; + + const handleEditPackage = (id: string, pkg: DriverPackage) => { + setEditingId(id); + editMethods.reset(pkg); + setShowAddForm(false); // Close add form if open + }; + + const handleSavePackage = async (data: DriverPackage) => { + if (!editingId) return; + if (isDuplicateName(data.Name, editingId)) { + editMethods.setError('Name', { message: 'A package with this name already exists' }); + return; + } + + const payload = { ...data } as any; + if (!payload.Uri?.trim()) delete payload.Uri; + if (!payload.Version?.trim()) delete payload.Version; + + try { + try { + await updatePkg.mutateAsync({ packageId: editingId, pkg: payload }); + } catch (updateErr) { + if ((updateErr as any).status === 404) { + await addPkg.mutateAsync(payload); + } else { + throw updateErr; + } + } + setEditingId(null); + editMethods.reset(defaultPackage); + if (catalogRoot && catalogRoot.Catalog.DriverPackages) { + const updatedCatalog = { + ...catalogRoot, + Catalog: { + ...catalogRoot.Catalog, + DriverPackages: { + ...catalogRoot.Catalog.DriverPackages, + [editingId]: payload + } + } + }; + setCatalogRoot(updatedCatalog); + } + } catch (err) { + console.error('Failed to save driver package to backend:', err); + showAlert('Failed to save driver package to backend'); + } + }; + + const handleDeletePackage = async (id: string) => { + showConfirm( + 'Delete Driver Package', + `Delete driver package "${id}"?`, + async () => { + try { + await deletePkg.mutateAsync(id); + } catch (err) { + console.error('Failed to delete driver package from backend, removing from local state:', err); + } + if (catalogRoot && catalogRoot.Catalog.DriverPackages) { + const updatedCatalog = { + ...catalogRoot, + Catalog: { + ...catalogRoot.Catalog, + DriverPackages: Object.fromEntries( + Object.entries(catalogRoot.Catalog.DriverPackages).filter(([key]) => key !== id) + ) + } + }; + setCatalogRoot(updatedCatalog); + } + } + ); + }; + + const handleCancelEdit = () => { + setEditingId(null); + editMethods.reset(defaultPackage); + }; + + const extractPackageIdNumber = (packageId: string): string => { + return packageId; + }; + + return ( +
+
+ setShowAddForm(false)}
+ submitLabel={addPkg.isPending ? 'Adding…' : 'Add'}
+ title="Add Driver Package"
+ variant="driver"
+ />
+
+ )}
+
+ {editingId && (
+
+ );
+};
+
+export default DriverPackageEditor;
diff --git a/src/utils/gui/frontend/src/features/catalog-editor/components/EmptyLayerSelector.tsx b/src/utils/gui/frontend/src/features/catalog-editor/components/EmptyLayerSelector.tsx
new file mode 100644
index 0000000000..239c522df0
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/catalog-editor/components/EmptyLayerSelector.tsx
@@ -0,0 +1,97 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+interface EmptyLayerSelectorProps {
+ show: boolean;
+ selectedLayer: string;
+ predefinedLayers: string[];
+ customLayerName: string;
+ customLayerError?: string;
+ onLayerChange: (value: string) => void;
+ onCustomLayerNameChange: (value: string) => void;
+ onAddLayer: () => void;
+ onClose: () => void;
+}
+
+export const EmptyLayerSelector = ({
+ show,
+ selectedLayer,
+ predefinedLayers,
+ customLayerName,
+ customLayerError,
+ onLayerChange,
+ onCustomLayerNameChange,
+ onAddLayer,
+ onClose,
+}: EmptyLayerSelectorProps) => {
+ if (!show) return null;
+
+ const isCustom = selectedLayer === '__custom__';
+ const isAddDisabled = !selectedLayer || (isCustom && (!customLayerName.trim() || !!customLayerError));
+
+ return (
+
+
+
+ {showAddForm && (
+ Driver Packages
+ +
+
+
+
+ )}
+
+
+
+
+
+
+ | ID | +Name | +Type | +Architecture | +Actions | +
|---|---|---|---|---|
| + No driver packages defined + | +||||
| {extractPackageIdNumber(id)} | +{pkg.Name} | +{pkg.Type} | +{pkg.Architecture.join(', ')} | ++ + + | +
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/catalog-editor/components/FunctionalLayerEditor.tsx b/src/utils/gui/frontend/src/features/catalog-editor/components/FunctionalLayerEditor.tsx
new file mode 100644
index 0000000000..b4608b2a55
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/catalog-editor/components/FunctionalLayerEditor.tsx
@@ -0,0 +1,838 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useState, useEffect, useRef, useMemo } from 'react';
+import React from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useCatalogStore } from '../catalogStore';
+import {
+ useUpdateFunctionalLayer,
+ useAddFunctionalLayer,
+ useAddFunctionalPackage,
+ useDeleteFunctionalLayer,
+ useDeleteFunctionalPackage,
+ useUpdateFunctionalPackage,
+} from '../hooks/useCatalog';
+import { useAvailableRoles, useRolePackages } from '../hooks/useRoleMappings';
+import {
+ type FunctionalLayer,
+ FunctionalPackageSchema,
+ type FunctionalPackage,
+} from '../schemas/catalogSchema';
+import PackageForm from './PackageForm';
+import { RoleSelector } from './RoleSelector';
+import { EmptyLayerSelector } from './EmptyLayerSelector';
+import { showConfirm } from '../../confirmDialog/confirmDialogStore';
+import { showAlert } from '../../toast/toastStore';
+const defaultPackage: FunctionalPackage = {
+ Name: '',
+ Type: 'rpm',
+ Architecture: ['x86_64'],
+ SupportedOS: [{ Name: 'RHEL', Version: '10.0' }],
+ Sources: [],
+ Version: '',
+ Tag: '',
+};
+
+const OS_DISPLAY_NAME: RecordAdd Empty Functional Layer
++ Select a predefined functional layer name or choose Custom to create a named empty layer. +
+
+
+
+
+
+
+
+ {isCustom && (
+
+
+ onCustomLayerNameChange(e.target.value)}
+ placeholder="e.g. my_custom_layer_x86_64"
+ className="form-input"
+ />
+ {customLayerError && (
+
+ )}
+ {customLayerError}
+ )}
+
+
+
+
+ No catalog loaded
; + return ( +
+ setShowRoleSelector(false)}
+ isLoading={isPopulating}
+ />
+ {
+ setShowEmptyLayerSelector(false);
+ setSelectedPredefinedLayer('');
+ setCustomLayerName('');
+ }}
+ />
+
+ );
+};
+export default FunctionalLayerEditor;
\ No newline at end of file
diff --git a/src/utils/gui/frontend/src/features/catalog-editor/components/InfrastructureEditor.tsx b/src/utils/gui/frontend/src/features/catalog-editor/components/InfrastructureEditor.tsx
new file mode 100644
index 0000000000..f7f3b43fe2
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/catalog-editor/components/InfrastructureEditor.tsx
@@ -0,0 +1,719 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useState, useEffect, useRef } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useCatalogStore } from '../catalogStore';
+import {
+ useAddInfrastructurePackage,
+ useDeleteInfrastructurePackage,
+ useUpdateInfrastructurePackage,
+} from '../hooks/useCatalog';
+import {
+ InfrastructurePackageSchema,
+ type PackageTypeValue,
+ type InfrastructurePackage,
+} from '../schemas/catalogSchema';
+import BundleSelector from './BundleSelector';
+import PackageForm from './PackageForm';
+import { showConfirm } from '../../confirmDialog/confirmDialogStore';
+import { showAlert } from '../../toast/toastStore';
+
+const defaultPackage: InfrastructurePackage = {
+ Name: '',
+ Type: 'image' as PackageTypeValue,
+ Architecture: ['x86_64'],
+ Version: '',
+ Tag: '',
+ SupportedFunctions: [{ Name: 'csi' }],
+ Sources: [],
+};
+
+const DEFAULT_VERSION: Record
+
+ Functional Layers
+
+
+
+
+
+
+ Selected Functional Layers ({selectedLayers.length})
+ {selectedLayers.length === 0 ? ( ++ No functional layers selected. Click "Auto-populate from Roles" to create and select layers. +
+ ) : ( +
+ {selectedLayers.map(layerName => {
+ const layer = catalogRoot.Catalog.FunctionalLayer.find((l: any) => l.Name === layerName);
+ return (
+
+
+ );
+ })}
+
+ )}
+
+
+ {showPackagesLayer === layerName && layer && (
+
+
+ {layerName}
+
+ Architecture: {layer?.Architecture || inferArchitectureFromName(layerName)} |
+ Packages: {layer?.FunctionalPackages.length || 0}
+
+
+
+
+
+
+ handleAddPackageToLayer(layerName, data)}
+ onCancel={() => setShowAddPackageForm(null)}
+ submitLabel="Add"
+ title={`Add Package to ${layerName}`}
+ defaultValues={currentDefaultPackage}
+ />
+ )}
+ {showEditPackageForm?.layerName === layerName && (
+
+ )}
+
+ Packages in {layerName} ({layer.FunctionalPackages?.length || 0}):
+
+ {layer.FunctionalPackages && layer.FunctionalPackages.length > 0 ? (
+
+ {layer.FunctionalPackages.map(pkgId => (
+
+ ) : (
+
+ • {getPackageDisplayName(pkgId)}
+
+ ))}
+
+
+
+
+ No packages in this layer
+ )}
+
+
+
+ {showAddPackageForm === layerName && (
+
+ setShowEditPackageForm(null)}
+ submitLabel="Save"
+ title={`Edit Package ${showEditPackageForm.packageId}`}
+ defaultValues={editDefaultValues}
+ />
+
+ )}
+ No catalog loaded
; + const inner = catalogRoot.Catalog; + const packages = Object.entries( + inner.InfrastructurePackages, + ); + + return ( +
+
+ setShowAddForm(false)}
+ submitLabel={addPkg.isPending ? 'Adding…' : 'Add'}
+ title="Add Infrastructure Package"
+ variant="infrastructure"
+ />
+
+ )}
+
+ {editingId && (
+
+ );
+};
+
+export default InfrastructureEditor;
diff --git a/src/utils/gui/frontend/src/features/catalog-editor/components/MiscellaneousEditor.tsx b/src/utils/gui/frontend/src/features/catalog-editor/components/MiscellaneousEditor.tsx
new file mode 100644
index 0000000000..39dcdc3af2
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/catalog-editor/components/MiscellaneousEditor.tsx
@@ -0,0 +1,279 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import React, { useState, useRef } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useCatalogStore } from '../catalogStore';
+import { useAddMiscellaneousPackage, useDeleteMiscellaneousPackage, useUpdateMiscellaneousPackage } from '../hooks/useCatalog';
+import {
+ MiscellaneousPackageSchema,
+ type PackageTypeValue,
+ type MiscellaneousPackage,
+ type FunctionalPackage,
+} from '../schemas/catalogSchema';
+import PackageForm from './PackageForm';
+import { showConfirm } from '../../confirmDialog/confirmDialogStore';
+import { showAlert } from '../../toast/toastStore';
+
+const defaultPackage: MiscellaneousPackage = {
+ Name: '',
+ Type: 'rpm' as PackageTypeValue,
+ Architecture: ['x86_64'],
+ SupportedOS: [{ Name: 'RHEL', Version: '10.0' }],
+ Sources: [],
+ Version: '',
+ Tag: '',
+};
+
+const MiscellaneousEditor: React.FC = () => {
+ const catalogRoot = useCatalogStore((s) => s.catalogRoot);
+ const setCatalogRoot = useCatalogStore((s) => s.setCatalogRoot);
+ const addPackage = useAddMiscellaneousPackage();
+ const deletePackage = useDeleteMiscellaneousPackage();
+ const updatePackage = useUpdateMiscellaneousPackage();
+ const [showAddForm, setShowAddForm] = useState(false);
+ const [editingId, setEditingId] = useState
+
+
+ {showBundleSelector && (
+ Infrastructure Packages
+
+
+
+
+
+
+ )}
+
+ {showAddForm && (
+ Import from Config Files
+
+
+
+
+
+
+
+
+
+
+ setOsVersion(e.target.value)}
+ className="form-input"
+ placeholder='e.g. 10.0'
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ | Package ID | +Name | +Type | +Functions | +Actions | +
|---|---|---|---|---|
| {extractPackageIdNumber(id)} | +{pkg.Name} | +{pkg.Type} | ++ {pkg.SupportedFunctions?.map( + (f) => f.Name, + ).join(', ') || '-'} + | ++ + + | +
No catalog loaded
; + const inner = catalogRoot.Catalog; + const miscellaneousPackages = inner.Miscellaneous.map(id => ({ + id, + pkg: inner.FunctionalPackages[id], + })).filter(item => item.pkg !== undefined); + + return ( +
+
+ setShowAddForm(false)}
+ submitLabel="Add Package"
+ title="Add New Miscellaneous Package"
+ />
+
+ )}
+
+ {editingId && (
+
+ );
+};
+
+export default MiscellaneousEditor;
diff --git a/src/utils/gui/frontend/src/features/catalog-editor/components/OSPackageEditor.tsx b/src/utils/gui/frontend/src/features/catalog-editor/components/OSPackageEditor.tsx
new file mode 100644
index 0000000000..76745af452
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/catalog-editor/components/OSPackageEditor.tsx
@@ -0,0 +1,797 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useState, useEffect, useRef } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useCatalogStore } from '../catalogStore';
+import { useAddOSPackage, useDeleteOSPackage, useUpdateOSPackage } from '../hooks/useCatalog';
+import {
+ OSPackageSchema,
+ type PackageTypeValue,
+ type OSPackage,
+ type FunctionalPackage,
+} from '../schemas/catalogSchema';
+import BundleSelector from './BundleSelector';
+import PackageForm from './PackageForm';
+import { showConfirm } from '../../confirmDialog/confirmDialogStore';
+import { showAlert } from '../../toast/toastStore';
+
+const defaultPackage: OSPackage = {
+ Name: '',
+ Type: 'rpm' as PackageTypeValue,
+ Architecture: ['x86_64'],
+ SupportedOS: [{ Name: 'RHEL', Version: '10.0' }],
+ Sources: [],
+ Version: '',
+ Tag: '',
+};
+
+const OS_DISPLAY_NAME: Record
+
+
+ {showAddForm && (
+ Miscellaneous Packages
+ +
+
+
+
+ )}
+
+
+
+
+
+
+ | Package ID | +Name | +Type | +Arch | +Actions | +
|---|---|---|---|---|
| + No miscellaneous packages defined + | +||||
| {id} | +{pkg.Name} | +{pkg.Type} | +{pkg.Architecture.join(', ')} | ++ + + | +
No catalog loaded
; + const inner = catalogRoot.Catalog; + const packages = Object.entries(inner.OSPackages); + + return ( +
+
+ setShowAddForm(false)}
+ submitLabel={addOSPackage.isPending ? 'Adding…' : 'Add'}
+ title="Add New OS Package"
+ />
+
+ )}
+
+ {editingId && (
+
+ );
+};
+
+export default OSPackageEditor;
diff --git a/src/utils/gui/frontend/src/features/catalog-editor/components/PackageForm.tsx b/src/utils/gui/frontend/src/features/catalog-editor/components/PackageForm.tsx
new file mode 100644
index 0000000000..79d392f0b9
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/catalog-editor/components/PackageForm.tsx
@@ -0,0 +1,348 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import React from 'react';
+import { useFormContext, Controller, useWatch } from 'react-hook-form';
+import { useFormErrors } from '../../configuration-wizard/hooks/useFormErrors';
+
+interface PackageFormProps {
+ onSubmit: (data: any) => void;
+ onCancel: () => void;
+ submitLabel: string;
+ title: string;
+ variant?: 'package' | 'infrastructure' | 'driver';
+}
+
+const PACKAGE_TYPES = [
+ 'rpm',
+ 'rpm_repo',
+ 'tarball',
+ 'iso',
+ 'git',
+ 'image',
+ 'pip_module',
+ 'manifest',
+];
+
+const ARCHITECTURES = ['x86_64', 'aarch64'];
+
+const PackageForm: React.FC
+
+
+ {showBundleSelector && (
+ OS Packages
+
+
+
+
+
+
+ )}
+
+ {showAddForm && (
+ Import from Config Files
+
+
+
+
+
+
+
+
+
+
+ setOsVersion(e.target.value)}
+ className="form-input"
+ placeholder='e.g. 10.0'
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ | Package ID | +Name | +Type | +Arch | +Actions | +
|---|---|---|---|---|
| {extractPackageIdNumber(id)} | +{pkg.Name} | +{pkg.Type} | +{pkg.Architecture.join(', ')} | ++ + + | +
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/catalog-editor/components/ValidationPanel.tsx b/src/utils/gui/frontend/src/features/catalog-editor/components/ValidationPanel.tsx
new file mode 100644
index 0000000000..49fd97d08e
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/catalog-editor/components/ValidationPanel.tsx
@@ -0,0 +1,122 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useCatalogStore } from '../catalogStore';
+import { useValidateCatalog } from '../hooks/useCatalog';
+
+const ValidationPanel = () => {
+ const catalogRoot = useCatalogStore((s) => s.catalogRoot);
+ const validationErrors = useCatalogStore((s) => s.validationErrors);
+ const validationWarnings = useCatalogStore((s) => s.validationWarnings);
+ const setValidationResults = useCatalogStore((s) => s.setValidationResults);
+ const validateCatalog = useValidateCatalog();
+
+ const handleRevalidate = async () => {
+ if (!catalogRoot) return;
+ try {
+ const result =
+ await validateCatalog.mutateAsync(catalogRoot);
+ setValidationResults(result.errors, result.warnings);
+ } catch (err) {
+ console.error('Validation failed:', err);
+ }
+ };
+
+ // Separate L1 and L2 errors/warnings
+ const l1Errors = validationErrors.filter(e => !e.startsWith('[L2]'));
+ const l2Errors = validationErrors.filter(e => e.startsWith('[L2]'));
+ const l1Warnings = validationWarnings.filter(w => !w.startsWith('[L2]'));
+ const l2Warnings = validationWarnings.filter(w => w.startsWith('[L2]'));
+
+ return (
+ Auto-populate Layers from Roles
++ Select a role to automatically populate functional layers with suggested packages. +
+
+
+
+
+
+
+
+
+
+
+ onOsVersionChange(e.target.value)}
+ className="form-input"
+ placeholder="e.g. 10.0"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ValidationPanel;
diff --git a/src/utils/gui/frontend/src/features/catalog-editor/constants/emptyCatalog.ts b/src/utils/gui/frontend/src/features/catalog-editor/constants/emptyCatalog.ts
new file mode 100644
index 0000000000..91ea4c4204
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/catalog-editor/constants/emptyCatalog.ts
@@ -0,0 +1,31 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import type { CatalogRoot } from '../schemas/catalogSchema';
+
+export const EMPTY_CATALOG: CatalogRoot = {
+ Catalog: {
+ Name: 'Catalog',
+ Version: '1.0',
+ Identifier: 'image-build',
+ FunctionalLayer: [],
+ BaseOS: [{ Name: 'RHEL', Version: '10.0', osPackages: [] }],
+ Infrastructure: [{ Name: 'csi', InfrastructurePackages: [] }],
+ Drivers: [],
+ DriverPackages: {},
+ FunctionalPackages: {},
+ OSPackages: {},
+ InfrastructurePackages: {},
+ Miscellaneous: [],
+ },
+};
diff --git a/src/utils/gui/frontend/src/features/catalog-editor/hooks/useBundleSelection.ts b/src/utils/gui/frontend/src/features/catalog-editor/hooks/useBundleSelection.ts
new file mode 100644
index 0000000000..4eb185a7a6
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/catalog-editor/hooks/useBundleSelection.ts
@@ -0,0 +1,43 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useQuery } from '@tanstack/react-query';
+
+interface BundleInfo {
+ name: string;
+ type: string;
+ package_count: number;
+ sections: string[];
+}
+
+const API_BASE = '/api/v1/catalog-editor';
+
+export const useAvailableBundles = (
+ arch: string,
+ osFamily: string,
+ version: string
+) => {
+ return useQuery({
+ queryKey: ['bundles', arch, osFamily, version],
+ queryFn: async (): Promise
+
+
+ {validationErrors.length === 0 &&
+ validationWarnings.length === 0 && (
+ Validation Results
+ +
+ [OK] Catalog schema valid
+
+ )}
+
+ {/* L1 Errors */}
+ {l1Errors.length > 0 && (
+
+
+ )}
+
+ {/* L2 Errors */}
+ {l2Errors.length > 0 && (
+ + L1 Errors (Schema) ({l1Errors.length}) +
+ {l1Errors.map((error, i) => ( +
+ {error}
+
+ ))}
+
+
+ )}
+
+ {/* L1 Warnings */}
+ {l1Warnings.length > 0 && (
+ + L2 Errors (Business Logic) ({l2Errors.length}) +
+ {l2Errors.map((error, i) => ( +
+ {error.replace('[L2] ', '')}
+
+ ))}
+
+
+ )}
+
+ {/* L2 Warnings */}
+ {l2Warnings.length > 0 && (
+ + L1 Warnings ({l1Warnings.length}) +
+ {l1Warnings.map((warning, i) => ( +
+ {warning}
+
+ ))}
+
+
+ )}
+ + L2 Warnings ({l2Warnings.length}) +
+ {l2Warnings.map((warning, i) => ( +
+ {warning.replace('[L2] ', '')}
+
+ ))}
+
+
+);
+
+const CatalogViewer = () => {
+ const [catalogData, setCatalogData] = useState
+
+ {expanded ? children : (
+ {title} ({count})
+ +
+ {collapsedItems.map((item, idx) => (
+ {item}
+ ))}
+
+ )}
+
+
+ ))}
+ {layer.Name}
+
+ {layer.FunctionalPackages?.map((pkg, pkgIdx) => (
+ {pkg}
+ ))}
+
+
+ {os.Name} {os.Version}
+
+ ))}
+
+ {os.osPackages?.map((pkg, pkgIdx) => (
+ {pkg}
+ ))}
+
+
+
+ ))}
+ {infra.Name}
+
+ {infra.InfrastructurePackages?.map((pkg, pkgIdx) => (
+ {pkg}
+ ))}
+
+ | ID | +Name | +Version | +Type | +Architecture | +
|---|---|---|---|---|
| {id} | +{pkg.Name} | +{pkg.Version || '—'} | +{pkg.Type} | +{pkg.Architecture?.join(', ') || '—'} | +
| ID | +Name | +Version | +Type | +Architecture | +
|---|---|---|---|---|
| {id} | +{pkg.Name} | +{pkg.Version || '—'} | +{pkg.Type} | +{pkg.Architecture?.join(', ') || '—'} | +
| ID | +Name | +Version | +Type | +Architecture | +
|---|---|---|---|---|
| {id} | +{pkg.Name} | +{pkg.Version || '—'} | +{pkg.Type} | +{pkg.Architecture?.join(', ') || '—'} | +
| ID | +Name | +Version | +Type | +Architecture | +
|---|---|---|---|---|
| {id} | +{pkg.Name} | +{pkg.Version} | +{pkg.Type} | +{pkg.Architecture?.join(', ') || '—'} | +
+
+ ))}
+ {driver.Name}
+
+ {driver.DriverPackages?.map((pkg, pkgIdx) => (
+ {pkg}
+ ))}
+
+ -
+ {catalog.Miscellaneous.map((item, idx) => (
+
- {item} + ))} +
Catalog Parser & Viewer
+Upload a catalog JSON file to parse and view its structure and contents.
+ + {!catalogData ? ( +
+
+ ) : (
+ Upload Catalog File
+ fileInputRef.current?.click()}
+ >
+
+
+
+
+ {isParsing && (
+ Drag & Drop or Click to Upload
+Supported format: JSON catalog file
+
+
+ )}
+
+ {parseError && (
+ Parsing catalog file...
+
+ {parseError}
+
+ )}
+
+
+ )}
+
+
+
+ {renderFunctionalLayer(catalogData.Catalog)}
+ {renderBaseOS(catalogData.Catalog)}
+ {renderInfrastructure(catalogData.Catalog)}
+ {renderDrivers(catalogData.Catalog)}
+ {renderFunctionalPackages(catalogData.Catalog)}
+ {renderOSPackages(catalogData.Catalog)}
+ {renderInfrastructurePackages(catalogData.Catalog)}
+ {renderDriverPackages(catalogData.Catalog)}
+ {renderMiscellaneous(catalogData.Catalog)}
+ Catalog: {catalogFileName}
+
+ v{catalogData.Catalog.Version}
+ {catalogData.Catalog.Identifier}
+
+
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/ConfigurationWizard.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/ConfigurationWizard.tsx
new file mode 100644
index 0000000000..3d531e7299
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/ConfigurationWizard.tsx
@@ -0,0 +1,125 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useEffect } from 'react';
+import Layout from '../../components/Layout';
+import { useConfigStore } from './configStore';
+import { WIZARD_STEPS } from './constants';
+import DeploymentOverview from './components/DeploymentOverview';
+import { showConfirm } from '../confirmDialog/confirmDialogStore';
+
+const ConfigurationWizard = () => {
+ const activeStep = useConfigStore((state) => state.activeStep);
+ const setActiveStep = useConfigStore((state) => state.setActiveStep);
+ const nextStep = useConfigStore((state) => state.nextStep);
+ const prevStep = useConfigStore((state) => state.prevStep);
+ const isCurrentStepValid = useConfigStore((state) => state.stepValidity[activeStep] ?? true);
+ const resetWizard = useConfigStore((state) => state.resetWizard);
+ const configSource = useConfigStore((state) => state.configSource);
+ const wizardData = useConfigStore((state) => state.wizardData);
+ const isStepEnabled = useConfigStore((state) => state.isStepEnabled);
+ const totalSteps = WIZARD_STEPS.length;
+
+ // Manage step transitions and guard against disabled / out-of-bounds steps
+ useEffect(() => {
+ if (activeStep > totalSteps || activeStep < 0) {
+ setActiveStep(0);
+ return;
+ }
+
+ if (configSource === 'preset' && Object.keys(wizardData).length > 0 && activeStep === 0) {
+ setActiveStep(1);
+ return;
+ }
+
+ if (!isStepEnabled(activeStep) && activeStep > 0) {
+ let nearestEnabled = activeStep;
+ while (nearestEnabled > 0 && !isStepEnabled(nearestEnabled)) {
+ nearestEnabled--;
+ }
+ if (isStepEnabled(nearestEnabled)) {
+ setActiveStep(nearestEnabled);
+ }
+ }
+ }, [activeStep, configSource, wizardData, isStepEnabled, setActiveStep, totalSteps]);
+
+ const stepIndex = activeStep > 0 ? activeStep - 1 : undefined;
+ const stepConfig = activeStep === 0
+ ? { title: 'Deployment Overview' }
+ : stepIndex !== undefined ? WIZARD_STEPS[stepIndex] : { title: 'Configuration' };
+ const StepComponent = activeStep === 0
+ ? DeploymentOverview
+ : stepIndex !== undefined ? WIZARD_STEPS[stepIndex].component : undefined;
+
+ return (
+
+
+
+ {/* Step indicator */}
+ BMC Discovery Setup
+ {currentStep && ( +{currentStep.description}
+ )} +
+ {BMC_STEPS.map((step) => (
+
+
+ {generationError && (
+
+
+ ))}
+ {step.id < activeStep ? '✓' : step.id}
+ {step.title}
+
+ {generationError}
+
+ )}
+
+ {/* Step content */}
+
+ {activeStep === 1 && (
+
+ )}
+
+ {activeStep === 2 && (
+
+
+
+ )}
+
+ {activeStep === 3 && (
+
+
+
+ Network Configuration
+
+
+
+
+
+
+ )}
+
+
+
+ {isGenerating && (
+ Summary
+
+
+
+
+ OME IP Address
+{wizardData.ome_ip as string || omeIp}
+
+
+ Network Configuration
++ Network settings will be included in the generated files +
+
+
+ Files to Generate
+-
+
- discovery_config.yml +
- network_spec.yml +
+
+ )}
+
+ {generationComplete && (
+ Generating Configuration Files...
+
+
+
+
+
+ + {generationProgress}% Complete +
+
+
+ )}
+
+ Generation Complete!
++ Discovery configuration files have been generated successfully. +
+
+
+
+
+
+
+
+
+
+ {stepConfig?.title || 'Configuration'}
+ {stepConfig?.title === 'Telemetry Configuration' && ( + + )} +
+ {StepComponent &&
+
+
+
+
+ {activeStep > 0 && (
+
+ )}
+
+ {activeStep < totalSteps && (
+
+ )}
+
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/components/DeploymentOverview.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/components/DeploymentOverview.tsx
new file mode 100644
index 0000000000..4ced55e7c7
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/components/DeploymentOverview.tsx
@@ -0,0 +1,147 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useEffect, useState } from 'react';
+import mermaid from 'mermaid';
+
+let cachedPatternsSvg: string | null = null;
+let cachedStepsSvg: string | null = null;
+let mermaidInitialized = false;
+
+const patternsDiagram = `
+flowchart TD
+ classDef startClass fill:#e8f5e9,stroke:#1b5e20,stroke-width:3px,font-size:16px
+ classDef decisionClass fill:#fff3e0,stroke:#e65100,stroke-width:1px,font-size:10px
+ classDef smallDecisionClass fill:#fff3e0,stroke:#e65100,stroke-width:1px,font-size:9px
+ classDef processClass fill:#e3f2fd,stroke:#1565c0,stroke-width:2px,font-size:13px
+ classDef optionalClass fill:#ffffff,stroke:#333,stroke-width:1px,stroke-dasharray: 5 5,font-size:10px
+ classDef endClass fill:#ffebee,stroke:#b71c1c,stroke-width:2px,font-size:15px
+ Start([Start Deployment Configuration]) --> ChooseMode{Choose
+
+
+ {/* Step indicator */}
+ Magellan Discovery Setup
+ {currentStep && ( +{currentStep.description}
+ )} +
+ {MAGELLAN_STEPS.map((step) => (
+
+
+ {generationError && (
+
+
+ ))}
+ {step.id < activeStep ? '✓' : step.id}
+ {step.title}
+
+ {generationError}
+
+ )}
+
+ {/* Step content */}
+
+ {activeStep === 1 && (
+
+
+
+ )}
+
+ {activeStep === 2 && (
+
+
+
+ {parsedData.length > 0 && (
+ Admin Inventory
+ +
+
+
+ {parseError && (
+
+
+ {parseError}
+ )}
+ {parsedData.length === 0 && !parseError && (
+
+
+ )}
+ + No admin inventory data loaded. Upload a CSV file or create a new inventory. +
+ +
+
+
+
+ + Default: /opt/omnia/input/project_default/admin_inventory.csv +
+
+
+ )}
+
+
+
+ Admin Inventory Data ({parsedData.length} rows)
+ +
+
+
+
+
+ | + {col.replace(/_/g, ' ')} + | + ))} +Actions | +||
|---|---|---|---|
| + handleEditFieldChange(col, e.target.value)} + className="pxe-mapping-input" + placeholder={col === 'SERVICE_TAG' ? 'Required' : 'Optional'} + /> + | + ))} ++ + + | + + ) : ( + <> + {ADMIN_INVENTORY_COLUMNS.map((col) => ( ++ {row[col] || '-'} + | + ))} ++ + + | + + )} +
+
+
+
+
+
+ )}
+
+ {activeStep === 3 && (
+
+
+
+ Network Configuration
+
+
+
+
+
+
+ )}
+
+
+
+ {isGenerating && (
+ Summary
+
+
+
+
+ Admin Inventory Path
+{adminInventoryPath}
+
+
+ Admin Inventory Rows
+{parsedData.length} row(s)
+
+
+ Network Configuration
++ Network settings will be included in the generated files +
+
+
+ Files to Generate
+-
+
- discovery_config.yml +
- admin_inventory.csv +
- network_spec.yml +
+
+ )}
+
+ {generationComplete && (
+ Generating Configuration Files...
+
+
+
+
+
+ + {generationProgress}% Complete +
+
+
+ )}
+
+ Generation Complete!
++ Magellan discovery configuration files have been generated successfully. +
+
+
+
+
+ Configuration
Mode?} + ChooseMode -->|PXE Upload| PxeUpload[Upload PXE Mapping File] + ChooseMode -->|Manual| Manual[Manual Configuration] + PxeUpload --> ChooseCluster{Select
Cluster
Type?} + Manual --> ChooseCluster + ChooseCluster -->|Slurm| Slurm[Slurm Only] + ChooseCluster -->|K8s| K8s[Kubernetes Only] + ChooseCluster -->|Both| Both[Slurm + Kubernetes] + K8s --> EnableHA{Enable HA?} + Both --> EnableHA + EnableHA -->|Yes| HaConfig[Configure HA] + EnableHA -->|No| OptionalFeatures{Enable
Optional
Features?} + Slurm --> OptionalFeatures + K8s --> OptionalFeatures + Both --> OptionalFeatures + HaConfig --> OptionalFeatures + OptionalFeatures -->|Cloud-Init| CloudInit[Cloud-Init Configuration] + OptionalFeatures -->|Telemetry| Telemetry[Telemetry Configuration] + OptionalFeatures -->|Build Stream / GitLab| BuildStreamGitLab[Build Stream / GitLab Configuration] + OptionalFeatures -->|BMC Discovery| BmcDiscovery[BMC Discovery Flow] + BmcDiscovery --> BmcCredentials[BMC Credentials] + BmcCredentials --> BmcNetwork[Network Configuration] + BmcNetwork --> BmcGenerate[Run discovery playbook and generate bmc_pxe_mapping_file.csv] + BmcGenerate -->|Return to| ChooseMode + class Start startClass + class ChooseMode,ChooseCluster,OptionalFeatures smallDecisionClass + class EnableHA decisionClass + class PxeUpload,Manual,Slurm,K8s,Both,HaConfig processClass + class CloudInit,Telemetry,BuildStreamGitLab,BmcDiscovery,BmcCredentials,BmcNetwork,BmcGenerate optionalClass +`; + +const wizardStepsDiagram = ` +flowchart TD + classDef optional fill:#ffffff,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5 + subgraph Row1[ ] + direction LR + S1[1. Deployment Setup] --> S2[2. PXE Functional Groups] --> S3[3. Network Configuration] --> S4[4. Storage Configuration] + end + subgraph Row2[ ] + direction LR + S5[5. Cloud-Init Configuration] --> S6[6. Omnia Cluster Configuration] --> S7[7. Telemetry Configuration] --> S8[8. Build Stream Configuration] --> S9[9. Summary & Generate] + end + S4 --> S5 + class S5,S7,S8 optional +`; + +const DeploymentOverview = () => { + const [patternsSvg, setPatternsSvg] = useState(cachedPatternsSvg); + const [stepsSvg, setStepsSvg] = useState(cachedStepsSvg); + + useEffect(() => { + if (cachedPatternsSvg && cachedStepsSvg) return; + + if (!mermaidInitialized) { + mermaid.initialize({ startOnLoad: false }); + mermaidInitialized = true; + } + + if (!cachedPatternsSvg) { + mermaid.render('deployment-patterns-diagram', patternsDiagram) + .then(({ svg }) => { + cachedPatternsSvg = svg; + setPatternsSvg(svg); + }) + .catch((err) => console.error('Failed to render patterns diagram:', err)); + } + + if (!cachedStepsSvg) { + mermaid.render('deployment-wizard-steps-diagram', wizardStepsDiagram) + .then(({ svg }) => { + cachedStepsSvg = svg; + setStepsSvg(svg); + }) + .catch((err) => console.error('Failed to render wizard steps diagram:', err)); + } + }, []); + + return ( +
+
+ );
+};
+
+export default DeploymentOverview;
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/components/DnsInput.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/components/DnsInput.tsx
new file mode 100644
index 0000000000..6a5b4a2970
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/components/DnsInput.tsx
@@ -0,0 +1,64 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useState, useEffect } from 'react';
+
+type DnsInputProps = {
+ value: string[];
+ onChange: (val: string[]) => void;
+ onBlur: () => void;
+ error?: { message?: string } | Array<{ message?: string } | undefined>;
+ placeholder?: string;
+};
+
+export const DnsInput = ({ value, onChange, onBlur, error, placeholder }: DnsInputProps) => {
+ const [displayValue, setDisplayValue] = useState('');
+ const [isFocused, setIsFocused] = useState(false);
+
+ // Sync external value → display, but only when not actively editing
+ useEffect(() => {
+ if (!isFocused) {
+ setDisplayValue(Array.isArray(value) ? value.join(', ') : '');
+ }
+ }, [value, isFocused]);
+
+ const errMsg = typeof error === 'object' && !Array.isArray(error)
+ ? error?.message
+ : Array.isArray(error)
+ ? error.find((e) => e)?.message
+ : undefined;
+
+ return (
+ <>
+ setIsFocused(true)}
+ onChange={(e) => setDisplayValue(e.target.value)}
+ onBlur={() => {
+ const parsed = displayValue
+ .split(',')
+ .map((s) => s.trim())
+ .filter(Boolean);
+ onChange(parsed);
+ setDisplayValue(parsed.join(', ')); // reflect cleanup
+ setIsFocused(false);
+ onBlur();
+ }}
+ />
+ {errMsg && {errMsg}}
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/components/Tabs.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/components/Tabs.tsx
new file mode 100644
index 0000000000..6a0e096174
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/components/Tabs.tsx
@@ -0,0 +1,48 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { ReactNode } from 'react';
+
+export interface TabConfig {
+ id: string;
+ label: string;
+ component: ReactNode;
+}
+
+interface TabsProps {
+ tabs: TabConfig[];
+ activeTab: string;
+ onTabChange: (tabId: string) => void;
+}
+
+export const Tabs = ({ tabs, activeTab, onTabChange }: TabsProps) => {
+ return (
+
+
+
+ + This flowchart shows the high-level deployment configuration patterns available in the wizard. +
++ This diagram describes the deployment configuration flow: start by choosing a configuration mode + (PXE Upload or Manual) and a cluster type, optionally enable high availability, and enable optional + features such as Cloud-Init, Telemetry, Build Stream/GitLab, and BMC Discovery. The BMC Discovery + flow runs a discovery playbook and generates a bmc_pxe_mapping_file.csv, then returns to choose the + configuration mode. +
+ {patternsSvg ? ( + + ) : ( +Loading diagram...
+ )} +
+
+ Wizard Steps
++ The wizard walks through these steps in order. +
++ This diagram lists the wizard steps in order: Deployment Setup, PXE Functional Groups, Network + Configuration, Storage Configuration, Cloud-Init Configuration, Omnia Cluster Configuration, Telemetry + Configuration, Build Stream Configuration, and Summary & Generate. + Cloud-Init, Telemetry, and Build Stream are optional. +
+ {stepsSvg ? ( + + ) : ( +Loading diagram...
+ )} +
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/configStore.ts b/src/utils/gui/frontend/src/features/configuration-wizard/configStore.ts
new file mode 100644
index 0000000000..a60c482c4b
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/configStore.ts
@@ -0,0 +1,296 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import type { ValidationError } from './utils/l2Validation';
+import { WIZARD_STEPS } from './constants';
+
+export type ConfigSource = 'fresh' | 'preset' | 'upload';
+
+interface ConfigState {
+ // UI State
+ activeStep: number
+ setActiveStep: (step: number) => void
+ nextStep: () => void
+ prevStep: () => void
+
+ // Config Source
+ configSource: ConfigSource
+ setConfigSource: (source: ConfigSource) => void
+
+ // Wizard Data
+ wizardData: Record
+ {tabs.map((tab) => (
+
+ ))}
+
+
+ {tabs.find((tab) => tab.id === activeTab)?.component}
+
+
+ {/* Build Stream Configuration */}
+ {enableBuildStream && (
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/cloud-init/CloudInitCommonTab.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/cloud-init/CloudInitCommonTab.tsx
new file mode 100644
index 0000000000..cd544a2d3d
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/cloud-init/CloudInitCommonTab.tsx
@@ -0,0 +1,152 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import type { UseFormRegister, FieldErrors, Control } from 'react-hook-form';
+import { useFieldArray } from 'react-hook-form';
+import Button from '../../../../components/Button';
+import { CloudInitConfigFormData } from '../../schemas/cloudInitConfig';
+import { useFormErrors } from '../../hooks/useFormErrors';
+import type { ValidationError } from '../../utils/l2Validation';
+
+interface CloudInitCommonTabProps {
+ register: UseFormRegister
+
+ )}
+
+ {/* GitLab Configuration */}
+ {enableGitlab && (
+
+
+
+
+
+
+
+
+
+
+
+ {getError('build_stream_host_ip') && {String(getError('build_stream_host_ip')?.message)}}
+
+
+
+
+
+ Default: 8010
+ {getError('build_stream_port') && {String(getError('build_stream_port')?.message)}} +
+
+
+ {getError('aarch64_inventory_host_ip') && {String(getError('aarch64_inventory_host_ip')?.message)}}
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {getError('gitlab_host') && {String(getError('gitlab_host')?.message)}}
+
+
+
+
+ {getError('gitlab_project_name') && {String(getError('gitlab_project_name')?.message)}}
+
+
+
+
+ {getError('gitlab_project_visibility') && {String(getError('gitlab_project_visibility')?.message)}}
+
+
+
+
+ {getError('gitlab_default_branch') && {String(getError('gitlab_default_branch')?.message)}}
+
+
+
+
+
+
+
+
+ Default: 443
+ {getError('gitlab_https_port') && {String(getError('gitlab_https_port')?.message)}} +
+
+
+
+ Default: 20
+ {getError('gitlab_min_storage_gb') && {String(getError('gitlab_min_storage_gb')?.message)}} +
+
+
+
+ Default: 4
+ {getError('gitlab_min_memory_gb') && {String(getError('gitlab_min_memory_gb')?.message)}} +
+
+
+
+ Default: 2
+ {getError('gitlab_min_cpu_cores') && {String(getError('gitlab_min_cpu_cores')?.message)}} +
+
+
+
+
+
+ Default: 2
+ {getError('gitlab_puma_workers') && {String(getError('gitlab_puma_workers')?.message)}} +
+
+
+
+ Default: 10
+ {getError('gitlab_sidekiq_concurrency') && {String(getError('gitlab_sidekiq_concurrency')?.message)}} +
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/cloud-init/CloudInitConfigStep.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/cloud-init/CloudInitConfigStep.tsx
new file mode 100644
index 0000000000..1eed1c76ee
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/cloud-init/CloudInitConfigStep.tsx
@@ -0,0 +1,99 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useConfigStore } from '../../configStore';
+import { cloudInitConfigSchema, type CloudInitConfigFormData } from '../../schemas/cloudInitConfig';
+import { clearL2ErrorsForStep } from '../../utils/l2Validation';
+import { Tabs } from '../../components/Tabs';
+import { CloudInitCommonTab } from './CloudInitCommonTab';
+import { CloudInitGroupsTab } from './CloudInitGroupsTab';
+
+const CLOUD_INIT_DEFAULTS = {
+ cloud_init_common: { write_files: [], runcmd: [] },
+ cloud_init_groups: [],
+};
+
+export const CloudInitConfigStep = () => {
+ const wizardData = useConfigStore((s) => s.wizardData);
+ const updateWizardFields = useConfigStore((s) => s.updateWizardFields);
+ const setStepValid = useConfigStore((s) => s.setStepValid);
+ const validationErrors = useConfigStore((s) => s.validationErrors);
+ const [activeTab, setActiveTab] = useState(typeof wizardData._ui_cloudInitActiveTab === 'string' ? wizardData._ui_cloudInitActiveTab : 'common');
+
+ const {
+ register,
+ formState: { errors },
+ control,
+ watch,
+ } = useForm+ These configurations are applied to ALL nodes during provisioning. +
+ +
+
+
+
+ {writeFilesFields.map((field, index) => {
+ const pathError = getError(`cloud_init_common.write_files.${index}.path`);
+ const permissionsError = getError(`cloud_init_common.write_files.${index}.permissions`);
+ const contentError = getError(`cloud_init_common.write_files.${index}.content`);
+ return (
+
+
+ );
+ })}
+ {writeFilesFields.length === 0 && (
+
+
+
+
+
+ {pathError && {pathError.message}}
+
+
+
+
+ {permissionsError && {permissionsError.message}}
+
+
+
+
+
+
+ {contentError && {contentError.message}}
+
+
+
+
+ No files configured. Click "+ Add File" to add a file.
+ )} + + +
+
+
+
+ {runcmdFields.map((field, index) => {
+ const commandError = getError(`cloud_init_common.runcmd.${index}.command`);
+ return (
+
+
+ );
+ })}
+ {runcmdFields.length === 0 && (
+
+
+
+
+
+
+ {commandError && {commandError.message}}
+ No commands configured. Click "+ Add Command" to add a command.
+ )} + +
+
+ );
+};
+
+interface GroupWriteFilesSectionProps {
+ register: UseFormRegister+ Configure cloud-init overrides for specific functional groups. Group names must match functional groups from PXE mapping. +
+ + {fields.map((field, index) => { + const groupNameError = getError(`cloud_init_groups.${index}.group_name`); + return ( +
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+ {groupNameError && {groupNameError.message}}
+
+
+
+
+
+
+
+
+ );
+ })}
+
+
+ );
+};
+
+interface GroupRuncmdSectionProps {
+ register: UseFormRegister
+
+
+
+
+ {pathError && {pathError.message}}
+
+
+
+
+ {permissionsError && {permissionsError.message}}
+
+
+
+
+
+
+ {contentError && {contentError.message}}
+
+
+
+
+
+
+ );
+ })}
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/deployment-setup/DeploymentSetupStep.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/deployment-setup/DeploymentSetupStep.tsx
new file mode 100644
index 0000000000..38e1a9e418
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/deployment-setup/DeploymentSetupStep.tsx
@@ -0,0 +1,401 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useEffect, useState, useRef } from 'react';
+import { useConfigStore } from '../../configStore';
+import { useNavigate } from 'react-router-dom';
+import { analyzePxeMapping } from '../../utils/pxeMappingAnalyzer';
+import { parsePxeMappingFile } from '../../utils/csvParser';
+
+const CLUSTER_OPTIONS = [
+ { value: 'slurm', label: 'Slurm Only', description: 'Slurm workload manager cluster' },
+ { value: 'k8s', label: 'Kubernetes Only', description: 'Kubernetes service cluster' },
+ { value: 'both', label: 'Both', description: 'Slurm + Kubernetes clusters' },
+] as const;
+
+const TELEMETRY_SOURCES = ['IDRAC', 'LDMS', 'DCGM', 'Powerscale', 'UFM', 'VAST', 'OME'] as const;
+
+export const DeploymentSetupStep = () => {
+ const clusterType = useConfigStore((s) => s.clusterType);
+ const setClusterType = useConfigStore((s) => s.setClusterType);
+ const enableHa = useConfigStore((s) => s.enableHa);
+ const setEnableHa = useConfigStore((s) => s.setEnableHa);
+ const enableCloudInit = useConfigStore((s) => s.enableCloudInit);
+ const setEnableCloudInit = useConfigStore((s) => s.setEnableCloudInit);
+ const enableBmcDiscovery = useConfigStore((s) => s.enableBmcDiscovery);
+ const setEnableBmcDiscovery = useConfigStore((s) => s.setEnableBmcDiscovery);
+ const selectedTelemetrySources = useConfigStore((s) => s.selectedTelemetrySources);
+ const setSelectedTelemetrySources = useConfigStore((s) => s.setSelectedTelemetrySources);
+ const enableBuildStream = useConfigStore((s) => s.enableBuildStream);
+ const setEnableBuildStream = useConfigStore((s) => s.setEnableBuildStream);
+ const enableGitlab = useConfigStore((s) => s.enableGitlab);
+ const setEnableGitlab = useConfigStore((s) => s.setEnableGitlab);
+ const enableTelemetry = useConfigStore((s) => s.enableTelemetry);
+ const setEnableTelemetry = useConfigStore((s) => s.setEnableTelemetry);
+ const setStepValid = useConfigStore((s) => s.setStepValid);
+ const wizardData = useConfigStore((s) => s.wizardData);
+ const pxeMappingData = useConfigStore((s) => s.wizardData.pxe_mapping_data as any[] | undefined);
+ const updateWizardFields = useConfigStore((s) => s.updateWizardFields);
+ const configMode = useConfigStore((s) => s.configMode);
+ const setConfigMode = useConfigStore((s) => s.setConfigMode);
+ const navigate = useNavigate();
+ const [pxeFileError, setPxeFileError] = useState
+
+
+
+
+
+ {commandError && {commandError.message}}
+
+
+ );
+
+ const renderOptionalFeaturesSection = () => (
+ Cluster Type
+ {configMode === 'pxe_upload' && ( +Cluster type auto-detected from PXE mapping file
+ )} +
+ {CLUSTER_OPTIONS.map(({ value, label, description }) => (
+
+ ))}
+
+
+ {(clusterType === 'k8s' || clusterType === 'both') && (
+
+
+ )}
+
+ setEnableHa(e.target.checked)}
+ />
+
+
+ + When enabled, HA configuration section will be shown in the Kubernetes tab +
+
+
+ );
+
+ return (
+ Optional Features
+ +
+
+
+
+
+
+ setEnableBmcDiscovery(e.target.checked)}
+ disabled={configMode === 'pxe_upload'}
+ />
+
+
+ {enableBmcDiscovery && configMode !== 'pxe_upload' && (
+
+
+
+
+ )}
+ + Discover nodes via Dell OpenManage Enterprise (OME) or Magellan admin inventory + {configMode === 'pxe_upload' && (Disabled - PXE mapping file already uploaded)} +
+
+ setEnableCloudInit(e.target.checked)}
+ />
+
+
+ + Configure additional cloud-init write_files and runcmd for node provisioning +
+ + {(clusterType === 'k8s' || clusterType === 'both') && ( +
+
+ )}
+
+
+ {
+ setEnableTelemetry(e.target.checked);
+ // Clear all telemetry sources when telemetry is disabled
+ if (!e.target.checked) {
+ setSelectedTelemetrySources([]);
+ updateWizardFields({
+ telemetry_sources: {
+ idrac: { metrics_enabled: false, collection_targets: [] },
+ ldms: { metrics_enabled: false, collection_targets: [] },
+ dcgm: { metrics_enabled: false },
+ powerscale: { metrics_enabled: false, logs_enabled: false, collection_targets: [] },
+ ufm: { metrics_enabled: false, logs_enabled: false, collection_targets: [] },
+ vast: { metrics_enabled: false, logs_enabled: false, collection_targets: [] },
+ ome: { metrics_enabled: false, logs_enabled: false, collection_targets: [] },
+ }
+ });
+ }
+ }}
+ />
+
+
+ {enableTelemetry && (
+ <>
+ Telemetry Sources
+
+ {TELEMETRY_SOURCES.map((source) => (
+
+ ))}
+
+ + Select telemetry sources to configure +
+ + )} +
+
+
+ setEnableBuildStream(e.target.checked)}
+ />
+
+
+ + Configure BuildStream host for catalog management +
+ +
+ setEnableGitlab(e.target.checked)}
+ />
+
+
+ + Configure GitLab server for project management +
+
+ {!configMode && (
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/network/DeploymentConfigsStep.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/network/DeploymentConfigsStep.tsx
new file mode 100644
index 0000000000..044c754392
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/network/DeploymentConfigsStep.tsx
@@ -0,0 +1,458 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useEffect } from 'react';
+import { useForm, Controller, useFieldArray } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { deploymentConfigsSchema, DeploymentConfigsFormData } from '../../schemas';
+import { useConfigStore } from '../../configStore';
+import { clearL2ErrorsForStep } from '../../utils/l2Validation';
+import { DnsInput } from '../../components/DnsInput';
+import { useFormErrors } from '../../hooks/useFormErrors';
+
+const defaultAdminNetwork = {
+ oim_nic_name: '',
+ subnet: '',
+ netmask_bits: '',
+ primary_oim_admin_ip: '',
+ primary_oim_bmc_ip: '',
+ dynamic_range: '',
+ dns: [] as string[],
+ ntp_servers: [] as { address: string; type: 'server' | 'pool' }[],
+ additional_subnets: [] as any[],
+};
+
+const defaultIbNetwork = {
+ subnet: '',
+ netmask_bits: '',
+ dns: [] as string[],
+};
+
+const normalizeNetworks = (networks: any): DeploymentConfigsFormData['Networks'] => {
+ const networkArray = Array.isArray(networks) ? networks : [];
+ const adminEntry = networkArray.find((n: any) => n?.admin_network);
+ const ibEntry = networkArray.find((n: any) => n?.ib_network);
+ const additionalEntry = networkArray.find((n: any) => n?.additional_subnets);
+
+ return [
+ {
+ admin_network: {
+ ...defaultAdminNetwork,
+ ...(adminEntry?.admin_network || {}),
+ },
+ },
+ {
+ ib_network: {
+ ...defaultIbNetwork,
+ ...(ibEntry?.ib_network || {}),
+ },
+ },
+ {
+ additional_subnets: Array.isArray(additionalEntry?.additional_subnets)
+ ? additionalEntry.additional_subnets
+ : [],
+ },
+ ];
+};
+
+export const DeploymentConfigsStep = () => {
+ const { wizardData, updateWizardField, setStepValid, validationErrors } = useConfigStore();
+
+ const {
+ register,
+ formState: { errors },
+ control,
+ watch,
+ setValue,
+ getValues,
+ } = useForm
+
+ )}
+
+ {configMode && (
+ <>
+ {renderClusterTypeSection()}
+ {renderOptionalFeaturesSection()}
+
+ )}
+ Configuration Mode
+Choose how you want to configure your deployment:
+
+
+
+
+
+
+ {networksError &&
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/ConfigSourcesEditor.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/ConfigSourcesEditor.tsx
new file mode 100644
index 0000000000..4de669af77
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/ConfigSourcesEditor.tsx
@@ -0,0 +1,183 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useState } from 'react';
+import { useFieldArray, UseFormRegister, Control, FieldErrors, useWatch } from 'react-hook-form';
+import { SlurmConfigFileName, SLURM_CONFIG_FILE_NAMES } from '../../schemas/common';
+import { OmniaHaDiscoveryFormData } from '../../schemas/omniaHaDiscoveryConfig';
+import { useFormErrors } from '../../hooks/useFormErrors';
+import type { ValidationError } from '../../utils/l2Validation';
+
+type ConfigSourceField = {
+ id: string;
+ name: SlurmConfigFileName;
+ mode: 'yaml' | 'filepath';
+ yaml_content: string;
+ file_path: string;
+};
+
+interface ConfigSourcesEditorProps {
+ clusterIndex: number;
+ register: UseFormRegister{networksError.message}
}
+
+ {/* Admin Network */}
+
+
+
+
+ {/* InfiniBand Network */}
+
+
+
+
+
+
+
+
+ {getError('Networks.0.admin_network.oim_nic_name') && {getError('Networks.0.admin_network.oim_nic_name')?.message}}
+
+
+
+
+
+ {getError('Networks.0.admin_network.subnet') && {getError('Networks.0.admin_network.subnet')?.message}}
+
+
+
+
+
+ {getError('Networks.0.admin_network.netmask_bits') && {getError('Networks.0.admin_network.netmask_bits')?.message}}
+
+
+
+
+
+
+
+ {getError('Networks.0.admin_network.primary_oim_admin_ip') && {getError('Networks.0.admin_network.primary_oim_admin_ip')?.message}}
+
+
+
+
+
+ {getError('Networks.0.admin_network.primary_oim_bmc_ip') && {getError('Networks.0.admin_network.primary_oim_bmc_ip')?.message}}
+
+
+
+
+
+ {getError('Networks.0.admin_network.dynamic_range') && {getError('Networks.0.admin_network.dynamic_range')?.message}}
+
+
+
+ (
+
+
+
+
+ {ntpServers.length === 0 && (
+
+
+ No NTP servers configured. Click below to add one.
+ )} + {ntpServers.map((item, index) => ( +
+
+ ))}
+
+
+
+
+
+
+
+ {getError(`Networks.0.admin_network.ntp_servers.${index}.address`) && {getError(`Networks.0.admin_network.ntp_servers.${index}.address`)?.message}}
+
+
+
+
+ {getError(`Networks.0.admin_network.ntp_servers.${index}.type`) && {getError(`Networks.0.admin_network.ntp_servers.${index}.type`)?.message}}
+
+
+
+ {additionalSubnets.length === 0 && (
+
+ No additional subnets configured. Click below to add one.
+ )} + {additionalSubnets.map((item, index) => ( +
+
+ ))}
+
+
+
+
+
+
+
+ {getError(`Networks.0.admin_network.additional_subnets.${index}.subnet`) && {getError(`Networks.0.admin_network.additional_subnets.${index}.subnet`)?.message}}
+
+
+
+
+ {getError(`Networks.0.admin_network.additional_subnets.${index}.netmask_bits`) && {getError(`Networks.0.admin_network.additional_subnets.${index}.netmask_bits`)?.message}}
+
+
+
+
+ {getError(`Networks.0.admin_network.additional_subnets.${index}.router`) && {getError(`Networks.0.admin_network.additional_subnets.${index}.router`)?.message}}
+
+
+
+
+ {getError(`Networks.0.admin_network.additional_subnets.${index}.dynamic_range`) && {getError(`Networks.0.admin_network.additional_subnets.${index}.dynamic_range`)?.message}}
+
+
+
+
+
+ {/* Top-level Additional Subnets */}
+
+
+
+
+
+
+
+ {getError('Networks.1.ib_network.subnet') && {getError('Networks.1.ib_network.subnet')?.message}}
+
+
+
+
+
+ {getError('Networks.1.ib_network.netmask_bits') && {getError('Networks.1.ib_network.netmask_bits')?.message}}
+
+
+
+
+ (
+
+
+
+ {topLevelAdditionalSubnets.length === 0 && (
+
+ No additional subnets configured. Click below to add one.
+ )} + {topLevelAdditionalSubnets.map((item, index) => ( +
+
+ ))}
+
+
+
+
+
+
+
+ {getError(`Networks.2.additional_subnets.${index}.subnet`) && {getError(`Networks.2.additional_subnets.${index}.subnet`)?.message}}
+
+
+
+
+ {getError(`Networks.2.additional_subnets.${index}.netmask_bits`) && {getError(`Networks.2.additional_subnets.${index}.netmask_bits`)?.message}}
+
+
+
+
+ {getError(`Networks.2.additional_subnets.${index}.router`) && {getError(`Networks.2.additional_subnets.${index}.router`)?.message}}
+
+
+
+
+ {getError(`Networks.2.additional_subnets.${index}.dynamic_range`) && {getError(`Networks.2.additional_subnets.${index}.dynamic_range`)?.message}}
+
+
+
+
+
+ ) : null;
+
+ return (
+
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/K8sClusterRow.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/K8sClusterRow.tsx
new file mode 100644
index 0000000000..d0427fd269
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/K8sClusterRow.tsx
@@ -0,0 +1,178 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { UseFormRegister, FieldErrors } from 'react-hook-form';
+import Button from '../../../../components/Button';
+import { OmniaHaDiscoveryFormData } from '../../schemas/omniaHaDiscoveryConfig';
+import { useFormErrors } from '../../hooks/useFormErrors';
+import type { ValidationError } from '../../utils/l2Validation';
+
+interface K8sClusterRowProps {
+ index: number;
+ register: UseFormRegister+ Define how Slurm configuration files are provided to the cluster. + {fields.length === 0 ? ' Select from the supported config files below.' : ' Each config file can be provided as YAML configuration or a file path.'} +
+ + {fields.length === 0 && ( ++ No config sources configured. +
+ )} + + {(fields as ConfigSourceField[]).map((field, index) => { + const entryPath = `slurm_cluster.${clusterIndex}.config_sources.${index}`; + const mode = getMode(index); + const yamlContentError = getError(`${entryPath}.yaml_content`); + const filePathError = getError(`${entryPath}.file_path`); + + return ( +
+
+ );
+ })}
+
+ {addConfigControl}
+
+
+
+ {/* Mode toggle */}
+ {field.name}.conf
+ +
+
+
+
+
+ {/* Content based on mode */}
+ {mode === 'yaml' ? (
+
+
+ {yamlContentError && {yamlContentError.message}}
+
+ ) : (
+
+
+ {filePathError && {filePathError.message}}
+
+ )}
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/K8sTab.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/K8sTab.tsx
new file mode 100644
index 0000000000..dd768226cc
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/K8sTab.tsx
@@ -0,0 +1,166 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useFieldArray, UseFormRegister, Control, FieldErrors, UseFormSetValue } from 'react-hook-form';
+import { useEffect } from 'react';
+import Button from '../../../../components/Button';
+import { OmniaHaDiscoveryFormData } from '../../schemas/omniaHaDiscoveryConfig';
+import { K8sClusterRow } from './K8sClusterRow';
+import { useFormErrors } from '../../hooks/useFormErrors';
+import type { ValidationError } from '../../utils/l2Validation';
+
+interface K8sTabProps {
+ register: UseFormRegister
+
+
+
+
+ {clusterNameError && {clusterNameError.message}}
+
+
+
+
+
+ Exactly one cluster must have deployment enabled
+ {deploymentError && {deploymentError.message}} +
+
+
+
+ Default: calico
+ {k8sCniError && {k8sCniError.message}} +
+
+
+
+
+ {podExternalIpError && {podExternalIpError.message}}
+
+
+
+
+
+ Default: 10.233.0.0/18
+ {k8sServiceAddressesError && {k8sServiceAddressesError.message}} +
+
+
+
+ Default: 10.233.64.0/18
+ {k8sPodNetworkCidrError && {k8sPodNetworkCidrError.message}} +
+
+
+
+
+ {nfsStorageNameError && {nfsStorageNameError.message}}
+
+
+
+
+ {k8sCrioStorageSizeError && {k8sCrioStorageSizeError.message}}
+
+
+
+
+ {csiSecretFilePathError && {csiSecretFilePathError.message}}
+
+
+
+
+ {csiValuesFilePathError && {csiValuesFilePathError.message}}
+
+
+
+ {canRemove && (
+
+ )}
+
+
+
+
+
+ {/* Service K8s Cluster Configuration */}
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/NodeHardwareDefaultsBuilder.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/NodeHardwareDefaultsBuilder.tsx
new file mode 100644
index 0000000000..da3f0a8566
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/NodeHardwareDefaultsBuilder.tsx
@@ -0,0 +1,98 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useFieldArray, UseFormRegister, Control, FieldErrors } from 'react-hook-form';
+import Button from '../../../../components/Button';
+import { OmniaHaDiscoveryFormData } from '../../schemas/omniaHaDiscoveryConfig';
+import { useFormErrors } from '../../hooks/useFormErrors';
+import type { ValidationError } from '../../utils/l2Validation';
+
+interface NodeHardwareDefaultsBuilderProps {
+ clusterIndex: number;
+ register: UseFormRegister
+
+ {k8sArrayError && {k8sArrayError}}
+ {k8sFields.map((field, index) => (
+ removeK8s(index)}
+ canRemove={k8sFields.length > 1}
+ onDeploymentChange={(checked) => handleDeploymentChange(index, checked)}
+ />
+ ))}
+
+
+
+ {/* High Availability Configuration */}
+
+
+ {haFields.map((field, index) => {
+ const clusterNameError = getError(`service_k8s_cluster_ha.${index}.cluster_name`);
+ const virtualIpError = getError(`service_k8s_cluster_ha.${index}.virtual_ip_address`);
+
+ return (
+
+
+
+ );
+ })}
+ {enableHa && haFields.length === 0 && (
+
+
+
+ {haFields.length > 1 && (
+
+ )}
+
+
+
+ {clusterNameError && {clusterNameError.message}}
+
+
+
+
+ {virtualIpError && {virtualIpError.message}}
+
+ + No HA clusters configured. Click below to add one. +
+ )} + +
+
+
+ {error && {error.message}}
+
+ );
+ };
+
+ const addGroup = () => {
+ append({
+ group_name: '',
+ sockets: 1,
+ cores_per_socket: 1,
+ threads_per_core: 1,
+ real_memory: 1,
+ gres: '',
+ });
+ };
+
+ return (
+
+ {fields.length === 0 && (
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/OmniaHaDiscoveryStep.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/OmniaHaDiscoveryStep.tsx
new file mode 100644
index 0000000000..d3a318fd21
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/OmniaHaDiscoveryStep.tsx
@@ -0,0 +1,141 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useConfigStore } from '../../configStore';
+import { OmniaHaDiscoveryFormData, omniaHaDiscoverySchema } from '../../schemas/omniaHaDiscoveryConfig';
+import { clearL2ErrorsForStep } from '../../utils/l2Validation';
+import { SlurmTab, EMPTY_SLURM_CLUSTER } from './SlurmTab';
+import { K8sTab, EMPTY_K8S_CLUSTER, EMPTY_HA_CLUSTER } from './K8sTab';
+import { Tabs } from '../../components/Tabs';
+import { useFormErrors } from '../../hooks/useFormErrors';
+
+export const OmniaHaDiscoveryStep = () => {
+ const wizardData = useConfigStore((s) => s.wizardData);
+ const updateWizardFields = useConfigStore((s) => s.updateWizardFields);
+ const setStepValid = useConfigStore((s) => s.setStepValid);
+ const clusterType = useConfigStore((s) => s.clusterType);
+ const enableHa = useConfigStore((s) => s.enableHa);
+ const validationErrors = useConfigStore((s) => s.validationErrors);
+ const [activeTab, setActiveTab] = useState('slurm');
+
+ // Auto-select appropriate tab based on cluster type
+ useEffect(() => {
+ if (clusterType === 'slurm') {
+ setActiveTab('slurm');
+ } else if (clusterType === 'k8s') {
+ setActiveTab('k8s');
+ }
+ }, [clusterType]);
+
+ const {
+ register,
+ formState: { errors },
+ control,
+ watch,
+ setValue,
+ } = useForm+ No hardware default groups configured. Click below to add one. +
+ )} + {fields.map((field, index) => { + const base = `slurm_cluster.${clusterIndex}.node_hardware_defaults.${index}`; + return ( +
+
+ );
+ })}
+
+
+ {renderField(`${base}.group_name`, 'Group Name (Required)', 'e.g., grp0')}
+ {renderField(`${base}.sockets`, 'Sockets\n(Required)', 'e.g., 2', 'number')}
+ {renderField(`${base}.cores_per_socket`, 'Cores per Socket\n(Required)', 'e.g., 64', 'number')}
+ {renderField(`${base}.threads_per_core`, 'Threads per Core\n(Required)', 'e.g., 2', 'number')}
+ {renderField(`${base}.real_memory`, 'Real Memory (MB)\n(Required)', 'e.g., 512000', 'number')}
+ {renderField(`${base}.gres`, 'GPU Resources (Optional)', 'e.g., gpu:4')}
+
+
+
+ {/* Security Configuration */}
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/SlurmClusterRow.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/SlurmClusterRow.tsx
new file mode 100644
index 0000000000..039fa612f4
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/SlurmClusterRow.tsx
@@ -0,0 +1,127 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useWatch, UseFormRegister, Control, FieldErrors, UseFormSetValue } from 'react-hook-form';
+import { useEffect, useRef } from 'react';
+import Button from '../../../../components/Button';
+import { OmniaHaDiscoveryFormData } from '../../schemas/omniaHaDiscoveryConfig';
+import { useFormErrors } from '../../hooks/useFormErrors';
+import { NodeHardwareDefaultsBuilder } from './NodeHardwareDefaultsBuilder';
+import { ConfigSourcesEditor } from './ConfigSourcesEditor';
+import type { ValidationError } from '../../utils/l2Validation';
+
+interface SlurmClusterRowProps {
+ index: number;
+ register: UseFormRegister
+
+
+
+
+
+ {/* Tabs for Slurm and K8s */}
+ + Select the LDAP connection type. TLS uses port 389, SSL uses port 636. +
+ {ldapError && {ldapError.message}} +
+
+
+ {error && {error.message}}
+
+ );
+ };
+
+ // Watch only this cluster's node_discovery_mode
+ const nodeDiscoveryMode = useWatch({
+ control,
+ name: `slurm_cluster.${index}.node_discovery_mode`,
+ });
+
+ const isHomogeneous = nodeDiscoveryMode === 'homogeneous';
+ const wasPreviouslyHomogeneous = useRef(isHomogeneous);
+
+ // Clear node_hardware_defaults when mode changes from homogeneous to heterogeneous
+ useEffect(() => {
+ if (wasPreviouslyHomogeneous.current && !isHomogeneous) {
+ setValue(`slurm_cluster.${index}.node_hardware_defaults`, []);
+ }
+ wasPreviouslyHomogeneous.current = isHomogeneous;
+ }, [isHomogeneous, index, setValue]);
+
+ return (
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/SlurmTab.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/SlurmTab.tsx
new file mode 100644
index 0000000000..5913c6664a
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/omnia/SlurmTab.tsx
@@ -0,0 +1,67 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useFieldArray, UseFormRegister, Control, FieldErrors, UseFormSetValue } from 'react-hook-form';
+import Button from '../../../../components/Button';
+import { SlurmClusterRow } from './SlurmClusterRow';
+import { OmniaHaDiscoveryFormData } from '../../schemas/omniaHaDiscoveryConfig';
+import type { ValidationError } from '../../utils/l2Validation';
+
+interface SlurmTabProps {
+ register: UseFormRegister
+ {renderField(`slurm_cluster.${index}.cluster_name`, 'Slurm Cluster Name (Required)', 'e.g., slurm_cluster')}
+ {renderField(`slurm_cluster.${index}.nfs_storage_name`, 'NFS Storage Name (Required)', 'Storage name from storage_config.yml')}
+
+
+ {renderField(`slurm_cluster.${index}.vast_storage_name`, 'VAST Storage Name (Required)', 'VAST storage name from storage_config.yml')}
+
+
+
+
+
+
+
+
+ Pre-define hardware specifications for homogeneous node groups. If a group is not listed, one node will be discovered via iDRAC and specs applied to all nodes in the group.
+
+
+
+
+ {canRemove && (
+
+ )}
+
+
+
+
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/pxe/PxeFunctionalGroupsStep.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/pxe/PxeFunctionalGroupsStep.tsx
new file mode 100644
index 0000000000..e30bd23918
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/pxe/PxeFunctionalGroupsStep.tsx
@@ -0,0 +1,439 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useState, useEffect, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { pxeFunctionalGroupsSchema, PxeFunctionalGroupsFormData } from '../../schemas';
+import { useConfigStore } from '../../configStore';
+import { clearL2ErrorsForStep } from '../../utils/l2Validation';
+import { parsePxeMappingFile, type PxeMappingRow, ALL_COLUMNS } from '../../utils/csvParser';
+import { useFormErrors } from '../../hooks/useFormErrors';
+
+// Functional groups filtered by cluster type
+const FUNCTIONAL_GROUPS_BY_CLUSTER_TYPE: Record
+
+ {fields.map((field, index) => (
+ remove(index)}
+ canRemove={fields.length > 1}
+ />
+ ))}
+
+
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/MountParamsTab.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/MountParamsTab.tsx
new file mode 100644
index 0000000000..d752be7660
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/MountParamsTab.tsx
@@ -0,0 +1,173 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import type { UseFormRegister, Control } from 'react-hook-form';
+import { useFieldArray } from 'react-hook-form';
+import Button from '../../../../components/Button';
+import { StorageConfigFormData } from '../../schemas/storageConfig';
+import type { FormFieldError } from '../../hooks/useFormErrors';
+
+interface MountParamsTabProps {
+ register: UseFormRegister
+
+
+ {parseError && (
+
+
+ {parseError}
+ )}
+ {parsedData.length === 0 && !parseError && (
+
+
+ )}
+ + {getError('pxe_mapping_data')?.message || 'No PXE mapping data loaded. Upload a CSV file or create a new mapping.'} +
+ +
+
+
+
+
+ {parsedData.length > 0 && (
+ + Default: /opt/omnia/input/project_default/pxe_mapping_file.csv +
+ {pxeMappingFilePathError && {pxeMappingFilePathError.message}} +
+
+ )}
+
+
+
+ PXE Mapping Data ({parsedData.length} rows)
+ +
+
+
+
+
+ | + {col.replace(/_/g, ' ')} + | + ))} +Actions | +||
|---|---|---|---|
| + {col === 'FUNCTIONAL_GROUP_NAME' ? ( + <> + handleEditFieldChange(col, e.target.value)} + className="pxe-mapping-input" + placeholder="Select or type functional group..." + /> + + + ) : ( + handleEditFieldChange(col, e.target.value)} + className="pxe-mapping-input" + /> + )} + | + ))} ++ + + | + + ) : ( + <> + {ALL_COLUMNS.map((col) => ( ++ {row[col] || '-'} + | + ))} ++ + + | + + )} +
+
+
+
+
+
+
+
+
+ + Only en_US.UTF-8 is supported +
+
+
+
+
+
+ + Default: 86400 +
+ {defaultLeaseTimeError && {defaultLeaseTimeError.message}} +
+
+
+
+ + Optional - auto-select latest if empty +
+ {kernelVersionError && {kernelVersionError.message}} +
+
+
+
+
+
+
+
+
+
+
+ + Path to additional cloud-init configuration file for stateless node provisioning +
+ {cloudInitConfigFileError && {cloudInitConfigFileError.message}} +
+
+
+
+
+ {
+ onToggle(e.target.checked);
+ if (!e.target.checked) {
+ onClear();
+ }
+ }}
+ />
+
+
+
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/MountsTab.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/MountsTab.tsx
new file mode 100644
index 0000000000..ee2dd0d66a
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/MountsTab.tsx
@@ -0,0 +1,343 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import type { UseFormRegister, Control } from 'react-hook-form';
+import { useFieldArray } from 'react-hook-form';
+import { useState } from 'react';
+import Button from '../../../../components/Button';
+import { StorageConfigFormData } from '../../schemas/storageConfig';
+import type { FormFieldError } from '../../hooks/useFormErrors';
+
+interface MountsTabProps {
+ register: UseFormRegister
+
+ + Define reusable mount profiles with fs_type and mnt_opts. Reference these profiles in mount entries. +
+ + {fields.map((field, index) => { + const profileNameError = getError(`_mount_params_entries.${index}.profile_name`); + const fsTypeError = getError(`_mount_params_entries.${index}.fs_type`); + const dumpFreqError = getError(`_mount_params_entries.${index}.dump_freq`); + const mntOptsError = getError(`_mount_params_entries.${index}.mnt_opts`); + const fsckPassError = getError(`_mount_params_entries.${index}.fsck_pass`); + + return ( +
+
+ );
+ })}
+
+
+
+
+
+
+
+ {profileNameError && (
+ {profileNameError.message}
+ )}
+
+
+
+
+ {fsTypeError && (
+ {fsTypeError.message}
+ )}
+
+
+
+
+ {dumpFreqError && (
+ {dumpFreqError.message}
+ )}
+
+
+
+ {fields.length > 1 && (
+
+ )}
+
+
+
+ {mntOptsError && (
+ {mntOptsError.message}
+ )}
+
+
+
+
+ {fsckPassError && (
+ {fsckPassError.message}
+ )}
+
+
+
+
+
+
+ {
+ onToggle(e.target.checked);
+ if (!e.target.checked) {
+ onClear();
+ }
+ }}
+ />
+
+
+
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/PowerVaultTab.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/PowerVaultTab.tsx
new file mode 100644
index 0000000000..ef94c045ea
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/PowerVaultTab.tsx
@@ -0,0 +1,338 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import type { UseFormRegister, Control } from 'react-hook-form';
+import { useFieldArray } from 'react-hook-form';
+import Button from '../../../../components/Button';
+import { StorageConfigFormData } from '../../schemas/storageConfig';
+import type { FormFieldError } from '../../hooks/useFormErrors';
+
+interface PowerVaultTabProps {
+ register: UseFormRegister
+
+ + Configure NFS, local, CIFS, or other filesystem mounts for nodes. +
+ + {fields.map((field, index) => { + const nameError = getError(`mounts.${index}.name`); + const sourceError = getError(`mounts.${index}.source`); + const mountPointError = getError(`mounts.${index}.mount_point`); + const fsTypeError = getError(`mounts.${index}.fs_type`); + const mntOptsError = getError(`mounts.${index}.mnt_opts`); + const mountParamsError = getError(`mounts.${index}.mount_params`); + const dumpFreqError = getError(`mounts.${index}.dump_freq`); + const fsckPassError = getError(`mounts.${index}.fsck_pass`); + const mountOnOimError = getError(`mounts.${index}.mount_on_oim`); + const functionalGroupPrefixError = getError(`mounts.${index}.functional_group_prefix`); + const groupsError = getError(`mounts.${index}.groups`); + const nodeKeyError = getError(`mounts.${index}.node_key`); + const nodeMountPointError = getError(`mounts.${index}.node_mount_point`); + const permissionsOwnerError = getError(`mounts.${index}.permissions.owner`); + const permissionsGroupError = getError(`mounts.${index}.permissions.group`); + const permissionsModeError = getError(`mounts.${index}.permissions.mode`); + + return ( +
+
+ );
+ })}
+
+
+
+
+
+
+
+ {nameError && {nameError.message}}
+
+
+
+
+ {sourceError && {sourceError.message}}
+
+
+
+
+ {mountPointError && {mountPointError.message}}
+
+
+
+
+
+
+ {fsTypeError && {fsTypeError.message}}
+
+
+
+
+ {mntOptsError && {mntOptsError.message}}
+
+
+
+
+ {mountParamsError && {mountParamsError.message}}
+
+
+
+
+
+
+ {dumpFreqError && {dumpFreqError.message}}
+
+
+
+
+ {fsckPassError && {fsckPassError.message}}
+
+
+
+
+
+
+
+
+
+
+
+
+ handleTargetingChange(index, 'prefix', e.target.value)
+ })}
+ />
+
+ Comma-separated values (mutually exclusive with groups)
+ {functionalGroupPrefixError && {functionalGroupPrefixError.message}} +
+
+ handleTargetingChange(index, 'groups', e.target.value)
+ })}
+ />
+
+ Comma-separated values (mutually exclusive with functional_group_prefix)
+ {groupsError && {groupsError.message}} +
+
+
+
+
+
+
+
+
+ Enables per-node subdirectory isolation
+ {nodeKeyError && {nodeKeyError.message}} +
+
+
+
+ Comma-separated absolute paths (required when Node Key is set)
+ {nodeMountPointError && {nodeMountPointError.message}} +
+
+
+ {fields.length > 1 && (
+
+ )}
+
+
+
+
+
+ {permissionsOwnerError && {permissionsOwnerError.message}}
+
+
+
+
+ {permissionsGroupError && {permissionsGroupError.message}}
+
+
+
+
+
+ Octal mode (e.g., 0755, 1777)
+ {permissionsModeError && {permissionsModeError.message}} +
+
+
+
+
+ {
+ onToggle(e.target.checked);
+ if (!e.target.checked) {
+ onClear();
+ }
+ }}
+ />
+
+
+
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/S3Tab.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/S3Tab.tsx
new file mode 100644
index 0000000000..97fd1cd84a
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/S3Tab.tsx
@@ -0,0 +1,70 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import type { UseFormRegister, Control, UseFormSetValue } from 'react-hook-form';
+import { useWatch } from 'react-hook-form';
+import { StorageConfigFormData } from '../../schemas/storageConfig';
+import type { FormFieldError } from '../../hooks/useFormErrors';
+
+interface S3TabProps {
+ register: UseFormRegister
+
+ + Configure Dell PowerVault iSCSI storage arrays for nodes. +
+ + {fields.map((field, index) => { + const nameError = getError(`powervault_config.${index}.name`); + const mountPointError = getError(`powervault_config.${index}.mount_point`); + const portError = getError(`powervault_config.${index}.port`); + const ipError = getError(`powervault_config.${index}.ip`); + const iscsiInitiatorError = getError(`powervault_config.${index}.iscsi_initiator`); + const volumeIdError = getError(`powervault_config.${index}.volume_id`); + const fsTypeError = getError(`powervault_config.${index}.fs_type`); + const functionalGroupPrefixError = getError(`powervault_config.${index}.functional_group_prefix`); + const nodeKeyError = getError(`powervault_config.${index}.node_key`); + const nodeMountPointError = getError(`powervault_config.${index}.node_mount_point`); + const permissionsOwnerError = getError(`powervault_config.${index}.permissions.owner`); + const permissionsGroupError = getError(`powervault_config.${index}.permissions.group`); + const permissionsModeError = getError(`powervault_config.${index}.permissions.mode`); + const dumpFreqError = getError(`powervault_config.${index}.dump_freq`); + const fsckPassError = getError(`powervault_config.${index}.fsck_pass`); + const mntOptsError = getError(`powervault_config.${index}.mnt_opts`); + const mountParamsError = getError(`powervault_config.${index}.mount_params`); + + return ( +
+
+ );
+ })}
+
+
+
+
+
+
+
+ {nameError && {nameError.message}}
+
+
+
+
+ {mountPointError && {mountPointError.message}}
+
+
+
+
+ {portError && {portError.message}}
+
+
+
+
+
+
+
+ Comma-separated IPv4 addresses
+ {ipError && {ipError.message}} +
+
+
+
+ Comma-separated values (required)
+ {functionalGroupPrefixError && {functionalGroupPrefixError.message}} +
+
+
+
+
+ {iscsiInitiatorError && {iscsiInitiatorError.message}}
+
+
+
+
+ {volumeIdError && {volumeIdError.message}}
+
+
+
+
+
+
+ {fsTypeError && {fsTypeError.message}}
+
+
+
+
+ {dumpFreqError && {dumpFreqError.message}}
+
+
+
+
+ {fsckPassError && {fsckPassError.message}}
+
+
+
+
+
+
+ {mntOptsError && {mntOptsError.message}}
+
+
+
+
+ {mountParamsError && {mountParamsError.message}}
+
+
+
+
+
+
+
+
+
+
+ Enables per-node subdirectory isolation
+ {nodeKeyError && {nodeKeyError.message}} +
+
+
+
+ Comma-separated absolute paths (required when Node Key is set)
+ {nodeMountPointError && {nodeMountPointError.message}} +
+
+
+ {fields.length > 1 && (
+
+ )}
+
+
+
+
+
+ {permissionsOwnerError && {permissionsOwnerError.message}}
+
+
+
+
+ {permissionsGroupError && {permissionsGroupError.message}}
+
+
+
+
+
+ Octal mode (e.g., 0750, 0755)
+ {permissionsModeError && {permissionsModeError.message}} +
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/StorageConfigStep.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/StorageConfigStep.tsx
new file mode 100644
index 0000000000..6e29702cc7
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/StorageConfigStep.tsx
@@ -0,0 +1,234 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useConfigStore } from '../../configStore';
+import { storageConfigSchema, type StorageConfigFormData } from '../../schemas/storageConfig';
+import { clearL2ErrorsForStep } from '../../utils/l2Validation';
+import { useFormErrors } from '../../hooks/useFormErrors';
+import { Tabs } from '../../components/Tabs';
+import { MountsTab } from './MountsTab';
+import { MountParamsTab } from './MountParamsTab';
+import { PowerVaultTab } from './PowerVaultTab';
+import { SwapTab } from './SwapTab';
+import { S3Tab } from './S3Tab';
+
+const MOUNT_PARAMS_DEFAULTS = {
+ nfs_default: { fs_type: 'nfs', mnt_opts: 'nosuid,rw,sync,hard', dump_freq: '0', fsck_pass: '0' },
+ vast_rdma: { fs_type: 'nfs', mnt_opts: 'proto=rdma,nconnect=8,timeo=600,retrans=2,rsize=1048576,wsize=1048576,hard' },
+ vast_tcp: { fs_type: 'nfs', mnt_opts: 'nosuid,rw,sync,hard' },
+};
+
+const S3_DEFAULTS = { provider: 'powerscale', endpoint_url: '' } as const;
+
+const MOUNT_DEFAULTS = {
+ name: '',
+ source: '',
+ mount_point: '',
+ fs_type: 'nfs',
+ mnt_opts: 'nosuid,rw,sync,hard',
+ mount_on_oim: false,
+ functional_group_prefix: [''],
+ groups: [],
+ node_key: '',
+ node_mount_point: [],
+ permissions: { owner: 'root', group: 'root', mode: '0755' }
+};
+
+const MOUNT_PARAMS_ENTRY_DEFAULTS = { profile_name: '', fs_type: 'nfs', mnt_opts: 'nosuid,rw,sync,hard', dump_freq: '0', fsck_pass: '0' };
+
+const POWERVAULT_DEFAULTS = {
+ name: '',
+ ip: [''],
+ port: 3260,
+ iscsi_initiator: '',
+ volume_id: '',
+ mount_point: '',
+ fs_type: 'xfs',
+ functional_group_prefix: [''],
+ node_key: '',
+ node_mount_point: [],
+ permissions: { owner: 'root', group: 'root', mode: '0755' }
+};
+
+const SWAP_DEFAULTS = { name: '', filename: '', size: 'auto', maxsize: '', functional_group_prefix: [''] };
+
+export const StorageConfigStep = () => {
+ const wizardData = useConfigStore((s) => s.wizardData);
+ const updateWizardFields = useConfigStore((s) => s.updateWizardFields);
+ const setStepValid = useConfigStore((s) => s.setStepValid);
+ const validationErrors = useConfigStore((s) => s.validationErrors);
+ const [activeTab, setActiveTab] = useState(typeof wizardData._ui_storageActiveTab === 'string' ? wizardData._ui_storageActiveTab : 'mounts');
+ const [showMounts, setShowMounts] = useState(typeof wizardData._ui_showMounts === 'boolean' ? wizardData._ui_showMounts : false);
+ const [showMountParams, setShowMountParams] = useState(typeof wizardData._ui_showMountParams === 'boolean' ? wizardData._ui_showMountParams : false);
+ const [showPowerVault, setShowPowerVault] = useState(typeof wizardData._ui_showPowerVault === 'boolean' ? wizardData._ui_showPowerVault : false);
+ const [showSwap, setShowSwap] = useState(typeof wizardData._ui_showSwap === 'boolean' ? wizardData._ui_showSwap : false);
+
+ const getArrayDefault = (value: any, enabled: boolean, defaultEntry: any) => {
+ if (!enabled) return [];
+ if (Array.isArray(value) && value.length > 0) return value;
+ return [defaultEntry];
+ };
+
+ const storageDefaultValues = {
+ mounts: getArrayDefault(wizardData.mounts, true, MOUNT_DEFAULTS),
+ mount_params: showMountParams ? (wizardData.mount_params as any) || MOUNT_PARAMS_DEFAULTS : {},
+ _mount_params_entries: getArrayDefault(wizardData._mount_params_entries, true, MOUNT_PARAMS_ENTRY_DEFAULTS),
+ powervault_config: getArrayDefault(wizardData.powervault_config, true, POWERVAULT_DEFAULTS),
+ swap: getArrayDefault(wizardData.swap, true, SWAP_DEFAULTS),
+ s3_configurations: (wizardData.s3_configurations as any) || S3_DEFAULTS,
+ _ui_showMounts: showMounts,
+ _ui_showMountParams: showMountParams,
+ _ui_showPowerVault: showPowerVault,
+ _ui_showSwap: showSwap,
+ };
+
+ const {
+ register,
+ formState: { errors },
+ control,
+ watch,
+ setValue,
+ getValues,
+ clearErrors,
+ } = useForm
+
+
+ {providerError && {providerError.message}}
+
+
+
+
+
+
+ + Required for PowerScale. Leave empty for MinIO (auto-configured). +
+ {endpointUrlError && {endpointUrlError.message}} +
+ {storageError &&
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/SwapTab.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/SwapTab.tsx
new file mode 100644
index 0000000000..00a9a14733
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/storage/SwapTab.tsx
@@ -0,0 +1,153 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import type { UseFormRegister, Control } from 'react-hook-form';
+import { useFieldArray, useWatch } from 'react-hook-form';
+import Button from '../../../../components/Button';
+import { StorageConfigFormData } from '../../schemas/storageConfig';
+import type { FormFieldError } from '../../hooks/useFormErrors';
+
+interface SwapTabProps {
+ register: UseFormRegister{storageError.message}
}
+
+
+
+
+
+ {
+ onToggle(e.target.checked);
+ if (!e.target.checked) {
+ onClear();
+ }
+ }}
+ />
+
+
+
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/summary/SummaryAndGenerateStep.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/summary/SummaryAndGenerateStep.tsx
new file mode 100644
index 0000000000..8e4f4bd18e
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/summary/SummaryAndGenerateStep.tsx
@@ -0,0 +1,403 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useState, useEffect } from 'react';
+import { useConfigStore } from '../../configStore';
+import { useGenerateAll, useJobStatus } from '../../../../utils/hooks/useConfig';
+import { API_BASE_URL } from '../../../../utils/api';
+import { showAlert } from '../../../toast/toastStore';
+import { transformSlurmClusters } from '../../utils/transformSlurmCluster';
+import { validateL2Configuration } from '../../utils/l2Validation';
+
+export const SummaryAndGenerateStep = () => {
+ const {
+ wizardData,
+ clusterType,
+ enableCloudInit,
+ enableBuildStream,
+ enableGitlab,
+ enableTelemetry,
+ enableHa,
+ setValidationErrors,
+ clearValidationErrors
+ } = useConfigStore();
+ const [isGenerating, setIsGenerating] = useState(false);
+ const [generationProgress, setGenerationProgress] = useState(0);
+ const [generationComplete, setGenerationComplete] = useState(false);
+ const [jobId, setJobId] = useState
+
+ + Configure swap files for nodes. Size can be "auto" (uses maxsize) or a specific value (e.g., "2G"). +
+ + {fields.map((field, index) => { + const nameError = getError(`swap.${index}.name`); + const filenameError = getError(`swap.${index}.filename`); + const sizeError = getError(`swap.${index}.size`); + const maxsizeError = getError(`swap.${index}.maxsize`); + const functionalGroupPrefixError = getError(`swap.${index}.functional_group_prefix`); + + return ( +
+
+ );
+ })}
+
+
+
+
+
+
+
+ {nameError && {nameError.message}}
+
+
+
+
+ {filenameError && {filenameError.message}}
+
+
+
+
+ {sizeError && {sizeError.message}}
+
+
+
+ {fields.length > 1 && (
+
+ )}
+
+
+
+
+ Required when size is "auto"
+ {maxsizeError && {maxsizeError.message}} +
+
+
+
+ Comma-separated values
+ {functionalGroupPrefixError && {functionalGroupPrefixError.message}} +
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/telemetry/BridgesTab.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/telemetry/BridgesTab.tsx
new file mode 100644
index 0000000000..94c77d7ca2
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/telemetry/BridgesTab.tsx
@@ -0,0 +1,398 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { UseFormRegister, FieldErrors } from 'react-hook-form';
+import { TelemetryConfigStorageFormData } from '../../schemas/telemetryConfigStorage';
+import { useFormErrors } from '../../hooks/useFormErrors';
+import type { ValidationError } from '../../utils/l2Validation';
+
+interface BridgesTabProps {
+ register: UseFormRegister
+
+
+ {validationErrorData && (
+ Configuration Summary
+
+
+
+ PXE Functional Groups: {hasMeaningfulData(wizardData.pxe_mapping_data) ? `${Array.isArray(wizardData.pxe_mapping_data) ? (wizardData.pxe_mapping_data as any[]).length : 0} row(s)` : 'Not uploaded'}
+
+
+
+ Network Configuration: {networkCount > 0 ? 'Network configured' : 'Not configured'}
+
+
+
+ Omnia Config:
+
+
+ {enableCloudInit && (
+
+
+ Slurm Cluster: {hasMeaningfulData(wizardData.slurm_cluster) ? `${Array.isArray(wizardData.slurm_cluster) ? (wizardData.slurm_cluster as any[]).length : 0} cluster(s)` : 'Not configured'}
+ Service K8s Cluster: {hasMeaningfulData(wizardData.service_k8s_cluster) ? `${Array.isArray(wizardData.service_k8s_cluster) ? (wizardData.service_k8s_cluster as any[]).length : 0} cluster(s)` : 'Not configured'}
+
+ Cloud-Init Config: {hasMeaningfulData(wizardData.cloud_init_common) || hasMeaningfulData(wizardData.cloud_init_groups) ? 'Configured' : 'Not configured'}
+
+ )}
+
+ {(clusterType === 'k8s' || clusterType === 'both') && enableTelemetry && (
+
+ Telemetry Config:
+ {(() => {
+ const sources = (wizardData.telemetry_sources as any) || {};
+ const configuredSources = [];
+ if (sources.idrac?.metrics_enabled) configuredSources.push('iDRAC');
+ if (sources.ldms?.metrics_enabled) configuredSources.push('LDMS');
+ if (sources.dcgm?.metrics_enabled) configuredSources.push('DCGM');
+ if (sources.powerscale?.metrics_enabled || sources.powerscale?.logs_enabled) configuredSources.push('PowerScale');
+ if (sources.ufm?.metrics_enabled || sources.ufm?.logs_enabled) configuredSources.push('UFM');
+ if (sources.vast?.metrics_enabled || sources.vast?.logs_enabled) configuredSources.push('VAST');
+ if (sources.ome?.metrics_enabled || sources.ome?.logs_enabled) configuredSources.push('OME');
+ return configuredSources.length > 0 ? configuredSources.join(', ') : 'Not configured';
+ })()}
+
+ )}
+
+ {enableBuildStream && (
+
+ Build Stream: {hasMeaningfulData(wizardData.enable_build_stream) ? 'Enabled' : 'Not enabled'}
+
+ )}
+
+ {enableGitlab && (
+
+ GitLab Config: {hasMeaningfulData(wizardData.gitlab_host) ? 'Configured' : 'Not configured'}
+
+ )}
+
+ {enableHa && (
+
+ High Availability: {hasMeaningfulData(wizardData.service_k8s_cluster_ha) ? `${(wizardData.service_k8s_cluster_ha as any[]).length} HA cluster(s)` : 'Not configured'}
+
+ )}
+
+ {(clusterType === 'k8s' || clusterType === 'both') && enableTelemetry && (
+
+ Telemetry Storage: {hasMeaningfulData(wizardData.telemetry_sinks) ? 'Configured' : 'Not configured'}
+
+ )}
+
+
+ Storage Config: {hasMeaningfulData(wizardData.mounts) || hasMeaningfulData(wizardData.mount_params) || hasMeaningfulData(wizardData.powervault_config) || hasMeaningfulData(wizardData.swap) || hasMeaningfulData(wizardData.s3_configurations) ? 'Configured' : 'Not configured'}
+
+
+
+ Security Config: Enabled
+
+
+
+ )}
+
+ {isGenerating && (
+
+
+ Generation Failed
+ +
+
+ Please fix the following validation errors before generating configuration files:
+ {Object.entries(validationErrorData).map(([step, msgs]) => ( +
+
+ ))}
+ {step}
+-
+ {msgs.map((msg: string, idx: number) => (
+
- {msg} + ))} +
+
+ )}
+
+ {generationComplete && (
+ Generating Configuration Files...
+
+
+
+
+
+ + {generationProgress}% Complete +
+
+
+ )}
+
+ {!generationComplete && !isGenerating && (
+ Generation Complete!
++ All configuration files have been generated successfully. +
+ {generationResult && ( +
+
+ )}
+
+ Configuration Files: {generationResult.input_dir || 'N/A'}
+
+
+
+
+
+
+ )}
+ Ready to Generate
++ Click the Generate button below to generate all deployment configuration files based on your selections. + This will create all necessary YAML configuration files for your OMNIA deployment. + Note: Catalog is managed separately through the Catalog Editor. +
+
+
+ setOutputDir(e.target.value)}
+ className="form-input"
+ placeholder="Leave empty to use default server directory"
+ />
+
+ + Server-side directory where generated files will be saved +
+
+
+
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/telemetry/DcgmTab.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/telemetry/DcgmTab.tsx
new file mode 100644
index 0000000000..1dfca6570b
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/telemetry/DcgmTab.tsx
@@ -0,0 +1,30 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+interface DcgmTabProps {
+}
+
+export const DcgmTab = ({}: DcgmTabProps) => {
+ return (
+
+
+ {!needsVectorLdms && !(needsVectorOmeMetrics || needsVectorOmeLogs) && (
+
+
+ Bridges configuration is not needed. Enable LDMS or OME with Kafka collection target to configure bridges.
+ )} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {omeIdentifierError && {omeIdentifierError.message}}
+
+
+
+
+
+
+
+
+
+
+
+ Vector-LDMS Resources
+
+
+
+
+
+ {ldmsReplicasError && {ldmsReplicasError.message}}
+
+
+
+
+ {ldmsCpuReqError && {ldmsCpuReqError.message}}
+
+
+
+
+ {ldmsMemReqError && {ldmsMemReqError.message}}
+
+
+
+
+ {ldmsCpuLimError && {ldmsCpuLimError.message}}
+
+
+
+
+ {ldmsMemLimError && {ldmsMemLimError.message}}
+
+
+
+
+ Vector-OME Resources
+
+
+
+
+
+ {omeReplicasError && {omeReplicasError.message}}
+
+
+
+
+ {omeCpuReqError && {omeCpuReqError.message}}
+
+
+
+
+ {omeMemReqError && {omeMemReqError.message}}
+
+
+
+
+ {omeCpuLimError && {omeCpuLimError.message}}
+
+
+
+
+ {omeMemLimError && {omeMemLimError.message}}
+
+
+
+
+ VMAgent-Vector Resources
+
+
+
+
+
+ {vmagentReplicasError && {vmagentReplicasError.message}}
+
+
+
+
+ {vmagentPvcSizeError && {vmagentPvcSizeError.message}}
+
+
+
+
+ {vmagentCpuReqError && {vmagentCpuReqError.message}}
+
+
+
+
+ {vmagentMemReqError && {vmagentMemReqError.message}}
+
+
+
+
+ {vmagentCpuLimError && {vmagentCpuLimError.message}}
+
+
+
+
+ {vmagentMemLimError && {vmagentMemLimError.message}}
+
+
+
+ VLAgent-Vector Resources
+
+
+
+
+
+ {vlagentReplicasError && {vlagentReplicasError.message}}
+
+
+
+
+ {vlagentPvcSizeError && {vlagentPvcSizeError.message}}
+
+
+
+
+ {vlagentCpuReqError && {vlagentCpuReqError.message}}
+
+
+
+
+ {vlagentMemReqError && {vlagentMemReqError.message}}
+
+
+
+
+ {vlagentCpuLimError && {vlagentCpuLimError.message}}
+
+
+
+
+ {vlagentMemLimError && {vlagentMemLimError.message}}
+
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/telemetry/IdracTab.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/telemetry/IdracTab.tsx
new file mode 100644
index 0000000000..be4f8a6ac4
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/telemetry/IdracTab.tsx
@@ -0,0 +1,186 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Controller, UseFormRegister, Control, FieldErrors } from 'react-hook-form';
+import { TelemetryConfigStorageFormData } from '../../schemas/telemetryConfigStorage';
+import { useFormErrors } from '../../hooks/useFormErrors';
+import type { FormFieldError } from '../../hooks/useFormErrors';
+import type { ValidationError } from '../../utils/l2Validation';
+
+interface IdracTabProps {
+ register: UseFormRegister
+
+
+
+
+
+
+ DCGM is enabled. Additional configuration fields will appear here as needed.
+
+ {fields.map(({ label, path, placeholder }) => {
+ const fullPath = `${basePath}.resources.${path}` as any;
+ const error = getError(fullPath);
+ return (
+
+ );
+};
+
+export const IdracTab = ({ register, control, errors, enabled, needsKafka, needsVictoriaMetrics, validationErrors }: IdracTabProps) => {
+ const getError = useFormErrors(errors, validationErrors);
+ const mysqlStorageError = getError('idrac_telemetry_configurations.mysqldb_storage');
+
+ return (
+
+
+
+ {error && {error.message}}
+
+ );
+ })}
+
+
+ );
+};
diff --git a/src/utils/gui/frontend/src/features/configuration-wizard/steps/telemetry/LdmsTab.tsx b/src/utils/gui/frontend/src/features/configuration-wizard/steps/telemetry/LdmsTab.tsx
new file mode 100644
index 0000000000..0a8a326994
--- /dev/null
+++ b/src/utils/gui/frontend/src/features/configuration-wizard/steps/telemetry/LdmsTab.tsx
@@ -0,0 +1,168 @@
+// Copyright 2026 Dell Inc. or its subsidiaries. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useFieldArray, Controller, UseFormRegister, Control, FieldErrors } from 'react-hook-form';
+import Button from '../../../../components/Button';
+import { TelemetryConfigStorageFormData } from '../../schemas/telemetryConfigStorage';
+import { useFormErrors } from '../../hooks/useFormErrors';
+import type { ValidationError } from '../../utils/l2Validation';
+
+interface LdmsTabProps {
+ register: UseFormRegister
+
+
+
+
+
+
+
+
+
+ (
+ <>
+ {['victoria_metrics', 'kafka'].map((target) => (
+
+
+
+ {
+ const updated = e.target.checked
+ ? [...(field.value || []), target]
+ : (field.value || []).filter((v: string) => v !== target);
+ field.onChange(updated);
+ }}
+ />
+
+
+ ))}
+
+ )}
+ />
+
+
+
+
+
+ {mysqlStorageError && {mysqlStorageError.message}}
+
+
+
+
+
+
+
+
+
+
+ MySQL Database Resources
+ActiveMQ Resources
+Receiver Resources
+
+
+
+ Kafka Pump Resources
+
+
+ Victoria Pump Resources
+
+
+
+
+
+
+ (
+ <>
+ {
+ const updated = e.target.checked
+ ? [...(field.value || []), 'kafka']
+ : (field.value || []).filter((v: string) => v !== 'kafka');
+ field.onChange(updated);
+ }}
+ />
+
+
+ )}
+ />
+
+
+
+
+
+