This is an automated email from the ASF dual-hosted git repository. marat pushed a commit to branch feature-836 in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit a0300a6812cfcabf70093ca2fe17f37bf2873105 Author: Marat Gubaidullin <ma...@talismancloud.io> AuthorDate: Fri Aug 25 17:53:45 2023 -0400 Fix #862 --- karavan-core/src/core/api/CamelDefinitionYaml.ts | 2 +- karavan-core/src/core/api/CamelDisplayUtil.ts | 8 +- .../src/core/model/IntegrationDefinition.ts | 2 +- karavan-designer/src/designer/KaravanDesigner.tsx | 33 ++- karavan-designer/src/designer/KaravanStore.ts | 12 +- karavan-designer/src/designer/karavan.css | 37 +++- karavan-designer/src/designer/route/DslElement.tsx | 56 +++-- .../src/designer/route/RouteDesigner.tsx | 4 +- .../designer/route/property/DslPropertyField.tsx | 19 +- .../designer/route/property/ExpressionField.tsx | 1 - .../src/designer/route/useRouteDesignerHook.tsx | 6 +- .../src/designer/utils/KaravanIcons.tsx | 229 ++++++++++++++------- 12 files changed, 272 insertions(+), 137 deletions(-) diff --git a/karavan-core/src/core/api/CamelDefinitionYaml.ts b/karavan-core/src/core/api/CamelDefinitionYaml.ts index 073b1a5f..ba086ef7 100644 --- a/karavan-core/src/core/api/CamelDefinitionYaml.ts +++ b/karavan-core/src/core/api/CamelDefinitionYaml.ts @@ -68,7 +68,7 @@ export class CamelDefinitionYaml { } delete object.uuid; - delete object.show; + delete object.showChildren; for (const [key, value] of Object.entries(object) as [string, any][]) { if (value instanceof CamelElement || (typeof value === 'object' && value?.dslName)) { diff --git a/karavan-core/src/core/api/CamelDisplayUtil.ts b/karavan-core/src/core/api/CamelDisplayUtil.ts index 887099ef..eee33ccb 100644 --- a/karavan-core/src/core/api/CamelDisplayUtil.ts +++ b/karavan-core/src/core/api/CamelDisplayUtil.ts @@ -75,13 +75,9 @@ export class CamelDisplayUtil { return clone; }; - static setElementVisibility = ( - step: CamelElement, - showChildren: boolean, - expandedUuids: string[], - ): CamelElement => { + static setElementVisibility = (step: CamelElement, showChildren: boolean, expandedUuids: string[]): CamelElement => { const result = CamelDefinitionApi.createStep(step.dslName, step); - result.show = showChildren; + result.showChildren = showChildren; if (result.dslName === 'StepDefinition') { showChildren = expandedUuids.includes(result.uuid); } diff --git a/karavan-core/src/core/model/IntegrationDefinition.ts b/karavan-core/src/core/model/IntegrationDefinition.ts index 1d2519b3..3af3c6c5 100644 --- a/karavan-core/src/core/model/IntegrationDefinition.ts +++ b/karavan-core/src/core/model/IntegrationDefinition.ts @@ -52,7 +52,7 @@ export class Integration { export class CamelElement { uuid: string = ''; dslName: string = ''; - show: boolean = true; + showChildren: boolean = true; constructor(dslName: string) { this.uuid = uuidv4(); diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx b/karavan-designer/src/designer/KaravanDesigner.tsx index bb8a8538..f9f7d731 100644 --- a/karavan-designer/src/designer/KaravanDesigner.tsx +++ b/karavan-designer/src/designer/KaravanDesigner.tsx @@ -17,7 +17,19 @@ import React, {useEffect, useState} from 'react'; import { Badge, - PageSection, PageSectionVariants, Tab, Tabs, TabTitleIcon, TabTitleText, Tooltip, + Button, + Checkbox, + PageSection, + PageSectionVariants, + Switch, + Tab, + Tabs, + TabTitleIcon, + TabTitleText, ToggleGroup, ToggleGroupItem, + Toolbar, + ToolbarContent, + ToolbarItem, + Tooltip, } from '@patternfly/react-core'; import './karavan.css'; import {RouteDesigner} from "./route/RouteDesigner"; @@ -30,6 +42,7 @@ import {RestDesigner} from "./rest/RestDesigner"; import {useDesignerStore, useIntegrationStore} from "./KaravanStore"; import {shallow} from "zustand/shallow"; import {getDesignerIcon} from "./utils/KaravanIcons"; +import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil"; interface Props { onSave: (filename: string, yaml: string, propertyOnly: boolean) => void @@ -38,6 +51,7 @@ interface Props { filename: string yaml: string dark: boolean + hideLogDSL?: boolean tab?: string } @@ -57,12 +71,14 @@ export class KaravanInstance { export const KaravanDesigner = (props: Props) => { const [tab, setTab] = useState<string>('routes'); - const [propertyOnly, setDark] = useDesignerStore((state) => [state.propertyOnly, state.setDark], shallow ) - const [integration, setIntegration] = useIntegrationStore((state) => [state.integration, state.setIntegration], shallow ) + const [propertyOnly, setDark, hideLogDSL, setHideLogDSL] = useDesignerStore((s) => + [s.propertyOnly, s.setDark, s.hideLogDSL, s.setHideLogDSL], shallow ) + const [integration, setIntegration] = useIntegrationStore((s) => [s.integration, s.setIntegration], shallow ) useEffect(() => { setIntegration(makeIntegration(props.yaml, props.filename)); setDark(props.dark); + setHideLogDSL(props.hideLogDSL === true); }, []); function makeIntegration (yaml: string, filename: string): Integration { @@ -111,12 +127,21 @@ export const KaravanDesigner = (props: Props) => { return ( <PageSection variant={props.dark ? PageSectionVariants.darker : PageSectionVariants.light} className="page" isFilled padding={{default: 'noPadding'}}> - <div> + <div className={"main-tabs-wrapper"}> <Tabs className="main-tabs" activeKey={tab} onSelect={(event, tabIndex) => setTab(tabIndex.toString())} style={{width: "100%"}}> <Tab eventKey='routes' title={getTab("Routes", "Integration flows", "routes")}></Tab> <Tab eventKey='rest' title={getTab("REST", "REST services", "rest")}></Tab> <Tab eventKey='beans' title={getTab("Beans", "Beans Configuration", "beans")}></Tab> </Tabs> + <Switch + label={"Hide Log"} + isReversed + isChecked={hideLogDSL} + onChange={(_, checked) => {setHideLogDSL(checked)}} + id="hideLogDSL" + name="hideLogDSL" + className={"hide-log"} + /> </div> {tab === 'routes' && <RouteDesigner // integration={integration} diff --git a/karavan-designer/src/designer/KaravanStore.ts b/karavan-designer/src/designer/KaravanStore.ts index 30d6ee85..4ec36a30 100644 --- a/karavan-designer/src/designer/KaravanStore.ts +++ b/karavan-designer/src/designer/KaravanStore.ts @@ -121,7 +121,7 @@ export const useConnectionsStore = createWithEqualityFn<ConnectionsState>((set) }, deleteStep: (uuid: string) => { set((state: ConnectionsState) => { - state.steps.clear(); + // state.steps.clear(); Array.from(state.steps.entries()) .filter(value => value[1]?.parent?.uuid !== uuid) .forEach(value => state.steps.set(value[0], value[1])); @@ -143,8 +143,8 @@ export const useConnectionsStore = createWithEqualityFn<ConnectionsState>((set) interface DesignerState { dark: boolean; setDark: (dark: boolean) => void; - showLogDSL: boolean; - setShowLogDSL: (showLogDSL: boolean) => void; + hideLogDSL: boolean; + setHideLogDSL: (hideLogDSL: boolean) => void; shiftKeyPressed: boolean; setShiftKeyPressed: (shiftKeyPressed: boolean) => void; showDeleteConfirmation: boolean; @@ -170,7 +170,7 @@ interface DesignerState { export const useDesignerStore = createWithEqualityFn<DesignerState>((set) => ({ dark: false, - showLogDSL: true, + hideLogDSL: false, shiftKeyPressed: false, showDeleteConfirmation: false, showMoveConfirmation: false, @@ -181,8 +181,8 @@ export const useDesignerStore = createWithEqualityFn<DesignerState>((set) => ({ setDark: (dark: boolean) => { set({dark: dark}) }, - setShowLogDSL: (showLogDSL: boolean) => { - set({showLogDSL: showLogDSL}) + setHideLogDSL: (hideLogDSL: boolean) => { + set({hideLogDSL: hideLogDSL}) }, setShiftKeyPressed: (shiftKeyPressed: boolean) => { set({shiftKeyPressed: shiftKeyPressed}) diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css index 71192fc2..487f3020 100644 --- a/karavan-designer/src/designer/karavan.css +++ b/karavan-designer/src/designer/karavan.css @@ -250,12 +250,31 @@ height: 24px; } -.karavan .main-tabs .top-menu-item { +.karavan .designer-page .main-tabs-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: relative; +} + +.karavan .designer-page .main-tabs-wrapper::before { + content: ""; + position: absolute; + right: 0; + bottom: 0; + left: 0; + border: solid; + border-width: 0 0 var(--pf-v5-global--BorderWidth--sm) 0; + border-bottom-color: var(--pf-v5-global--BorderColor--100); +} + +.karavan .designer-page .main-tabs-wrapper .main-tabs .top-menu-item { display: flex; flex-direction: row; } -.karavan .main-tabs .top-menu-item .count { +.karavan .designer-page .main-tabs-wrapper .main-tabs .top-menu-item .count { background: var(--pf-v5-global--active-color--100); color: white; height: fit-content; @@ -264,12 +283,12 @@ min-width: 0px; } -.karavan .main-tabs .pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon { +.karavan .designer-page .main-tabs-wrapper .main-tabs .pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon { height: 24px; margin-right: 0; } -.karavan .main-tabs .pf-v5-c-tabs__item-text { +.karavan .designer-page .main-tabs-wrapper .main-tabs .pf-v5-c-tabs__item-text { font-size: 14px; font-weight: bold; margin-top: auto; @@ -277,6 +296,16 @@ margin-right: 6px; } +.karavan .designer-page .page .main-tabs-wrapper .hide-log { + white-space: nowrap; + margin-right: 16px; +} + +.karavan .designer-page .page .main-tabs-wrapper .pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle { + outline: transparent; + outline-offset: 0; +} + /*Properties*/ .karavan .properties { border: 1px solid #eee; diff --git a/karavan-designer/src/designer/route/DslElement.tsx b/karavan-designer/src/designer/route/DslElement.tsx index b69e4f9a..e187b68f 100644 --- a/karavan-designer/src/designer/route/DslElement.tsx +++ b/karavan-designer/src/designer/route/DslElement.tsx @@ -49,8 +49,9 @@ export const DslElement = (props: Props) => { const [integration] = useIntegrationStore((s) => [s.integration, s.setIntegration], shallow) - const [selectedUuids, selectedStep, showMoveConfirmation, setShowMoveConfirmation] = useDesignerStore((s) => - [s.selectedUuids, s.selectedStep, s.showMoveConfirmation, s.setShowMoveConfirmation,], shallow) + const [selectedUuids, selectedStep, showMoveConfirmation, setShowMoveConfirmation, hideLogDSL] = + useDesignerStore((s) => + [s.selectedUuids, s.selectedStep, s.showMoveConfirmation, s.setShowMoveConfirmation, s.hideLogDSL], shallow) const [isDragging, setIsDragging] = useState<boolean>(false); const [isDraggedOver, setIsDraggedOver] = useState<boolean>(false); @@ -105,10 +106,14 @@ export const DslElement = (props: Props) => { setMoveElements([undefined, undefined]); } - function isSelected(): boolean { + function isElementSelected(): boolean { return selectedUuids.includes(props.step.uuid); } + function isElementHidden(): boolean { + return props.step.dslName === 'LogDefinition' && hideLogDSL; + } + function hasBorder(): boolean { return (props.step?.hasSteps() && !['FromDefinition'].includes(props.step.dslName)) || ['RouteConfigurationDefinition', @@ -184,22 +189,28 @@ export const DslElement = (props: Props) => { function getHeaderStyle() { const style: CSSProperties = { width: isWide() ? "100%" : "", - fontWeight: isSelected() ? "bold" : "normal", + fontWeight: isElementSelected() ? "bold" : "normal", }; return style; } - function sendPosition(el: HTMLDivElement | null, isSelected: boolean) { - if (el) { - const header = Array.from(el.childNodes.values()).filter((n: any) => n.classList.contains("header"))[0]; - if (header) { - const headerIcon: any = Array.from(header.childNodes.values()).filter((n: any) => n.classList.contains("header-icon"))[0]; - const headerRect = headerIcon.getBoundingClientRect(); - const rect = el.getBoundingClientRect(); - if (props.step.show) { - EventBus.sendPosition("add", props.step, props.parent, rect, headerRect, props.position, props.inSteps, isSelected); - } else { - EventBus.sendPosition("delete", props.step, props.parent, new DOMRect(), new DOMRect(), 0); + function sendPosition(el: HTMLDivElement | null) { + const isSelected = isElementSelected(); + const isHidden = isElementHidden(); + if (isHidden) { + EventBus.sendPosition("delete", props.step, props.parent, new DOMRect(), new DOMRect(), 0); + } else { + if (el) { + const header = Array.from(el.childNodes.values()).filter((n: any) => n.classList.contains("header"))[0]; + if (header) { + const headerIcon: any = Array.from(header.childNodes.values()).filter((n: any) => n.classList.contains("header-icon"))[0]; + const headerRect = headerIcon.getBoundingClientRect(); + const rect = el.getBoundingClientRect(); + if (props.step.showChildren) { + EventBus.sendPosition("add", props.step, props.parent, rect, headerRect, props.position, props.inSteps, isSelected); + } else { + EventBus.sendPosition("delete", props.step, props.parent, new DOMRect(), new DOMRect(), 0); + } } } } @@ -225,12 +236,12 @@ export const DslElement = (props: Props) => { !['FromDefinition', 'RouteConfigurationDefinition', 'RouteDefinition', 'CatchDefinition', 'FinallyDefinition', 'WhenDefinition', 'OtherwiseDefinition'].includes(step.dslName) && !inRouteConfiguration; const headerClass = ['RouteConfigurationDefinition', 'RouteDefinition'].includes(step.dslName) ? "header-route" : "header" - const headerClasses = isSelected() ? headerClass + " selected" : headerClass; + const headerClasses = isElementSelected() ? headerClass + " selected" : headerClass; return ( <div className={headerClasses} style={getHeaderStyle()} ref={headerRef}> {!['RouteConfigurationDefinition', 'RouteDefinition'].includes(props.step.dslName) && <div - ref={el => sendPosition(el, isSelected())} + ref={el => sendPosition(el)} className={"header-icon"} style={isWide() ? {width: ""} : {}}> {CamelUi.getIconForElement(step)} @@ -252,7 +263,9 @@ export const DslElement = (props: Props) => { const title = (step as any).description ? (step as any).description : CamelUi.getElementTitle(props.step); let className = hasWideChildrenElement() ? "text text-right" : "text text-bottom"; if (!checkRequired[0]) className = className + " header-text-required"; - if (checkRequired[0]) return <Text className={className}>{title}</Text> + if (checkRequired[0]) { + return <Text className={className}>{title}</Text> + } else return ( <Tooltip position={"right"} className="tooltip-required-field" content={checkRequired[1].map((text, i) => (<div key={i}>{text}</div>))}> @@ -426,14 +439,15 @@ export const DslElement = (props: Props) => { } const element: CamelElement = props.step; - const className = "step-element" + (isSelected() ? " step-element-selected" : "") + (!props.step.show ? " hidden-step" : ""); + const className = "step-element" + (isElementSelected() ? " step-element-selected" : "") + (!props.step.showChildren ? " hidden-step" : ""); return ( <div key={"root" + element.uuid} className={className} - ref={el => sendPosition(el, isSelected())} + ref={el => sendPosition(el)} style={{ + display: isElementHidden() ? "none" : "flex", borderStyle: hasBorder() ? "dotted" : "none", - borderColor: isSelected() ? "var(--step-border-color-selected)" : "var(--step-border-color)", + borderColor: isElementSelected() ? "var(--step-border-color-selected)" : "var(--step-border-color)", marginTop: isInStepWithChildren() ? "16px" : "8px", zIndex: element.dslName === 'ToDefinition' ? 20 : 10, boxShadow: isDraggedOver ? "0px 0px 1px 2px var(--step-border-color-selected)" : "none", diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx index 97e8257a..77487a4d 100644 --- a/karavan-designer/src/designer/route/RouteDesigner.tsx +++ b/karavan-designer/src/designer/route/RouteDesigner.tsx @@ -49,8 +49,8 @@ export const RouteDesigner = () => { const {openSelector, createRouteConfiguration, onCommand, handleKeyDown, handleKeyUp, unselectElement} = useRouteDesignerHook(); const [integration] = useIntegrationStore((state) => [state.integration], shallow) - const [showDeleteConfirmation, setPosition, width, height, top, left] = useDesignerStore((s) => - [s.showDeleteConfirmation, s.setPosition, s.width, s.height, s.top, s.left], shallow) + const [showDeleteConfirmation, setPosition, width, height, top, left, hideLogDSL] = useDesignerStore((s) => + [s.showDeleteConfirmation, s.setPosition, s.width, s.height, s.top, s.left, s.hideLogDSL], shallow) const [showSelector] = useSelectorStore((s) => [s.showSelector], shallow) diff --git a/karavan-designer/src/designer/route/property/DslPropertyField.tsx b/karavan-designer/src/designer/route/property/DslPropertyField.tsx index 44b32c5f..8095fdc6 100644 --- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx +++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx @@ -72,7 +72,6 @@ import {usePropertiesHook} from "../usePropertiesHook"; interface Props { property: PropertyMeta, - element?: CamelElement, value: any, expressionTextChanged?: (fieldId: string, value: string | number | boolean | any) => void, hideLabel?: boolean, @@ -82,7 +81,7 @@ interface Props { export const DslPropertyField = (props: Props) => { const [integration] = useIntegrationStore((state) => [state.integration], shallow) - const [dark] = useDesignerStore((s) => [s.dark], shallow) + const [dark, selectedStep] = useDesignerStore((s) => [s.dark, s.selectedStep], shallow) const {onPropertyChange, onParametersChange} = usePropertiesHook(); const [isShowAdvanced, setIsShowAdvanced] = useState<Map<string, boolean>>(new Map<string, boolean>()); @@ -117,7 +116,7 @@ export const DslPropertyField = (props: Props) => { function propertyChanged (fieldId: string, value: string | number | boolean | any, newRoute?: RouteToCreate ) { if (fieldId === 'id' && CamelDefinitionApiExt.hasElementWithId(integration, value)) { - value = props.element; + value = selectedStep; } onPropertyChange(fieldId, value, newRoute); clearSelection(fieldId); @@ -172,7 +171,7 @@ export const DslPropertyField = (props: Props) => { } function isUriReadOnly (property: PropertyMeta): boolean { - const dslName: string = props.element?.dslName || ''; + const dslName: string = selectedStep?.dslName || ''; return property.name === 'uri' && !['ToDynamicDefinition', 'WireTapDefinition'].includes(dslName) } @@ -599,7 +598,7 @@ export const DslPropertyField = (props: Props) => { } function getKameletParameters () { - const element = props.element; + const element = selectedStep; const requiredParameters = CamelUtil.getKameletRequiredParameters(element); return ( <div className="parameters"> @@ -616,7 +615,7 @@ export const DslPropertyField = (props: Props) => { } function getMainComponentParameters (properties: ComponentProperty[] ) { - const element = props.element; + const element = selectedStep; return ( <div className="parameters"> {properties.map(kp => { @@ -635,7 +634,7 @@ export const DslPropertyField = (props: Props) => { } function getExpandableComponentParameters (properties: ComponentProperty[], label: string ) { - const element = props.element; + const element = selectedStep; return ( <ExpandableSection toggleText={label} @@ -691,7 +690,7 @@ export const DslPropertyField = (props: Props) => { } function getComponentParameters(property: PropertyMeta) { - const element = props.element; + const element = selectedStep; const properties = CamelUtil.getComponentProperties(element); const propertiesMain = properties.filter(p => !p.label.includes("advanced") && !p.label.includes("security") && !p.label.includes("scheduler")); const propertiesAdvanced = properties.filter(p => p.label.includes("advanced")); @@ -710,7 +709,7 @@ export const DslPropertyField = (props: Props) => { ) } - const element = props.element; + const element = selectedStep; const isKamelet = CamelUtil.isKameletComponent(element); const property: PropertyMeta = props.property; const value = props.value; @@ -749,7 +748,7 @@ export const DslPropertyField = (props: Props) => { {property.enumVals && getSelect(property, value)} {isKamelet && property.name === 'parameters' && getKameletParameters()} - {/*{!isKamelet && property.name === 'parameters' && getComponentParameters(property)}*/} + {!isKamelet && property.name === 'parameters' && getComponentParameters(property)} </FormGroup> {getInfrastructureSelectorModal()} </div> diff --git a/karavan-designer/src/designer/route/property/ExpressionField.tsx b/karavan-designer/src/designer/route/property/ExpressionField.tsx index 9a341d41..c396cb10 100644 --- a/karavan-designer/src/designer/route/property/ExpressionField.tsx +++ b/karavan-designer/src/designer/route/property/ExpressionField.tsx @@ -143,7 +143,6 @@ export const ExpressionField = (props: Props) => { {value && getProps().map((property: PropertyMeta) => <DslPropertyField key={property.name + props.value?.uuid} property={property} - element={value} value={value ? (value as any)[property.name] : undefined} dslLanguage={dslLanguage} expressionTextChanged={expressionTextChanged}/> diff --git a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx index 61208dfa..04e83ee2 100644 --- a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx +++ b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx @@ -40,10 +40,10 @@ export const useRouteDesignerHook = () => { const [integration, setIntegration] = useIntegrationStore((state) => [state.integration, state.setIntegration], shallow) const [selectedUuids,clipboardSteps,shiftKeyPressed, setShowDeleteConfirmation,setPropertyOnly, setDeleteMessage, setSelectedStep, setSelectedUuids, setClipboardSteps, setShiftKeyPressed, - width, height, dark] = useDesignerStore((s) => + width, height, dark, hideLogDSL] = useDesignerStore((s) => [s.selectedUuids,s.clipboardSteps, s.shiftKeyPressed, s.setShowDeleteConfirmation,s.setPropertyOnly,s.setDeleteMessage, s.setSelectedStep, s.setSelectedUuids, s.setClipboardSteps, s.setShiftKeyPressed, - s.width, s.height, s.dark], shallow) + s.width, s.height, s.dark, s.hideLogDSL], shallow) const [setParentId, setShowSelector, setSelectorTabIndex, setParentDsl, setShowSteps, setSelectedPosition] = useSelectorStore((s) => [s.setParentId, s.setShowSelector, s.setSelectorTabIndex, s.setParentDsl, s.setShowSteps, s.setSelectedPosition], shallow) @@ -108,7 +108,7 @@ export const useRouteDesignerHook = () => { } const add = shiftKeyPressed && !uuids.includes(element.uuid); const remove = shiftKeyPressed && uuids.includes(element.uuid); - // TODO: do we need to change Intgration just for select???? + // TODO: do we need to change Integration just for select???? const i = CamelDisplayUtil.setIntegrationVisibility(integration, element.uuid); if (remove) { diff --git a/karavan-designer/src/designer/utils/KaravanIcons.tsx b/karavan-designer/src/designer/utils/KaravanIcons.tsx index 23cc7a69..17560ff4 100644 --- a/karavan-designer/src/designer/utils/KaravanIcons.tsx +++ b/karavan-designer/src/designer/utils/KaravanIcons.tsx @@ -497,23 +497,23 @@ export function AggregateIcon() { export function ToIcon() { return ( - <svg - xmlns="http://www.w3.org/2000/svg" - width={800} - height={800} - viewBox="0 0 32 32" - className="icon" - > - <title>{"plug"}</title> - <path d="M24 22v-1h6v-2h-6v-6h6v-2h-6v-1a2 2 0 0 0-2-2h-6a8.007 8.007 0 0 0-7.93 7H2v2h6.07A8.007 8.007 0 0 0 16 24h6a2 2 0 0 0 2-2zm-8 0a6 6 0 0 1 0-12h6v12z" /> - <path - d="M0 0h32v32H0z" - data-name="<Transparent Rectangle>" - style={{ - fill: "none", - }} - /> - </svg> + <svg + xmlns="http://www.w3.org/2000/svg" + width={800} + height={800} + viewBox="0 0 32 32" + className="icon" + > + <path + d="M24 22v-1h6v-2h-6v-6h6v-2h-6v-1a2 2 0 0 0-2-2h-6a8.007 8.007 0 0 0-7.93 7v2A8.007 8.007 0 0 0 16 24h6a2 2 0 0 0 2-2zm-8 0a6 6 0 1 1 0-12h6v12z"/> + <path + d="M0 0h32v32H0z" + data-name="<Transparent Rectangle>" + style={{ + fill: "none", + }} + /> + </svg> ); } @@ -816,6 +816,7 @@ export function MessagingIcon() { </svg> ); } + export function SchedulingIcon() { return ( <svg @@ -824,8 +825,8 @@ export function SchedulingIcon() { height={800} viewBox="0 0 32 32" className="icon"> - <path d="M16 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14Zm0-26a12 12 0 1 0 12 12A12 12 0 0 0 16 4Z" /> - <path d="M20.59 22 15 16.41V7h2v8.58l5 5.01L20.59 22z" /> + <path d="M16 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14Zm0-26a12 12 0 1 0 12 12A12 12 0 0 0 16 4Z"/> + <path d="M20.59 22 15 16.41V7h2v8.58l5 5.01L20.59 22z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -845,7 +846,8 @@ export function HttpIcon() { height={800} viewBox="0 0 32 32" className="icon"> - <path d="M30 11h-5v10h2v-3h3a2.003 2.003 0 0 0 2-2v-3a2.002 2.002 0 0 0-2-2Zm-3 5v-3h3l.001 3ZM10 13h2v8h2v-8h2v-2h-6v2zM23 11h-6v2h2v8h2v-8h2v-2zM6 11v4H3v-4H1v10h2v-4h3v4h2V11H6z" /> + <path + d="M30 11h-5v10h2v-3h3a2.003 2.003 0 0 0 2-2v-3a2.002 2.002 0 0 0-2-2Zm-3 5v-3h3l.001 3ZM10 13h2v8h2v-8h2v-2h-6v2zM23 11h-6v2h2v8h2v-8h2v-2zM6 11v4H3v-4H1v10h2v-4h3v4h2V11H6z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -856,6 +858,7 @@ export function HttpIcon() { </svg> ); } + export function GoogleCloudIcon() { return ( <svg @@ -884,6 +887,7 @@ export function GoogleCloudIcon() { </svg> ); } + export function AwsIcon() { return ( <svg @@ -898,12 +902,15 @@ export function AwsIcon() { d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 0 1 .037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 0 1-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 0 1-.192-.251 4.137 4.137 0 0 1-.165-.315c-.415.491-.936.737-1.564.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.37 [...] /> <g fill="#F90" fillRule="evenodd" clipRule="evenodd"> - <path d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z" /> - <path d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.218-.1.213-.53.687-1.72.463-2.003z" /> + <path + d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z"/> + <path + d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.218-.1.213-.53.687-1.72.463-2.003z"/> </g> </svg> ); } + export function MailIcon() { return ( <svg @@ -913,7 +920,8 @@ export function MailIcon() { viewBox="0 0 32 32" className="icon"> <title>{"email"}</title> - <path d="M28 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Zm-2.2 2L16 14.78 6.2 8ZM4 24V8.91l11.43 7.91a1 1 0 0 0 1.14 0L28 8.91V24Z" /> + <path + d="M28 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Zm-2.2 2L16 14.78 6.2 8ZM4 24V8.91l11.43 7.91a1 1 0 0 0 1.14 0L28 8.91V24Z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -924,6 +932,7 @@ export function MailIcon() { </svg> ); } + export function IotIcon() { return ( <svg @@ -933,9 +942,10 @@ export function IotIcon() { viewBox="0 0 32 32" className="icon"> <title>{"iot--platform"}</title> - <path d="M30 19h-4v-4h-2v9H8V8h9V6h-4V2h-2v4H8a2.002 2.002 0 0 0-2 2v3H2v2h4v6H2v2h4v3a2.002 2.002 0 0 0 2 2h3v4h2v-4h6v4h2v-4h3a2.003 2.003 0 0 0 2-2v-3h4Z" /> - <path d="M21 21H11V11h10Zm-8-2h6v-6h-6ZM31 13h-2A10.012 10.012 0 0 0 19 3V1a12.013 12.013 0 0 1 12 12Z" /> - <path d="M26 13h-2a5.006 5.006 0 0 0-5-5V6a7.008 7.008 0 0 1 7 7Z" /> + <path + d="M30 19h-4v-4h-2v9H8V8h9V6h-4V2h-2v4H8a2.002 2.002 0 0 0-2 2v3H2v2h4v6H2v2h4v3a2.002 2.002 0 0 0 2 2h3v4h2v-4h6v4h2v-4h3a2.003 2.003 0 0 0 2-2v-3h4Z"/> + <path d="M21 21H11V11h10Zm-8-2h6v-6h-6ZM31 13h-2A10.012 10.012 0 0 0 19 3V1a12.013 12.013 0 0 1 12 12Z"/> + <path d="M26 13h-2a5.006 5.006 0 0 0-5-5V6a7.008 7.008 0 0 1 7 7Z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -946,6 +956,7 @@ export function IotIcon() { </svg> ); } + export function GithubIcon() { return ( <svg @@ -955,10 +966,13 @@ export function GithubIcon() { data-view-component="true" viewBox="0 0 16 16" className="icon"> - <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16. [...] + <path + d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45 [...] </svg> ); -}export function CassandraIcon() { +} + +export function CassandraIcon() { return ( <svg xmlns="http://www.w3.org/2000/svg" @@ -968,7 +982,7 @@ export function GithubIcon() { viewBox="0 0 113.63554 58.899029" className="icon"> <defs> - <path id="a" d="M24.216.082v24.141H.053V.082z" /> + <path id="a" d="M24.216.082v24.141H.053V.082z"/> </defs> <g style={{ @@ -1020,7 +1034,7 @@ export function GithubIcon() { /> <g transform="translate(43.304 10.642)"> <mask id="b" fill="#fff"> - <use xlinkHref="#a" /> + <use xlinkHref="#a"/> </mask> <path fill="#fff" @@ -1048,6 +1062,7 @@ export function GithubIcon() { </svg> ); } + export function ActivemqIcon() { return ( <svg @@ -1064,16 +1079,16 @@ export function ActivemqIcon() { x={-0.017} y={-0.011} > - <feFlood floodColor="#000" floodOpacity={0.498} result="flood" /> + <feFlood floodColor="#000" floodOpacity={0.498} result="flood"/> <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" /> - <feGaussianBlur in="composite1" result="blur" stdDeviation={0.2} /> - <feOffset dx={1} dy={1} result="offset" /> - <feComposite in="SourceGraphic" in2="offset" result="composite2" /> + <feGaussianBlur in="composite1" result="blur" stdDeviation={0.2}/> + <feOffset dx={1} dy={1} result="offset"/> + <feComposite in="SourceGraphic" in2="offset" result="composite2"/> </filter> </defs> <g @@ -1335,6 +1350,7 @@ export function ActivemqIcon() { </svg> ); } + export function KafkaIcon() { return ( <svg @@ -1351,6 +1367,7 @@ export function KafkaIcon() { </svg> ); } + export function GrapeIcon() { return ( <svg @@ -1385,6 +1402,7 @@ export function GrapeIcon() { </svg> ); } + export function MachineLearningIcon() { return ( <svg @@ -1393,8 +1411,10 @@ export function MachineLearningIcon() { height={800} viewBox="0 0 32 32" className="icon"> - <path d="M27 24a2.96 2.96 0 0 0-1.285.3l-4.3-4.3H18v2h2.586l3.715 3.715A2.966 2.966 0 0 0 24 27a3 3 0 1 0 3-3Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM27 13a2.995 2.995 0 0 0-2.816 2H18v2h6.184A2.995 2.995 0 1 0 27 13Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM27 2a3.003 3.003 0 0 0-3 3 2.966 2.966 0 0 0 .348 1.373L20.596 10H18v2h3.404l4.4-4.252A2.999 2.999 0 1 0 27 2Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1Z" /> - <path d="M18 6h2V4h-2a3.976 3.976 0 0 0-3 1.382A3.976 3.976 0 0 0 12 4h-1a9.01 9.01 0 0 0-9 9v6a9.01 9.01 0 0 0 9 9h1a3.976 3.976 0 0 0 3-1.382A3.976 3.976 0 0 0 18 28h2v-2h-2a2.002 2.002 0 0 1-2-2V8a2.002 2.002 0 0 1 2-2Zm-6 20h-1a7.005 7.005 0 0 1-6.92-6H6v-2H4v-4h3a3.003 3.003 0 0 0 3-3V9H8v2a1 1 0 0 1-1 1H4.08A7.005 7.005 0 0 1 11 6h1a2.002 2.002 0 0 1 2 2v4h-2v2h2v4h-2a3.003 3.003 0 0 0-3 3v2h2v-2a1 1 0 0 1 1-1h2v4a2.002 2.002 0 0 1-2 2Z" /> + <path + d="M27 24a2.96 2.96 0 0 0-1.285.3l-4.3-4.3H18v2h2.586l3.715 3.715A2.966 2.966 0 0 0 24 27a3 3 0 1 0 3-3Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM27 13a2.995 2.995 0 0 0-2.816 2H18v2h6.184A2.995 2.995 0 1 0 27 13Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM27 2a3.003 3.003 0 0 0-3 3 2.966 2.966 0 0 0 .348 1.373L20.596 10H18v2h3.404l4.4-4.252A2.999 2.999 0 1 0 27 2Zm0 4a1 1 0 1 1 1-1 1 1 0 0 1-1 1Z"/> + <path + d="M18 6h2V4h-2a3.976 3.976 0 0 0-3 1.382A3.976 3.976 0 0 0 12 4h-1a9.01 9.01 0 0 0-9 9v6a9.01 9.01 0 0 0 9 9h1a3.976 3.976 0 0 0 3-1.382A3.976 3.976 0 0 0 18 28h2v-2h-2a2.002 2.002 0 0 1-2-2V8a2.002 2.002 0 0 1 2-2Zm-6 20h-1a7.005 7.005 0 0 1-6.92-6H6v-2H4v-4h3a3.003 3.003 0 0 0 3-3V9H8v2a1 1 0 0 1-1 1H4.08A7.005 7.005 0 0 1 11 6h1a2.002 2.002 0 0 1 2 2v4h-2v2h2v4h-2a3.003 3.003 0 0 0-3 3v2h2v-2a1 1 0 0 1 1-1h2v4a2.002 2.002 0 0 1-2 2Z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1405,6 +1425,7 @@ export function MachineLearningIcon() { </svg> ); } + export function TerminalIcon() { return ( <svg @@ -1414,8 +1435,9 @@ export function TerminalIcon() { viewBox="0 0 32 32" className="icon"> <title>{"terminal"}</title> - <path d="M26 4.01H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-20a2 2 0 0 0-2-2Zm0 2v4H6v-4Zm-20 20v-14h20v14Z" /> - <path d="m10.76 16.18 2.82 2.83-2.82 2.83 1.41 1.41 4.24-4.24-4.24-4.24-1.41 1.41z" /> + <path + d="M26 4.01H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-20a2 2 0 0 0-2-2Zm0 2v4H6v-4Zm-20 20v-14h20v14Z"/> + <path d="m10.76 16.18 2.82 2.83-2.82 2.83 1.41 1.41 4.24-4.24-4.24-4.24-1.41 1.41z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1426,6 +1448,7 @@ export function TerminalIcon() { </svg> ); } + export function SapIcon() { return ( <svg @@ -1451,6 +1474,7 @@ export function SapIcon() { </svg> ); } + export function ScriptIcon() { return ( <svg @@ -1460,8 +1484,10 @@ export function ScriptIcon() { viewBox="0 0 32 32" className="icon"> <title>{"script"}</title> - <path d="m18.83 26 2.58-2.58L20 22l-4 4 4 4 1.42-1.41L18.83 26zM27.17 26l-2.58 2.58L26 30l4-4-4-4-1.42 1.41L27.17 26z" /> - <path d="M14 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h6Zm4-23.6 5.6 5.6H18Z" /> + <path + d="m18.83 26 2.58-2.58L20 22l-4 4 4 4 1.42-1.41L18.83 26zM27.17 26l-2.58 2.58L26 30l4-4-4-4-1.42 1.41L27.17 26z"/> + <path + d="M14 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h6Zm4-23.6 5.6 5.6H18Z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1472,6 +1498,7 @@ export function ScriptIcon() { </svg> ); } + export function ValidationIcon() { return ( <svg @@ -1480,8 +1507,9 @@ export function ValidationIcon() { height={800} viewBox="0 0 32 32" className="icon"> - <path d="m22 27.18-2.59-2.59L18 26l4 4 8-8-1.41-1.41L22 27.18z" /> - <path d="M15 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h7Zm3-23.6 5.6 5.6H18Z" /> + <path d="m22 27.18-2.59-2.59L18 26l4 4 8-8-1.41-1.41L22 27.18z"/> + <path + d="M15 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h7Zm3-23.6 5.6 5.6H18Z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1492,6 +1520,7 @@ export function ValidationIcon() { </svg> ); } + export function OpenstackIcon() { return ( <svg @@ -1508,6 +1537,7 @@ export function OpenstackIcon() { </svg> ); } + export function OpenshiftIcon() { return ( <svg @@ -1552,6 +1582,7 @@ export function OpenshiftIcon() { </svg> ); } + export function RefIcon() { return ( <svg @@ -1560,8 +1591,9 @@ export function RefIcon() { height={800} viewBox="0 0 32 32" className="icon"> - <path d="M4 20v2h4.586L2 28.586 3.414 30 10 23.414V28h2v-8H4zM30 30h-8v-8h8Zm-6-2h4v-4h-4ZM20 20h-8v-8h8Zm-6-2h4v-4h-4Z" /> - <path d="M24 17h-2v-2h2a4 4 0 0 0 0-8H12V5h12a6 6 0 0 1 0 12ZM10 10H2V2h8ZM4 8h4V4H4Z" /> + <path + d="M4 20v2h4.586L2 28.586 3.414 30 10 23.414V28h2v-8H4zM30 30h-8v-8h8Zm-6-2h4v-4h-4ZM20 20h-8v-8h8Zm-6-2h4v-4h-4Z"/> + <path d="M24 17h-2v-2h2a4 4 0 0 0 0-8H12V5h12a6 6 0 0 1 0 12ZM10 10H2V2h8ZM4 8h4V4H4Z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1572,6 +1604,7 @@ export function RefIcon() { </svg> ); } + export function RedisIcon() { return ( <svg @@ -1620,6 +1653,7 @@ export function RedisIcon() { </svg> ); } + export function SearchIcon() { return ( <svg @@ -1628,7 +1662,8 @@ export function SearchIcon() { height={800} viewBox="0 0 32 32" className="icon"> - <path d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z" /> + <path + d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1639,6 +1674,7 @@ export function SearchIcon() { </svg> ); } + export function BlockchainIcon() { return ( <svg @@ -1648,7 +1684,7 @@ export function BlockchainIcon() { viewBox="0 0 32 32" className="icon"> <title>{"blockchain"}</title> - <path d="M6 24H4V8h2ZM28 8h-2v16h2Zm-4-2V4H8v2Zm0 22v-2H8v2Z" /> + <path d="M6 24H4V8h2ZM28 8h-2v16h2Zm-4-2V4H8v2Zm0 22v-2H8v2Z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1659,6 +1695,7 @@ export function BlockchainIcon() { </svg> ); } + export function ChatIcon() { return ( <svg @@ -1668,8 +1705,9 @@ export function ChatIcon() { viewBox="0 0 32 32" className="icon"> <title>{"chat"}</title> - <path d="M17.74 30 16 29l4-7h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9v2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h20a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4h-4.84Z" /> - <path d="M8 10h16v2H8zM8 16h10v2H8z" /> + <path + d="M17.74 30 16 29l4-7h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9v2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h20a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4h-4.84Z"/> + <path d="M8 10h16v2H8zM8 16h10v2H8z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1680,6 +1718,7 @@ export function ChatIcon() { </svg> ); } + export function WorkflowIcon() { return ( <svg @@ -1689,10 +1728,12 @@ export function WorkflowIcon() { height={800} viewBox="0 0 512 512" className="icon"> - <path d="M445.66 49.341H340.206L294.008 3.143c-4.192-4.191-10.99-4.191-15.183 0l-49.341 49.342c-4.192 4.192-4.192 10.99 0 15.183l46.198 46.198v38.494h-80.516c-5.929 0-10.736 4.806-10.736 10.735v21.471h-42.942v-21.471c0-5.929-4.806-10.735-10.736-10.735H66.34c-5.929 0-10.735 4.806-10.735 10.735v64.413c0 5.929 4.806 10.735 10.735 10.735h20.755v93.798c0 5.929 4.806 10.736 10.735 10.736h95.437l-10.346 10.346c-4.192 4.192-4.193 10.99 0 15.182a10.7 10.7 0 0 0 7.591 3.144c2.747 0 5.4 [...] + <path + d="M445.66 49.341H340.206L294.008 3.143c-4.192-4.191-10.99-4.191-15.183 0l-49.341 49.342c-4.192 4.192-4.192 10.99 0 15.183l46.198 46.198v38.494h-80.516c-5.929 0-10.736 4.806-10.736 10.735v21.471h-42.942v-21.471c0-5.929-4.806-10.735-10.736-10.735H66.34c-5.929 0-10.735 4.806-10.735 10.735v64.413c0 5.929 4.806 10.735 10.735 10.735h20.755v93.798c0 5.929 4.806 10.736 10.735 10.736h95.437l-10.346 10.346c-4.192 4.192-4.193 10.99 0 15.182a10.7 10.7 0 0 0 7.591 3.144c2.747 0 5.495 [...] </svg> ); } + export function WebserviceIcon() { return ( <svg @@ -1702,7 +1743,8 @@ export function WebserviceIcon() { viewBox="0 0 32 32" className="icon"> <title>{"fog"}</title> - <path d="M25.829 13.116A10.02 10.02 0 0 0 16 5v2a8.023 8.023 0 0 1 7.865 6.493l.259 1.346 1.349.245A5.502 5.502 0 0 1 24.508 26H16v2h8.508a7.502 7.502 0 0 0 1.32-14.884ZM8 24h6v2H8zM4 24h2v2H4zM6 20h8v2H6zM2 20h2v2H2zM8 16h6v2H8zM4 16h2v2H4zM10 12h4v2h-4zM6 12h2v2H6zM12 8h2v2h-2z" /> + <path + d="M25.829 13.116A10.02 10.02 0 0 0 16 5v2a8.023 8.023 0 0 1 7.865 6.493l.259 1.346 1.349.245A5.502 5.502 0 0 1 24.508 26H16v2h8.508a7.502 7.502 0 0 0 1.32-14.884ZM8 24h6v2H8zM4 24h2v2H4zM6 20h8v2H6zM2 20h2v2H2zM8 16h6v2H8zM4 16h2v2H4zM10 12h4v2h-4zM6 12h2v2H6zM12 8h2v2h-2z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1713,6 +1755,7 @@ export function WebserviceIcon() { </svg> ); } + export function MobileIcon() { return ( <svg @@ -1721,9 +1764,10 @@ export function MobileIcon() { height={800} viewBox="0 0 32 32" className="icon"> - <path d="M23 7h4v4h-4zM23 13h4v4h-4zM17 7h4v4h-4zM17 13h4v4h-4z" /> - <circle cx={14.5} cy={24.5} r={1.5} /> - <path d="M21 30H8a2.002 2.002 0 0 1-2-2V4a2.002 2.002 0 0 1 2-2h13v2H8v24h13v-8h2v8a2.002 2.002 0 0 1-2 2Z" /> + <path d="M23 7h4v4h-4zM23 13h4v4h-4zM17 7h4v4h-4zM17 13h4v4h-4z"/> + <circle cx={14.5} cy={24.5} r={1.5}/> + <path + d="M21 30H8a2.002 2.002 0 0 1-2-2V4a2.002 2.002 0 0 1 2-2h13v2H8v24h13v-8h2v8a2.002 2.002 0 0 1-2 2Z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1734,6 +1778,7 @@ export function MobileIcon() { </svg> ); } + export function ClusterIcon() { return ( <svg @@ -1742,7 +1787,8 @@ export function ClusterIcon() { height={800} viewBox="0 0 32 32" className="icon"> - <path d="M16 7a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM11 30a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM7 11a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM21 30a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM25 11a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM4 21a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 [...] + <path + d="M16 7a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM11 30a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM7 11a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM21 30a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM25 11a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 0 1 1 1.001 1.001 0 0 0-1-1ZM4 21a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Zm0-4a1 1 0 1 [...] <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1753,6 +1799,7 @@ export function ClusterIcon() { </svg> ); } + export function RpcIcon() { return ( <svg @@ -1761,7 +1808,7 @@ export function RpcIcon() { height={800} viewBox="0 0 32 32" className="icon"> - <path d="m14 26 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16l10 10z" /> + <path d="m14 26 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16l10 10z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1772,6 +1819,7 @@ export function RpcIcon() { </svg> ); } + export function InfinispanIcon() { return ( <svg @@ -1799,6 +1847,7 @@ export function InfinispanIcon() { </svg> ); } + export function TransformationIcon() { return ( <svg @@ -1808,7 +1857,8 @@ export function TransformationIcon() { viewBox="0 0 32 32" className="icon"> <title>{"data-share"}</title> - <path d="M5 25v-9.172l-3.586 3.586L0 18l6-6 6 6-1.414 1.414L7 15.828V25h12v2H7a2.002 2.002 0 0 1-2-2ZM24 22h4a2.002 2.002 0 0 1 2 2v4a2.002 2.002 0 0 1-2 2h-4a2.002 2.002 0 0 1-2-2v-4a2.002 2.002 0 0 1 2-2Zm4 6v-4h-4.002L24 28ZM27 6v9.172l3.586-3.586L32 13l-6 6-6-6 1.414-1.414L25 15.172V6H13V4h12a2.002 2.002 0 0 1 2 2ZM2 6h6v2H2zM2 2h8v2H2z" /> + <path + d="M5 25v-9.172l-3.586 3.586L0 18l6-6 6 6-1.414 1.414L7 15.828V25h12v2H7a2.002 2.002 0 0 1-2-2ZM24 22h4a2.002 2.002 0 0 1 2 2v4a2.002 2.002 0 0 1-2 2h-4a2.002 2.002 0 0 1-2-2v-4a2.002 2.002 0 0 1 2-2Zm4 6v-4h-4.002L24 28ZM27 6v9.172l3.586-3.586L32 13l-6 6-6-6 1.414-1.414L25 15.172V6H13V4h12a2.002 2.002 0 0 1 2 2ZM2 6h6v2H2zM2 2h8v2H2z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1819,6 +1869,7 @@ export function TransformationIcon() { </svg> ); } + export function TestingIcon() { return ( <svg @@ -1827,8 +1878,10 @@ export function TestingIcon() { height={800} viewBox="0 0 32 32" className="icon"> - <path d="M28 17v5H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-5ZM18 28h-4v-4h4Z" /> - <path d="M30 10V8h-2.101a4.968 4.968 0 0 0-.732-1.753l1.49-1.49-1.414-1.414-1.49 1.49A4.968 4.968 0 0 0 24 4.101V2h-2v2.101a4.968 4.968 0 0 0-1.753.732l-1.49-1.49-1.414 1.414 1.49 1.49A4.968 4.968 0 0 0 18.101 8H16v2h2.101a4.968 4.968 0 0 0 .732 1.753l-1.49 1.49 1.414 1.414 1.49-1.49a4.968 4.968 0 0 0 1.753.732V16h2v-2.101a4.968 4.968 0 0 0 1.753-.732l1.49 1.49 1.414-1.414-1.49-1.49A4.968 4.968 0 0 0 27.899 10Zm-7 2a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Z" /> + <path + d="M28 17v5H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-5ZM18 28h-4v-4h4Z"/> + <path + d="M30 10V8h-2.101a4.968 4.968 0 0 0-.732-1.753l1.49-1.49-1.414-1.414-1.49 1.49A4.968 4.968 0 0 0 24 4.101V2h-2v2.101a4.968 4.968 0 0 0-1.753.732l-1.49-1.49-1.414 1.414 1.49 1.49A4.968 4.968 0 0 0 18.101 8H16v2h2.101a4.968 4.968 0 0 0 .732 1.753l-1.49 1.49 1.414 1.414 1.49-1.49a4.968 4.968 0 0 0 1.753.732V16h2v-2.101a4.968 4.968 0 0 0 1.753-.732l1.49 1.49 1.414-1.414-1.49-1.49A4.968 4.968 0 0 0 27.899 10Zm-7 2a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1839,6 +1892,7 @@ export function TestingIcon() { </svg> ); } + export function ApiIcon() { return ( <svg @@ -1848,7 +1902,8 @@ export function ApiIcon() { viewBox="0 0 32 32" className="icon"> <title>{"api"}</title> - <path d="M26 22a3.86 3.86 0 0 0-2 .57l-3.09-3.1a6 6 0 0 0 0-6.94L24 9.43a3.86 3.86 0 0 0 2 .57 4 4 0 1 0-4-4 3.86 3.86 0 0 0 .57 2l-3.1 3.09a6 6 0 0 0-6.94 0L9.43 8A3.86 3.86 0 0 0 10 6a4 4 0 1 0-4 4 3.86 3.86 0 0 0 2-.57l3.09 3.1a6 6 0 0 0 0 6.94L8 22.57A3.86 3.86 0 0 0 6 22a4 4 0 1 0 4 4 3.86 3.86 0 0 0-.57-2l3.1-3.09a6 6 0 0 0 6.94 0l3.1 3.09a3.86 3.86 0 0 0-.57 2 4 4 0 1 0 4-4Zm0-18a2 2 0 1 1-2 2 2 2 0 0 1 2-2ZM4 6a2 2 0 1 1 2 2 2 2 0 0 1-2-2Zm2 22a2 2 0 1 1 2-2 2 2 0 0 1 [...] + <path + d="M26 22a3.86 3.86 0 0 0-2 .57l-3.09-3.1a6 6 0 0 0 0-6.94L24 9.43a3.86 3.86 0 0 0 2 .57 4 4 0 1 0-4-4 3.86 3.86 0 0 0 .57 2l-3.1 3.09a6 6 0 0 0-6.94 0L9.43 8A3.86 3.86 0 0 0 10 6a4 4 0 1 0-4 4 3.86 3.86 0 0 0 2-.57l3.09 3.1a6 6 0 0 0 0 6.94L8 22.57A3.86 3.86 0 0 0 6 22a4 4 0 1 0 4 4 3.86 3.86 0 0 0-.57-2l3.1-3.09a6 6 0 0 0 6.94 0l3.1 3.09a3.86 3.86 0 0 0-.57 2 4 4 0 1 0 4-4Zm0-18a2 2 0 1 1-2 2 2 2 0 0 1 2-2ZM4 6a2 2 0 1 1 2 2 2 2 0 0 1-2-2Zm2 22a2 2 0 1 1 2-2 2 2 0 0 1-2 [...] <path d="M0 0h32v32H0z" style={{ @@ -1858,6 +1913,7 @@ export function ApiIcon() { </svg> ); } + export function MonitoringIcon() { return ( <svg @@ -1866,8 +1922,10 @@ export function MonitoringIcon() { height={800} viewBox="0 0 32 32" className="icon"> - <path d="M28 16v6H4V6h7V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-6ZM18 28h-4v-4h4Z" /> - <path d="M18 18h-.01a1 1 0 0 1-.951-.725L15.246 11H11V9h5a1 1 0 0 1 .962.725l1.074 3.76 3.009-9.78A1.014 1.014 0 0 1 22 3a.98.98 0 0 1 .949.684L24.72 9H30v2h-6a1 1 0 0 1-.949-.684l-1.013-3.04-3.082 10.018A1 1 0 0 1 18 18Z" /> + <path + d="M28 16v6H4V6h7V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-6ZM18 28h-4v-4h4Z"/> + <path + d="M18 18h-.01a1 1 0 0 1-.951-.725L15.246 11H11V9h5a1 1 0 0 1 .962.725l1.074 3.76 3.009-9.78A1.014 1.014 0 0 1 22 3a.98.98 0 0 1 .949.684L24.72 9H30v2h-6a1 1 0 0 1-.949-.684l-1.013-3.04-3.082 10.018A1 1 0 0 1 18 18Z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1878,6 +1936,7 @@ export function MonitoringIcon() { </svg> ); } + export function NetworkingIcon() { return ( <svg @@ -1887,13 +1946,18 @@ export function NetworkingIcon() { height={800} viewBox="0 0 511.984 511.984" className="icon"> - <path d="M207.29 287.991H48.735C30.687 287.991 16 302.375 16 320.054v111.868c0 17.679 14.688 32.063 32.735 32.063H207.29c18.031 0 32.703-14.384 32.703-32.063V320.054c0-17.679-14.672-32.063-32.703-32.063zm0 143.996-159.291-.064.736-111.932 159.259.064.048 111.645c0 .015-.192.287-.752.287z" /> - <path d="M383.988 239.992H127.996c-8.832 0-16 7.168-16 16v47.998c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-31.999h223.993v31.999c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-47.998c0-8.832-7.167-16-15.999-16z" /> - <path d="M463.25 287.991H304.727c-18.047 0-32.735 14.384-32.735 32.063v111.868c0 17.679 14.688 32.063 32.735 32.063H463.25c18.047 0 32.735-14.384 32.735-32.063V320.054c-.001-17.679-14.688-32.063-32.735-32.063zm0 143.996-159.259-.064.736-111.932 159.259.064.064 111.645c-.016-.001-.208.287-.8.287zM415.987 479.985h-63.998c-8.832 0-16 7.168-16 16s7.168 16 16 16h63.998c8.832 0 16-7.168 16-16s-7.168-16-16-16zM335.253 0H176.73c-18.047 0-32.735 14.384-32.735 32.063v111.869c0 17.679 1 [...] - <path d="M255.992 191.994c-8.832 0-16 7.168-16 16v47.998c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-47.998c.001-8.832-7.167-16-15.999-16z" /> + <path + d="M207.29 287.991H48.735C30.687 287.991 16 302.375 16 320.054v111.868c0 17.679 14.688 32.063 32.735 32.063H207.29c18.031 0 32.703-14.384 32.703-32.063V320.054c0-17.679-14.672-32.063-32.703-32.063zm0 143.996-159.291-.064.736-111.932 159.259.064.048 111.645c0 .015-.192.287-.752.287z"/> + <path + d="M383.988 239.992H127.996c-8.832 0-16 7.168-16 16v47.998c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-31.999h223.993v31.999c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-47.998c0-8.832-7.167-16-15.999-16z"/> + <path + d="M463.25 287.991H304.727c-18.047 0-32.735 14.384-32.735 32.063v111.868c0 17.679 14.688 32.063 32.735 32.063H463.25c18.047 0 32.735-14.384 32.735-32.063V320.054c-.001-17.679-14.688-32.063-32.735-32.063zm0 143.996-159.259-.064.736-111.932 159.259.064.064 111.645c-.016-.001-.208.287-.8.287zM415.987 479.985h-63.998c-8.832 0-16 7.168-16 16s7.168 16 16 16h63.998c8.832 0 16-7.168 16-16s-7.168-16-16-16zM335.253 0H176.73c-18.047 0-32.735 14.384-32.735 32.063v111.869c0 17.679 14. [...] + <path + d="M255.992 191.994c-8.832 0-16 7.168-16 16v47.998c0 8.832 7.168 16 16 16s15.999-7.168 15.999-16v-47.998c.001-8.832-7.167-16-15.999-16z"/> </svg> ); } + export function HealthIcon() { return ( <svg @@ -1911,10 +1975,11 @@ export function HealthIcon() { d="M27 7h0c-2.6-2.7-6.9-2.7-9.5 0l-1.3 1.4c-.1.1-.4.1-.5 0L14.4 7C11.8 4.3 7.6 4.3 5 7h0c-2.6 2.7-2.6 7.1 0 9.8l1.6 1.6 9.2 9.5c.1.1.4.1.5 0l9.2-9.5 1.6-1.6c2.6-2.7 2.6-7.1-.1-9.8z" className="st0" /> - <path d="M9 15h3l2-2 2 4 2-5 2 3h3" className="st0" /> + <path d="M9 15h3l2-2 2 4 2-5 2 3h3" className="st0"/> </svg> ); } + export function KubernetesIcon() { return ( <svg @@ -1947,6 +2012,7 @@ export function KubernetesIcon() { </svg> ); } + export function DocumentIcon() { return ( <svg @@ -1956,7 +2022,8 @@ export function DocumentIcon() { viewBox="0 0 32 32" className="icon"> <title>{"document--blank"}</title> - <path d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.908.908 0 0 0-.3-.7ZM18 4.4l5.6 5.6H18ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6Z" /> + <path + d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.908.908 0 0 0-.3-.7ZM18 4.4l5.6 5.6H18ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6Z"/> <path d="M0 0h32v32H0z" data-name="<Transparent Rectangle>" @@ -1967,6 +2034,7 @@ export function DocumentIcon() { </svg> ); } + export function GitIcon() { return ( <svg @@ -1985,6 +2053,7 @@ export function GitIcon() { </svg> ); } + export function SocialIcon() { return ( <svg @@ -2012,6 +2081,7 @@ export function SocialIcon() { </svg> ); } + export function DebeziumIcon() { return ( <svg @@ -2028,8 +2098,8 @@ export function DebeziumIcon() { y2={114.02} gradientUnits="userSpaceOnUse" > - <stop offset={0} stopColor="#91d443" /> - <stop offset={1} stopColor="#48bfe0" /> + <stop offset={0} stopColor="#91d443"/> + <stop offset={1} stopColor="#48bfe0"/> </linearGradient> <linearGradient xlinkHref="#linear-gradient" @@ -2100,6 +2170,7 @@ export function DebeziumIcon() { </svg> ); } + export function IgniteIcon() { return ( <svg @@ -2120,6 +2191,7 @@ export function IgniteIcon() { </svg> ); } + export function HazelcastIcon() { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133.3 133.3" className="icon"> @@ -2157,6 +2229,7 @@ export function HazelcastIcon() { </svg> ); } + export function AzureIcon() { return ( <svg @@ -2175,8 +2248,8 @@ export function AzureIcon() { gradientTransform="matrix(1 0 0 -1 1075 158)" gradientUnits="userSpaceOnUse" > - <stop offset={0} stopColor="#114a8b" /> - <stop offset={1} stopColor="#0669bc" /> + <stop offset={0} stopColor="#114a8b"/> + <stop offset={1} stopColor="#0669bc"/> </linearGradient> <linearGradient id="b" @@ -2187,11 +2260,11 @@ export function AzureIcon() { gradientTransform="matrix(1 0 0 -1 1075 158)" gradientUnits="userSpaceOnUse" > - <stop offset={0} stopOpacity={0.3} /> - <stop offset={0.071} stopOpacity={0.2} /> - <stop offset={0.321} stopOpacity={0.1} /> - <stop offset={0.623} stopOpacity={0.05} /> - <stop offset={1} stopOpacity={0} /> + <stop offset={0} stopOpacity={0.3}/> + <stop offset={0.071} stopOpacity={0.2}/> + <stop offset={0.321} stopOpacity={0.1}/> + <stop offset={0.623} stopOpacity={0.05}/> + <stop offset={1} stopOpacity={0}/> </linearGradient> <linearGradient id="c" @@ -2202,8 +2275,8 @@ export function AzureIcon() { gradientTransform="matrix(1 0 0 -1 1075 158)" gradientUnits="userSpaceOnUse" > - <stop offset={0} stopColor="#3ccbf4" /> - <stop offset={1} stopColor="#2892df" /> + <stop offset={0} stopColor="#3ccbf4"/> + <stop offset={1} stopColor="#2892df"/> </linearGradient> </defs> <path