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 2023/09/13 15:49:05 UTC
[camel-karavan] 01/02: Hide Dashboard page for #885
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 c5f9f5d48a630c6b361b2af552ca6520fc0de04b
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Wed Sep 13 11:26:43 2023 -0400
Hide Dashboard page for #885
---
.../webui/src/containers/ContainerTableRow.tsx | 7 +-
.../src/main/webui/src/dashboard/DashboardPage.tsx | 98 ++++++++++++----------
.../karavan-app/src/main/webui/src/main/Main.tsx | 2 +-
.../src/main/webui/src/main/PageNavigation.tsx | 2 +-
4 files changed, 60 insertions(+), 49 deletions(-)
diff --git a/karavan-web/karavan-app/src/main/webui/src/containers/ContainerTableRow.tsx b/karavan-web/karavan-app/src/main/webui/src/containers/ContainerTableRow.tsx
index 9e855217..a3ea184a 100644
--- a/karavan-web/karavan-app/src/main/webui/src/containers/ContainerTableRow.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/containers/ContainerTableRow.tsx
@@ -24,9 +24,8 @@ export function ContainerTableRow (props: Props) {
const container = props.container;
const commands = container.commands;
- const imageParts = container.image.split("@");
- const image = imageParts[0];
- const imageSha = imageParts[1];
+ const imageParts = container.image?.split("@");
+ const image = imageParts?.length > -1 ? imageParts[0] : "";
const ports = container.ports;
const isRunning = container.state === 'running';
const inTransit = container.inTransit;
@@ -107,7 +106,7 @@ export function ContainerTableRow (props: Props) {
<Td colSpan={2}>
<ExpandableRowContent>
<Flex direction={{default: "column"}} cellPadding={"0px"}>
- {container.containerId.substring(0, 10)+"..."}
+ {container.containerId?.substring(0, 10)+"..."}
</Flex>
</ExpandableRowContent>
</Td>
diff --git a/karavan-web/karavan-app/src/main/webui/src/dashboard/DashboardPage.tsx b/karavan-web/karavan-app/src/main/webui/src/dashboard/DashboardPage.tsx
index 0745dbaa..56fdde4a 100644
--- a/karavan-web/karavan-app/src/main/webui/src/dashboard/DashboardPage.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/dashboard/DashboardPage.tsx
@@ -13,7 +13,14 @@ import {
ToolbarItem, Tooltip, EmptyStateHeader
} from '@patternfly/react-core';
import '../designer/karavan.css';
-import {CamelStatus, ContainerStatus, DeploymentStatus, Project, ServiceStatus} from "../api/ProjectModels";
+import {
+ CamelStatus,
+ CamelStatusValue,
+ ContainerStatus,
+ DeploymentStatus,
+ Project,
+ ServiceStatus
+} from "../api/ProjectModels";
import {
TableVariant,
Tbody,
@@ -124,12 +131,17 @@ export function DashboardPage () {
});
}
- function getCamelStatusByEnvironments(name: string): [string, CamelStatus | undefined] [] {
- return selectedEnv.map(e => {
+ function getCamelStatusByEnvironments(containerName: string): [string, CamelStatusValue | undefined] [] {
+ console.log(camels)
+ console.log(selectedEnv)
+ const result = selectedEnv.map(e => {
const env: string = e as string;
- const status = camels?.find(d => d.projectId === name && d.env === env);
- return [env, status];
+ const status = camels?.find(d => d.containerName === containerName && d.env === env);
+ const statusValue = status ? status.statuses[0] : undefined;
+ return {env, statusValue};
});
+ console.log(result)
+ return [];
}
function getProject(name: string): Project | undefined {
@@ -271,67 +283,67 @@ export function DashboardPage () {
<Table aria-label="Projects" variant={TableVariant.compact}>
<Thead>
<Tr>
- <Th key='type'>Type</Th>
- <Th key='container'>Container</Th>
- <Th key='description'>Project Description</Th>
- <Th key='ports'>Ports</Th>
- <Th key='environment'>Environment</Th>
- <Th key='camel'>Camel Health</Th>
- {/*<Th key='action'></Th>*/}
+ <Th key='container' width={20}>Container</Th>
+ <Th key='description' width={30} isStickyColumn >Project Description</Th>
+ {/*{config.environments.map((e, i) =>*/}
+ {['dev', 'test', 'prod'].map((e, i) =>
+ <Th key={e} textCenter hasLeftBorder width={10} >{e}</Th>
+ )}
</Tr>
</Thead>
<Tbody>
{conts.map(container => (
<Tr key={container.containerName}>
- <Td style={{verticalAlign: "middle"}} modifier={"fitContent"}>
- <Badge className="badge">{container.type}</Badge>
- </Td>
<Td style={{verticalAlign: "middle"}}>
<Label color={container.state === 'running' ? "green" : 'grey'}>
{container.containerName}
+ <Badge isRead>{container.type}</Badge>
</Label>
</Td>
- <Td style={{verticalAlign: "middle"}}>
+ <Td isStickyColumn style={{verticalAlign: "middle"}}>
<HelperText>
<HelperTextItem>{getProject(container.containerName)?.description || "Camel project"}</HelperTextItem>
</HelperText>
</Td>
- <Td>
- <Flex direction={{default: "column"}}>
- {container.ports.map(port => (
- <FlexItem className="badge-flex-item" key={port}>
- <Badge className="badge" isRead={true}>{port}</Badge>
- </FlexItem>
- ))}
- </Flex>
- </Td>
- <Td>
- <Flex direction={{default: "column"}}>
+ {/*<Td>*/}
+ {/* <Flex direction={{default: "column"}}>*/}
+ {/* {container.ports.map(port => (*/}
+ {/* <FlexItem className="badge-flex-item" key={port}>*/}
+ {/* <Badge className="badge" isRead={true}>{port}</Badge>*/}
+ {/* </FlexItem>*/}
+ {/* ))}*/}
+ {/* </Flex>*/}
+ {/*</Td>*/}
+ <Td hasLeftBorder>
+ <Flex direction={{default: "column"}} style={{verticalAlign: "middle"}}>
{getContainerByEnvironments(container.containerName).map(value => (
<FlexItem className="badge-flex-item" key={value[0]}>
<Label color={"green"}>
{value[1] ? value[1]?.env : ""}
+ <Label color={"green"}>
+ {value[1] ? value[1]?.env : ""}
+ </Label>
</Label>
</FlexItem>
))}
</Flex>
</Td>
- <Td modifier={"fitContent"}>
- <Flex direction={{default: "column"}}>
- {getCamelStatusByEnvironments(container.containerName).map(value => {
- // const color = value[1] ? (value[1].consumerStatus === "UP" ? "green" : "red") : "grey";
- // let icon = undefined;
- // if (value[1]?.consumerStatus === "UP") icon = <UpIcon/>
- // if (value[1]?.consumerStatus === "DOWN") icon = <DownIcon/>
- // const text = value[1] && value[1]?.contextVersion ? value[1]?.contextVersion : "???";
- return <FlexItem key={value[0]}>
- {/*<LabelGroup numLabels={4} className="camel-label-group">*/}
- {/* <Label color={color} className="table-label" icon={icon}>{text}</Label>*/}
- {/*</LabelGroup>*/}
- </FlexItem>
- })}
- </Flex>
- </Td>
+ {/*<Td modifier={"fitContent"}>*/}
+ {/* <Flex direction={{default: "column"}}>*/}
+ {/* {getCamelStatusByEnvironments(container.containerName).map(value => {*/}
+ {/* // const color = value[1] ? (value[1].consumerStatus === "UP" ? "green" : "red") : "grey";*/}
+ {/* // let icon = undefined;*/}
+ {/* // if (value[1]?.consumerStatus === "UP") icon = <UpIcon/>*/}
+ {/* // if (value[1]?.consumerStatus === "DOWN") icon = <DownIcon/>*/}
+ {/* // const text = value[1] && value[1]?.contextVersion ? value[1]?.contextVersion : "???";*/}
+ {/* return <FlexItem key={value[0]}>*/}
+ {/* /!*<LabelGroup numLabels={4} className="camel-label-group">*!/*/}
+ {/* /!* <Label color={color} className="table-label" icon={icon}>{text}</Label>*!/*/}
+ {/* /!*</LabelGroup>*!/*/}
+ {/* </FlexItem>*/}
+ {/* })}*/}
+ {/* </Flex>*/}
+ {/*</Td>*/}
</Tr>
))}
{conts.length === 0 && getEmptyState()}
diff --git a/karavan-web/karavan-app/src/main/webui/src/main/Main.tsx b/karavan-web/karavan-app/src/main/webui/src/main/Main.tsx
index 4de22cd4..c7cecc80 100644
--- a/karavan-web/karavan-app/src/main/webui/src/main/Main.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/main/Main.tsx
@@ -133,7 +133,7 @@ export function Main() {
</FlexItem>
<FlexItem flex={{default: "flex_2"}} style={{height: "100%"}}>
<Routes>
- <Route path="/dashboard" element={<DashboardPage key={'dashboard'}/>}/>
+ {/*<Route path="/dashboard" element={<DashboardPage key={'dashboard'}/>}/>*/}
<Route path="/projects" element={<ProjectsPage key={'projects'}/>}/>
<Route path="/projects/:projectId" element={<ProjectPage key={'project'}/>}/>
<Route path="/templates" element={<TemplatesPage key={'templates'}/>}/>
diff --git a/karavan-web/karavan-app/src/main/webui/src/main/PageNavigation.tsx b/karavan-web/karavan-app/src/main/webui/src/main/PageNavigation.tsx
index 1eb173fa..0178c23f 100644
--- a/karavan-web/karavan-app/src/main/webui/src/main/PageNavigation.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/main/PageNavigation.tsx
@@ -43,7 +43,7 @@ export function PageNavigation () {
function getMenu() : MenuItem[] {
const pages: MenuItem[] = [
- new MenuItem("dashboard", "Dashboard", <DashboardIcon/>),
+ // new MenuItem("dashboard", "Dashboard", <DashboardIcon/>),
new MenuItem("projects", "Projects", <ProjectsIcon/>),
new MenuItem("templates", "Templates", <TemplatesIcon/>),
]