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 4084d9a1ee37aa651bc2c2cab6357ea8426c6130 Author: Marat Gubaidullin <ma...@talismancloud.io> AuthorDate: Tue Sep 12 11:45:34 2023 -0400 Rollout for #885 --- .../webui/src/project/container/ContainerPanel.tsx | 1 - .../src/project/container/DeploymentPanel.tsx | 80 +++++++++++++++------- .../src/project/container/ProjectContainerTab.tsx | 2 +- 3 files changed, 55 insertions(+), 28 deletions(-) diff --git a/karavan-web/karavan-app/src/main/webui/src/project/container/ContainerPanel.tsx b/karavan-web/karavan-app/src/main/webui/src/project/container/ContainerPanel.tsx index 9a4c2848..30011e7e 100644 --- a/karavan-web/karavan-app/src/main/webui/src/project/container/ContainerPanel.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/project/container/ContainerPanel.tsx @@ -39,7 +39,6 @@ export function ContainerPanel (props: Props) { const [showDeleteConfirmation, setShowDeleteConfirmation] = useState<boolean>(false); const [deleteEntityName, setDeleteEntityName] = useState<string>(); - function deleteEntity() { if (deleteEntityName) { KaravanApi.stopBuild('dev', deleteEntityName, (res: any) => { diff --git a/karavan-web/karavan-app/src/main/webui/src/project/container/DeploymentPanel.tsx b/karavan-web/karavan-app/src/main/webui/src/project/container/DeploymentPanel.tsx index 74f6ea59..b2e21233 100644 --- a/karavan-web/karavan-app/src/main/webui/src/project/container/DeploymentPanel.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/project/container/DeploymentPanel.tsx @@ -1,28 +1,19 @@ import React, {useState} from 'react'; import { - Badge, Button, - Card, - CardBody, - DescriptionList, - DescriptionListDescription, - DescriptionListGroup, - DescriptionListTerm, Flex, FlexItem, Label, LabelGroup, Modal, Tooltip, - TooltipPosition } from '@patternfly/react-core'; import '../../designer/karavan.css'; import UpIcon from "@patternfly/react-icons/dist/esm/icons/running-icon"; import DownIcon from "@patternfly/react-icons/dist/esm/icons/error-circle-o-icon"; -import {useAppConfigStore, useLogStore, useProjectStore, useStatusesStore} from "../../api/ProjectStore"; +import {useAppConfigStore, useProjectStore, useStatusesStore} from "../../api/ProjectStore"; import {shallow} from "zustand/shallow"; -import {ContainerStatus} from "../../api/ProjectModels"; -import {ContainerButtons} from "./ContainerButtons"; import DeleteIcon from "@patternfly/react-icons/dist/esm/icons/times-circle-icon"; +import RolloutIcon from "@patternfly/react-icons/dist/esm/icons/process-automation-icon"; import {KaravanApi} from "../../api/KaravanApi"; import {EventBus} from "../../designer/utils/EventBus"; @@ -37,18 +28,27 @@ export function DeploymentPanel (props: Props) { const [ deployments] = useStatusesStore((s) => [s.deployments], shallow); const [showDeleteConfirmation, setShowDeleteConfirmation] = useState<boolean>(false); - const [deleteEntityName, setDeleteEntityName] = useState<string>(); + const [showRolloutConfirmation, setShowRolloutConfirmation] = useState<boolean>(false); - function deleteEntity() { - if (deleteEntityName) { - KaravanApi.deleteDeployment(props.env, deleteEntityName, (res: any) => { + function deleteDeployment() { + if (project.projectId) { + KaravanApi.deleteDeployment(props.env, project.projectId, (res: any) => { if (res.status === 200) { - EventBus.sendAlert("Deployment deleted", "Deployment deleted: " + deleteEntityName, 'info'); + EventBus.sendAlert("Deployment deleted", "Deployment deleted: " + project.projectId, 'info'); } }); } } + function rolloutDeployment () { + KaravanApi.rolloutDeployment(project.projectId, props.env, res => { + console.log(res) + if (res.status === 200) { + EventBus.sendAlert("Rolled out", "Rolled out: " + project.projectId, 'info'); + } + }); + } + function getDeleteConfirmation() { return (<Modal className="modal-delete" @@ -57,8 +57,8 @@ export function DeploymentPanel (props: Props) { onClose={() => setShowDeleteConfirmation(false)} actions={[ <Button key="confirm" variant="primary" onClick={e => { - if (deleteEntityName) { - deleteEntity(); + if (project.projectId) { + deleteDeployment(); setShowDeleteConfirmation(false); } }}>Delete @@ -67,20 +67,41 @@ export function DeploymentPanel (props: Props) { onClick={e => setShowDeleteConfirmation(false)}>Cancel</Button> ]} onEscapePress={e => setShowDeleteConfirmation(false)}> - <div>{"Delete deployment " + deleteEntityName + "?"}</div> + <div>{"Delete deployment " + project.projectId + "?"}</div> + </Modal>) + } + + function getRolloutConfirmation() { + return (<Modal + className="modal-delete" + title="Confirmation" + isOpen={showDeleteConfirmation} + onClose={() => setShowDeleteConfirmation(false)} + actions={[ + <Button key="confirm" variant="primary" onClick={e => { + if (project.projectId) { + rolloutDeployment(); + setShowRolloutConfirmation(false); + } + }}>Delete + </Button>, + <Button key="cancel" variant="link" + onClick={e => setShowRolloutConfirmation(false)}>Cancel</Button> + ]} + onEscapePress={e => setShowDeleteConfirmation(false)}> + <div>{"Rollout deployment " + project.projectId + "?"}</div> </Modal>) } - function deleteDeploymentButton() { - return (<Tooltip content="Delete deployment" position={"left"}> + function rolloutButton() { + return (<Tooltip content="Rollout deployment" position={"left"}> <Button size="sm" variant="secondary" className="project-button" - icon={<DeleteIcon/>} + icon={<RolloutIcon/>} onClick={e => { - setShowDeleteConfirmation(true); - setDeleteEntityName(project?.projectId); + setShowRolloutConfirmation(true); }}> - {"Delete"} + {"Rollout"} </Button> </Tooltip>) } @@ -102,11 +123,18 @@ export function DeploymentPanel (props: Props) { <Label icon={<DownIcon/>} color={"red"}>{deploymentStatus.unavailableReplicas}</Label> </Tooltip> } + <Button + icon={<DeleteIcon/>} + className="labeled-button" + variant="link" onClick={e => { + setShowDeleteConfirmation(true); + }}></Button> </LabelGroup>} {deploymentStatus === undefined && <Label icon={<DownIcon/>} color={"grey"}>No deployments</Label>} </FlexItem> - <FlexItem>{props.env === "dev" && deleteDeploymentButton()}</FlexItem> + <FlexItem>{props.env === "dev" && rolloutButton()}</FlexItem> {showDeleteConfirmation && getDeleteConfirmation()} + {showRolloutConfirmation && getRolloutConfirmation()} </Flex> ) } diff --git a/karavan-web/karavan-app/src/main/webui/src/project/container/ProjectContainerTab.tsx b/karavan-web/karavan-app/src/main/webui/src/project/container/ProjectContainerTab.tsx index 649f77cc..69f6e526 100644 --- a/karavan-web/karavan-app/src/main/webui/src/project/container/ProjectContainerTab.tsx +++ b/karavan-web/karavan-app/src/main/webui/src/project/container/ProjectContainerTab.tsx @@ -27,7 +27,7 @@ export function ProjectContainerTab() { </DescriptionListDescription> </DescriptionListGroup> <DescriptionListGroup> - <DescriptionListTerm>Containers</DescriptionListTerm> + <DescriptionListTerm>Deployment</DescriptionListTerm> <DescriptionListDescription> <DeploymentPanel key={env} env={env}/> </DescriptionListDescription>