11// src/pages/NewDeploymentPage.tsx
2- import React , { useState } from 'react' ;
2+ import React , { useState , useEffect } from 'react' ;
33import api from '../api/api' ;
44import DashboardLayout from '../components/Layout/DashboardLayout' ;
5- import { useNavigate } from 'react-router-dom' ;
5+ import { useNavigate , useSearchParams } from 'react-router-dom' ;
66import {
77 RocketLaunchIcon ,
88 CubeIcon ,
@@ -19,6 +19,7 @@ import {
1919
2020const NewDeploymentPage : React . FC = ( ) => {
2121 const navigate = useNavigate ( ) ;
22+ const [ searchParams ] = useSearchParams ( ) ;
2223 const [ app_name , setapp_name ] = useState ( '' ) ;
2324 const [ image , setImage ] = useState ( '' ) ;
2425 const [ port , setPort ] = useState ( 80 ) ;
@@ -27,6 +28,20 @@ const NewDeploymentPage: React.FC = () => {
2728 const [ loading , setLoading ] = useState ( false ) ;
2829 const [ error , setError ] = useState < string | null > ( null ) ;
2930 const [ success , setSuccess ] = useState < string | null > ( null ) ;
31+ const [ isHelloWorldDemo , setIsHelloWorldDemo ] = useState ( false ) ;
32+
33+ // Check for Demo Deployment parameter and auto-fill form
34+ useEffect ( ( ) => {
35+ const tryParam = searchParams . get ( 'try' ) ;
36+ if ( tryParam === 'helloworld' ) {
37+ setIsHelloWorldDemo ( true ) ;
38+ setapp_name ( 'demo-deployment' ) ;
39+ setImage ( 'nginxdemos/hello:latest' ) ;
40+ setPort ( 80 ) ;
41+ setReplicas ( 1 ) ;
42+ setEnvVars ( [ { key : '' , value : '' } ] ) ;
43+ }
44+ } , [ searchParams ] ) ;
3045
3146 const handleEnvVarChange = ( index : number , field : 'key' | 'value' , value : string ) => {
3247 const newEnvVars = [ ...envVars ] ;
@@ -69,20 +84,32 @@ const NewDeploymentPage: React.FC = () => {
6984
7085 // Verify we have the deployment ID
7186 if ( response . data && response . data . id ) {
72- setSuccess ( `Deployment '${ response . data . app_name } ) ;
87+ if ( isHelloWorldDemo ) {
88+ setSuccess ( `🎉 Demo deployment created successfully! Your demo app is starting up...` ) ;
89+ } else {
90+ setSuccess ( `Deployment '${ response . data . app_name } ) ;
91+ }
7392
7493 // Wait longer and check deployment status more thoroughly
7594 await new Promise ( resolve => setTimeout ( resolve , 3000 ) ) ;
7695
7796 // Check if deployment and pods are ready before redirecting
7897 const deploymentReady = await checkDeploymentReady ( response . data . id ) ;
7998 if ( deploymentReady ) {
80- setSuccess ( `Deployment '${ response . data . app_name } ) ;
99+ if ( isHelloWorldDemo ) {
100+ setSuccess ( `🚀 Demo deployment is ready! Redirecting to your new app...` ) ;
101+ } else {
102+ setSuccess ( `Deployment '${ response . data . app_name } ) ;
103+ }
81104 await new Promise ( resolve => setTimeout ( resolve , 1000 ) ) ;
82105 // Navigate to deployment detail page
83106 navigate ( `/deployments/${ response . data . id } ) ;
84107 } else {
85- setSuccess ( `Deployment '${ response . data . app_name } ) ;
108+ if ( isHelloWorldDemo ) {
109+ setSuccess ( `Demo deployment created successfully! The container may still be starting...` ) ;
110+ } else {
111+ setSuccess ( `Deployment '${ response . data . app_name } ) ;
112+ }
86113 await new Promise ( resolve => setTimeout ( resolve , 2000 ) ) ;
87114 // Navigate anyway, LogsPage will handle the loading state
88115 navigate ( `/deployments/${ response . data . id } ) ;
@@ -183,6 +210,23 @@ const NewDeploymentPage: React.FC = () => {
183210 < div className = "p-8" >
184211 { /* Header Section */ }
185212 < div className = "mb-8" >
213+ { /* Demo Deployment Banner */ }
214+ { isHelloWorldDemo && (
215+ < div className = "mb-6 bg-gradient-to-r from-green-500 to-blue-500 rounded-2xl p-6 text-white shadow-xl" >
216+ < div className = "flex items-center" >
217+ < div className = "w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mr-4" >
218+ < RocketLaunchIcon className = "h-6 w-6 text-white" />
219+ </ div >
220+ < div >
221+ < h3 className = "text-xl font-bold mb-1" > 🎉 Demo Deployment Mode</ h3 >
222+ < p className = "text-green-100" >
223+ We've pre-filled the form with a sample demo application. Click "Deploy Application" to see it in action!
224+ </ p >
225+ </ div >
226+ </ div >
227+ </ div >
228+ ) }
229+
186230 < div className = "flex items-center justify-between" >
187231 < div className = "flex items-center space-x-4" >
188232 < button
@@ -270,7 +314,16 @@ const NewDeploymentPage: React.FC = () => {
270314 />
271315 < CubeIcon className = "absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
272316 </ div >
273- < p className = "text-xs text-gray-500" > Docker image from Docker Hub or your private registry</ p >
317+ { isHelloWorldDemo ? (
318+ < div className = "p-3 bg-green-50 border border-green-200 rounded-lg" >
319+ < p className = "text-sm text-green-700 flex items-center" >
320+ < CheckCircleIcon className = "h-4 w-4 mr-2 text-green-500" />
321+ < strong > Demo Image:</ strong > This is a lightweight NGINX container that displays a simple demo page with system information.
322+ </ p >
323+ </ div >
324+ ) : (
325+ < p className = "text-xs text-gray-500" > Docker image from Docker Hub or your private registry</ p >
326+ ) }
274327 </ div >
275328 </ div >
276329
0 commit comments