Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Draft support for compose file #164

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Draft support for compose file #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5fecb05
Placeholder for compose file
githubsaturn Oct 25, 2024
fb7fa73
Placeholder for compose file
githubsaturn Oct 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/containers/PageRoot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import Sidebar from './Sidebar'
import Apps from './apps/Apps'
import ProjectDetailsEdit from './apps/ProjectDetailsEdit'
import AppDetails from './apps/appDetails/AppDetails'
import DockerComposeEntry from './apps/compose/DockerComposeEntry'
import OneClickAppSelector from './apps/oneclick/selector/OneClickAppSelector'
import OneClickAppConfigPage from './apps/oneclick/variables/OneClickAppConfigPage'
import ApiComponent from './global/ApiComponent'
Expand Down Expand Up @@ -327,6 +328,10 @@ class PageRoot extends ApiComponent<
path="/apps/oneclick"
component={OneClickAppSelector}
/>
<Route
path="/apps/dockercompose"
component={DockerComposeEntry}
/>
<Route path="/apps/" component={Apps} />
<Route
path="/monitoring/"
Expand Down
7 changes: 6 additions & 1 deletion src/containers/apps/Apps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export default class Apps extends ApiComponent<
span: 24,
}}
lg={{
span: 13,
span: 24,
}}
>
<CreateNewApp
Expand All @@ -109,6 +109,11 @@ export default class Apps extends ApiComponent<
onOneClickAppClicked={() => {
self.props.history.push('/apps/oneclick')
}}
onDockerComposeClicked={() => {
self.props.history.push(
'/apps/dockercompose'
)
}}
/>
</Col>
</Row>
Expand Down
222 changes: 135 additions & 87 deletions src/containers/apps/CreateNewApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { PlusCircleOutlined, QuestionCircleFilled } from '@ant-design/icons'
import { Button, Card, Checkbox, Divider, Input, Row, Tooltip } from 'antd'
import { Button, Card, Checkbox, Col, Input, Row, Tooltip } from 'antd'
import { Component, Fragment } from 'react'
import { connect } from 'react-redux'
import ProjectSelector from '../../components/ProjectSelector'
Expand All @@ -15,6 +15,7 @@ interface MyProps {
hasPersistency: boolean
) => void
onOneClickAppClicked: () => void
onDockerComposeClicked: () => void

projects: ProjectDefinition[]
}
Expand Down Expand Up @@ -57,105 +58,153 @@ class CreateNewApp extends Component<
marginBottom: 20,
}}
>
{self.props.isMobile ? (
<Fragment>
<Input
<Col md={12} sm={24} xs={24}>
<div
style={{
paddingBottom: 20,
width: '100%',
textAlign: 'center',
}}
>
{localize(
'create_new_app.scratch',
'Create from scratch'
)}
<hr style={{ opacity: 0.1 }} />
</div>
{self.createProjectInApp()}
<Row style={{ marginTop: 30, marginBottom: 30 }}>
<Checkbox
onChange={(e: any) =>
self.setState({
hasPersistency: !!e.target.checked,
})
}
>
{localize(
'create_new_app.has_persistent_data',
'Has Persistent Data'
)}{' '}
</Checkbox>
&nbsp;&nbsp;
<NewTabLink url="https://caprover.com/docs/persistent-apps.html">
<Tooltip
title={localize(
'create_new_app.has_persistent_data_tooltip',
'Mostly used for databases, see docs for details.'
)}
>
<span>
<QuestionCircleFilled />
</span>
</Tooltip>
</NewTabLink>
</Row>
{self.props.isMobile ? (
<Fragment>
<Input
placeholder={localize(
'create_new_app.placeholder',
'my-amazing-app'
)}
onChange={(e) =>
self.setState({
appName: e.target.value,
})
}
/>
<Button
style={{ marginTop: 8 }}
block
onClick={() => self.onCreateNewAppClicked()}
type="primary"
>
{localize(
'create_new_app.button',
'Create New App'
)}
</Button>
</Fragment>
) : (
<Input.Search
placeholder={localize(
'create_new_app.placeholder',
'my-amazing-app'
)}
enterButton={localize(
'create_new_app.button',
'Create New App'
)}
onChange={(e) =>
self.setState({
appName: e.target.value,
})
}
onSearch={(value) =>
self.onCreateNewAppClicked()
}
/>
<Button
style={{ marginTop: 8 }}
block
onClick={() => self.onCreateNewAppClicked()}
type="primary"
)}
</Col>
<Col md={4} sm={24}></Col>
<Col md={8} sm={24} xs={24}>
<Row justify={'center'}>
<div
style={{
paddingBottom: 20,
width: '100%',
textAlign: 'center',
}}
>
{localize(
'create_new_app.button',
'Create New App'
'create_new_app.or_select_from',
'Or select from'
)}
</Button>
</Fragment>
) : (
<Input.Search
placeholder={localize(
'create_new_app.placeholder',
'my-amazing-app'
)}
enterButton={localize(
'create_new_app.button',
'Create New App'
)}
onChange={(e) =>
self.setState({
appName: e.target.value,
})
}
onSearch={(value) => self.onCreateNewAppClicked()}
/>
)}
</Row>

{self.createProjectInApp()}

<Row
style={{ marginTop: 30 }}
justify={self.props.isMobile ? 'start' : 'end'}
>
<Checkbox
onChange={(e: any) =>
self.setState({
hasPersistency: !!e.target.checked,
})
}
>
{localize(
'create_new_app.has_persistent_data',
'Has Persistent Data'
)}{' '}
</Checkbox>
&nbsp;&nbsp;
<NewTabLink url="https://caprover.com/docs/persistent-apps.html">
<Tooltip
title={localize(
'create_new_app.has_persistent_data_tooltip',
'Mostly used for databases, see docs for details.'
)}
>
<span>
<QuestionCircleFilled />
</span>
</Tooltip>
</NewTabLink>
<hr style={{ opacity: 0.1 }} />
</div>
<div
style={{
marginBottom: 15,
width: '100%',
textAlign: 'center',
}}
>
<Button
block
type="default"
onClick={() => {
self.props.onOneClickAppClicked()
}}
>
{localize(
'create_new_app.one_click_apps',
'One-Click Apps/Databases'
)}
</Button>
</div>
<div
style={{
marginBottom: 15,
width: '100%',
textAlign: 'center',
}}
>
<Button
block
type="default"
onClick={() => {
self.props.onDockerComposeClicked()
}}
>
{localize(
'create_new_app.docker_compose',
'Docker Compose'
)}
</Button>
</div>
</Row>
</Col>
</Row>
<Divider type="horizontal" style={{ width: 100 }} />

<div style={{ textAlign: 'center' }}>
<p>
{localize(
'create_new_app.or_select_from',
'Or Select From'
)}
</p>

<Button
type="dashed"
onClick={() => {
self.props.onOneClickAppClicked()
}}
>
{localize(
'create_new_app.one_click_apps',
'One-Click Apps/Databases'
)}
</Button>
</div>
</Card>
)
}
Expand All @@ -172,7 +221,6 @@ class CreateNewApp extends Component<
{' '}
<div
style={{
marginTop: 32,
marginBottom: 5,
}}
>
Expand Down
48 changes: 48 additions & 0 deletions src/containers/apps/compose/DockerComposeEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Card, Col, Row } from 'antd'
import { RouteComponentProps } from 'react-router'
import ApiComponent from '../../global/ApiComponent'
import CodeEdit from '../../global/CodeEdit'

export const TEMPLATE_ONE_CLICK_APP = 'TEMPLATE_ONE_CLICK_APP'
export const ONE_CLICK_APP_STRINGIFIED_KEY = 'oneClickAppStringifiedData'

export default class OneClickAppSelector extends ApiComponent<
RouteComponentProps<any>,
{
templateOneClickAppData: string
}
> {
constructor(props: any) {
super(props)
this.state = {
templateOneClickAppData: '',
}
}

componentDidMount() {
// const self = this
}

render() {
const self = this

return (
<div>
<Row justify="center">
<Col xs={{ span: 23 }} lg={{ span: 16 }}>
<Card title="Docker Compose">
<div>
Testing Docker Compose
<CodeEdit
onChange={(newValue) => {
// self.setState({ templateOneClickAppData: newValue })
}}
/>
</div>
</Card>
</Col>
</Row>
</div>
)
}
}
Loading