diff --git a/docs/PodsAndPodTemplates.md b/docs/PodsAndPodTemplates.md new file mode 100644 index 0000000..8b0fc99 --- /dev/null +++ b/docs/PodsAndPodTemplates.md @@ -0,0 +1,73 @@ +# Pods and Pod Templates + +## Terminology +List of common terms that will be used throughout this guide. +- **Pod**: Virtual machine environment that is cloned and users have hands on access to. +- **Pod Template**: Baseline configuration for a pod stored both on Proxmox and Kamino. +- **Template Pool**: Where pod templates are stored and configured on Proxmox. +- **Virtual Machine Template**: Pre-installed virtual machine from an ISO image that is then turned into a template to be easily cloned and edited. + +## Workflow +These are the steps to create, configure, and publish your own Pod Template in Kamino. +1. **Create Template Pool**: Use the Create Template wizard to create your new template pool in Proxmox. +2. **Configure Template Pool**: Make any configurations or additions to the virtual machines in the template pool. +3. **Publish Pod Template**: Publish a new Pod Template in Kamino by using the Publish Template wizard. +4. **Clone Pod Template**: Clone the Pod Template to create a new Pod. + +
+ +### **1. Create Template Pool** +This is where you will follow the steps outlined in the **Create Template** wizard to create your new template pool in Proxmox. + +#### 1.1 Template Name +Define a unique name for your template pool. EX: *CIS4670_01_Lab1* + +#### 1.2 Router Option +Select whether to automatically create and configure a router for your template pool. +- If **Yes**, all of the VMs will be connected to the router with 1:1 NATing. +- If **No**, you will need to manually configure networking for each VM. + +#### 1.3 Select VMs +Select virtual machines from a list of pre-installed virtual machine templates in Proxmox to be automatically added to your template pool. + +#### 1.4 Review +Review your template pool configuration and make any necessary changes including naming the virtual machines. + +
+ +### **2. Configure Template Pool** +Make any configurations or additions to the virtual machines in the template pool in Proxmox. + +#### 2.1 Select Template Pool +Select the template pool you created in the previous step. + +#### 2.2 Configure VMs +Configure or create virtual machines in the template pool as needed. + +
+ +### **3. Publish Pod Template** +Publish a new Pod Template in Kamino by using the Publish Template wizard. + +#### 3.1 Select Template Pool +Select the template pool from the dropdown menu that you created in the first step. + +#### 3.2 Configure Details +Add a description, list of authors, number of VMs, and an image to your template. Note: The description is the only required field. + +#### 3.3 Review +Review your personalization settings with a preview of the template in the Kamino interface in addition to determining the visibility of the template. + +- **Visible**: Template is able to be cloned by any user using Kamino. +- **Hidden**: Template is only visible and able to be cloned by Administrators. + +
+ +### **4. Clone Pod Template** +Templates can be cloned in two main ways. + +#### 4.1 User Clone +General users will login to Kamino and see all visible templates. They can clone these templates to create their own Pod to interact with. + +#### 4.2 Administrator Clone +Administrators can clone templates from the Kamino interface. They can clone any amount of pods on behalf of other users or groups. diff --git a/my-app/app/admin/admin-sidebar.tsx b/my-app/app/admin/admin-sidebar.tsx index 895e869..6c7c4cb 100644 --- a/my-app/app/admin/admin-sidebar.tsx +++ b/my-app/app/admin/admin-sidebar.tsx @@ -1,9 +1,9 @@ -"use client" +"use client"; -import * as React from "react" -import Image from "next/image" -import { NavUser } from "@/components/nav-user" -import { useAuth } from "@/contexts/auth-context" +import * as React from "react"; +import Image from "next/image"; +import { NavUser } from "@/components/nav-user"; +import { useAuth } from "@/contexts/auth-context"; import { Sidebar, SidebarContent, @@ -15,9 +15,17 @@ import { SidebarMenuButton, SidebarMenuItem, SidebarFooter, -} from "@/components/ui/sidebar" -import { Copy, CopyPlusIcon, Edit, LayoutDashboard, Rocket, Server, User } from "lucide-react" -import { IconUsersGroup } from "@tabler/icons-react" +} from "@/components/ui/sidebar"; +import { + Copy, + CopyPlusIcon, + Edit, + LayoutDashboard, + Rocket, + Server, + User, +} from "lucide-react"; +import { IconUsersGroup } from "@tabler/icons-react"; const data = { navMain: [ @@ -29,8 +37,8 @@ const data = { title: "User Panel", url: "/", isActive: false, - icon: LayoutDashboard - } + icon: LayoutDashboard, + }, ], }, { @@ -41,19 +49,19 @@ const data = { title: "Users", url: "/admin/users", isActive: false, - icon: User + icon: User, }, { title: "Groups", url: "/admin/groups", isActive: false, - icon: IconUsersGroup + icon: IconUsersGroup, }, { title: "Deployed Pods", url: "/admin/pods/deployed", isActive: false, - icon: Rocket + icon: Rocket, }, // { // title: "Pod Templates", @@ -65,8 +73,8 @@ const data = { title: "Virtual Machines", url: "/admin/vms", isActive: false, - icon: Server - } + icon: Server, + }, ], }, { @@ -77,20 +85,20 @@ const data = { title: "All Templates", url: "/admin/pods/templates", isActive: false, - icon: Copy + icon: Copy, }, { - title: "Publish Templates", + title: "Publish Template", url: "/admin/pods/templates/publish", isActive: false, - icon: Edit + icon: Edit, }, { - title: "Create Templates", + title: "Create Template", url: "/admin/pods/templates/create", isActive: false, - icon: CopyPlusIcon - } + icon: CopyPlusIcon, + }, ], }, { @@ -98,24 +106,18 @@ const data = { url: "#", items: [ { - title: "Templates", - url: "/admin/guides/templates", + title: "Pods & Pod Templates", + url: "https://github.com/cpp-cyber/kamino-frontend/blob/main/docs/PodsAndPodTemplates.md", isActive: false, - icon: Copy - }, - { - title: "Users & Groups", - url: "/admin/guides/users", - isActive: false, - icon: User + icon: Copy, }, ], - } + }, ], -} +}; export function AppSidebar({ ...props }: React.ComponentProps) { - const { authState } = useAuth() + const { authState } = useAuth(); return ( @@ -124,10 +126,18 @@ export function AppSidebar({ ...props }: React.ComponentProps) { - Logo + Logo
Kamino - Admin Dashboard + + Admin Dashboard +
@@ -137,7 +147,9 @@ export function AppSidebar({ ...props }: React.ComponentProps) { {data.navMain.map((item) => ( - {item.title} + + {item.title} + {item.items?.map((item) => ( @@ -156,8 +168,12 @@ export function AppSidebar({ ...props }: React.ComponentProps) { ))} - {authState.username && } + {authState.username && ( + + )}
- ) + ); } diff --git a/my-app/app/admin/guides/snapshots/page.tsx b/my-app/app/admin/guides/snapshots/page.tsx deleted file mode 100644 index c7e1109..0000000 --- a/my-app/app/admin/guides/snapshots/page.tsx +++ /dev/null @@ -1,29 +0,0 @@ -"use client" - -import { AuthGuard } from "@/components/auth-guard" -import { PageLayout } from "@/app/admin/admin-page-layout" - -const breadcrumbs = [{ label: "Snapshots Guide", href: "/admin/guides/snapshots" }] - -export default function AdminSnapshotsGuide() { - - return ( - - -
-
-
-

Snapshots

-

- Placeholder -

-
- {/* content */} -
-
-
-
- ) -} diff --git a/my-app/app/admin/guides/templates/page.tsx b/my-app/app/admin/guides/templates/page.tsx deleted file mode 100644 index 1411d1d..0000000 --- a/my-app/app/admin/guides/templates/page.tsx +++ /dev/null @@ -1,760 +0,0 @@ -"use client" - -import { AuthGuard } from "@/components/auth-guard" -import { PageLayout } from "@/app/admin/admin-page-layout" -import { Card, CardContent, CardHeader } from "@/components/ui/card" -import { Alert, AlertDescription } from "@/components/ui/alert" -import { - Server, - Settings, - Info, - TriangleAlert, - List, - Link2, - PenBox, - LucideMousePointerClick, - FileText, - User, - Boxes, - ImageIcon, - Eye, - Tag, - Network, - Search, - Upload, -} from "lucide-react" -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" -import { MarkdownRenderer } from "@/components/ui/markdown-renderer" -import Link from "next/link" -import Image from "next/image" -import { useState, useEffect } from "react" - -const breadcrumbs = [{ label: "Template Creation & Management Guide", href: "/admin/guides/templates" }] - -// Table of Contents structure -const tableOfContents = [ - { id: "step-1", title: "Step 1: Create Template", level: 1 }, - { id: "pool-creation", title: "1.1 Create Template Pool", level: 2 }, - { id: "vnet-creation", title: "1.2 Create Template Virtual Network (VNet)", level: 2 }, - { id: "vm-creation", title: "1.3 Create and Configure Virtual Machines", level: 2 }, - { id: "vm-preparation", title: "1.4 Prepare VMs for Template Conversion", level: 2 }, - { id: "step-2", title: "Step 2: Publish Template", level: 1 }, - { id: "publishing-wizard", title: "2.1 Navigate to Publishing Wizard", level: 2 }, - { id: "configure-details", title: "2.2 Configure Template Details", level: 2 }, - { id: "select-template", title: "2.2.1 Select Template", level: 3 }, - { id: "description", title: "2.2.2 Description", level: 3 }, - { id: "authors", title: "2.2.3 Authors", level: 3 }, - { id: "vm-count", title: "2.2.4 VM Count", level: 3 }, - { id: "image", title: "2.2.5 Image", level: 3 }, - { id: "preview-template", title: "2.2.6 Preview Template", level: 3 }, - { id: "visibility", title: "2.2.7 Visibility", level: 3 }, - { id: "step-3", title: "Step 3: Manage Template", level: 1 } -] - -// Table of Contents Component -function TableOfContents() { - const [maxHeight, setMaxHeight] = useState('calc(100vh - 2rem)') - - useEffect(() => { - const updateHeight = () => { - setMaxHeight(`${window.innerHeight - 32}px`) // 32px for top/bottom padding - } - - updateHeight() - window.addEventListener('resize', updateHeight) - - return () => { - window.removeEventListener('resize', updateHeight) - } - }, []) - - const scrollToSection = (id: string) => { - const element = document.getElementById(id) - if (element) { - const offset = 80 // Account for any fixed headers - const elementPosition = element.getBoundingClientRect().top - const offsetPosition = elementPosition + window.pageYOffset - offset - - window.scrollTo({ - top: offsetPosition, - behavior: 'smooth' - }) - } - } - - return ( -
- - -
- - Table of Contents -
-
- - - -
-
- ) -} - -const markdownExampleText = `## Headers - -# This is a Heading h1 -## This is a Heading h2 -### This is a Heading h3 - -## Emphasis - -*This text will be italic* -_This will also be italic_ - -**This text will be bold** -__This will also be bold__ - -_You **can** combine them_ - -## Lists - -### Unordered - -* Item 1 -* Item 2 -* Item 2a -* Item 2b - * Item 3a - * Item 3b - -### Ordered - -1. Item 1 -2. Item 2 -3. Item 3 - 1. Item 3a - 2. Item 3b - -## Images - -![This is an alt text.](/2-Linux-VM-Via-ISO.png) - -## Links - -Wow look at [Cheese dot com](https://cheese.com). - -## Blockquotes - -> Markdown is a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber with Aaron Swartz. -> ->> Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor. - -## Tables - -| Left columns | Right columns | -| ------------- |:-------------:| -| left foo | right foo | -| left bar | right bar | -| left baz | right baz | - -## Blocks of code - -${'```'}typescript -// 3. Wait for running VMs to be stopped -// If a VM cannot be verified as stopped, this function will error out -for _, vm := range runningVMs { - if err := cs.ProxmoxService.WaitForStopped(vm.NodeName, vm.VmId); err != nil { - log.Printf("Error waiting for VM %d to stop: %v", vm.VmId, err) - return fmt.Errorf("failed to confirm VM %d is stopped: %w", vm.VmId, err) - } -} -${'```'} - -## Inline code - -This code is ${'`'}inline${'`'}.` - -export default function AdminTemplatesGuide() { - - return ( - - - -
-
-
-
-

- Template Creation & Management -

-

- Complete guide for creating, publishing, and managing VM templates in Kamino through Proxmox integration -

-
- - {/* Template Workflow Infographic */} - - -
-
- -
Proxmox
-
Create Template
-
-
-
-
-
- -
Admin Panel
-
Publish Template
-
-
-
-
-
- -
Admin Panel
-
Manage Template
-
-
-
-
- - {/* Creating Templates Section */} -
-
-
-

- Step 1: Create Template -

- -
- {/* Pool Creation */} -
-

- - 1.1 Create Template Pool -

-

- Pools in Proxmox help organize and manage related VMs. All template VMs must be placed in a designated pool with the correct naming convention. -

-
    -
  1. Navigate to Datacenter → Pools in the Proxmox web interface
  2. -
  3. Click “Create” to add a new pool
  4. -
  5. Use the naming convention: kamino_template_[template_name]
  6. -
  7. Example: kamino_template_test_linux → Template name will be “Test Linux”
  8. -
- -
- Proxmox Create Pool - Shows the pool creation dialog with naming convention -
-
- - {/* VNet Creation */} -
-

- - 1.2 Create Template Virtual Network (VNet) -

-

- Each template requires its own isolated network to prevent conflicts and ensure proper network segmentation. -

-
    -
  1. Navigate to Datacenter → SDN → VNets
  2. -
  3. Click “Create” to add a new virtual network
  4. -
  5. Next, Name the VNet. Keep in mind the name has a limit of just 8 characters
  6. -
  7. Choose a unique VLAN tag above 1000 (e.g., 1001, 1002, etc.)
  8. -
  9. Important: After creating the VNet, go to Datacenter → SDN and click “Apply” to activate the changes
  10. -
- - - -
- Warning - - Ensure your VLAN tag is unique across all templates and above 1000 to avoid conflicts with system networks. - -
-
- -
-
- Proxmox Create VNet - Main VNet creation interface -

VNet creation interface in Proxmox SDN

-
-
-
- Proxmox VNet Dialog - Configuration options for the virtual network -

VNet configuration dialog

-
-
- Proxmox Apply SDN Changes - Applying network configuration changes -

Applying SDN configuration changes

-
-
-
-
- - {/* VM Creation */} -
-

- - 1.3 Create and Configure Virtual Machines -

-

- Set up all VMs within the created pool with your desired operating systems and configurations. Follow the specific steps below for different OS types. -

- - {/* ISO Upload */} -
-
Uploading ISO Files
- - - -
- Info - - Prior to uploading an ISO, check if your OS is not already a template in the Templates pool in Proxmox these templates should have VmIDs in the range of the 4000s. To use these, simply clone the desired template into your pool. - -
-
- -

- Upload the necessary ISO files to your mufasa-proxmox. -

-
- Proxmox Uploading ISO - Process for uploading ISO files to Proxmox storage -

Uploading ISO files to Proxmox storage

-
-
- - {/* Linux VM Configuration */} -
-
Linux VM Configuration
-

- Follow these steps to create a Linux-based virtual machine. Ensure you select the appropriate settings for optimal performance. -

-
-
- Linux VM Creation - Initial VM creation from ISO -

Creating a new Linux VM from ISO

-
-
-
- Linux VM General Settings - Basic VM configuration options -

General VM settings and pool assignment

-
-
- Linux VM OS Settings - Operating system configuration -

Operating system selection and configuration

-
-
-
-
- Linux VM Disk Settings - Storage configuration for the VM -

Disk configuration and storage allocation

-
-
- Linux VM Network Settings - Network configuration using the created VNet -

Network configuration with the template VNet

-
-
-
-
- - {/* Windows VM Configuration */} -
-
Windows VM Configuration
-

- Windows VMs require specific drivers and configurations for optimal performance in a virtualized environment. Pay attention to driver selection and hardware compatibility. -

-
-
-
- Windows VM OS Selection - Choosing Windows operating system type -

Windows OS type selection

-
-
- Windows VM Driver Loading - Loading VirtIO drivers for better performance -

Loading VirtIO drivers during installation

-
-
- Windows VM Architecture - Selecting appropriate architecture -

Architecture and system type selection

-
-
- Windows VM VirtIO Configuration - Final VirtIO driver configuration -

VirtIO driver configuration for optimal performance

-
-
-
-
-
- - {/* VM Preparation */} -
-

- - 1.4 Prepare VMs for Template Conversion -

-

- Before converting VMs to templates, proper cleanup and optimization ensures better performance and smaller template sizes. -

-
    -
  1. Complete Shutdown: Ensure all VMs are completely shut down before proceeding
  2. -
-
-
-
- -
-

- Step 2: Publish Template -

- -

- Once your VMs are properly configured and prepared, use the Kamino admin panel to convert them into deployable templates. This process will convert the VMs to Proxmox templates and make them available for users to deploy. -

- - - -
- Warning - - Publishing a template will automatically: -
    -
  • Remove all snapshots from VMs in the Proxmox pool
  • -
  • Convert VMs to read-only VM templates in Proxmox
  • -
  • Make future VM modifications extremely difficult
  • -
- Ensure all configurations are finalized before proceeding. -
-
-
- -
-
-

- - 2.1 Navigate to Publishing Wizard -

- -

- In the Kamino admin panel, go to{' '} - - Publish Templates - -

-
- -
-

- - 2.2 Configure Template Details -

- -
-
-

- - 2.2.1 Select Template -

- -
-

- Choose the Proxmox pool containing the VMs you wish to publish as a template from the dropdown selection. The template name will be auto-generated from the pool name. -

- Select Template Pod -
-
- -
-

- - 2.2.2 Description -

- -

- Provide a detailed description or steps to complete this template. This field supports markdown formatting. -

-
- - - - - - Plaintext - Rendered Markdown - - - - -
-
-                                      {markdownExampleText}
-                                    
-
-
- -
- -
-
-
-
-
-
- -
-
-

- - 2.2.3 Authors -

- -

- Specify the authors or creators of the template (max 255 characters). For example if you are part of a club you could put the club name with your name as the author. EX (SWIFT, Maxwell Caron) -

-
- -
-

- - 2.2.4 VM Count -

- -

- Specify how many VMs the template contains (1-12) -

-
- -
-

- - 2.2.5 Image -

- -
-

- Optionally upload an image to represent the template visually (max 10MB). You will be able to crop your image upon upload. -

-
- Template Publish Image -

Crop pod template image

-
-
-
- -
-

- - 2.2.6 Preview Template -

- -
-

- View an exact preview of what your template will look like to users once published. You will be able to view both the small card view and the detailed view. -

-
-
- Template Publish Small Preview -

Small pod template preview

-
-
- Template Publish Large Preview -

Large popup pod template preview

-
-
-
-
- -
-

- - 2.2.7 Visibility -

- -

- The final step is to choose whether the template should be publicly visible to all users or kept private when published. This can be changed later in the template management section. -

-
-
-
-
-
- -
-

- Step 3: Manage Template -

- - - -
- Info - - Deleting a template will not delete the underlying VMs in Proxmox. You must manually delete the VMs from Proxmox if you wish to remove them. - -
-
- -
    -
  1. Admin Panel: In the Kamino admin panel, navigate to the All Templates section
  2. -
  3. Manage: Click on the actions dropdown menu on the far right of the table row. You can edit all of the template details, quickly toggle the visibility of the template, or delete the template.
  4. -
-
- -
-
-
-
-
-
-
- ) -} diff --git a/my-app/app/admin/guides/users/page.tsx b/my-app/app/admin/guides/users/page.tsx deleted file mode 100644 index d44698f..0000000 --- a/my-app/app/admin/guides/users/page.tsx +++ /dev/null @@ -1,215 +0,0 @@ -"use client" - -import { AuthGuard } from "@/components/auth-guard" -import { PageLayout } from "@/app/admin/admin-page-layout" -import { Card, CardContent } from "@/components/ui/card" -import { Alert, AlertDescription } from "@/components/ui/alert" -import { Settings, Database, Server, Info, Plus, Minus } from "lucide-react" -import Link from "next/link" - -const breadcrumbs = [{ label: "Users & Groups Guide", href: "/admin/guides/users" }] - -export default function AdminUsersGuide() { - - return ( - - -
-
-
-
-

- User & Group Management -

-

- Comprehensive guide for managing users and groups through Active Directory with automated Proxmox synchronization -

-
- - {/* System Architecture Infographic */} - - -
-
- -
Admin Panel
-
User Management
-
-
-
-
-
- -
Active Directory
-
LDAP Operations
-
-
-
-
-
- -
Proxmox
-
VM Access Control
-
-
-
-
- - {/* User Management Section */} -
-
-

- User Management -

- -

- Users are created, modified, and removed through the Users Kamino admin panel page. All changes are synchronized with Active Directory and Proxmox to ensure consistent access control. -

-
- - {/* Alert for Usernames and Passwords */} - - -
- Info - -
-

Usernames

-
    -
  • Must be unique across the entire Active Directory domain
  • -
  • Must be between 3-20 characters long
  • -
  • Can include letters and numbers
  • -
-
-
-

Passwords

-
    -
  • Must be between 8-128 characters long
  • -
  • Must include at least one letter and number
  • -
-
-
-
-
- -
-
-

- - Creating Users -

-
    -
  1. - Create New User: Click “Add User” and fill in required details. There are two methods of user creation: -
      -
    • Single: Create a single user with a simple username and password
    • -
    • Bulk: Input a comma and newline separated list of usernames and passwords
    • -
    -
  2. -
-
- -
-

- - Modifying Users -

-
    -
  1. Group Membership: Add or remove the user from groups to change access permissions. Groups that contain “Kamino” or “Admin” cannot be modified
  2. -
-
- -
-

- - Removing Users -

-
    -
  1. Disable Account: Disable the account to prevent access
  2. -
  3. Delete Account: Remove the account from Active Directory and all connected systems
  4. -
-
- -
-
- - {/* Group Management Section */} -
-
-

- Group Management -

- -

- Groups are created, modified, and removed through the Groups Kamino admin panel page. All changes are synchronized with Active Directory and Proxmox to ensure consistent access control. - Admins can use groups if they want to clone a single pod for multiple users to interact with. For example, if a competition were to be held, an admin could create a group for each team, clone a pod for each group, and add users to the appropriate groups instead of making a user for each team. -

-
- - - -
- Info - -
-

Group Names

-
    -
  • Must be unique across the entire Active Directory domain
  • -
  • Must be between 3-63 characters long
  • -
  • Can include letters, numbers, hyphens, and underscores
  • -
  • Groups containing “Kamino” or “Admin” cannot be modified or removed
  • -
-
-
-
-
- -
-
-

- - Creating Groups -

-
    -
  1. - Create New Group: Click “Add Group” and specify the group name. There are three methods of group creation: -
      -
    • Single: Create a single group with a unique name
    • -
    • Bulk: Input a newline separated list of group names
    • -
    • Prefix: Create multiple groups with a common prefix and a numbered suffix
    • -
    -
  2. -
-
- -
-

- - Modifying Groups -

-
    -
  1. Edit Properties: Rename the group
  2. -
-
- -
-

- - Removing Groups -

-
    -
  1. Delete Group: Select the group to be removed and click “Delete”
  2. -
-
- -
-
-
-
-
-
-
- ) -} diff --git a/my-app/app/creator/creator-sidebar.tsx b/my-app/app/creator/creator-sidebar.tsx index df97a9c..e1fb42f 100644 --- a/my-app/app/creator/creator-sidebar.tsx +++ b/my-app/app/creator/creator-sidebar.tsx @@ -1,9 +1,9 @@ -"use client" +"use client"; -import * as React from "react" -import Image from "next/image" -import { NavUser } from "@/components/nav-user" -import { useAuth } from "@/contexts/auth-context" +import * as React from "react"; +import Image from "next/image"; +import { NavUser } from "@/components/nav-user"; +import { useAuth } from "@/contexts/auth-context"; import { Sidebar, SidebarContent, @@ -15,8 +15,8 @@ import { SidebarMenuButton, SidebarMenuItem, SidebarFooter, -} from "@/components/ui/sidebar" -import { Copy, CopyPlusIcon, Edit, LayoutDashboard } from "lucide-react" +} from "@/components/ui/sidebar"; +import { Copy, CopyPlusIcon, Edit, LayoutDashboard } from "lucide-react"; const data = { navMain: [ @@ -28,8 +28,8 @@ const data = { title: "User Panel", url: "/", isActive: false, - icon: LayoutDashboard - } + icon: LayoutDashboard, + }, ], }, { @@ -40,27 +40,41 @@ const data = { title: "All Templates", url: "/creator/templates", isActive: false, - icon: Copy + icon: Copy, }, { - title: "Publish Templates", + title: "Publish Template", url: "/creator/templates/publish", isActive: false, - icon: Edit + icon: Edit, }, { - title: "Create Templates", + title: "Create Template", url: "/creator/templates/create", isActive: false, - icon: CopyPlusIcon - } + icon: CopyPlusIcon, + }, + ], + }, + { + title: "Guides", + url: "#", + items: [ + { + title: "Pods & Pod Templates", + url: "https://github.com/cpp-cyber/kamino-frontend/blob/main/docs/PodsAndPodTemplates.md", + isActive: false, + icon: Copy, + }, ], }, ], -} +}; -export function CreatorSidebar({ ...props }: React.ComponentProps) { - const { authState } = useAuth() +export function CreatorSidebar({ + ...props +}: React.ComponentProps) { + const { authState } = useAuth(); return ( @@ -69,10 +83,18 @@ export function CreatorSidebar({ ...props }: React.ComponentProps - Logo + Logo
Kamino - Creator Dashboard + + Creator Dashboard +
@@ -82,7 +104,9 @@ export function CreatorSidebar({ ...props }: React.ComponentProps {data.navMain.map((item) => ( - {item.title} + + {item.title} + {item.items?.map((item) => ( @@ -101,8 +125,16 @@ export function CreatorSidebar({ ...props }: React.ComponentProps - {authState.username && } + {authState.username && ( + + )}
- ) + ); }