From f2e57099dc1741b5f93d9838047d989b892a3726 Mon Sep 17 00:00:00 2001 From: Alexander Skrock Date: Sat, 18 May 2024 21:40:10 +0200 Subject: [PATCH] chore(cockpit-links) refactor into a common react --- .../deployment-tool/DeploymentTool.js | 47 ++-------------- .../deployment-tool/DeploymentTool.less | 7 --- .../shared/ui/CockpitDeploymentLink.js | 42 +++++++++++++++ .../camunda-plugin/shared/ui/CockpitLink.js | 54 +++++++++++++++++++ .../camunda-plugin/shared/ui/CockpitLink.less | 15 ++++++ .../shared/ui/CockpitProcessInstanceLink.js | 35 ++++++++++++ .../start-instance-tool/StartInstanceTool.js | 45 ++-------------- .../StartInstanceTool.less | 16 ------ 8 files changed, 153 insertions(+), 108 deletions(-) create mode 100644 client/src/plugins/camunda-plugin/shared/ui/CockpitDeploymentLink.js create mode 100644 client/src/plugins/camunda-plugin/shared/ui/CockpitLink.js create mode 100644 client/src/plugins/camunda-plugin/shared/ui/CockpitLink.less create mode 100644 client/src/plugins/camunda-plugin/shared/ui/CockpitProcessInstanceLink.js diff --git a/client/src/plugins/camunda-plugin/deployment-tool/DeploymentTool.js b/client/src/plugins/camunda-plugin/deployment-tool/DeploymentTool.js index e2530a5fb8..42838e58ed 100644 --- a/client/src/plugins/camunda-plugin/deployment-tool/DeploymentTool.js +++ b/client/src/plugins/camunda-plugin/deployment-tool/DeploymentTool.js @@ -17,6 +17,8 @@ import classNames from 'classnames'; import { default as CamundaAPI, ApiErrors, ConnectionError } from '../shared/CamundaAPI'; import AUTH_TYPES from '../shared/AuthTypes'; +import CockpitDeploymentLink from '../shared/ui/CockpitDeploymentLink'; + import DeploymentConfigOverlay from './DeploymentConfigOverlay'; import DeploymentConfigValidator from './validation/DeploymentConfigValidator'; import { DeploymentError } from '../shared/CamundaAPI'; @@ -192,7 +194,7 @@ export default class DeploymentTool extends PureComponent { displayNotification({ type: 'success', title: `${getDeploymentType(tab)} deployed`, - content: , + content: , duration: 8000 }); @@ -597,39 +599,6 @@ export default class DeploymentTool extends PureComponent { } -function CockpitLink(props) { - const { - endpointUrl, - deployment - } = props; - - const { - id, - deployedProcessDefinition - } = deployment; - - const baseUrl = getWebAppsBaseUrl(endpointUrl); - - const query = `deploymentsQuery=%5B%7B%22type%22:%22id%22,%22operator%22:%22eq%22,%22value%22:%22${id}%22%7D%5D`; - const cockpitUrl = `${baseUrl}/cockpit/default/#/repository/?${query}`; - - return ( -
- {deployedProcessDefinition ? - ( -
- Process definition ID: - {deployedProcessDefinition.id} -
- ) - : null} - - Open in Camunda Cockpit - -
- ); -} - // helpers ////////// function withoutExtension(name) { @@ -697,13 +666,3 @@ function withSerializedAttachments(deployment) { function basename(filePath) { return filePath.split('\\').pop().split('/').pop(); } - -function getWebAppsBaseUrl(url) { - const [ protocol,, host, restRoot ] = url.split('/'); - - return isTomcat(restRoot) ? `${protocol}//${host}/camunda/app` : `${protocol}//${host}/app`; -} - -function isTomcat(restRoot) { - return restRoot === 'engine-rest'; -} diff --git a/client/src/plugins/camunda-plugin/deployment-tool/DeploymentTool.less b/client/src/plugins/camunda-plugin/deployment-tool/DeploymentTool.less index ff86b27c02..091385d882 100644 --- a/client/src/plugins/camunda-plugin/deployment-tool/DeploymentTool.less +++ b/client/src/plugins/camunda-plugin/deployment-tool/DeploymentTool.less @@ -4,11 +4,4 @@ height: 24px; fill: var(--status-bar-icon-font-color); } -} - -:local(.CockpitLink) { - - & > div { - margin-bottom: 5px; - } } \ No newline at end of file diff --git a/client/src/plugins/camunda-plugin/shared/ui/CockpitDeploymentLink.js b/client/src/plugins/camunda-plugin/shared/ui/CockpitDeploymentLink.js new file mode 100644 index 0000000000..4e8795654a --- /dev/null +++ b/client/src/plugins/camunda-plugin/shared/ui/CockpitDeploymentLink.js @@ -0,0 +1,42 @@ +/** + * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH + * under one or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information regarding copyright + * ownership. + * + * Camunda licenses this file to you under the MIT; you may not use this file + * except in compliance with the MIT License. + */ + +import React, { useMemo } from 'react'; + +import CockpitLink from './CockpitLink'; + +export default function CockpitDeploymentLink(props) { + const { + engineRestUrl, + deployment + } = props; + + const { + id, + deployedProcessDefinition + } = deployment; + + const cockpitPath = useMemo(() => `/repository/?deploymentsQuery=%5B%7B%22type%22:%22id%22,%22operator%22:%22eq%22,%22value%22:%22${id}%22%7D%5D`, [ id ]); + + return ( + + { + deployedProcessDefinition + ? ( +
+ Process definition ID: + {deployedProcessDefinition.id} +
+ ) + : null + } + + ); +} \ No newline at end of file diff --git a/client/src/plugins/camunda-plugin/shared/ui/CockpitLink.js b/client/src/plugins/camunda-plugin/shared/ui/CockpitLink.js new file mode 100644 index 0000000000..254e5c7cf6 --- /dev/null +++ b/client/src/plugins/camunda-plugin/shared/ui/CockpitLink.js @@ -0,0 +1,54 @@ +/** + * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH + * under one or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information regarding copyright + * ownership. + * + * Camunda licenses this file to you under the MIT; you may not use this file + * except in compliance with the MIT License. + */ + +import React, { Children, useMemo } from 'react'; + +import * as css from './CockpitLink.less'; + +export default function CockpitLink(props) { + const { + engineRestUrl, + cockpitPath, + children + } = props; + + const cockpitBaseUrl = useMemo(() => { + + // TODO Integrate well known endpoint base url for Camunda Web Apps + const webAppsBaseUrl = getWebAppsBaseUrl(engineRestUrl); + + // TODO ensure a single slash between base url and relative path segment + return webAppsBaseUrl + '/cockpit/default/#'; + }, [ engineRestUrl ]); + + // TODO ensure a single slash between base url and relative path segment + const link = useMemo(() => `${cockpitBaseUrl}${cockpitPath}`); + + return ( +
+ { Children.toArray(children) } + + Open in Camunda Cockpit + +
+ ); +} + +// helpers ////////// + +function getWebAppsBaseUrl(url) { + const [ protocol,, host, restRoot ] = url.split('/'); + + return isTomcat(restRoot) ? `${protocol}//${host}/camunda/app` : `${protocol}//${host}/app`; +} + +function isTomcat(restRoot) { + return restRoot === 'engine-rest'; +} diff --git a/client/src/plugins/camunda-plugin/shared/ui/CockpitLink.less b/client/src/plugins/camunda-plugin/shared/ui/CockpitLink.less new file mode 100644 index 0000000000..a3aa79fcc4 --- /dev/null +++ b/client/src/plugins/camunda-plugin/shared/ui/CockpitLink.less @@ -0,0 +1,15 @@ +:local(.CockpitLink) { + + & > div { + margin-bottom: 5px; + } + + code { + user-select: text; + padding-right: 8px; + margin-left: 2px; + background-color: var(--color-grey-225-10-90); + word-break: break-all; + border-radius: 3px; + } +} \ No newline at end of file diff --git a/client/src/plugins/camunda-plugin/shared/ui/CockpitProcessInstanceLink.js b/client/src/plugins/camunda-plugin/shared/ui/CockpitProcessInstanceLink.js new file mode 100644 index 0000000000..ca05d90df3 --- /dev/null +++ b/client/src/plugins/camunda-plugin/shared/ui/CockpitProcessInstanceLink.js @@ -0,0 +1,35 @@ +/** + * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH + * under one or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information regarding copyright + * ownership. + * + * Camunda licenses this file to you under the MIT; you may not use this file + * except in compliance with the MIT License. + */ + +import React, { useMemo } from 'react'; + +import CockpitLink from './CockpitLink'; + +export default function CockpitProcessInstanceLink(props) { + const { + engineRestUrl, + processInstance + } = props; + + const { + id + } = processInstance; + + const cockpitPath = useMemo(() => `/process-instance/${id}`, [ id ]); + + return ( + +
+ Process instance ID: + {id} +
+ + ); +} \ No newline at end of file diff --git a/client/src/plugins/camunda-plugin/start-instance-tool/StartInstanceTool.js b/client/src/plugins/camunda-plugin/start-instance-tool/StartInstanceTool.js index 84f2f25b8c..807655cd33 100644 --- a/client/src/plugins/camunda-plugin/start-instance-tool/StartInstanceTool.js +++ b/client/src/plugins/camunda-plugin/start-instance-tool/StartInstanceTool.js @@ -18,6 +18,8 @@ import StartInstanceConfigOverlay from './StartInstanceConfigOverlay'; import { DeploymentError, StartInstanceError } from '../shared/CamundaAPI'; +import CockpitProcessInstanceLink from '../shared/ui/CockpitProcessInstanceLink'; + import * as css from './StartInstanceTool.less'; import { Fill } from '../../../app/slot-fill'; @@ -412,7 +414,7 @@ export default class StartInstanceTool extends PureComponent { displayNotification({ type: 'success', title: 'Process instance started', - content: , + content: , duration: 8000 }); } @@ -562,47 +564,8 @@ export default class StartInstanceTool extends PureComponent { } - -function CockpitLink(props) { - const { - endpointUrl, - processInstance - } = props; - - const { - id - } = processInstance; - - const baseUrl = getWebAppsBaseUrl(endpointUrl); - - const cockpitUrl = `${baseUrl}/cockpit/default/#/process-instance/${id}`; - - return ( -
-
- Process instance ID: - {id} -
- - Open in Camunda Cockpit - -
- ); -} - - // helpers ////////// function isBpmnTab(tab) { return tab && tab.type === 'bpmn'; -} - -function getWebAppsBaseUrl(url) { - const [ protocol,, host, restRoot ] = url.split('/'); - - return isTomcat(restRoot) ? `${protocol}//${host}/camunda/app` : `${protocol}//${host}/app`; -} - -function isTomcat(restRoot) { - return restRoot === 'engine-rest'; -} +} \ No newline at end of file diff --git a/client/src/plugins/camunda-plugin/start-instance-tool/StartInstanceTool.less b/client/src/plugins/camunda-plugin/start-instance-tool/StartInstanceTool.less index 5b6661aa6a..031d009f4a 100644 --- a/client/src/plugins/camunda-plugin/start-instance-tool/StartInstanceTool.less +++ b/client/src/plugins/camunda-plugin/start-instance-tool/StartInstanceTool.less @@ -3,20 +3,4 @@ width: 24px; height: 24px; } -} - -:local(.CockpitLink) { - - & > div { - margin-bottom: 5px; - } - - code { - user-select: text; - padding-right: 8px; - margin-left: 2px; - background-color: var(--color-grey-225-10-90); - word-break: break-all; - border-radius: 3px; - } } \ No newline at end of file