@flowerforce/flowerbase 1.7.5 → 1.7.6-beta.1

package/src/monitoring/ui.functions.js

@@ -15,6 +15,7 @@
   if (state.functionUserMap === undefined) state.functionUserMap = {};
   if (state.functionUserQuery === undefined) state.functionUserQuery = '';
   if (state.__functionUserTimer === undefined) state.__functionUserTimer = null;
+  if (state.functionCodeEditor === undefined) state.functionCodeEditor = null;
 
   dom.functionList = document.getElementById('functionList');
   dom.functionSelected = document.getElementById('functionSelected');
@@ -22,7 +23,6 @@
   dom.functionUserInput = document.getElementById('functionUserInput');
   dom.functionUserList = document.getElementById('functionUserList');
   dom.functionRunMode = document.getElementById('functionRunMode');
-  dom.functionEditor = document.getElementById('functionEditor');
   dom.functionCode = document.getElementById('functionCode');
   dom.functionHighlight = document.getElementById('functionHighlight');
   dom.functionGutter = document.getElementById('functionGutter');
@@ -42,7 +42,6 @@
     functionUserInput,
     functionUserList,
     functionRunMode,
-    functionEditor,
     functionCode,
     functionHighlight,
     functionGutter,
@@ -59,9 +58,31 @@
   const { setActiveTab } = helpers;
 
   const HISTORY_LIMIT = 30;
+  const getCodeEditor = () => state.functionCodeEditor;
+
+  const getFunctionCodeValue = () => {
+    const editor = getCodeEditor();
+    if (editor && typeof editor.getValue === 'function') {
+      return editor.getValue() || '';
+    }
+    return functionCode ? (functionCode.value || '') : '';
+  };
+
+  const setFunctionCodeValue = (value) => {
+    const next = value || '';
+    const editor = getCodeEditor();
+    if (editor && typeof editor.setValue === 'function') {
+      editor.setValue(next);
+      editor.execCommand('goDocStart');
+      return;
+    }
+    if (functionCode) {
+      functionCode.value = next;
+    }
+  };
 
   const syncFunctionEditorScroll = () => {
-    if (!functionCode) return;
+    if (!functionCode || getCodeEditor()) return;
     if (functionHighlight) {
       functionHighlight.scrollTop = functionCode.scrollTop;
       functionHighlight.scrollLeft = functionCode.scrollLeft;
@@ -72,6 +93,11 @@
   };
 
   const updateFunctionEditor = () => {
+    const editor = getCodeEditor();
+    if (editor) {
+      if (typeof editor.refresh === 'function') editor.refresh();
+      return;
+    }
     if (!functionCode) return;
     const code = functionCode.value || '';
     if (functionHighlight) {
@@ -191,10 +217,10 @@
   };
 
   const isFunctionCodeModified = (name) => {
-    if (!name || !functionCode) return false;
+    if (!name) return false;
     const base = state.functionCodeCache[name];
     if (typeof base !== 'string') return false;
-    return functionCode.value !== base;
+    return getFunctionCodeValue() !== base;
   };
 
   const updateFunctionModifiedState = () => {
@@ -207,10 +233,10 @@
   };
 
   const loadFunctionCode = async () => {
-    if (!functionCode) return;
+    if (!functionCode && !getCodeEditor()) return;
     const name = state.selectedFunction;
     if (!name) {
-      functionCode.value = '';
+      setFunctionCodeValue('');
       updateFunctionEditor();
       updateFunctionModifiedState();
       return;
@@ -219,7 +245,7 @@
       const data = await api('/functions/' + encodeURIComponent(name));
       const baseCode = data && data.code ? data.code : '';
       state.functionCodeCache[name] = baseCode;
-      functionCode.value = baseCode;
+      setFunctionCodeValue(baseCode);
       updateFunctionEditor();
     } catch (err) {
       console.error(err);
@@ -228,8 +254,8 @@
   };
 
   const applyFunctionOverride = (code) => {
-    if (!functionCode) return;
-    functionCode.value = code || '';
+    if (!functionCode && !getCodeEditor()) return;
+    setFunctionCodeValue(code || '');
     updateFunctionEditor();
     updateFunctionModifiedState();
   };
@@ -237,10 +263,8 @@
   const clearFunctionOverride = () => {
     const name = state.selectedFunction;
     if (!name) return;
-    if (functionCode) {
-      functionCode.value = state.functionCodeCache[name] || '';
-      updateFunctionEditor();
-    }
+    setFunctionCodeValue(state.functionCodeCache[name] || '');
+    updateFunctionEditor();
     updateFunctionModifiedState();
   };
 
@@ -396,10 +420,34 @@
     renderFunctionUserOptions(options);
   };
 
+  const initCodeEditor = () => {
+    if (!functionCode) return;
+    const codeEditor = typeof window !== 'undefined' ? window.CodeMirror : null;
+    if (!codeEditor || typeof codeEditor.fromTextArea !== 'function') return;
+    const editor = codeEditor.fromTextArea(functionCode, {
+      mode: 'javascript',
+      lineNumbers: true,
+      lineWrapping: false,
+      tabSize: 2,
+      indentUnit: 2,
+      foldGutter: true,
+      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
+    });
+    state.functionCodeEditor = editor;
+    const wrapper = editor.getWrapperElement();
+    if (wrapper) wrapper.classList.add('monit-code-editor');
+    const host = functionCode.closest('.code-editor');
+    if (host) host.classList.add('cm-enabled');
+    editor.on('change', () => {
+      updateFunctionModifiedState();
+    });
+  };
+
   const init = () => {
     if (refreshFunctions) refreshFunctions.addEventListener('click', loadFunctions);
+    initCodeEditor();
 
-    if (functionCode) {
+    if (functionCode && !getCodeEditor()) {
       functionCode.addEventListener('input', () => {
         updateFunctionEditor();
         updateFunctionModifiedState();
@@ -407,61 +455,6 @@
       functionCode.addEventListener('scroll', () => {
         syncFunctionEditorScroll();
       });
-      functionCode.addEventListener('keydown', (event) => {
-        if (event.key !== 'Tab') return;
-        event.preventDefault();
-        const indent = '  ';
-        const value = functionCode.value || '';
-        const start = functionCode.selectionStart || 0;
-        const end = functionCode.selectionEnd || 0;
-        const hasSelection = start !== end;
-        const lineStart = value.lastIndexOf('\n', start - 1) + 1;
-        if (!hasSelection && !event.shiftKey) {
-          const nextValue = value.slice(0, start) + indent + value.slice(end);
-          functionCode.value = nextValue;
-          const cursor = start + indent.length;
-          functionCode.selectionStart = cursor;
-          functionCode.selectionEnd = cursor;
-          updateFunctionEditor();
-          return;
-        }
-
-        const lineEndIndex = value.indexOf('\n', end);
-        const blockEnd = lineEndIndex === -1 ? value.length : lineEndIndex;
-        const block = value.slice(lineStart, blockEnd);
-        const lines = block.split('\n');
-        if (!event.shiftKey) {
-          const newLines = lines.map((line) => indent + line);
-          const newBlock = newLines.join('\n');
-          const nextValue = value.slice(0, lineStart) + newBlock + value.slice(blockEnd);
-          functionCode.value = nextValue;
-          functionCode.selectionStart = start + indent.length;
-          functionCode.selectionEnd = end + indent.length * lines.length;
-          updateFunctionEditor();
-          return;
-        }
-
-        const removedCounts = lines.map((line) => {
-          if (line.startsWith(indent)) return indent.length;
-          if (line.startsWith('\t')) return 1;
-          if (line.startsWith(' ')) return 1;
-          return 0;
-        });
-        const newLines = lines.map((line, index) => {
-          const remove = removedCounts[index];
-          return remove > 0 ? line.slice(remove) : line;
-        });
-        const newBlock = newLines.join('\n');
-        const nextValue = value.slice(0, lineStart) + newBlock + value.slice(blockEnd);
-        functionCode.value = nextValue;
-        const removedTotal = removedCounts.reduce((acc, count) => acc + count, 0);
-        const removedFirst = removedCounts[0] || 0;
-        const nextStart = Math.max(lineStart, start - removedFirst);
-        const nextEnd = Math.max(nextStart, end - removedTotal);
-        functionCode.selectionStart = nextStart;
-        functionCode.selectionEnd = nextEnd;
-        updateFunctionEditor();
-      });
     }
 
     if (functionList) {
@@ -606,7 +599,7 @@
           const userId = selectedUser
             ? String(selectedUser.id || (selectedUser.auth && selectedUser.auth._id) || '')
             : fallbackUserId;
-          const liveCode = functionCode ? functionCode.value || '' : '';
+          const liveCode = getFunctionCodeValue();
           const overrideCode = liveCode.trim() ? liveCode : undefined;
           const data = await api('/functions/invoke', {
             method: 'POST',

package/src/monitoring/ui.html

@@ -5,6 +5,8 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Flowerbase monit</title>
+  <link rel="stylesheet" href="__MONIT_BASE__/vendor/codemirror/codemirror.css" />
+  <link rel="stylesheet" href="__MONIT_BASE__/vendor/codemirror/foldgutter.css" />
   <link rel="stylesheet" href="__MONIT_BASE__/ui.css" />
 </head>
 
@@ -441,6 +443,12 @@
       </section>
     </div>
   </main>
+  <script src="__MONIT_BASE__/vendor/codemirror/codemirror.js"></script>
+  <script src="__MONIT_BASE__/vendor/codemirror/javascript.js"></script>
+  <script src="__MONIT_BASE__/vendor/codemirror/foldcode.js"></script>
+  <script src="__MONIT_BASE__/vendor/codemirror/foldgutter.js"></script>
+  <script src="__MONIT_BASE__/vendor/codemirror/brace-fold.js"></script>
+  <script src="__MONIT_BASE__/vendor/codemirror/comment-fold.js"></script>
   <script src="__MONIT_BASE__/ui.shared.js"></script>
   <script src="__MONIT_BASE__/ui.events.js"></script>
   <script src="__MONIT_BASE__/ui.users.js"></script>

package/src/monitoring/ui.js

@@ -14,6 +14,194 @@
   const { api } = utils;
   const { setActiveTab } = helpers;
 
+  const RESIZE_MIN_PANE = 220;
+  const RESIZE_MIN_STACK = 140;
+  const RESIZE_MIN_RATIO = 0.2;
+  const RESIZE_MAX_RATIO = 0.8;
+
+  const getSplitDefault = (container) => {
+    if (container.classList.contains('functions-grid')) return '30%';
+    if (container.classList.contains('triggers-grid')) return '30%';
+    if (container.classList.contains('collections-grid')) return '30%';
+    return '66%';
+  };
+
+  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+  const getHorizontalResizeBounds = (containerWidth, handleWidth) => {
+    const minByPixels = RESIZE_MIN_PANE;
+    const maxByPixels = Math.max(minByPixels, containerWidth - RESIZE_MIN_PANE - handleWidth);
+    const minByRatio = containerWidth * RESIZE_MIN_RATIO;
+    const maxByRatio = containerWidth * RESIZE_MAX_RATIO;
+    const min = Math.max(minByPixels, minByRatio);
+    const max = Math.min(maxByPixels, maxByRatio);
+    if (max < min) return { min: max, max };
+    return {
+      min,
+      max
+    };
+  };
+
+  const getVerticalResizeBounds = (totalHeight) => {
+    const minByPixels = RESIZE_MIN_STACK;
+    const maxByPixels = Math.max(minByPixels, totalHeight - RESIZE_MIN_STACK);
+    const minByRatio = totalHeight * RESIZE_MIN_RATIO;
+    const maxByRatio = totalHeight * RESIZE_MAX_RATIO;
+    const min = Math.max(minByPixels, minByRatio);
+    const max = Math.min(maxByPixels, maxByRatio);
+    if (max < min) return { min: max, max };
+    return {
+      min,
+      max
+    };
+  };
+
+  const bindSplitResize = (container, handle, leftPane, rightPane) => {
+    const onPointerDown = (event) => {
+      if (event.button !== 0) return;
+      event.preventDefault();
+
+      document.body.classList.add('is-resizing');
+      if (handle.setPointerCapture) handle.setPointerCapture(event.pointerId);
+
+      const onPointerMove = (moveEvent) => {
+        const bounds = container.getBoundingClientRect();
+        const handleWidth = handle.getBoundingClientRect().width || 10;
+        if (!bounds.width) return;
+
+        const limits = getHorizontalResizeBounds(bounds.width, handleWidth);
+        const offsetX = moveEvent.clientX - bounds.left - (handleWidth / 2);
+        const nextLeft = clamp(offsetX, limits.min, limits.max);
+        container.style.setProperty('--split-left-size', nextLeft + 'px');
+      };
+
+      const onPointerUp = (upEvent) => {
+        document.body.classList.remove('is-resizing');
+        if (handle.releasePointerCapture) {
+          try {
+            handle.releasePointerCapture(upEvent.pointerId);
+          } catch (err) {
+            // no-op: pointer might already be released
+          }
+        }
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+      };
+
+      window.addEventListener('pointermove', onPointerMove);
+      window.addEventListener('pointerup', onPointerUp);
+    };
+
+    handle.addEventListener('pointerdown', onPointerDown);
+    handle.addEventListener('keydown', (event) => {
+      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+      event.preventDefault();
+      const direction = event.key === 'ArrowLeft' ? -1 : 1;
+      const bounds = container.getBoundingClientRect();
+      const handleWidth = handle.getBoundingClientRect().width || 10;
+      const current = leftPane.getBoundingClientRect().width;
+      const limits = getHorizontalResizeBounds(bounds.width, handleWidth);
+      const nextLeft = clamp(current + (direction * 24), limits.min, limits.max);
+      container.style.setProperty('--split-left-size', nextLeft + 'px');
+      rightPane.offsetHeight;
+    });
+  };
+
+  const bindStackResize = (handle, topPane, bottomPane) => {
+    const onPointerDown = (event) => {
+      if (event.button !== 0) return;
+      event.preventDefault();
+
+      document.body.classList.add('is-resizing');
+      if (handle.setPointerCapture) handle.setPointerCapture(event.pointerId);
+
+      const topStart = topPane.getBoundingClientRect().height;
+      const bottomStart = bottomPane.getBoundingClientRect().height;
+      const total = topStart + bottomStart;
+
+      const onPointerMove = (moveEvent) => {
+        const topBounds = topPane.getBoundingClientRect();
+        const positionY = moveEvent.clientY - topBounds.top;
+        const handleHalf = (handle.getBoundingClientRect().height || 8) / 2;
+        const limits = getVerticalResizeBounds(total);
+        const boundedTop = clamp(positionY - handleHalf, limits.min, limits.max);
+        const boundedBottom = Math.max(limits.min, total - boundedTop);
+
+        topPane.style.flex = '0 0 ' + boundedTop + 'px';
+        bottomPane.style.flex = '0 0 ' + boundedBottom + 'px';
+      };
+
+      const onPointerUp = (upEvent) => {
+        document.body.classList.remove('is-resizing');
+        if (handle.releasePointerCapture) {
+          try {
+            handle.releasePointerCapture(upEvent.pointerId);
+          } catch (err) {
+            // no-op: pointer might already be released
+          }
+        }
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+      };
+
+      window.addEventListener('pointermove', onPointerMove);
+      window.addEventListener('pointerup', onPointerUp);
+    };
+
+    handle.addEventListener('pointerdown', onPointerDown);
+  };
+
+  const initResizableSections = () => {
+    document.querySelectorAll('.split-grid').forEach((container) => {
+      if (container.dataset.resizableInit === '1') return;
+      const panes = Array.from(container.children).filter((element) =>
+        !element.classList.contains('split-resizer')
+      );
+      if (panes.length !== 2) return;
+
+      const [leftPane, rightPane] = panes;
+      const handle = document.createElement('div');
+      handle.className = 'split-resizer';
+      handle.tabIndex = 0;
+      handle.setAttribute('role', 'separator');
+      handle.setAttribute('aria-orientation', 'vertical');
+      handle.setAttribute('title', 'Resize columns');
+
+      container.classList.add('resizable-split-grid');
+      leftPane.classList.add('split-pane-left');
+      rightPane.classList.add('split-pane-right');
+      container.style.setProperty('--split-left-size', getSplitDefault(container));
+      container.insertBefore(handle, rightPane);
+      bindSplitResize(container, handle, leftPane, rightPane);
+      container.dataset.resizableInit = '1';
+    });
+
+    document.querySelectorAll('.column-stack').forEach((container) => {
+      if (container.dataset.stackResizableInit === '1') return;
+      const panels = Array.from(container.children).filter((element) =>
+        element.classList && element.classList.contains('subpanel')
+      );
+      if (panels.length < 2) return;
+
+      container.classList.add('resizable-stack');
+      panels.forEach((panel) => panel.classList.add('stack-pane'));
+
+      for (let index = 0; index < panels.length - 1; index += 1) {
+        const topPane = panels[index];
+        const bottomPane = panels[index + 1];
+        const handle = document.createElement('div');
+        handle.className = 'stack-resizer';
+        handle.setAttribute('role', 'separator');
+        handle.setAttribute('aria-orientation', 'horizontal');
+        handle.setAttribute('title', 'Resize sections');
+        container.insertBefore(handle, bottomPane);
+        bindStackResize(handle, topPane, bottomPane);
+      }
+
+      container.dataset.stackResizableInit = '1';
+    });
+  };
+
   const initModules = () => {
     if (root.events && root.events.init) root.events.init();
     if (root.users && root.users.init) root.users.init();
@@ -50,6 +238,7 @@
     });
   });
 
+  initResizableSections();
   initModules();
 
   updateClock();