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 72707e7c2de18d51c8fb207e4c4f253c0698e2b9
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Thu Oct 27 10:29:25 2022 -0400
Get DeploymentStatus fron new API
---
karavan-app/src/main/webapp/src/Main.tsx | 3 +-
karavan-app/src/main/webapp/src/api/KaravanApi.tsx | 11 +++++
.../src/main/webapp/src/projects/ProjectInfo.tsx | 48 +++++++++++-----------
.../src/main/webapp/src/projects/ProjectModels.ts | 7 ++--
.../src/main/webapp/src/projects/ProjectPage.tsx | 3 +-
.../src/main/webapp/src/projects/ProjectsPage.tsx | 20 ++++++---
6 files changed, 55 insertions(+), 37 deletions(-)
diff --git a/karavan-app/src/main/webapp/src/Main.tsx
b/karavan-app/src/main/webapp/src/Main.tsx
index adea4ca..4d7acb5 100644
--- a/karavan-app/src/main/webapp/src/Main.tsx
+++ b/karavan-app/src/main/webapp/src/Main.tsx
@@ -32,7 +32,6 @@ import EipIcon from
"@patternfly/react-icons/dist/js/icons/topology-icon";
import ComponentsIcon from "@patternfly/react-icons/dist/js/icons/module-icon";
import ConfigurationIcon from
"@patternfly/react-icons/dist/js/icons/cogs-icon";
import {MainLogin} from "./MainLogin";
-import {Thenable} from "monaco-editor";
class ToastMessage {
id: string = ''
@@ -125,7 +124,7 @@ export class Main extends React.Component<Props, State> {
getData() {
KaravanApi.getConfiguration((config: any) => {
- this.setState({ config: config })
+ this.setState({ config: config });
});
this.updateKamelets();
this.updateComponents();
diff --git a/karavan-app/src/main/webapp/src/api/KaravanApi.tsx
b/karavan-app/src/main/webapp/src/api/KaravanApi.tsx
index 50379ba..d05e95b 100644
--- a/karavan-app/src/main/webapp/src/api/KaravanApi.tsx
+++ b/karavan-app/src/main/webapp/src/api/KaravanApi.tsx
@@ -290,6 +290,17 @@ export class KaravanApi {
});
}
+ static async getDeploymentStatuses(env: string, after: (statuses:
DeploymentStatus[]) => void) {
+ instance.get('/api/kubernetes/deployment/' + env)
+ .then(res => {
+ if (res.status === 200) {
+ after(res.data);
+ }
+ }).catch(err => {
+ console.log(err);
+ });
+ }
+
static async rolloutDeployment(name: string, environment: string, after:
(res: AxiosResponse<any>) => void) {
instance.post('/api/kubernetes/deployment/rollout/' + environment +
'/' + name, "")
.then(res => {
diff --git a/karavan-app/src/main/webapp/src/projects/ProjectInfo.tsx
b/karavan-app/src/main/webapp/src/projects/ProjectInfo.tsx
index 16ce1a3..0148cab 100644
--- a/karavan-app/src/main/webapp/src/projects/ProjectInfo.tsx
+++ b/karavan-app/src/main/webapp/src/projects/ProjectInfo.tsx
@@ -263,34 +263,34 @@ export class ProjectInfo extends React.Component<Props,
State> {
}
getPodsPanel(deploymentStatus: DeploymentStatus, env: string) {
- const podStatuses = deploymentStatus.podStatuses;
+ // const podStatuses = deploymentStatus.podStatuses;
return (
<Flex justifyContent={{default: "justifyContentSpaceBetween"}}
alignItems={{default: "alignItemsCenter"}}>
<FlexItem>
<LabelGroup numLabels={3}>
- {(podStatuses === undefined || podStatuses.length ===
0) && <Label icon={<DownIcon/>} color={"grey"}>No pods</Label>}
- {podStatuses.map(pod => {
- const running = pod.started && pod.ready;
- return (
- <Tooltip key={pod.name} content={running ?
"Running" : pod.reason}>
- <Label icon={running ? <UpIcon/> :
<DownIcon/>} color={running ? "green" : "red"}>
- <Button variant="link"
- onClick={e =>
this.props.showLog?.call(this, 'container', pod.name, env)}>
- {pod.name}
- </Button>
- <Tooltip content={"Delete Pod"}>
- <Button icon={<DeleteIcon/>}
variant="link" onClick={e => this.setState({
- showDeleteConfirmation:
true,
- deleteEntity: "pod",
- deleteEntityEnv: env,
- deleteEntityName: pod.name
- })}></Button>
- </Tooltip>
- </Label>
- </Tooltip>
- )
- }
- )}
+ {/*{(podStatuses === undefined || podStatuses.length
=== 0) && <Label icon={<DownIcon/>} color={"grey"}>No pods</Label>}*/}
+ {/*{podStatuses.map(pod => {*/}
+ {/* const running = pod.started && pod.ready;*/}
+ {/* return (*/}
+ {/* <Tooltip key={pod.name}
content={running ? "Running" : pod.reason}>*/}
+ {/* <Label icon={running ? <UpIcon/> :
<DownIcon/>} color={running ? "green" : "red"}>*/}
+ {/* <Button variant="link"*/}
+ {/* onClick={e =>
this.props.showLog?.call(this, 'container', pod.name, env)}>*/}
+ {/* {pod.name}*/}
+ {/* </Button>*/}
+ {/* <Tooltip content={"Delete
Pod"}>*/}
+ {/* <Button
icon={<DeleteIcon/>} variant="link" onClick={e => this.setState({*/}
+ {/* showDeleteConfirmation:
true,*/}
+ {/* deleteEntity: "pod",*/}
+ {/* deleteEntityEnv: env,*/}
+ {/* deleteEntityName:
pod.name*/}
+ {/* })}></Button>*/}
+ {/* </Tooltip>*/}
+ {/* </Label>*/}
+ {/* </Tooltip>*/}
+ {/* )*/}
+ {/* }*/}
+ {/*)}*/}
</LabelGroup>
</FlexItem>
<FlexItem>{env === "dev" && this.rolloutButton()}</FlexItem>
diff --git a/karavan-app/src/main/webapp/src/projects/ProjectModels.ts
b/karavan-app/src/main/webapp/src/projects/ProjectModels.ts
index 16ae793..2f6eeb9 100644
--- a/karavan-app/src/main/webapp/src/projects/ProjectModels.ts
+++ b/karavan-app/src/main/webapp/src/projects/ProjectModels.ts
@@ -3,7 +3,6 @@ export class Project {
name: string = '';
description: string = '';
lastCommit: string = '';
- deployed: boolean = false;
public constructor(projectId: string, name: string, description: string,
lastCommit: string);
public constructor(init?: Partial<Project>);
@@ -22,16 +21,18 @@ export class Project {
}
export class DeploymentStatus {
- projectId: string = '';
+ name: string = '';
+ env: string = '';
+ namespace: string = '';
image: string = '';
replicas: number = 0;
readyReplicas: number = 0;
unavailableReplicas: number = 0;
- podStatuses: PodStatus[] = []
}
export class PodStatus {
name: string = '';
+ phase: string = '';
started: boolean = false;
ready: boolean = false;
reason: string = '';
diff --git a/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
b/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
index 8d2a38b..cc3a708 100644
--- a/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
+++ b/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
@@ -83,8 +83,7 @@ export class ProjectPage extends React.Component<Props,
State> {
tab: "details",
environments: this.props.config.environments &&
Array.isArray(this.props.config.environments)
? Array.from(this.props.config.environments) : [],
- environment: this.props.config.environments &&
Array.isArray(this.props.config.environments)
- ? this.props.config.environments[0] : ''
+ environment: this.props.config.environment
};
componentDidMount() {
diff --git a/karavan-app/src/main/webapp/src/projects/ProjectsPage.tsx
b/karavan-app/src/main/webapp/src/projects/ProjectsPage.tsx
index 0b290d8..744c19f 100644
--- a/karavan-app/src/main/webapp/src/projects/ProjectsPage.tsx
+++ b/karavan-app/src/main/webapp/src/projects/ProjectsPage.tsx
@@ -29,7 +29,7 @@ import '../designer/karavan.css';
import {MainToolbar} from "../MainToolbar";
import RefreshIcon from '@patternfly/react-icons/dist/esm/icons/sync-alt-icon';
import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-import {Project} from "./ProjectModels";
+import {DeploymentStatus, Project} from "./ProjectModels";
import {TableComposable, Tbody, Td, Th, Thead, Tr} from
"@patternfly/react-table";
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-icon";
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -45,6 +45,7 @@ interface Props {
interface State {
projects: Project[],
+ deploymentStatuses: DeploymentStatus[],
isCreateModalOpen: boolean,
isDeleteModalOpen: boolean,
isCopy: boolean,
@@ -60,6 +61,7 @@ export class ProjectsPage extends React.Component<Props,
State> {
public state: State = {
projects: [],
+ deploymentStatuses: [],
isCreateModalOpen: false,
isDeleteModalOpen: false,
isCopy: false,
@@ -71,7 +73,7 @@ export class ProjectsPage extends React.Component<Props,
State> {
interval: any;
componentDidMount() {
- this.interval = setInterval(() => this.onGetProjects(), 700);
+ this.interval = setInterval(() => this.onGetProjects(), 1300);
}
componentWillUnmount() {
@@ -112,6 +114,9 @@ export class ProjectsPage extends React.Component<Props,
State> {
KaravanApi.getProjects((projects: Project[]) => {
this.setState({ projects: projects })
});
+ KaravanApi.getDeploymentStatuses(config.environment, (statuses:
DeploymentStatus[]) => {
+ this.setState({ deploymentStatuses: statuses });
+ });
});
}
@@ -209,12 +214,15 @@ export class ProjectsPage extends React.Component<Props,
State> {
)
}
+ isDeployed(projectId: string): boolean{
+ const ds = this.state.deploymentStatuses.find(ds => ds.name ===
projectId);
+ return ds ? (ds.replicas > 0 && ds.replicas === ds.readyReplicas) :
false;
+ }
+
render() {
const runtime = this.props.config?.runtime ? this.props.config.runtime
: "QUARKUS";
const projects = this.state.projects.filter(p =>
p.name.toLowerCase().includes(this.state.filter) ||
p.description.toLowerCase().includes(this.state.filter));
- const environments: string[] = this.props.config.environments &&
Array.isArray(this.props.config.environments)
- ? Array.from(this.props.config.environments)
- : [];
+ const environment: string = this.props.config.environment;
return (
<PageSection className="kamelet-section projects-page"
padding={{default: 'noPadding'}}>
<PageSection className="tools-section" padding={{default:
'noPadding'}}>
@@ -255,7 +263,7 @@ export class ProjectsPage extends React.Component<Props,
State> {
</Td>
<Td noPadding style={{width:"180px"}}>
<Flex direction={{default: "row"}}>
- <FlexItem key={"dev"}><Badge
isRead={!project.deployed}>{"dev"}</Badge></FlexItem>
+ <FlexItem key={"dev"}><Badge
isRead={!this.isDeployed(project.projectId)}>{"dev"}</Badge></FlexItem>
</Flex>
</Td>
<Td isActionCell>
