Metrics tracing tags

components/inspectit-ocelot-configurationserver-ui/src/components/views/configuration/ConfigurationView.js

@@ -165,7 +165,7 @@ class ConfigurationView extends React.Component {
    * If no version is specified, the latest version will be selected.
    */
   openFile = (filename, versionId = null) => {
-    if (this.props.selectedVersion != versionId) {
+    if (this.props.selectedVersion !== versionId) {
       this.props.selectVersion(versionId, false);
     }
     this.props.selectFile(filename);
@@ -191,15 +191,13 @@ class ConfigurationView extends React.Component {
       canWrite,
     } = this.props;
     const showEditor = (selection || selectedDefaultConfigFile) && !isDirectory;
-
     const { path, name } = this.parsePath(selection, selectedDefaultConfigFile);
     const icon = 'pi-' + (isDirectory ? 'folder' : 'file');
     const showHeader = !!name;
 
     const readOnly = !canWrite || !!selectedDefaultConfigFile || !isLatestVersion;
 
     const fileContentWithoutFirstLine = fileContent ? fileContent.split('\n').slice(1).join('\n') : '';
-
     return (
       <div className="this">
         <style jsx>{`

components/inspectit-ocelot-configurationserver-ui/src/components/views/configuration/FileToolbar.js

@@ -102,6 +102,13 @@ const FileToolbar = ({
               tooltipOptions={TOOLTIP_OPTIONS}
               onClick={() => showUploadDialog(selection)}
             />
+            <Button
+              disabled={readOnly || loading}
+              tooltip="Upload File or Directory"
+              icon="pi pi-upload"
+              tooltipOptions={TOOLTIP_OPTIONS}
+              onClick={() => showUploadDialog(selection)}
+            />
           </div>
         }
         right={
@@ -113,6 +120,13 @@ const FileToolbar = ({
               icon={showHiddenFiles ? 'pi pi-eye' : 'pi pi-eye-slash'}
               tooltipOptions={TOOLTIP_OPTIONS}
             />
+            <Button
+              disabled={loading}
+              onClick={toggleShowHiddenFiles}
+              tooltip={showHiddenFiles ? 'Hide Files' : 'Show Hidden Files'}
+              icon={showHiddenFiles ? 'pi pi-eye' : 'pi pi-eye-slash'}
+              tooltipOptions={TOOLTIP_OPTIONS}
+            />
             <Button
               disabled={loading}
               onClick={showSearchDialog}

components/inspectit-ocelot-configurationserver-ui/src/components/views/dialogs/DownloadDialogue.js

@@ -10,7 +10,17 @@ import { ContentTypeMapper } from '../mappings/ContentTypeMapper';
 /**
  * Dialog that shows the given content, applying syntax highlighting if available, and offering a download option
  */
-const DownloadDialogue = ({ visible, onHide, error, loading, contentValue, contentType, contextName }) => {
+const DownloadDialogue = ({
+  visible,
+  onHide,
+  error,
+  loading,
+  contentValue,
+  contentType,
+  contextName,
+  isDownloadDialogFooterHidden,
+  onCancel,
+}) => {
   const dialogueSettings = ContentTypeMapper(contentType, contextName);
 
   const downloadFilename =
@@ -37,18 +47,23 @@ const DownloadDialogue = ({ visible, onHide, error, loading, contentValue, conte
 
   return (
     <>
+      <style jsx>{`
+        .downloadDialogFooter {
+          display: none;
+        }
+      `}</style>
       <Dialog
         style={{ width: '50vw', overflow: 'auto' }}
         header={dialogueSettings.header}
         modal={true}
         visible={visible}
         onHide={onHide}
         footer={
-          <div>
+          <div className={isDownloadDialogFooterHidden ? 'downloadDialogFooter' : null}>
             <a href={error || loading ? null : download()} download={downloadFilename}>
               <Button icon="pi pi-download" label="Download" className="p-button-primary" disabled={loading || error} />
             </a>
-            <Button label="Cancel" className="p-button-secondary" onClick={onHide} />
+            <Button label="Cancel" className="p-button-secondary" onClick={onCancel} />
           </div>
         }
       >
@@ -86,6 +101,10 @@ DownloadDialogue.propTypes = {
   contentType: PropTypes.string,
   /** The name of the data's context. E.g. the agent whose logs are being shown.*/
   contextName: PropTypes.string,
+  /** Whether the cancel Button is disabled */
+  disableDownloadCancelButton: PropTypes.bool,
+  /** Callback on dialog cancel */
+  onCancel: PropTypes.func,
 };
 
 DownloadDialogue.defaultProps = {

components/inspectit-ocelot-configurationserver-ui/src/components/views/status/StatusTable.js

@@ -53,23 +53,19 @@ class AgentMappingCell extends React.Component {
             display: flex;
             align-items: stretch;
           }
-
           .mapping-name {
             flex: 1;
             margin-right: 0.5rem;
           }
-
           .no-mapping {
             color: gray;
             font-style: italic;
           }
-
           .show-attributes {
             float: right;
             cursor: pointer;
             color: #007ad9;
           }
-
           .attributes {
             margin-top: 0.5rem;
             border-left: 0.25rem solid #ddd;
@@ -174,7 +170,6 @@ class StatusTable extends React.Component {
           .this {
             position: relative;
           }
-
           .this :global(.config-info-button) {
             width: 1.2rem;
             height: 1.2rem;
@@ -184,7 +179,6 @@ class StatusTable extends React.Component {
             background: #ddd;
             border-color: #ddd;
           }
-
           .this :global(.log-button) {
             width: 1.2rem;
             height: 1.2rem;
@@ -194,7 +188,6 @@ class StatusTable extends React.Component {
             background: #ddd;
             border-color: #ddd;
           }
-
           .this :global(.service-state-button) {
             width: 1.2rem;
             height: 1.2rem;
@@ -204,7 +197,6 @@ class StatusTable extends React.Component {
             background: #ddd;
             border-color: #ddd;
           }
-
           .this :global(.badge) {
             width: 1.2rem;
             height: 1.2rem;
@@ -217,7 +209,6 @@ class StatusTable extends React.Component {
             justify-content: center;
             color: white;
           }
-
           .this :global(.might-overflow) {
             max-width: 17.8rem;
             display: inline-block;
@@ -301,8 +292,11 @@ class StatusTable extends React.Component {
   };
 
   agentHealthTemplate = (rowData) => {
+    const { onShowHealthStateDialog } = this.props;
+    const { healthState, metaInformation } = rowData;
+    const { health } = healthState;
+    const { agentId } = metaInformation;
     const { onShowDownloadDialog } = this.props;
-    const { health, metaInformation } = rowData;
 
     let { agentCommandsEnabled, supportArchiveAvailable } = this.resolveServiceAvailability(metaInformation);
 
@@ -326,12 +320,14 @@ class StatusTable extends React.Component {
         iconColor = '#e8c413';
         break;
     }
+
     return (
       <>
         <style jsx>{`
           .state {
             align-items: center;
             display: flex;
+            cursor: pointer;
             position: relative;
           }
 
@@ -347,8 +343,10 @@ class StatusTable extends React.Component {
         `}</style>
         {health ? (
           <div className="state">
-            <i className={classNames('pi pi-fw', iconClass)} style={{ color: iconColor }}></i>
-            <span>{healthInfo}</span>
+            <div className="health-state" onClick={() => onShowHealthStateDialog(agentId, healthState)}>
+              <i className={classNames('pi pi-fw', iconClass)} style={{ color: iconColor }}></i>
+              <span>{healthInfo}</span>
+            </div>
             <Button
               className="archive-button"
               icon="pi pi-cloud-download"
@@ -416,15 +414,12 @@ class StatusTable extends React.Component {
             display: flex;
             align-items: center;
           }
-
           .pi {
             margin-right: 0.5rem;
           }
-
           .pi.live {
             color: #ef5350;
           }
-
           .pi.workspace {
             color: #616161;
           }