You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2022/11/28 17:36:00 UTC
[camel-karavan] 04/10: Move commit button to top
This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit 6c1cfcaa9f6e55dd27e183aa248f04bcba5e67ca
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Sat Nov 19 14:40:34 2022 -0500
Move commit button to top
---
.../src/main/webui/src/projects/ProjectInfo.tsx | 34 +---------
.../src/main/webui/src/projects/ProjectPage.tsx | 1 +
.../main/webui/src/projects/ProjectPageToolbar.tsx | 73 +++++++++++++++++-----
3 files changed, 61 insertions(+), 47 deletions(-)
diff --git a/karavan-app/src/main/webui/src/projects/ProjectInfo.tsx b/karavan-app/src/main/webui/src/projects/ProjectInfo.tsx
index 91aa2a9..19ae678 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectInfo.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectInfo.tsx
@@ -7,7 +7,7 @@ import {
DescriptionListGroup,
DescriptionListDescription,
Card,
- CardBody, Spinner, Tooltip, Flex, FlexItem, Divider, LabelGroup, Label, Modal, GridItem, Grid
+ CardBody, Spinner, Tooltip, Flex, FlexItem, Divider, LabelGroup, Label, Modal
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {KaravanApi} from "../api/KaravanApi";
@@ -98,20 +98,6 @@ export class ProjectInfo extends React.Component<Props, State> {
}
}
- push = (after?: () => void) => {
- this.setState({isPushing: true});
- KaravanApi.push(this.props.project, res => {
- console.log(res)
- if (res.status === 200 || res.status === 201) {
- this.setState({isPushing: false});
- after?.call(this);
- this.onRefresh();
- } else {
- // Todo notification
- }
- });
- }
-
build = () => {
this.setState({isBuilding: true});
KaravanApi.pipelineRun(this.props.project, this.state.environment, res => {
@@ -137,18 +123,6 @@ export class ProjectInfo extends React.Component<Props, State> {
});
}
- pushButton = () => {
- const isPushing = this.state.isPushing;
- return (<Tooltip content="Commit and push to git" position={"left"}>
- <Button isLoading={isPushing ? true : undefined} isSmall variant="secondary"
- className="project-button"
- icon={!isPushing ? <PushIcon/> : <div></div>}
- onClick={e => this.push()}>
- {isPushing ? "..." : "Commit"}
- </Button>
- </Tooltip>)
- }
-
buildButton = (env: string) => {
const {isBuilding, isPushing, pipelineStatus} = this.state;
const isRunning = pipelineStatus?.result === 'Running';
@@ -202,9 +176,6 @@ export class ProjectInfo extends React.Component<Props, State> {
<Badge>{project?.lastCommit ? project?.lastCommit?.substr(0, 7) : "-"}</Badge>
</Tooltip>
</FlexItem>
- <FlexItem>
- {this.pushButton()}
- </FlexItem>
</Flex>)
}
@@ -323,8 +294,7 @@ export class ProjectInfo extends React.Component<Props, State> {
<Label icon={this.getStatusIcon(contextStatus)} color={this.getStatusColor(contextStatus)}>Context</Label>
<Label icon={this.getStatusIcon(consumersStatus)} color={this.getStatusColor(consumersStatus)}>Consumers</Label>
<Label icon={this.getStatusIcon(routesStatus)} color={this.getStatusColor(routesStatus)}>Routes</Label>
- {registryStatus !== 'UNDEFINED' &&
- <Label icon={this.getStatusIcon(registryStatus)} color={this.getStatusColor(registryStatus)}>Registry</Label>}
+ <Label icon={this.getStatusIcon(registryStatus)} color={this.getStatusColor(registryStatus)}>Registry</Label>
</LabelGroup>
)
}
diff --git a/karavan-app/src/main/webui/src/projects/ProjectPage.tsx b/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
index 01cdbe0..faf8d5c 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
@@ -176,6 +176,7 @@ export class ProjectPage extends React.Component<Props, State> {
setMode={mode => this.setState({mode: mode})}
setCreateModalOpen={() => this.setState({isCreateModalOpen: true})}
setUploadModalOpen={() => this.setState({isUploadModalOpen: true})}
+ onRefresh={() => this.onRefresh()}
/>
}
diff --git a/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx b/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
index 93e2ec2..19550c4 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
@@ -11,13 +11,14 @@ import {
Checkbox, Tooltip, ToolbarItem
} from '@patternfly/react-core';
import '../designer/karavan.css';
-import {Project, ProjectFile} from "./ProjectModels";
+import {CamelStatus, DeploymentStatus, PipelineStatus, PodStatus, Project, ProjectFile} from "./ProjectModels";
import UploadIcon from "@patternfly/react-icons/dist/esm/icons/upload-icon";
import DownloadIcon from "@patternfly/react-icons/dist/esm/icons/download-icon";
import DownloadImageIcon from "@patternfly/react-icons/dist/esm/icons/image-icon";
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
import PushIcon from "@patternfly/react-icons/dist/esm/icons/code-branch-icon";
+import {KaravanApi} from "../api/KaravanApi";
interface Props {
project: Project,
@@ -31,14 +32,38 @@ interface Props {
downloadImage: () => void,
setCreateModalOpen: () => void,
setUploadModalOpen: () => void,
+ onRefresh: () => void,
setEditAdvancedProperties: (checked: boolean) => void,
setMode: (mode: "design" | "code") => void,
}
+interface State {
+ isPushing: boolean,
+}
+
export class ProjectPageToolbar extends React.Component<Props> {
+ public state: State = {
+ isPushing: false,
+ };
+
+ push = (after?: () => void) => {
+ this.setState({isPushing: true});
+ KaravanApi.push(this.props.project, res => {
+ console.log(res)
+ if (res.status === 200 || res.status === 201) {
+ this.setState({isPushing: false});
+ after?.call(this);
+ this.props.onRefresh.call(this);
+ } else {
+ // Todo notification
+ }
+ });
+ }
+
getTemplatesToolbar() {
const {project, file, editAdvancedProperties} = this.props;
+ const {isPushing} = this.state;
const isProperties = file !== undefined && file.name.endsWith("properties");
return <Toolbar id="toolbar-group-types">
<ToolbarContent>
@@ -52,14 +77,21 @@ export class ProjectPageToolbar extends React.Component<Props> {
onChange={checked => this.props.setEditAdvancedProperties.call(this, checked)}
/>
</FlexItem>}
+ {/*<FlexItem>*/}
+ {/* <Tooltip content={project?.lastCommit} position={"right"}>*/}
+ {/* <Badge>{project?.lastCommit ? project?.lastCommit?.substr(0, 7) : "-"}</Badge>*/}
+ {/* </Tooltip>*/}
+ {/*</FlexItem>*/}
<FlexItem>
- <Tooltip content={project?.lastCommit} position={"right"}>
- <Badge>{project?.lastCommit ? project?.lastCommit?.substr(0, 7) : "-"}</Badge>
+ <Tooltip content="Commit and push to git" position={"bottom"}>
+ <Button isLoading={isPushing ? true : undefined} isSmall variant="secondary"
+ className="project-button"
+ icon={!isPushing ? <PushIcon/> : <div></div>}
+ onClick={e => this.push()}>
+ {isPushing ? "..." : "Commit"}
+ </Button>
</Tooltip>
</FlexItem>
- <FlexItem>
- <Button variant="primary" icon={<PushIcon/>} onClick={e => {}}>Commit</Button>
- </FlexItem>
</Flex>
</ToolbarItem>
</ToolbarContent>
@@ -67,7 +99,8 @@ export class ProjectPageToolbar extends React.Component<Props> {
}
getProjectToolbar() {
- const {file, mode, editAdvancedProperties} = this.props;
+ const {isPushing} = this.state;
+ const {file, mode, editAdvancedProperties, addProperty, setEditAdvancedProperties, download, downloadImage, setCreateModalOpen, setUploadModalOpen} = this.props;
const isFile = file !== undefined;
const isYaml = file !== undefined && file.name.endsWith("yaml");
const isIntegration = isYaml && file?.code && CamelDefinitionYaml.yamlIsIntegration(file.code);
@@ -89,30 +122,40 @@ export class ProjectPageToolbar extends React.Component<Props> {
id="advanced"
label="Edit advanced"
isChecked={editAdvancedProperties}
- onChange={checked => this.props.setEditAdvancedProperties.call(this, checked)}
+ onChange={checked => setEditAdvancedProperties.call(this, checked)}
/>
</FlexItem>}
{isProperties && <FlexItem>
- <Button variant="primary" icon={<PlusIcon/>} onClick={e => this.props.addProperty.call(this)}>Add property</Button>
+ <Button isSmall variant="primary" icon={<PlusIcon/>} onClick={e => addProperty.call(this)}>Add property</Button>
</FlexItem>}
{isFile && <FlexItem>
<Tooltip content="Download source" position={"bottom-end"}>
- <Button variant="control" icon={<DownloadIcon/>} onClick={e => this.props.download.call(this)}/>
+ <Button isSmall variant="control" icon={<DownloadIcon/>} onClick={e => download.call(this)}/>
</Tooltip>
</FlexItem>}
{isIntegration && <FlexItem>
<Tooltip content="Download image" position={"bottom-end"}>
- <Button variant="control" icon={<DownloadImageIcon/>} onClick={e => this.props.downloadImage.call(this)}/>
+ <Button isSmall variant="control" icon={<DownloadImageIcon/>} onClick={e => downloadImage.call(this)}/>
</Tooltip>
</FlexItem>}
{!isFile && <FlexItem>
- <Button variant={"primary"} icon={<PlusIcon/>}
- onClick={e => this.props.setCreateModalOpen.call(this)}>Create</Button>
+ <Button isSmall variant={"secondary"} icon={<PlusIcon/>}
+ onClick={e => setCreateModalOpen.call(this)}>Create</Button>
</FlexItem>}
{!isFile && <FlexItem>
- <Button variant="secondary" icon={<UploadIcon/>}
- onClick={e => this.props.setUploadModalOpen.call(this)}>Upload</Button>
+ <Button isSmall variant="secondary" icon={<UploadIcon/>}
+ onClick={e => setUploadModalOpen.call(this)}>Upload</Button>
+ </FlexItem>}
+ {!isFile && <FlexItem>
+ <Tooltip content="Commit and push to git" position={"bottom-end"}>
+ <Button isLoading={isPushing ? true : undefined} isSmall variant="secondary"
+ className="project-button"
+ icon={!isPushing ? <PushIcon/> : <div></div>}
+ onClick={e => this.push()}>
+ {isPushing ? "..." : "Commit"}
+ </Button>
+ </Tooltip>
</FlexItem>}
</Flex>
</ToolbarContent>