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/10/28 23:11:56 UTC
[camel-karavan] 01/02: Filter by environment
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 9c41df05bce28e3f743ee7e680a067f4b1356f04
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Fri Oct 28 19:10:09 2022 -0400
Filter by environment
---
.../main/webapp/src/dashboard/DashboardPage.tsx | 56 +++++++++++++++-------
.../src/main/webapp/src/projects/ProjectInfo.tsx | 1 -
.../src/main/webapp/src/projects/ProjectPage.tsx | 4 +-
3 files changed, 41 insertions(+), 20 deletions(-)
diff --git a/karavan-app/src/main/webapp/src/dashboard/DashboardPage.tsx b/karavan-app/src/main/webapp/src/dashboard/DashboardPage.tsx
index 3488bec..a682fd0 100644
--- a/karavan-app/src/main/webapp/src/dashboard/DashboardPage.tsx
+++ b/karavan-app/src/main/webapp/src/dashboard/DashboardPage.tsx
@@ -7,7 +7,7 @@ import {
PageSection,
Text,
TextContent,
- TextInput,
+ TextInput, ToggleGroup, ToggleGroupItem,
Toolbar,
ToolbarContent,
ToolbarItem, Tooltip
@@ -22,7 +22,6 @@ import {KaravanApi} from "../api/KaravanApi";
import Icon from "../Logo";
import UpIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon";
import DownIcon from "@patternfly/react-icons/dist/esm/icons/error-circle-o-icon";
-import QuestionIcon from "@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon";
interface Props {
config: any,
@@ -43,6 +42,7 @@ interface State {
name: string,
description: string,
projectId: string,
+ selectedEnv: string[]
}
export class DashboardPage extends React.Component<Props, State> {
@@ -58,6 +58,7 @@ export class DashboardPage extends React.Component<Props, State> {
name: '',
description: '',
projectId: '',
+ selectedEnv: this.getEnvironments()
};
interval: any;
@@ -81,17 +82,36 @@ export class DashboardPage extends React.Component<Props, State> {
this.setState({serviceStatuses: statuses});
});
});
+ }
+ selectEnvironment(name: string, selected: boolean) {
+ if (selected && !this.state.selectedEnv.includes(name)) {
+ this.setState((state) => {
+ state.selectedEnv.push(name);
+ return state;
+ })
+ } else if (!selected && this.state.selectedEnv.includes(name)) {
+ this.setState((prevState) => ({
+ selectedEnv: prevState.selectedEnv.filter(e => e !== name)
+ }));
+ }
}
tools = () => (<Toolbar id="toolbar-group-types">
<ToolbarContent>
<ToolbarItem>
- <Button variant="link" icon={<RefreshIcon/>} onClick={e => this.onGetProjects()}/>
+ <ToggleGroup aria-label="Default with single selectable">
+ {this.getEnvironments().map(env => (
+ <ToggleGroupItem text={env} buttonId={env} isSelected={this.state.selectedEnv.includes(env)} onChange={selected => this.selectEnvironment(env, selected)}/>
+ ))}
+ </ToggleGroup>
</ToolbarItem>
+ {/*<ToolbarItem>*/}
+ {/* <Button variant="link" icon={<RefreshIcon/>} onClick={e => this.onGetProjects()}/>*/}
+ {/*</ToolbarItem>*/}
<ToolbarItem>
<TextInput className="text-field" type="search" id="search" name="search"
- autoComplete="off" placeholder="Search by name"
+ autoComplete="off" placeholder="Search deployment by name"
value={this.state.filter}
onChange={e => this.setState({filter: e})}/>
</ToolbarItem>
@@ -102,13 +122,17 @@ export class DashboardPage extends React.Component<Props, State> {
<Text component="h1">Dashboard</Text>
</TextContent>);
- getEnvironments(): string []{
+ getEnvironments(): string [] {
return this.props.config.environments && Array.isArray(this.props.config.environments) ? Array.from(this.props.config.environments) : [];
}
+ getSelectedEnvironments(): string [] {
+ return this.getEnvironments().filter(e => this.state.selectedEnv.includes(e));
+ }
+
getDeploymentEnvironments(name: string): [string, boolean] [] {
const deps = this.state.deploymentStatuses;
- return this.getEnvironments().map(e => {
+ return this.getSelectedEnvironments().map(e => {
const env: string = e as string;
const dep = deps.find(d => d.name === name && d.env === env);
const deployed: boolean = dep !== undefined && dep.replicas > 0 && dep.replicas === dep.readyReplicas;
@@ -118,7 +142,7 @@ export class DashboardPage extends React.Component<Props, State> {
getDeploymentByEnvironments(name: string): [string, DeploymentStatus | undefined] [] {
const deps = this.state.deploymentStatuses;
- return this.getEnvironments().map(e => {
+ return this.getSelectedEnvironments().map(e => {
const env: string = e as string;
const dep = deps.find(d => d.name === name && d.env === env);
return [env, dep];
@@ -127,7 +151,7 @@ export class DashboardPage extends React.Component<Props, State> {
getServiceByEnvironments(name: string): [string, ServiceStatus | undefined] [] {
const services = this.state.serviceStatuses;
- return this.getEnvironments().map(e => {
+ return this.getSelectedEnvironments().map(e => {
const env: string = e as string;
const service = services.find(d => d.name === name && d.env === env);
return [env, service];
@@ -170,7 +194,7 @@ export class DashboardPage extends React.Component<Props, State> {
<Tooltip content={"No information"} position={"right"}>
<Label color={"grey"}>???</Label>
</Tooltip>
- );
+ );
}
}
@@ -199,27 +223,27 @@ export class DashboardPage extends React.Component<Props, State> {
<Tbody>
{deployments.map(deployment => (
<Tr key={deployment}>
- <Td style={{verticalAlign:"middle"}}>
+ <Td style={{verticalAlign: "middle"}}>
{this.isKaravan(deployment) ? Icon("icon") : CamelUi.getIconFromSource(camelIcon)}
</Td>
- <Td style={{ verticalAlign:"middle"}}>
+ <Td style={{verticalAlign: "middle"}}>
<Button style={{padding: '6px'}} variant={"link"}>{deployment}</Button>
</Td>
- <Td style={{verticalAlign:"middle"}}>
+ <Td style={{verticalAlign: "middle"}}>
<HelperText>
<HelperTextItem>{this.getProject(deployment)?.name || ""}</HelperTextItem>
<HelperTextItem>{this.getProject(deployment)?.description || "Camel project"}</HelperTextItem>
</HelperText>
</Td>
- <Td >
+ <Td>
<Flex direction={{default: "column"}}>
{this.getDeploymentEnvironments(deployment).map(value => (
<FlexItem className="badge-flex-item" key={value[0]}><Badge className="badge"
- isRead={!value[1]}>{value[0]}</Badge></FlexItem>
+ isRead={!value[1]}>{value[0]}</Badge></FlexItem>
))}
</Flex>
</Td>
- <Td >
+ <Td>
<Flex direction={{default: "column"}}>
{this.getDeploymentByEnvironments(deployment).map(value => (
<FlexItem className="badge-flex-item" key={value[0]}>
@@ -230,7 +254,7 @@ export class DashboardPage extends React.Component<Props, State> {
))}
</Flex>
</Td>
- <Td >
+ <Td>
<Flex direction={{default: "column"}}>
{this.getDeploymentByEnvironments(deployment).map(value => (
<FlexItem className="badge-flex-item" key={value[0]}>{this.getReplicasPanel(value[1])}</FlexItem>
diff --git a/karavan-app/src/main/webapp/src/projects/ProjectInfo.tsx b/karavan-app/src/main/webapp/src/projects/ProjectInfo.tsx
index d8e25fd..132d4dc 100644
--- a/karavan-app/src/main/webapp/src/projects/ProjectInfo.tsx
+++ b/karavan-app/src/main/webapp/src/projects/ProjectInfo.tsx
@@ -115,7 +115,6 @@ export class ProjectInfo extends React.Component<Props, State> {
build = () => {
this.setState({isBuilding: true});
KaravanApi.pipelineRun(this.props.project, this.state.environment, res => {
- console.log(res)
if (res.status === 200 || res.status === 201) {
this.setState({isBuilding: false});
this.onRefresh();
diff --git a/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx b/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
index cc3a708..643b9fc 100644
--- a/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
+++ b/karavan-app/src/main/webapp/src/projects/ProjectPage.tsx
@@ -98,9 +98,7 @@ export class ProjectPage extends React.Component<Props, State> {
})
});
KaravanApi.getFiles(this.props.project.projectId, (files: []) => {
- this.setState({
- files: files
- })
+ this.setState({files: files})
});
KubernetesAPI.inKubernetes = true;
KaravanApi.getConfigMaps(this.state.environment, (any: []) => {