Closes #909 - Extend configuration UI to be able to search in the content of the configuration files

components/inspectit-ocelot-configurationserver-ui/src/components/editor/EditorView.js

@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useRef } from 'react';
 import editorConfig from '../../data/yaml-editor-config.json';
 import EditorToolbar from './EditorToolbar';
 import Notificationbar from './Notificationbar';
@@ -14,119 +14,118 @@ const TreeTableEditor = dynamic(() => import('./TreeTableEditor'), { ssr: false
  * Editor view consisting of the AceEditor and a toolbar.
  *
  */
-class EditorView extends React.Component {
-  render() {
-    const {
-      value,
-      schema,
-      showEditor,
-      hint,
-      onRefresh,
-      onChange,
-      onCreate,
-      onSave,
-      isRefreshing,
-      enableButtons,
-      isErrorNotification,
-      notificationIcon,
-      notificationText,
-      canSave,
-      loading,
-      children,
-      readOnly,
-      showVisualConfigurationView,
-      onToggleVisualConfigurationView,
-    } = this.props;
+const EditorView = ({
+  value,
+  schema,
+  showEditor,
+  hint,
+  onRefresh,
+  onChange,
+  onCreate,
+  onSave,
+  isRefreshing,
+  enableButtons,
+  isErrorNotification,
+  notificationIcon,
+  notificationText,
+  canSave,
+  loading,
+  children,
+  readOnly,
+  showVisualConfigurationView,
+  onToggleVisualConfigurationView,
+}) => {
+  // refs
+  const editorRef = useRef(null);
 
-    return (
-      <div className="this p-grid p-dir-col p-nogutter">
-        <style jsx>{`
-          .this {
-            flex: 1;
-            flex-wrap: nowrap;
-          }
-          .selection-information {
-            display: flex;
-            height: 100%;
-            align-items: center;
-            justify-content: center;
-            color: #bbb;
-          }
-          .editor-container {
-            position: relative;
-          }
-          .visual-editor-container {
-            display: flex;
-          }
-          .loading-overlay {
-            position: absolute;
-            left: 0;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #00000080;
-            color: white;
-            z-index: 100;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-        `}</style>
-        <div className="p-col-fixed">
-          <EditorToolbar
-            enableButtons={enableButtons}
+  return (
+    <div className="this p-grid p-dir-col p-nogutter">
+      <style jsx>{`
+        .this {
+          flex: 1;
+          flex-wrap: nowrap;
+        }
+        .selection-information {
+          display: flex;
+          height: 100%;
+          align-items: center;
+          justify-content: center;
+          color: #bbb;
+        }
+        .editor-container {
+          position: relative;
+        }
+        .visual-editor-container {
+          display: flex;
+        }
+        .loading-overlay {
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          background-color: #00000080;
+          color: white;
+          z-index: 100;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      `}</style>
+      <div className="p-col-fixed">
+        <EditorToolbar
+          enableButtons={enableButtons}
+          canSave={canSave}
+          onRefresh={onRefresh}
+          isRefreshing={isRefreshing}
+          onSave={onSave}
+          onSearch={() => editorRef.current.executeCommand('find')}
+          onHelp={() => editorRef.current.showShortcuts()}
+          visualConfig={showVisualConfigurationView}
+          onVisualConfigChange={onToggleVisualConfigurationView}
+        >
+          {children}
+        </EditorToolbar>
+      </div>
+      {showEditor && !showVisualConfigurationView && (
+        <div className="p-col editor-container">
+          <AceEditor
+            editorRef={(editor) => (editorRef.current = editor)}
+            onCreate={onCreate}
+            mode="yaml"
+            theme="cobalt"
+            options={editorConfig}
+            value={value}
+            onChange={onChange}
             canSave={canSave}
-            onRefresh={onRefresh}
-            isRefreshing={isRefreshing}
             onSave={onSave}
-            onSearch={() => this.editor.executeCommand('find')}
-            onHelp={() => this.editor.showShortcuts()}
-            visualConfig={showVisualConfigurationView}
-            onVisualConfigChange={onToggleVisualConfigurationView}
-          >
-            {children}
-          </EditorToolbar>
+            readOnly={readOnly}
+          />
         </div>
-        {showEditor && !showVisualConfigurationView && (
-          <div className="p-col editor-container">
-            <AceEditor
-              editorRef={(editor) => (this.editor = editor)}
-              onCreate={onCreate}
-              mode="yaml"
-              theme="cobalt"
-              options={editorConfig}
-              value={value}
-              onChange={onChange}
-              canSave={canSave}
-              onSave={onSave}
-              readOnly={readOnly}
-            />
-          </div>
-        )}
-        {showEditor && showVisualConfigurationView && (
-          <div className="p-col visual-editor-container">
-            <YamlParser yamlConfig={value} onUpdate={onChange}>
-              {(onUpdate, config) => (
-                <TreeTableEditor config={config} schema={schema} loading={loading} readOnly={readOnly} onUpdate={onUpdate} />
-              )}
-            </YamlParser>
-          </div>
-        )}
-        {!showEditor && <SelectionInformation hint={hint} />}
-        {loading && (
-          <div className="p-col">
-            <div className="loading-overlay">
-              <i className="pi pi-spin pi-spinner" style={{ fontSize: '2em' }}></i>
-            </div>
+      )}
+      {showEditor && showVisualConfigurationView && (
+        <div className="p-col visual-editor-container">
+          <YamlParser yamlConfig={value} onUpdate={onChange}>
+            {(onUpdate, config) => (
+              <TreeTableEditor config={config} schema={schema} loading={loading} readOnly={readOnly} onUpdate={onUpdate} />
+            )}
+          </YamlParser>
+        </div>
+      )}
+      {!showEditor && <SelectionInformation hint={hint} />}
+      {loading && (
+        <div className="p-col">
+          <div className="loading-overlay">
+            <i className="pi pi-spin pi-spinner" style={{ fontSize: '2em' }}></i>
           </div>
-        )}
-        <div className="p-col-fixed">
-          {notificationText ? <Notificationbar text={notificationText} isError={isErrorNotification} icon={notificationIcon} /> : null}
         </div>
+      )}
+      <div className="p-col-fixed">
+        {notificationText ? <Notificationbar text={notificationText} isError={isErrorNotification} icon={notificationIcon} /> : null}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 EditorView.propTypes = {
   /** The value of the editor */

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

@@ -11,6 +11,7 @@ import MoveDialog from './dialogs/MoveDialog';
 import FileToolbar from './FileToolbar';
 import FileTree from './FileTree';
 import { enableOcelotAutocompletion } from './OcelotAutocompleter';
+import SearchDialog from './dialogs/SearchDialog';
 
 /**
  * The header component of the editor view.
@@ -57,6 +58,7 @@ class ConfigurationView extends React.Component {
     isCreateDirectoryDialogShown: false,
     isMoveDialogShown: false,
     filePath: null,
+    isSearchDialogShown: false,
   };
 
   parsePath = (filePath, defaultConfigFilePath) => {
@@ -109,6 +111,14 @@ class ConfigurationView extends React.Component {
 
   hideMoveDialog = () => this.setState({ isMoveDialogShown: false, filePath: null });
 
+  showSearchDialog = () => this.setState({ isSearchDialogShown: true });
+
+  hideSearchDialog = () => this.setState({ isSearchDialogShown: false });
+
+  openFile = (filename) => {
+    this.props.selectFile(filename);
+  };
+
   render() {
     const {
       selection,
@@ -163,6 +173,7 @@ class ConfigurationView extends React.Component {
             showCreateFileDialog={this.showCreateFileDialog}
             showCreateDirectoryDialog={this.showCreateDirectoryDialog}
             showMoveDialog={this.showMoveDialog}
+            showSearchDialog={this.showSearchDialog}
             readOnly={readOnly}
           />
           <FileTree
@@ -218,6 +229,8 @@ class ConfigurationView extends React.Component {
           filePath={this.state.filePath}
         />
         <MoveDialog visible={this.state.isMoveDialogShown} onHide={this.hideMoveDialog} filePath={this.state.filePath} />
+
+        <SearchDialog visible={this.state.isSearchDialogShown} onHide={this.hideSearchDialog} openFile={this.openFile} />
       </div>
     );
   }
@@ -269,6 +282,7 @@ const mapDispatchToProps = {
   writeFile: configurationActions.writeFile,
   selectedFileContentsChanged: configurationActions.selectedFileContentsChanged,
   toggleVisualConfigurationView: configurationActions.toggleVisualConfigurationView,
+  selectFile: configurationActions.selectFile,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ConfigurationView);

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

@@ -31,6 +31,9 @@ class FileToolbar extends React.Component {
           .this :global(.p-toolbar-group-left) :global(.p-button) {
             margin-right: 0.25rem;
           }
+          .this :global(.p-toolbar-group-right) :global(.p-button) {
+            margin-left: 0.25rem;
+          }
         `}</style>
         <Toolbar>
           <div className="p-toolbar-group-left">
@@ -64,6 +67,13 @@ class FileToolbar extends React.Component {
             />
           </div>
           <div className="p-toolbar-group-right">
+            <Button
+              disabled={loading}
+              onClick={this.props.showSearchDialog}
+              tooltip="Find in File"
+              icon={'pi pi-search'}
+              tooltipOptions={tooltipOptions}
+            />
             <Button
               disabled={loading}
               onClick={this.fetchFiles}