Zakaria/floci-ui
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

adding Alpine to the quick start instances list

Browse Source
This commit is contained in:
Zakaria
2026-10-06 12:06:56 -04:00
parent c86b4554c0
commit 71c2d276b6
9 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/ComputePanel.tsx
+7 -4
View File
@@ -47,9 +47,10 @@ import {
import { createCloudResource } from '@/api/cloudProxyClient'
import type { CloudProvider } from '@/types/cloud'
import type { CloudResource } from '@/types/resource'
import alpineImage from '../../../../OS_img/Alpine_Distro.jpg'
import amazonLinuxImage from '../../../../OS_img/amazon_Linux.png'
import debianImage from '../../../../OS_img/Debian_linux.png'
import redHatImage from '../../../../OS_img/red-hat-logo.png'
import debianImage from '../../../../OS_img/debian.jpg'
import redHatImage from '../../../../OS_img/RedHat.png'
import ubuntuImage from '../../../../OS_img/Ubuntu_Linux.png'
// ─── Props ────────────────────────────────────────────────────────────────────
@@ -786,12 +787,13 @@ type InboundRule = { id: string; protocol: string; portInput: string; cidr: stri
type LaunchStep = 1 | 2 | 3 | 4
type AmiFamily = 'amazon-linux' | 'fedora' | 'ubuntu' | 'red-hat' | 'debian' | 'suse' | 'other'
type AmiFamily = 'alpine' | 'amazon-linux' | 'fedora' | 'ubuntu' | 'red-hat' | 'debian' | 'suse' | 'other'
type AmiClassification = { family: AmiFamily; label: string; mark: string; color: string }
function classifyAmi(ami: Ec2Image): AmiClassification {
const metadata = `${ami.name} ${ami.description ?? ''} ${ami.platform ?? ''}`.toLowerCase()
if (metadata.includes('alpine')) return { family: 'alpine', label: 'Alpine', mark: 'A', color: '#0d597f' }
if (metadata.includes('ubuntu')) return { family: 'ubuntu', label: 'Ubuntu', mark: 'U', color: '#e95420' }
if (metadata.includes('amazon linux') || metadata.includes('amzn')) return { family: 'amazon-linux', label: 'Amazon Linux', mark: 'A', color: '#ff9900' }
if (metadata.includes('fedora')) return { family: 'fedora', label: 'Fedora', mark: 'F', color: '#51a2da' }
@@ -802,12 +804,13 @@ function classifyAmi(ami: Ec2Image): AmiClassification {
}
const QUICK_START_AMIS: Array<{ family: Exclude<AmiFamily, 'other'>; label: string; image: string; preferredImageId?: string }> = [
{ family: 'alpine', label: 'Alpine', image: alpineImage, preferredImageId: 'ami-alpine' },
{ family: 'amazon-linux', label: 'Amazon Linux 2023', image: amazonLinuxImage, preferredImageId: 'ami-0abcdef1234567891' },
{ family: 'fedora', label: 'Fedora', image: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3Crect width="64" height="64" rx="8" fill="%2351a2da"/%3E%3Ctext x="32" y="43" text-anchor="middle" font-family="Arial" font-size="34" font-weight="bold" fill="white"%3EF%3C/text%3E%3C/svg%3E' },
{ family: 'ubuntu', label: 'Ubuntu', image: ubuntuImage },
{ family: 'suse', label: 'openSUSE', image: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3Crect width="64" height="64" rx="8" fill="%2330ba78"/%3E%3Ctext x="32" y="43" text-anchor="middle" font-family="Arial" font-size="30" font-weight="bold" fill="white"%3ES%3C/text%3E%3C/svg%3E' },
{ family: 'red-hat', label: 'Red Hat', image: redHatImage },
{ family: 'debian', label: 'Debian', image: debianImage },
{ family: 'debian', label: 'Debian 13', image: debianImage, preferredImageId: 'ami-debian13' },
]
const SG_PRESETS: Array<{ label: string; protocol: string; portInput: string; cidr: string }> = [
packages/frontend/src/components/Layout.tsx
+2 -2
View File
@@ -107,7 +107,7 @@ function CloudServiceNav({collapsed}: {collapsed: boolean}) {
function CloudServiceNavItem({cloud, service, collapsed}: {cloud: CloudProvider; service: CloudServiceDescriptor; collapsed: boolean}) {
const reasonTitle = service.reason ? `${service.displayName} — ${service.reason}` : service.displayName
const icon = <ServiceIcon cloud={cloud} iconKey={service.iconKey} size={14}/>
const icon = <ServiceIcon cloud={cloud} iconKey={service.iconKey} size={22}/>
if (service.availability === 'available') {
const target = service.route.startsWith('/')
@@ -184,7 +184,7 @@ export function Layout() {
<nav className="nav" aria-label="Console">
<div className="nav-section">
<span className="nav-label">General</span>
<NavItem to={`/console/${activeCloud}`} icon={<LayoutDashboard size={14} aria-hidden="true"/>} label="Console Home" collapsed={collapsed}/>
<NavItem to={`/console/${activeCloud}`} icon={<LayoutDashboard size={18} aria-hidden="true"/>} label="Console Home" collapsed={collapsed}/>
</div>
<CloudServiceNav collapsed={collapsed}/>
</nav>
packages/frontend/src/index.css
+10 -10
View File
@@ -401,12 +401,12 @@ pre,
padding: 8px 0;
}
/* The 14px chrome size is too small once the icon is the only thing naming a
service. CSS overrides lucide's width/height attributes. */
/* The icon-only rail gives service icons more visual weight because they
become the sole service identifier. CSS overrides lucide's dimensions. */
[data-sidebar="collapsed"] .sidebar:not(:has(.nav:focus-within)) .nav-link .service-icon-glyph,
[data-sidebar="collapsed"] .sidebar:not(:has(.nav:focus-within)) .nav-link svg {
width: 18px;
height: 18px;
width: 28px;
height: 28px;
}
/* With labels hidden the divider is the only grouping cue, so it uses the
@@ -2958,17 +2958,17 @@ pre,
.ami-quick-start-grid {
display: grid;
grid-template-columns: repeat(6, minmax(100px, 1fr));
gap: 10px;
grid-template-columns: repeat(7, minmax(80px, 1fr));
gap: 8px;
}
.ami-quick-start-tile {
display: grid;
grid-template-rows: 42px auto auto;
justify-items: center;
gap: 5px;
gap: 3px;
min-width: 0;
padding: 12px 8px 10px;
padding: 5px 4px;
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text-1);
@@ -3005,7 +3005,7 @@ pre,
.ami-quick-start-tile span {
overflow: hidden;
max-width: 100%;
font-size: 12px;
font-size: 11px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
@@ -3013,7 +3013,7 @@ pre,
.ami-quick-start-tile small {
color: var(--text-3);
font-size: 10px;
font-size: 9px;
}
.ami-browser-toggle {