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
-
-
+ 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 (
+
+ );
+}
+
+// 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 (
-
- );
-}
-
-
// 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