diff --git a/components/inspectit-ocelot-configurationserver-ui/src/components/views/promotion/PromotionView.js b/components/inspectit-ocelot-configurationserver-ui/src/components/views/promotion/PromotionView.js
index 3bda27d7b5..0ca86d2c10 100644
--- a/components/inspectit-ocelot-configurationserver-ui/src/components/views/promotion/PromotionView.js
+++ b/components/inspectit-ocelot-configurationserver-ui/src/components/views/promotion/PromotionView.js
@@ -11,6 +11,7 @@ import PromotionApprovalDialog from './dialogs/PromotionApprovalDialog';
import axios from '../../../lib/axios-api';
import PromotionConflictDialog from './dialogs/PromotionConflictDialog';
import _ from 'lodash';
+import { ProgressSpinner } from 'primereact/progressspinner';
/**
* The view for displaying existing promotion files including their modifications.
@@ -123,11 +124,15 @@ const PromotionView = () => {
.selection-information {
display: flex;
flex-grow: 1;
+ flex-direction: column;
height: 100%;
align-items: center;
justify-content: center;
color: #bbb;
}
+ .selection-information > span {
+ margin-bottom: 1rem;
+ }
`}
@@ -182,6 +187,13 @@ const PromotionView = () => {
)}
>
+ ) : isLoading ? (
+ <>
+
diff --git a/components/inspectit-ocelot-configurationserver-ui/src/components/views/promotion/dialogs/PromotionApprovalDialog.js b/components/inspectit-ocelot-configurationserver-ui/src/components/views/promotion/dialogs/PromotionApprovalDialog.js
index 4193552b6a..71d8857424 100644
--- a/components/inspectit-ocelot-configurationserver-ui/src/components/views/promotion/dialogs/PromotionApprovalDialog.js
+++ b/components/inspectit-ocelot-configurationserver-ui/src/components/views/promotion/dialogs/PromotionApprovalDialog.js
@@ -1,93 +1,104 @@
-import React from 'react';
+import React, { useEffect, useState, useRef } from 'react';
import { Dialog } from 'primereact/dialog';
import { Button } from 'primereact/button';
import { ProgressBar } from 'primereact/progressbar';
import { InputText } from 'primereact/inputtext';
+import _ from 'lodash';
/**
* Dialog for showing the currently approved files before promoting them.
*/
-class PromotionApprovalDialog extends React.Component {
- state = {
- /** The promotion message to be send to the backend. */
- promotionMessage: '',
- };
- input = React.createRef();
- render() {
- const { visible, onHide, isLoading, approvedFiles = [] } = this.props;
- const { promotionMessage } = this.state;
- const footer = (
-
-
-
-
- );
-
- return (
- <>
-
+ // ref variables
+ const messageInput = useRef(null);
-
- >
- );
- }
-
- componentDidUpdate(prevProps) {
- if (!prevProps.visible && this.props.visible) {
- /**Timeout is needed for .focus() to be triggered correctly. */
- setTimeout(() => {
- this.input.current.element.focus();
- }, 0);
- this.setState({ promotionMessage: '' });
+ // clear message when dialog gets visible
+ useEffect(() => {
+ if (visible) {
+ setMessage('');
}
- }
+ }, [visible]);
+
+ // invoke the promotion
+ const promote = () => onPromote(message);
- onKeyPress = (e) => {
- if (e.key === 'Enter' && !this.props.isLoading && this.state.promotionMessage) {
- this.promote();
+ // promote when enter is pressed
+ const onKeyPress = (event) => {
+ if (event.key === 'Enter' && !isLoading && isValidMessage) {
+ promote();
}
};
- promote = () => {
- this.props.onPromote(this.state.promotionMessage);
+ // set the focus to the input field after the dialog is shown
+ const onShow = () => {
+ messageInput.current.element.focus();
};
-}
+
+ const footer = (
+
+
+
+
+ );
+
+ return (
+ <>
+
+
+
+ >
+ );
+};
export default PromotionApprovalDialog;
diff --git a/components/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusTable.js b/components/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusTable.js
index 9cbb9e6564..df764d81c5 100644
--- a/components/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusTable.js
+++ b/components/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusTable.js
@@ -310,8 +310,8 @@ class StatusTable extends React.Component {
sortable
style={{ width: '175px' }}
/>
-
+