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
The following commit(s) were added to refs/heads/main by this push:
new c73a0411 Style
c73a0411 is described below
commit c73a0411223357bcfdd2342792aff77a5bf65ec3
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Wed Feb 7 18:22:38 2024 -0500
Style
---
.../karavan-app/src/main/webui/src/index.css | 4 +
.../main/webui/src/project/builder/BuildPanel.tsx | 6 +-
.../main/webui/src/project/builder/ImagesPanel.tsx | 181 +++++++++++----------
3 files changed, 104 insertions(+), 87 deletions(-)
diff --git a/karavan-web/karavan-app/src/main/webui/src/index.css
b/karavan-web/karavan-app/src/main/webui/src/index.css
index d58d594c..e22ee363 100644
--- a/karavan-web/karavan-app/src/main/webui/src/index.css
+++ b/karavan-web/karavan-app/src/main/webui/src/index.css
@@ -387,6 +387,10 @@
padding-bottom: 10px;
}
+.karavan .project-page .table-card-body {
+ padding: 0;
+}
+
.karavan .project-page .project-images-panel {
padding-top: 0;
}
diff --git
a/karavan-web/karavan-app/src/main/webui/src/project/builder/BuildPanel.tsx
b/karavan-web/karavan-app/src/main/webui/src/project/builder/BuildPanel.tsx
index d52df624..653aee13 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/builder/BuildPanel.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/project/builder/BuildPanel.tsx
@@ -122,7 +122,7 @@ export function BuildPanel () {
<Label icon={isRunning ? <Spinner diameter="16px"
className="spinner"/> : icon}
color={color}>
{buildName
- ? <Button className='labeled-button
dev-action-button' variant="link" onClick={e =>
+ ? <Button className='labeled-button'
variant="link" onClick={e =>
useLogStore.setState({showLog: true, type:
'build', podName: buildName})
}>
{buildName}
@@ -131,7 +131,7 @@ export function BuildPanel () {
{status !== undefined && <Tooltip content={"Delete
build"}>
<Button
icon={<DeleteIcon/>}
- className="labeled-button"
+ className="labeled-button
dev-action-button"
variant="link" onClick={e => {
setShowDeleteConfirmation(true);
setDeleteEntityName(buildName);
@@ -184,7 +184,7 @@ export function BuildPanel () {
}
return (
- <Card className="project-status">
+ <Card className="project-status" >
<CardBody>
<DescriptionList isHorizontal
horizontalTermWidthModifier={{default: '20ch'}}>
<DescriptionListGroup>
diff --git
a/karavan-web/karavan-app/src/main/webui/src/project/builder/ImagesPanel.tsx
b/karavan-web/karavan-app/src/main/webui/src/project/builder/ImagesPanel.tsx
index 22c22a93..886b2dd3 100644
--- a/karavan-web/karavan-app/src/main/webui/src/project/builder/ImagesPanel.tsx
+++ b/karavan-web/karavan-app/src/main/webui/src/project/builder/ImagesPanel.tsx
@@ -27,7 +27,16 @@ import {
TextContent,
Text,
TextVariants,
- Bullseye, EmptyState, EmptyStateVariant, EmptyStateHeader, EmptyStateIcon,
PageSection, Switch, TextInput
+ Bullseye,
+ EmptyState,
+ EmptyStateVariant,
+ EmptyStateHeader,
+ EmptyStateIcon,
+ PageSection,
+ Switch,
+ TextInput,
+ Card,
+ CardBody, CardHeader
} from '@patternfly/react-core';
import '../../designer/karavan.css';
import {useFilesStore, useProjectStore} from "../../api/ProjectStore";
@@ -42,7 +51,7 @@ import {ServicesYaml} from "../../api/ServiceModels";
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-icon";
import {EventBus} from "../../designer/utils/EventBus";
-export function ImagesPanel () {
+export function ImagesPanel() {
const [project, images] = useProjectStore((s) => [s.project, s.images],
shallow);
const [files] = useFilesStore((s) => [s.files], shallow);
@@ -73,7 +82,7 @@ export function ImagesPanel () {
function getSetConfirmation() {
const index = imageName?.lastIndexOf(":");
const name = imageName?.substring(0, index);
- const tag = index ? imageName?.substring(index+1) : "";
+ const tag = index ? imageName?.substring(index + 1) : "";
return (<Modal
className="modal-delete"
title="Confirmation"
@@ -95,7 +104,7 @@ export function ImagesPanel () {
}}>Cancel</Button>
]}
onEscapePress={e => setShowSetConfirmation(false)}>
- <Flex direction={{default:"column"}}
justifyContent={{default:"justifyContentFlexStart"}}>
+ <Flex direction={{default: "column"}} justifyContent={{default:
"justifyContentFlexStart"}}>
<FlexItem>
<div>{"Set image for project " + project.projectId +
":"}</div>
<div>{"Name: " + name}</div>
@@ -147,92 +156,96 @@ export function ImagesPanel () {
const projectImage = getProjectImage();
return (
<PageSection className="project-tab-panel project-images-panel"
padding={{default: "padding"}}>
- <Panel>
- <PanelHeader>
- <Flex direction={{default: "row"}}
justifyContent={{default:"justifyContentFlexStart"}}>
+ <Card>
+ <CardHeader>
+ <Flex direction={{default: "row"}}
justifyContent={{default: "justifyContentFlexStart"}}>
<FlexItem>
<TextContent>
<Text component={TextVariants.h6}>Images</Text>
</TextContent>
</FlexItem>
- <FlexItem>
-
- </FlexItem>
</Flex>
- </PanelHeader>
- </Panel>
- <Table aria-label="Images" variant={"compact"} className={"table"}>
- <Thead>
- <Tr>
- <Th key='status' width={10}></Th>
- <Th key='image' width={20}>Image</Th>
- <Th key='tag' width={10}>Tag</Th>
- <Th key='actions' width={10}></Th>
- </Tr>
- </Thead>
- <Tbody>
- {images.map(image => {
- const index = image.lastIndexOf(":");
- const name = image.substring(0, index);
- const tag = image.substring(index+1);
- return <Tr key={image}>
- <Td modifier={"fitContent"} >
- {image === projectImage ? <SetIcon/> : <div/>}
- </Td>
- <Td>
- {name}
- </Td>
- <Td>
- {tag}
- </Td>
- <Td modifier={"fitContent"} isActionCell>
- <Flex direction={{default: "row"}}
justifyContent={{default: "justifyContentFlexEnd"}}
- spaceItems={{default: 'spaceItemsNone'}}>
- <FlexItem>
- <Tooltip content={"Delete image"}
position={"bottom"}>
- <Button variant={"plain"}
- icon={<DeleteIcon/>}
- isDisabled={image ===
projectImage}
- onClick={e => {
- setImageName(image);
-
setShowDeleteConfirmation(true);
- }}>
- </Button>
- </Tooltip>
- </FlexItem>
- <FlexItem>
- <Tooltip content="Set project image"
position={"bottom"}>
- <Button style={{padding: '0'}}
- variant={"plain"}
- isDisabled={image ===
projectImage}
- onClick={e => {
- setImageName(image);
-
setCommitMessage(commitMessage === '' ? new Date().toLocaleString() :
commitMessage);
-
setShowSetConfirmation(true);
- }}>
- <SetIcon/>
- </Button>
- </Tooltip>
- </FlexItem>
- </Flex>
- </Td>
- </Tr>
- })}
- {images.length === 0 &&
- <Tr>
- <Td colSpan={8}>
- <Bullseye>
- <EmptyState variant={EmptyStateVariant.sm}>
- <EmptyStateHeader titleText="No
results found" icon={<EmptyStateIcon icon={SearchIcon}/>} headingLevel="h2" />
- </EmptyState>
- </Bullseye>
- </Td>
- </Tr>
- }
- </Tbody>
- </Table>
- {showSetConfirmation && getSetConfirmation()}
- {showDeleteConfirmation && getDeleteConfirmation()}
+ </CardHeader>
+ <CardBody className='table-card-body'>
+ <Table aria-label="Images" variant={"compact"}
className={"table"}>
+ <Thead>
+ <Tr>
+ <Th key='status' width={10}></Th>
+ <Th key='image' width={20}>Image</Th>
+ <Th key='tag' width={10}>Tag</Th>
+ <Th key='actions' width={10}></Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {images.map(image => {
+ const index = image.lastIndexOf(":");
+ const name = image.substring(0, index);
+ const tag = image.substring(index + 1);
+ return <Tr key={image}>
+ <Td modifier={"fitContent"}>
+ {image === projectImage ? <SetIcon/> :
<div/>}
+ </Td>
+ <Td>
+ {name}
+ </Td>
+ <Td>
+ {tag}
+ </Td>
+ <Td modifier={"fitContent"} isActionCell>
+ <Flex direction={{default: "row"}}
+ justifyContent={{default:
"justifyContentFlexEnd"}}
+ spaceItems={{default:
'spaceItemsNone'}}>
+ <FlexItem>
+ <Tooltip content={"Delete
image"} position={"bottom"}>
+ <Button variant={"plain"}
+
className='dev-action-button'
+
icon={<DeleteIcon/>}
+ isDisabled={image
=== projectImage}
+ onClick={e => {
+
setImageName(image);
+
setShowDeleteConfirmation(true);
+ }}>
+ </Button>
+ </Tooltip>
+ </FlexItem>
+ <FlexItem>
+ <Tooltip content="Set project
image" position={"bottom"}>
+ <Button style={{padding:
'0'}}
+ variant={"plain"}
+
className='dev-action-button'
+ isDisabled={image
=== projectImage}
+ onClick={e => {
+
setImageName(image);
+
setCommitMessage(commitMessage === '' ? new Date().toLocaleString() :
commitMessage);
+
setShowSetConfirmation(true);
+ }}>
+ <SetIcon/>
+ </Button>
+ </Tooltip>
+ </FlexItem>
+ </Flex>
+ </Td>
+ </Tr>
+ })}
+ {images.length === 0 &&
+ <Tr>
+ <Td colSpan={8}>
+ <Bullseye>
+ <EmptyState
variant={EmptyStateVariant.sm}>
+ <EmptyStateHeader
titleText="No results found"
+
icon={<EmptyStateIcon icon={SearchIcon}/>}
+
headingLevel="h2"/>
+ </EmptyState>
+ </Bullseye>
+ </Td>
+ </Tr>
+ }
+ </Tbody>
+ </Table>
+ {showSetConfirmation && getSetConfirmation()}
+ {showDeleteConfirmation && getDeleteConfirmation()}
+ </CardBody>
+ </Card>
</PageSection>
)
}
