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 e441a8ad Reload in designer for #757
e441a8ad is described below
commit e441a8ad4f29e78309ad699010cdc3c8c2181013
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Fri Jun 16 16:52:01 2023 -0400
Reload in designer for #757
---
karavan-app/src/main/webui/src/Main.tsx | 4 +--
.../webui/src/designer/route/DslProperties.tsx | 17 ++++------
.../designer/route/property/DslPropertyField.tsx | 6 ++--
.../main/webui/src/projects/ProjectDevelopment.tsx | 6 ++--
.../src/main/webui/src/projects/ProjectEventBus.ts | 16 +++++----
.../src/main/webui/src/projects/ProjectLog.tsx | 14 ++++----
.../main/webui/src/projects/ProjectPageToolbar.tsx | 21 ++++++++++--
.../src/main/webui/src/projects/RunnerToolbar.tsx | 39 ++++++++++++++++++----
8 files changed, 84 insertions(+), 39 deletions(-)
diff --git a/karavan-app/src/main/webui/src/Main.tsx
b/karavan-app/src/main/webui/src/Main.tsx
index 392ea4c4..af07dc78 100644
--- a/karavan-app/src/main/webui/src/Main.tsx
+++ b/karavan-app/src/main/webui/src/Main.tsx
@@ -95,8 +95,8 @@ export class Main extends React.Component<Props, State> {
sub?: Subscription;
componentDidMount() {
- this.sub = ProjectEventBus.onSelectProject()?.subscribe((project:
Project) => {
- this.onProjectSelect(project);
+ this.sub = ProjectEventBus.onSelectProject()?.subscribe((project:
Project | undefined) => {
+ if (project) this.onProjectSelect(project);
});
KaravanApi.getAuthType((authType: string) => {
console.log("authType", authType);
diff --git a/karavan-app/src/main/webui/src/designer/route/DslProperties.tsx
b/karavan-app/src/main/webui/src/designer/route/DslProperties.tsx
index f0000bc1..41fe2d3e 100644
--- a/karavan-app/src/main/webui/src/designer/route/DslProperties.tsx
+++ b/karavan-app/src/main/webui/src/designer/route/DslProperties.tsx
@@ -89,17 +89,12 @@ export class DslProperties extends React.Component<Props,
State> {
parametersChanged = (parameter: string, value: string | number | boolean |
any, pathParameter?: boolean, newRoute?: RouteToCreate) => {
if (this.state.step && this.state.step) {
- if (pathParameter) {
- const uri = ComponentApi.buildComponentUri((this.state.step as
any).uri, parameter, value);
- this.propertyChanged("uri", uri, newRoute);
- } else {
- const clone = (CamelUtil.cloneStep(this.state.step));
- const parameters: any = {...(clone as any).parameters};
- parameters[parameter] = value;
- (clone as any).parameters = parameters;
- this.setStep(clone);
- this.props.onPropertyUpdate?.call(this, clone);
- }
+ const clone = (CamelUtil.cloneStep(this.state.step));
+ const parameters: any = {...(clone as any).parameters};
+ parameters[parameter] = value;
+ (clone as any).parameters = parameters;
+ this.setStep(clone);
+ this.props.onPropertyUpdate?.call(this, clone);
}
}
diff --git
a/karavan-app/src/main/webui/src/designer/route/property/DslPropertyField.tsx
b/karavan-app/src/main/webui/src/designer/route/property/DslPropertyField.tsx
index fde5ab5e..48f10440 100644
---
a/karavan-app/src/main/webui/src/designer/route/property/DslPropertyField.tsx
+++
b/karavan-app/src/main/webui/src/designer/route/property/DslPropertyField.tsx
@@ -66,6 +66,7 @@ import EditorIcon from
"@patternfly/react-icons/dist/js/icons/code-icon";
import {TemplateApi} from "karavan-core/lib/api/TemplateApi";
import {ModalEditor} from "./ModalEditor";
import {KaravanInstance} from "../../KaravanDesigner";
+import {ComponentApi} from "karavan-core/lib/api/ComponentApi";
interface Props {
property: PropertyMeta,
@@ -599,14 +600,13 @@ export class DslPropertyField extends
React.Component<Props, State> {
return (
<div className="parameters">
{properties.map(kp => {
- // console.log(kp);
- //
console.log(CamelDefinitionApiExt.getParametersValue(this.props.element,
kp.name, kp.kind === 'path'));
+ const value =
CamelDefinitionApiExt.getParametersValue(this.props.element, kp.name, kp.kind
=== 'path');
return (<ComponentParameterField
key={kp.name}
property={kp}
element={this.props.element}
integration={this.props.integration}
-
value={CamelDefinitionApiExt.getParametersValue(this.props.element, kp.name,
kp.kind === 'path')}
+ value={value}
onParameterChange={this.props.onParameterChange}
/>)
})}
diff --git a/karavan-app/src/main/webui/src/projects/ProjectDevelopment.tsx
b/karavan-app/src/main/webui/src/projects/ProjectDevelopment.tsx
index 1e19cc6d..db13e68b 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectDevelopment.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectDevelopment.tsx
@@ -1,7 +1,7 @@
import React, {useEffect, useRef, useState} from 'react';
import {
Card,
- CardBody, Flex, FlexItem, Divider, Tab, Tabs, CardFooter
+ CardBody, Flex, FlexItem, Divider
} from '@patternfly/react-core';
import '../designer/karavan.css';
import {PodStatus, Project} from "./ProjectModels";
@@ -38,7 +38,7 @@ export const ProjectDevelopment = (props: Props) => {
useEffect(() => {
previousValue.current = podStatus;
const sub1 = ProjectEventBus.onShowTrace()?.subscribe((result) => {
- setShowTrace(result.show);
+ if (result) setShowTrace(result.show);
});
const sub2 = ProjectEventBus.onRefreshTrace()?.subscribe((result) => {
setRefreshTrace(result);
@@ -128,7 +128,7 @@ export const ProjectDevelopment = (props: Props) => {
</FlexItem>}
<Divider orientation={{default: "vertical"}}/>
<FlexItem>
- <RunnerToolbar project={project} config={config}
showConsole={showConsole()}/>
+ <RunnerToolbar project={project} config={config}
showConsole={showConsole()} reloadOnly={false}/>
</FlexItem>
</Flex>
</CardBody>
diff --git a/karavan-app/src/main/webui/src/projects/ProjectEventBus.ts
b/karavan-app/src/main/webui/src/projects/ProjectEventBus.ts
index f2d8397c..b98fbd20 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectEventBus.ts
+++ b/karavan-app/src/main/webui/src/projects/ProjectEventBus.ts
@@ -14,14 +14,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {Subject} from 'rxjs';
+import {BehaviorSubject, Subject} from 'rxjs';
import {Project} from "./ProjectModels";
-const currentProject = new Subject<Project>();
-const currentFile = new Subject<string>();
-const showLog = new Subject<ShowLogCommand>();
-const showTrace = new Subject<ShowTraceCommand>();
-const refreshTrace = new Subject<boolean>();
+const currentProject = new BehaviorSubject<Project | undefined>(undefined);
+const currentRunner = new BehaviorSubject<string | undefined>(undefined);
+const currentFile = new BehaviorSubject<string | undefined>(undefined);
+const showLog = new BehaviorSubject<ShowLogCommand | undefined>(undefined);
+const showTrace = new BehaviorSubject<ShowTraceCommand | undefined>(undefined);
+const refreshTrace = new BehaviorSubject<boolean>(false);
export class ShowLogCommand {
type: 'container' | 'pipeline'
@@ -51,6 +52,9 @@ export const ProjectEventBus = {
selectProject: (project: Project) => currentProject.next(project),
onSelectProject: () => currentProject.asObservable(),
+ setCurrentRunner: (name: string | undefined) => currentRunner.next(name),
+ onCurrentRunner: () => currentRunner.asObservable(),
+
selectProjectFile: (fileName: string) => currentFile.next(fileName),
onSelectProjectFile: () => currentFile.asObservable(),
diff --git a/karavan-app/src/main/webui/src/projects/ProjectLog.tsx
b/karavan-app/src/main/webui/src/projects/ProjectLog.tsx
index 3bfacd36..dea7aaad 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectLog.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectLog.tsx
@@ -43,12 +43,14 @@ export class ProjectLog extends React.Component<Props,
State> {
componentDidMount() {
this.eventSource?.close();
- this.sub = ProjectEventBus.onShowLog()?.subscribe((log:
ShowLogCommand) => {
- this.setState({showLog: log.show, log: log, data: ''});
- if (log.show) {
- this.showLogs(log.type, log.name, log.environment);
- } else {
- this.eventSource?.close();
+ this.sub = ProjectEventBus.onShowLog()?.subscribe((log: ShowLogCommand
| undefined) => {
+ if (log) {
+ this.setState({showLog: log.show, log: log, data: ''});
+ if (log.show) {
+ this.showLogs(log.type, log.name, log.environment);
+ } else {
+ this.eventSource?.close();
+ }
}
});
}
diff --git a/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
b/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
index 6d71d911..cb498579 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectPageToolbar.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
import {
Button,
Checkbox,
@@ -28,6 +28,9 @@ import PlusIcon from
"@patternfly/react-icons/dist/esm/icons/plus-icon";
import {CamelDefinitionYaml} from "karavan-core/lib/api/CamelDefinitionYaml";
import PushIcon from "@patternfly/react-icons/dist/esm/icons/code-branch-icon";
import {KaravanApi} from "../api/KaravanApi";
+import ReloadIcon from "@patternfly/react-icons/dist/esm/icons/bolt-icon";
+import {RunnerToolbar} from "./RunnerToolbar";
+import {ProjectEventBus} from "./ProjectEventBus";
interface Props {
project: Project,
@@ -53,6 +56,16 @@ export const ProjectPageToolbar = (props: Props) => {
const [isPushing, setIsPushing] = useState(false);
const [commitMessageIsOpen, setCommitMessageIsOpen] = useState(false);
const [commitMessage, setCommitMessage] = useState('');
+ const [currentRunner, setCurrentRunner] = useState('');
+
+ useEffect(() => {
+ const sub1 = ProjectEventBus.onCurrentRunner()?.subscribe((result) => {
+ setCurrentRunner(result || '');
+ });
+ return () => {
+ sub1.unsubscribe();
+ };
+ });
function push () {
setIsPushing(true);
@@ -154,7 +167,7 @@ export const ProjectPageToolbar = (props: Props) => {
}
function getProjectToolbar() {
- const {file,needCommit, mode, editAdvancedProperties,
+ const {file,needCommit, mode, editAdvancedProperties, project, config,
addProperty, setEditAdvancedProperties, download, downloadImage,
setCreateModalOpen, setUploadModalOpen} = props;
const isFile = file !== undefined;
const isYaml = file !== undefined && file.name.endsWith("yaml");
@@ -220,6 +233,10 @@ export const ProjectPageToolbar = (props: Props) => {
<Button isSmall variant="secondary"
icon={<UploadIcon/>}
onClick={e =>
setUploadModalOpen()}>Upload</Button>
</FlexItem>}
+
+ {isYaml && currentRunner === project.name && <FlexItem>
+ <RunnerToolbar project={project} config={config}
showConsole={false} reloadOnly={true} />
+ </FlexItem>}
</Flex>
</ToolbarContent>
</Toolbar>
diff --git a/karavan-app/src/main/webui/src/projects/RunnerToolbar.tsx
b/karavan-app/src/main/webui/src/projects/RunnerToolbar.tsx
index f552aa33..9b124372 100644
--- a/karavan-app/src/main/webui/src/projects/RunnerToolbar.tsx
+++ b/karavan-app/src/main/webui/src/projects/RunnerToolbar.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
import {
Button, Label, Switch, Tab, Tabs,
Tooltip,
@@ -17,7 +17,8 @@ import {ProjectEventBus} from "./ProjectEventBus";
interface Props {
project: Project,
config: any,
- showConsole: boolean
+ showConsole: boolean,
+ reloadOnly: boolean
}
export const RunnerToolbar = (props: Props) => {
@@ -29,16 +30,27 @@ export const RunnerToolbar = (props: Props) => {
const [isReloadingPod, setIsReloadingPod] = useState(false);
const [isShowingTrace, setIsShowingTrace] = useState(false);
+ useEffect(() => {
+ const sub1 = ProjectEventBus.onCurrentRunner()?.subscribe((result) => {
+ setJbangIsRunning(result === props.project.name);
+ });
+ return () => {
+ sub1.unsubscribe();
+ };
+ });
+
function jbangRun() {
setJbangIsRunning(true);
KaravanApi.runProject(props.project, res => {
if (res.status === 200 || res.status === 201) {
+ ProjectEventBus.setCurrentRunner(props.project.name);
setJbangIsRunning(false);
setPodName(res.data);
ProjectEventBus.showLog('container', res.data,
props.config.environment)
} else {
// Todo notification
setJbangIsRunning(false);
+ ProjectEventBus.setCurrentRunner(undefined);
}
});
}
@@ -56,6 +68,7 @@ export const RunnerToolbar = (props: Props) => {
}
function deleteRunner() {
+ ProjectEventBus.setCurrentRunner(undefined);
setIsDeletingPod(true);
KaravanApi.deleteRunner(podName, false, res => {
if (res.status === 202) {
@@ -74,7 +87,7 @@ export const RunnerToolbar = (props: Props) => {
return (
<div className="runner-toolbar">
- {!props.showConsole &&
+ {!props.showConsole && !props.reloadOnly &&
<div className="row">
<Tooltip content="Run in development mode"
position={TooltipPosition.left}>
<Button isLoading={isJbangRunning ? true :
undefined}
@@ -87,6 +100,20 @@ export const RunnerToolbar = (props: Props) => {
</Button>
</Tooltip>
</div>}
+ {props.reloadOnly &&
+ <div className="row">
+ <Tooltip content="Reload"
position={TooltipPosition.left}>
+ <Button isLoading={isReloadingPod ? true :
undefined}
+ isSmall
+ variant={"primary"}
+ className="project-button"
+ icon={!isReloadingPod ? <ReloadIcon/> :
<div></div>}
+ onClick={() => reloadRunner()}>
+ {isReloadingPod ? "..." : "Reload"}
+ </Button>
+ </Tooltip>
+ </div>
+ }
{props.showConsole && <>
<div className="row">
<Tooltip content="Reload"
position={TooltipPosition.left}>
@@ -101,7 +128,7 @@ export const RunnerToolbar = (props: Props) => {
</Tooltip>
</div>
<div className="row">
- <Tooltip content="Show trace"
position={TooltipPosition.left}>
+ <Tooltip content={isShowingTrace ? "Show runtime" :
"Show trace"} position={TooltipPosition.left}>
<Button isSmall
variant={"secondary"}
className="project-button"
@@ -111,14 +138,14 @@ export const RunnerToolbar = (props: Props) => {
</Button>
</Tooltip>
</div>
- <Tooltip content="Delete runner"
position={TooltipPosition.left}>
+ <Tooltip content="Stop runner"
position={TooltipPosition.left}>
<Button isLoading={isDeletingPod ? true : undefined}
isSmall
variant={"secondary"}
className="project-button"
icon={!isRunning ? <DeleteIcon/> : <div></div>}
onClick={() => deleteRunner()}>
- {isDeletingPod ? "..." : "Delete"}
+ {isDeletingPod ? "..." : "Stop"}
</Button>
</Tooltip>
</>}
