Skip to content

Commit

Permalink
Fix for vscode
Browse files Browse the repository at this point in the history
  • Loading branch information
mgubaidullin committed Jan 13, 2025
1 parent d9ef58b commit 0f6a662
Showing 8 changed files with 669 additions and 124 deletions.
658 changes: 544 additions & 114 deletions karavan-vscode/package-lock.json

Large diffs are not rendered by default.

8 changes: 5 additions & 3 deletions karavan-vscode/package.json
Original file line number Diff line number Diff line change
@@ -738,9 +738,11 @@
},
"dependencies": {
"@monaco-editor/react": "^4.6.0",
"@patternfly/patternfly": "5.4.0",
"@patternfly/react-core": "5.4.0",
"@patternfly/react-table": "5.4.0",
"@patternfly/patternfly": "^5.4.2",
"@patternfly/react-charts": "7.4.5",
"@patternfly/react-core": "^5.4.8",
"@patternfly/react-log-viewer": "^5.3.0",
"@patternfly/react-table": "^5.4.8",
"@patternfly/react-topology": "5.4.0",
"@types/js-yaml": "4.0.9",
"@types/uuid": "10.0.0",
10 changes: 8 additions & 2 deletions karavan-vscode/webview/topology/CustomGroup.tsx
Original file line number Diff line number Diff line change
@@ -18,11 +18,17 @@
import * as React from 'react';

import './topology.css';
import {DefaultGroup, observer} from '@patternfly/react-topology';
import {DefaultGroup, LabelPosition, observer} from '@patternfly/react-topology';

const CustomGroup: React.FC<any> = observer(({ element, ...rest }) => {
return (
<DefaultGroup element={element} className={"topology-group"} {...rest}>
<DefaultGroup
element={element}
className={"topology-group"}
showLabel={false}
showLabelOnHover={true}
{...rest}
>
</DefaultGroup>
)
})
16 changes: 14 additions & 2 deletions karavan-vscode/webview/topology/CustomNode.tsx
Original file line number Diff line number Diff line change
@@ -25,6 +25,10 @@ import './topology.css';
import {RouteDefinition} from "core/model/CamelDefinition";
import {AutoStartupIcon, ErrorHandlerIcon} from "../designer/icons/OtherIcons";

export const COLOR_ORANGE = '#ef9234';
export const COLOR_BLUE = '#2b9af3';
export const COLOR_GREEN = '#6ec664';

function getIcon(data: any) {
if (['route', 'rest', 'routeConfiguration'].includes(data.icon)) {
return (
@@ -67,16 +71,24 @@ function getAttachments(data: any) {
const CustomNode: React.FC<any> = observer(({element, ...rest}) => {

const data = element.getData();
const badge: string = data.badge === 'REST' ? data.badge : data.badge?.substring(0, 1).toUpperCase();
const badge: string = ['API', 'RT'].includes(data.badge) ? data.badge : data.badge?.substring(0, 1).toUpperCase();
let badgeColor = COLOR_ORANGE;
if (badge === 'C') {
badgeColor = COLOR_BLUE;
} else if (badge === 'K') {
badgeColor = COLOR_GREEN;
}
if (element.getLabel()?.length > 30) {
element.setLabel(element.getLabel()?.substring(0, 30) + '...');
}

return (
<DefaultNode
badge={badge}
badgeColor={badgeColor}
badgeBorderColor={badgeColor}
showStatusDecorator
className="common-node"
className={"common-node common-node-" + badge}
scaleLabel={false}
element={element}
attachments={getAttachments(data)}
5 changes: 4 additions & 1 deletion karavan-vscode/webview/topology/TopologyApi.tsx
Original file line number Diff line number Diff line change
@@ -80,11 +80,14 @@ export function getRoutes(tins: TopologyRouteNode[]): NodeModel[] {
status: NodeStatus.default,
data: {
isAlternate: false,
badge: tin.templateId !== undefined ? 'RT' : 'R',
type: 'route',
icon: 'route',
step: tin.route,
routeId: tin.routeId,
fileName: tin.fileName,
templateId: tin.templateId,
templateTitle: tin.templateTitle,
}
}
return node;
@@ -198,7 +201,7 @@ export function getRestNodes(tins: TopologyRestNode[]): NodeModel[] {
status: NodeStatus.default,
data: {
isAlternate: false,
badge: 'REST',
badge: 'API',
icon: 'rest',
type: 'rest',
step: tin.rest,
44 changes: 44 additions & 0 deletions karavan-vscode/webview/topology/TopologyLegend.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import * as React from 'react';
import './topology.css';
import {
Badge,
Card,
CardBody,
CardTitle,
Label,
} from "@patternfly/react-core";
import {COLOR_BLUE, COLOR_GREEN, COLOR_ORANGE} from "./CustomNode";

export function TopologyLegend () {


return (
<Card isCompact isFlat isRounded className="topology-legend-card">
<CardTitle>Legend</CardTitle>
<CardBody className='card-body'>
<Label icon={<Badge style={{backgroundColor: COLOR_ORANGE, padding: 0}}>API</Badge>}>REST API</Label>
<Label icon={<Badge style={{backgroundColor: COLOR_ORANGE, padding: 0}}>R</Badge>}>Route</Label>
<Label icon={<Badge style={{backgroundColor: COLOR_ORANGE, padding: 0}}>RT</Badge>}>Route Template</Label>
<Label icon={<Badge style={{backgroundColor: COLOR_BLUE, padding: 0}}>C</Badge>}>Component</Label>
<Label icon={<Badge style={{backgroundColor: COLOR_GREEN, padding: 0}}>K</Badge>}>Kamelet</Label>
</CardBody>
</Card>
)
}
2 changes: 2 additions & 0 deletions karavan-vscode/webview/topology/TopologyTab.tsx
Original file line number Diff line number Diff line change
@@ -36,6 +36,7 @@ import {TopologyPropertiesPanel} from "./TopologyPropertiesPanel";
import {TopologyToolbar} from "./TopologyToolbar";
import {useDesignerStore} from "../designer/DesignerStore";
import {IntegrationFile} from "core/model/IntegrationDefinition";
import {TopologyLegend} from "./TopologyLegend";

interface Props {
files: IntegrationFile[],
@@ -160,6 +161,7 @@ export function TopologyTab(props: Props) {
>
<VisualizationProvider controller={controller}>
<VisualizationSurface state={{selectedIds}}/>
<TopologyLegend/>
</VisualizationProvider>
</TopologyView>
);
50 changes: 48 additions & 2 deletions karavan-vscode/webview/topology/topology.css
Original file line number Diff line number Diff line change
@@ -61,6 +61,10 @@
width: 32px;
}

.karavan .topology-panel .common-node-R {

}

.karavan .topology-panel .pf-v5-c-panel__header {
padding-bottom: 0;
}
@@ -117,6 +121,48 @@
fill: var(--pf-topology__node__label__text--Fill);
}

.karavan .topology-group .pf-topology__group__label {
display: none;
.karavan .pf-topology__node__label__badge > text {
fill: white;
}

.karavan .topology-panel .common-node-RT .pf-topology__node__background {
outline: 1px dashed grey;
outline-offset: 2px;
border-radius: 9px;
}

.karavan .topology-panel .topology-legend-card {
position: absolute;
bottom: 6px;
right: 6px;
}

.karavan .topology-panel .topology-legend-card .pf-v5-c-card__title {
padding: 5px;
display: flex;
justify-content: center;
}

.karavan .topology-panel .topology-legend-card .card-body {
display: flex;
flex-direction: column;
gap: 5px;
padding: 0px 10px 10px 10px;
}

.karavan .topology-panel .topology-legend-card .pf-v5-c-label {
background-color: white;
}

.karavan .topology-panel .topology-legend-card .pf-v5-c-label__content::before {
border-radius: 4px;
}

.karavan .topology-panel .topology-legend-card .pf-v5-c-badge {
min-width: 32px;
font-weight: normal;
}

.pf-topology__group__label .pf-topology__node__label__background {
fill: grey;
}

0 comments on commit 0f6a662

Please sign in to comment.