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/05/03 02:33:05 UTC
[camel-karavan] 02/04: Project logs redesign
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 ca01cbbf7eb055101489d8e905a539357b32be2e
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Tue May 2 16:50:31 2023 -0400
Project logs redesign
---
.../camel/karavan/service/StatusService.java | 4 +-
karavan-app/src/main/webui/src/index.css | 10 +-
.../src/main/webui/src/projects/ProjectLog.tsx | 111 +++++----------------
.../main/webui/src/projects/ProjectOperations.tsx | 3 +-
.../src/main/webui/src/projects/ProjectPage.tsx | 17 ----
.../src/main/webui/src/projects/ProjectStatus.tsx | 5 +-
6 files changed, 38 insertions(+), 112 deletions(-)
diff --git a/karavan-app/src/main/java/org/apache/camel/karavan/service/StatusService.java b/karavan-app/src/main/java/org/apache/camel/karavan/service/StatusService.java
index c59d1440..a993437d 100644
--- a/karavan-app/src/main/java/org/apache/camel/karavan/service/StatusService.java
+++ b/karavan-app/src/main/java/org/apache/camel/karavan/service/StatusService.java
@@ -82,7 +82,7 @@ public class StatusService {
return webClient;
}
- @ConsumeEvent(value = CMD_COLLECT_PROJECT_STATUS, blocking = true, ordered = true)
+// @ConsumeEvent(value = CMD_COLLECT_PROJECT_STATUS, blocking = true, ordered = true)
public void collectProjectStatus(JsonObject data) {
String projectId = data.getString("projectId");
String env = data.getString("env");
@@ -98,7 +98,7 @@ public class StatusService {
}
}
- @ConsumeEvent(value = CMD_COLLECT_ALL_STATUSES, blocking = true, ordered = true)
+// @ConsumeEvent(value = CMD_COLLECT_ALL_STATUSES, blocking = true, ordered = true)
public void collectAllStatuses(String data) {
String all = "ALL_PROJECTS";
if ((System.currentTimeMillis() - lastCollect.getOrDefault(all, 0L)) > threshold) {
diff --git a/karavan-app/src/main/webui/src/index.css b/karavan-app/src/main/webui/src/index.css
index f947f243..8adb5fa9 100644
--- a/karavan-app/src/main/webui/src/index.css
+++ b/karavan-app/src/main/webui/src/index.css
@@ -182,9 +182,15 @@
height: 100% !important;
}
-
.karavan .project-page .project-log .pf-c-log-viewer__text {
- font-size: 11px;
+ font-size: 12px;
+}
+
+.karavan .project-page .project-log .log-name {
+ --pf-c-label__content--before--BorderWidth: 0;
+ --pf-c-label--BackgroundColor: transparent;
+ margin-right: auto;
+ font-size: 12px;
}
.karavan .project-page .project-button {
diff --git a/karavan-app/src/main/webui/src/projects/ProjectLog.tsx b/karavan-app/src/main/webui/src/projects/ProjectLog.tsx
index 1646663d..3c706444 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectLog.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectLog.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import {Button, Checkbox, PageSection, Tooltip, TooltipPosition} from '@patternfly/react-core';
+import {Button, Checkbox, Label, PageSection, Text, Tooltip, TooltipPosition} from '@patternfly/react-core';
import '../designer/karavan.css';
import CloseIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
@@ -9,16 +9,20 @@ import {LogViewer} from '@patternfly/react-log-viewer';
import {Subscription} from "rxjs";
import {ProjectEventBus, ShowLogCommand} from "./ProjectEventBus";
import {findDOMNode} from "react-dom";
+import {ProjectFile} from "./ProjectModels";
+import {KaravanApi} from "../api/KaravanApi";
interface Props {
}
interface State {
+ log?: ShowLogCommand,
showLog: boolean,
height?: number | string,
logViewerRef: any,
isTextWrapped: boolean
+ data: string[]
}
export class ProjectLog extends React.Component<Props, State> {
@@ -27,14 +31,17 @@ export class ProjectLog extends React.Component<Props, State> {
showLog: false,
height: "30%",
logViewerRef: React.createRef(),
- isTextWrapped: false
+ isTextWrapped: false,
+ data: []
}
sub?: Subscription;
componentDidMount() {
this.sub = ProjectEventBus.onShowLog()?.subscribe((log: ShowLogCommand) => {
- this.setState({showLog: true});
+ this.setState({showLog: true, log: log});
+ console.log(log)
+ this.showLogs(log.type, log.name, log.environment);
});
}
@@ -42,91 +49,24 @@ export class ProjectLog extends React.Component<Props, State> {
this.sub?.unsubscribe();
}
- componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- if (this.state.height === "100%" && prevState.height !== "100%") {
- const element = findDOMNode(this.state.logViewerRef.current)
- console.log("change", element)
- console.log("change", this.state.logViewerRef.current)
+ showLogs = (type: 'container' | 'pipeline', name: string, environment: string) => {
+ if (type === 'pipeline') {
+ KaravanApi.getPipelineLog(environment, name, (res: any) => {
+ if (Array.isArray(res) && Array.from(res).length > 0)
+ this.setState({data: res.at(0).log});
+ });
+ } else if (type === 'container') {
+ KaravanApi.getContainerLog(environment, name, (res: any) => {
+ this.setState({data: res});
+ });
}
- }
- code = "apiVersion: helm.openshift.io/v1beta1/\n" +
- "kind: HelmChartRepository\n" +
- "metadata:\n" +
- "name: azure-sample-repo0oooo00ooo\n" +
- "spec:\n" +
- "connectionConfig:\n" +
- "url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docsapiVersion: helm.openshift.io/v1beta1/\n" +
- "kind: HelmChartRepository\n" +
- "metadata:\n" +
- "name: azure-sample-repo0oooo00ooo\n" +
- "spec:\n" +
- "connectionConfig:\n" +
- "url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docsapiVersion: helm.openshift.io/v1beta1/\n" +
- "kind: HelmChartRepository\n" +
- "metadata:\n" +
- "name: azure-sample-repo0oooo00ooo\n" +
- "spec:\n" +
- "connectionConfig:\n" +
- "url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docsapiVersion: helm.openshift.io/v1beta1/\n" +
- "kind: HelmChartRepository\n" +
- "metadata:\n" +
- "name: azure-sample-repo0oooo00ooo\n" +
- "spec:\n" +
- "connectionConfig:\n" +
- "url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docsapiVersion: helm.openshift.io/v1beta1/\n" +
- "kind: HelmChartRepository\n" +
- "metadata:\n" +
- "name: azure-sample-repo0oooo00ooo\n" +
- "spec:\n" +
- "connectionConfig:\n" +
- "url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docsapiVersion: helm.openshift.io/v1beta1/\n" +
- "kind: HelmChartRepository\n" +
- "metadata:\n" +
- "name: azure-sample-repo0oooo00ooo\n" +
- "spec:\n" +
- "connectionConfig:\n" +
- "url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docsapiVersion: helm.openshift.io/v1beta1/\n" +
- "kind: HelmChartRepository\n" +
- "metadata:\n" +
- "name: azure-sample-repo0oooo00ooo\n" +
- "spec:\n" +
- "connectionConfig:\n" +
- "url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docsapiVersion: helm.openshift.io/v1beta1/\n" +
- "kind: HelmChartRepository\n" +
- "metadata:\n" +
- "name: azure-sample-repo0oooo00ooo\n" +
- "spec:\n" +
- "connectionConfig:\n" +
- "url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docsapiVersion: helm.openshift.io/v1beta1/\n" +
- "kind: HelmChartRepository\n" +
- "metadata:\n" +
- "name: azure-sample-repo0oooo00ooo\n" +
- "spec:\n" +
- "connectionConfig:\n" +
- "url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docsapiVersion: helm.openshift.io/v1beta1/\n" +
- "kind: HelmChartRepository\n" +
- "metadata:\n" +
- "name: azure-sample-repo0oooo00ooo\n" +
- "spec:\n" +
- "connectionConfig:\n" +
- "url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docsapiVersion: helm.openshift.io/v1beta1/\n" +
- "kind: HelmChartRepository\n" +
- "metadata:\n" +
- "name: azure-sample-repo0oooo00ooo\n" +
- "spec:\n" +
- "connectionConfig:\n" +
- "url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docsapiVersion: helm.openshift.io/v1beta1/\n" +
- "kind: HelmChartRepository\n" +
- "metadata:\n" +
- "name: azure-sample-repo0oooo00ooo\n" +
- "spec:\n" +
- "connectionConfig:\n" +
- "url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs"
+ }
getButtons() {
- const {height, isTextWrapped, logViewerRef} = this.state;
+ const {height, isTextWrapped, logViewerRef, log} = this.state;
return (<div className="buttons">
+ <Label className="log-name">{log?.type + ": " + log?.name}</Label>
<Checkbox label="Wrap text" aria-label="wrap text checkbox" isChecked={isTextWrapped} id="wrap-text-checkbox"
onChange={checked => this.setState({isTextWrapped: checked})} />
<Tooltip content={"Scroll to bottom"} position={TooltipPosition.bottom}>
@@ -143,8 +83,7 @@ export class ProjectLog extends React.Component<Props, State> {
}
render() {
- const {showLog, height, logViewerRef, isTextWrapped} = this.state;
- console.log(this.state)
+ const {showLog, height, logViewerRef, isTextWrapped, data} = this.state;
return (showLog ?
<PageSection className="project-log" padding={{default: "noPadding"}} style={{height: height}}>
<LogViewer
@@ -154,7 +93,7 @@ export class ProjectLog extends React.Component<Props, State> {
loadingContent={"Loading..."}
header={this.getButtons()}
height={"100vh"}
- data={this.code.concat(this.code).concat(this.code).concat(this.code)}
+ data={data}
theme={'dark'}/>
</PageSection>
: <></>);
diff --git a/karavan-app/src/main/webui/src/projects/ProjectOperations.tsx b/karavan-app/src/main/webui/src/projects/ProjectOperations.tsx
index bdba3c49..38c68857 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectOperations.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectOperations.tsx
@@ -24,7 +24,8 @@ export class ProjectOperations extends React.Component<Props, State> {
const {project, config,} = this.props;
return (
<div className="project-operations">
- {["dev", "test", "prod"].map(env =>
+ {/*{["dev", "test", "prod"].map(env =>*/}
+ {["dev"].map(env =>
<ProjectStatus key={env} project={project} config={config} env={env}/>
)}
</div>
diff --git a/karavan-app/src/main/webui/src/projects/ProjectPage.tsx b/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
index bc376c72..4ae933dd 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectPage.tsx
@@ -300,23 +300,6 @@ export class ProjectPage extends React.Component<Props, State> {
)
}
- showLogs = (type: 'container' | 'pipeline', name: string, environment: string) => {
- const filename = name + ".log";
- const code = '';
- this.setState({file: new ProjectFile(filename, this.props.project.projectId, code, Date.now())});
- if (type === 'pipeline') {
- KaravanApi.getPipelineLog(environment, name, (res: any) => {
- if (Array.isArray(res) && Array.from(res).length > 0)
- this.setState({file: new ProjectFile(filename, this.props.project.projectId, res.at(0).log, Date.now())});
- });
- } else if (type === 'container') {
- KaravanApi.getContainerLog(environment, name, (res: any) => {
- this.setState({file: new ProjectFile(filename, this.props.project.projectId, res, Date.now())});
- });
- }
-
- }
-
deleteEntity = (type: 'pod' | 'deployment' | 'pipelinerun', name: string, environment: string) => {
switch (type) {
case "deployment":
diff --git a/karavan-app/src/main/webui/src/projects/ProjectStatus.tsx b/karavan-app/src/main/webui/src/projects/ProjectStatus.tsx
index a5850a9e..a7c35ff2 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectStatus.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectStatus.tsx
@@ -21,7 +21,6 @@ interface Props {
project: Project,
config: any,
env: string,
- // showLog: (type: 'container' | 'pipeline', name: string, environment: string) => void
}
interface State {
@@ -218,8 +217,7 @@ export class ProjectStatus extends React.Component<Props, State> {
<Tooltip key={pod.name} content={running ? "Running" : pod.phase}>
<Label icon={running ? <UpIcon/> : <DownIcon/>} color={running ? "green" : "red"}>
<Button variant="link"
- // onClick={e => this.props.showLog?.call(this, 'container', pod.name, env)}>
- onClick={e => {}}>
+ onClick={e => ProjectEventBus.showLog('container', pod.name, env)}>
{pod.name}
</Button>
<Tooltip content={"Delete Pod"}>
@@ -254,7 +252,6 @@ export class ProjectStatus extends React.Component<Props, State> {
showPipelineLog(pipeline: string, env: string) {
if (pipeline) {
- // this.props.showLog?.call(this, 'pipeline', pipeline, env);
ProjectEventBus.showLog('pipeline', pipeline, env);
}
}