Closes inspectIT#811: Refactored Sections and SelectionInformation

AlexanderWert · Jul 15, 2020 · a069cc9 · a069cc9
1 parent 7f7629f
commit a069cc9
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 82 deletions.
diff --git a/components/inspectit-ocelot-configurationserver-ui/src/components/editor/EditorView.js b/components/inspectit-ocelot-configurationserver-ui/src/components/editor/EditorView.js
@@ -5,6 +5,7 @@ import editorConfig from '../../data/yaml-editor-config.json';
 import EditorToolbar from './EditorToolbar';
 import Notificationbar from './Notificationbar';
 import YamlParser from './YamlParser';
+import SelectionInformation from './SelectionInformation';
 
 const AceEditor = dynamic(() => import('./AceEditor'), { ssr: false });
 const TreeTableEditor = dynamic(() => import('./TreeTableEditor'), { ssr: false });
@@ -111,13 +112,7 @@ class EditorView extends React.Component {
             </YamlParser>
           </div>
         )}
-        {!showEditor && (
-          <div className="p-col">
-            <div className="selection-information">
-              <div>{hint}</div>
-            </div>
-          </div>
-        )}
+        {!showEditor && (<SelectionInformation hint={hint} />)}
         {loading && (
           <div className="p-col">
             <div className="loading-overlay">

diff --git a/...nts/inspectit-ocelot-configurationserver-ui/src/components/editor/SelectionInformation.js b/...nts/inspectit-ocelot-configurationserver-ui/src/components/editor/SelectionInformation.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Placeholder component for the case that no content is selected.
+ */
+const SelectionInformation = ({ hint }) => {
+  return (
+    <div className="p-col">
+      <style jsx>{`
+          .selection-information {
+            display: flex;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+            color: #bbb;
+          }
+        `}</style>
+      <div className="selection-information">
+        <div>{hint}</div>
+      </div>
+    </div>
+  );
+};
+
+SelectionInformation.propTypes = {
+  /** The hint to show */
+  hint: PropTypes.string,
+};
+
+SelectionInformation.defaultProps = {
+  hint: 'Select item',
+};
+
+export default SelectionInformation;
diff --git a/...nts/inspectit-ocelot-configurationserver-ui/src/components/views/alerting/AlertingView.js b/...nts/inspectit-ocelot-configurationserver-ui/src/components/views/alerting/AlertingView.js
@@ -31,22 +31,15 @@ const AlertingView = () => {
   useEffect(() => {
     if (rules) {
       const topics = uniq(
-        rules.map((r) => r.topic).filter((t) => t !== undefined && (!existingTopics || !existingTopics.some((topic) => topic.id === t)))
-      ).map((topicName) => ({ id: topicName, referencedOnly: true }));
+        rules.map(r => r.topic)
+          .filter(t => t !== undefined && (!existingTopics || !existingTopics.some(topic => topic.id === t))))
+        .map(topicName => ({ id: topicName, referencedOnly: true }));
       setReferencedTopics(topics);
     }
   }, [JSON.stringify(rules)]);
 
-  const refreshRules = () =>
-    rulesAPI.fetchAlertingRules(
-      (rules) => setRules(rules),
-      () => setRules([])
-    );
-  const refreshTemplates = () =>
-    rulesAPI.fetchAlertingTemplates(
-      (templates) => setTemplates(templates),
-      () => setTemplates([])
-    );
+  const refreshRules = () => rulesAPI.fetchAlertingRules((rules) => setRules(rules), () => setRules([]));
+  const refreshTemplates = () => rulesAPI.fetchAlertingTemplates((templates) => setTemplates(templates), () => setTemplates([]));
   const refreshTopics = () => topicsAPI.fetchTopics((topics) => setExistingTopics(topics));
 
   const refreshAll = () => {
@@ -82,18 +75,12 @@ const AlertingView = () => {
           display: flex;
           flex-direction: column;
           height: 100%;
-          width: 100%;
+          flex-grow: 1;
         }
       `}</style>
       <TabView className="tabView" activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
         <TabPanel header="Alerting Rules">
-          <AlertingRulesView
-            updateDate={updateDate}
-            availableTopics={availableTopics}
-            rules={rules}
-            templates={templates}
-            onRefresh={refreshAll}
-          />
+          <AlertingRulesView updateDate={updateDate} availableTopics={availableTopics} rules={rules} templates={templates} onRefresh={refreshAll} />
         </TabPanel>
       </TabView>
     </div>

diff --git a/components/inspectit-ocelot-configurationserver-ui/src/components/views/alerting/Section.js b/components/inspectit-ocelot-configurationserver-ui/src/components/views/alerting/Section.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const Section = ({ title, children, scrollable }) => {
+  return (
+    <div className={classNames("this", { 'scrollable': scrollable })}>
+      <style jsx>{`
+          .this {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            margin: 1rem;
+          }
+          .this :global(.section-container) {
+            border: 1px solid #c8c8c8;
+            display: flex;
+            flex-direction: column;
+          }
+          .this :global(.section-header) {
+            padding: 0.5rem 1rem 0.5rem;
+            background-color: #eee;
+            border: 1px solid #c8c8c8;
+            font-weight: bold;
+          }
+          .scrollable {
+            overflow-y: auto;
+          }
+      `}</style>
+      <div className="section-header">{title}</div>
+      <div className={classNames("section-container", { 'scrollable': scrollable })}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+Section.propTypes = {
+  /** Title of the section */
+  title: PropTypes.string.isRequired,
+  /**  List of child elements */
+  children: PropTypes.object,
+  /** Whether the section should be scrollable */
+  scrollable: PropTypes.bool
+};
+
+Section.defaultProps = {
+  children: [],
+  scrollable: false,
+};
+
+export default Section;
diff --git a/...t-ocelot-configurationserver-ui/src/components/views/alerting/rules/editor/RulesEditor.js b/...t-ocelot-configurationserver-ui/src/components/views/alerting/rules/editor/RulesEditor.js
@@ -4,6 +4,8 @@ import { cloneDeep, remove, extend } from 'lodash';
 import Notificationbar from '../../../../editor/Notificationbar';
 import DescriptionSection from './DescriptionSection';
 import VariableView from './VariableView';
+import SelectionInformation from '../../../../editor/SelectionInformation';
+import Section from '../../Section';
 
 /**
  * The RulesEditor component views alerting rules and templates and provides means to edit the content of an alerting rule.
@@ -21,27 +23,17 @@ const RulesEditor = ({ availableTopics, content, isRule, mappedVars, readOnly, o
   }
 
   return (
-    <>
+    <div className='this'>
       <style jsx>{`
-        .error.p-col-fixed {
-          padding: 0.5rem 0 0;
-        }
-        .scroll-vars {
+        .this {
+          display: flex;
+          flex-direction: column;
           overflow-y: auto;
         }
-        .section-container {
-          margin: 0 1rem 0;
-          border: 1px solid #c8c8c8;
-          flex-grow: 1;
-        }
-        .var-header {
-          margin: 0 1rem 0;
-          padding: 0.5rem 1rem 0.5rem;
-          background-color: #eee;
-          border: 1px solid #c8c8c8;
-          font-weight: bold;
+        .this :global(.error.p-col-fixed) {
+          padding: 0.5rem 0 0;
         }
-        .time-details {
+        .this :global(.time-details) {
           display: flex;
           flex-direction: row;
           justify-content: space-between;
@@ -59,8 +51,7 @@ const RulesEditor = ({ availableTopics, content, isRule, mappedVars, readOnly, o
         updateValue={(value) => updateDescription(content, onContentChanged, value)}
         readOnly={readOnly}
       />
-      <div className="var-header">Variables</div>
-      <div className="scroll-vars section-container">
+      <Section title='Variables' scrollable={true}>
         {isRule && (
           <VariableView
             options={!availableTopics ? [] : availableTopics.map((t) => t.id)}
@@ -84,42 +75,12 @@ const RulesEditor = ({ availableTopics, content, isRule, mappedVars, readOnly, o
             onErrorStatusUpdate(Object.entries(errornuousVariables).filter((keyValPair) => keyValPair[1] === true).length);
           }}
         />
-      </div>
+      </Section>
       {content.error && (
         <div className="error p-col-fixed">
           <Notificationbar text={content.error} isError={true} icon={'pi-exclamation-triangle'} />
         </div>
       )}
-    </>
-  );
-};
-
-/**
- * Placeholder component for the case that no content is selected.
- */
-const SelectionInformation = ({ hint }) => {
-  return (
-    <div className="p-col">
-      <style jsx>{`
-        .this {
-          flex-grow: 1;
-          align-items: stretch;
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-start;
-          min-width: 760px;
-        }
-        .selection-information {
-          display: flex;
-          height: 100%;
-          align-items: center;
-          justify-content: center;
-          color: #bbb;
-        }
-      `}</style>
-      <div className="selection-information">
-        <div>{hint}</div>
-      </div>
     </div>
   );
 };
@@ -194,8 +155,8 @@ RulesEditor.defaultProps = {
   availableTopics: [],
   isRule: false,
   readOnly: false,
-  onContentChanged: () => {},
-  onErrorStatusUpdate: () => {},
+  onContentChanged: () => { },
+  onErrorStatusUpdate: () => { },
 };
 
 export default RulesEditor;
diff --git a/...configurationserver-ui/src/components/views/alerting/rules/editor/RulesEditorContainer.js b/...configurationserver-ui/src/components/views/alerting/rules/editor/RulesEditorContainer.js
@@ -23,9 +23,9 @@ const RulesEditorContainer = ({
 
   const onContentChanged = (ruleName, changedContent) => {
     if (isEqual(ruleContent, changedContent)) {
-      unsavedRuleContentsChanged(omit(unsavedRuleContents, ruleName));
+      unsavedRuleContentsChanged(omit(cloneDeep(unsavedRuleContents), ruleName));
     } else {
-      unsavedRuleContentsChanged(extend(unsavedRuleContents, { [ruleName]: changedContent }));
+      unsavedRuleContentsChanged(extend(cloneDeep(unsavedRuleContents), { [ruleName]: changedContent }));
     }
   };
 
@@ -174,7 +174,7 @@ RulesEditorContainer.defaultProps = {
   availableTopics: [],
   unsavedRuleContents: {},
   readOnly: false,
-  unsavedRuleContentsChanged: () => {},
+  unsavedRuleContentsChanged: () => { },
 };
 
 const mapStateToProps = (state) => {

diff --git a/...-ocelot-configurationserver-ui/src/components/views/alerting/rules/editor/VariableView.js b/...-ocelot-configurationserver-ui/src/components/views/alerting/rules/editor/VariableView.js
@@ -31,6 +31,7 @@ const VariableView = ({ name, value, type, description, options, readOnly, onVar
           .this {
             margin: 1rem;
             border-bottom: 1px solid #c8c8c8;
+            flex-grow: 1;
           }
           .this :global(.varHeaderContainer) {
             display: flex;