[OGUI-1904] Use select instead of in-line buttons to reduce space across top header

InfoLogger/public/app.css

@@ -14,6 +14,12 @@
 
 /* make the sidebar big enough to contain inspector */
 
+:root {
+  --color-gray-button-background-hover: #a0a0a0;
+  --color-gray-button-background: #e0e0e0;
+  --color-gray-button: #404040;
+  --color-gray-button-active: #c0c0c0;
+}
 .sidebar,
 .sidebar .sidebar-content { width: 20rem; }
 
@@ -120,9 +126,12 @@ footer { border-top: 1px solid var(--color-gray); }
 .query-item:active { background-color: var(--color-gray-dark); color: var(--color-black);  }
 .query-item.selected { background-color: var(--color-primary); color: var(--color-white); }
 
-.btn { background-color: #e0e0e0; color: #404040; }
-.btn:hover { background-color: #a0a0a0; color: var(--color-white); }
-.btn:active, .btn.active, .dropdown-open > .btn { background-color: #c0c0c0; }
+.btn { background-color: var(--color-gray-button-background); color: var(--color-gray-button); }
+.btn:hover { background-color: var(--color-gray-button-background-hover); color: var(--color-white); }
+.btn:active, .btn.active, .dropdown-open > .btn { background-color: var(--color-gray-button-active); }
+
+.select-btn { background-color: var(--color-gray-button-background); color: var(--color-gray-button); border: 0; border-radius: .25rem; padding: 0em 0.5em; font-size: 1em; font-family: inherit; cursor: pointer; }
+.select-btn:hover { background-color: var(--color-gray-button-background-hover); color: var(--color-white); }
 
 .text-area-for-message:focus { width: 50%; height: 10rem !important; right: 0; position: absolute; }
 a.disabled { pointer-events: none; cursor: default; }

InfoLogger/public/log/commandLogs.js

@@ -36,39 +36,37 @@ let liveButtonIcon = iconMediaPlay();
  */
 export const commandLogs = (model) => [
   userActionsDropdown(model),
-  h('div.btn-group.mh3', interactionModesGroupButton(model)),
-  h('button.btn.mh3', { onclick: () => model.log.empty(), style: 'font-weight: bold' }, 'Clear'),
-  h('button.btn', {
-    disabled: !model.log.list.length,
-    onclick: () => model.log.firstError(),
-    title: 'Go to first error/fatal (ALT + left arrow)',
-  }, '|←'),
-  ' ',
-  h('button.btn', {
-    disabled: !model.log.list.length,
-    onclick: () => model.log.previousError(),
-    title: 'Go to previous error/fatal (left arrow)',
-  }, '←'),
-  ' ',
-  h('button.btn', {
-    disabled: !model.log.list.length,
-    onclick: () => model.log.nextError(),
-    title: 'Go to next error/fatal (left arrow)',
-  }, '→'),
-  ' ',
-  h('button.btn', {
-    disabled: !model.log.list.length,
-    onclick: () => model.log.lastError(),
-    title: 'Go to last error/fatal (ALT + right arrow)',
-  }, '→|'),
-  ' ',
-  h('button.btn', {
-    disabled: !model.log.list.length,
-    onclick: () => model.log.goToLastItem(),
-    title: 'Go to last log message (ALT + down arrow)',
-  }, '↓'),
-  downloadButtonGroup(model.log),
-  zoomButtonGroup(model.zoom),
+  h('', interactionModesGroupButton(model)),
+  h('', h('button.btn', { onclick: () => model.log.empty(), style: 'font-weight: bold' }, 'Clear')),
+  h('.btn-group', [
+    h('button.btn', {
+      disabled: !model.log.list.length,
+      onclick: () => model.log.firstError(),
+      title: 'Go to first error/fatal (ALT + left arrow)',
+    }, '|←'),
+    h('button.btn', {
+      disabled: !model.log.list.length,
+      onclick: () => model.log.previousError(),
+      title: 'Go to previous error/fatal (left arrow)',
+    }, '←'),
+    h('button.btn', {
+      disabled: !model.log.list.length,
+      onclick: () => model.log.nextError(),
+      title: 'Go to next error/fatal (left arrow)',
+    }, '→'),
+    h('button.btn', {
+      disabled: !model.log.list.length,
+      onclick: () => model.log.lastError(),
+      title: 'Go to last error/fatal (ALT + right arrow)',
+    }, '→|'),
+    h('button.btn', {
+      disabled: !model.log.list.length,
+      onclick: () => model.log.goToLastItem(),
+      title: 'Go to last log message (ALT + down arrow)',
+    }, '↓'),
+  ]),
+  h('', downloadButtonGroup(model.log)),
+  h('', zoomButtonGroup(model.zoom)),
 ];
 
 /**
@@ -82,12 +80,12 @@ const interactionModesGroupButton = (model) => {
   return frameworkInfo.match({
     NotAsked: () => h('button.btn', { disabled: true }, ''),
     Loading: () => h('button.btn', { disabled: true, className: 'loading' }, 'Loading'),
-    Failure: () => [],
+    Failure: () => null,
     Success: (frameworkInfo) =>
-      [
+      h('.btn-group', [
         queryButton(model, frameworkInfo),
         liveButton(model, frameworkInfo),
-      ],
+      ]),
   });
 };
 
@@ -194,7 +192,7 @@ const saveUserProfileMenuItem = (model) =>
  */
 const downloadButtonGroup = (logModel) =>
   h('.dropdown', { class: logModel.download.isVisible ? 'dropdown-open' : '' }, [
-    h('button.btn.mh3', {
+    h('button.btn', {
       onclick: () => {
         if (!logModel.download.isVisible) {
           logModel.generateLogDownloadContent();

InfoLogger/public/logFilter/commandFilters.js

@@ -24,31 +24,16 @@ import { h } from '/js/src/index.js';
  * @returns {vnode} - the view of filters panel
  */
 export default (model) => [
-  h(
-    '',
-    h('.btn-group', [
-      buttonSeverity(model, 'Debug', 'Match severity debug', 'D'),
-      buttonSeverity(model, 'Info', 'Match severity info', 'I'),
-      buttonSeverity(model, 'Warn', 'Match severity warnings', 'W'),
-      buttonSeverity(model, 'Error', 'Match severity errors', 'E'),
-      buttonSeverity(model, 'Fatal', 'Match severity fatal', 'F'),
-    ]),
-    h('span.mh3'),
-    h('.btn-group', [
-      buttonFilterLevel(model, 'Ops', 1),
-      buttonFilterLevel(model, 'Support', 6),
-      buttonFilterLevel(model, 'Devel', 11),
-      buttonFilterLevel(model, 'Trace', null), // 21
-    ]),
-    h('span.mh3'),
-    h('.btn-group', [
-      buttonLogLimit(model, '100k', 100000),
-      buttonLogLimit(model, '500k', 500000),
-      buttonLogLimit(model, '1M', 1000000),
-    ]),
-    h('span.mh3'),
-    buttonReset(model),
-  ),
+  h('.btn-group', [
+    buttonSeverity(model, 'Debug', 'Match severity debug', 'D'),
+    buttonSeverity(model, 'Info', 'Match severity info', 'I'),
+    buttonSeverity(model, 'Warn', 'Match severity warnings', 'W'),
+    buttonSeverity(model, 'Error', 'Match severity errors', 'E'),
+    buttonSeverity(model, 'Fatal', 'Match severity fatal', 'F'),
+  ]),
+  selectFilterLevel(model.log),
+  selectLogLimit(model.log),
+  buttonReset(model),
 ];
 
 /**
@@ -73,30 +58,63 @@ const buttonSeverity = (model, label, title, value) => {
 };
 
 /**
- * Makes a button to set filtering level (shifter, debug, etc) with number
- * @param {Model} model - root model of the application
- * @param {string} label - button's label
- * @param {number} value - maximum level of filtering, from 1 to 21
- * @returns {vnode} - component representing the creation of a button for filtering
+ * Build a vnode for a select component with given options and onchange callback
+ * @param {string} title - tooltip shown on hover
+ * @param {string} id - id of the element
+ * @param {Array<{label: string, value: string, selected: boolean}>} options - list of options to render
+ * @param {void} onchange - callback receiving the raw string value from the select
+ * @param {string} [optGroupLabel] - optional non-selectable group header shown inside the dropdown
+ * @returns {vnode} - component representing the select element
  */
-const buttonFilterLevel = (model, label, value) => h('button.btn', {
-  className: model.log.filter.criterias.level.max === value ? 'active' : '',
-  onclick: () => model.log.setCriteria('level', 'max', value),
-  title: `Filter level ≤ ${value}`,
-}, label);
+const selectBtn = (title, id, options, onchange, optGroupLabel = null) => {
+  const optionsMap = options.map(({ label, value, selected }) => h('option', { value, selected }, label));
+  return h(
+    'select.select-btn',
+    {
+      id,
+      title,
+      onchange: (e) => onchange(e.target.value),
+    },
+    optGroupLabel
+      ? h('optgroup', { label: optGroupLabel }, optionsMap)
+      : optionsMap,
+  );
+};
 
 /**
- * Makes a button to set log limit, maximum logs in memory
- * @param {Model} model - root model of the application
- * @param {string} label - button's label
- * @param {number} limit - how much logs to keep in memory
- * @returns {vnode} - component representing the creation of a button for log limit
+ * Makes a select to set filtering level (Ops, Support, Devel, Trace)
+ * @param {Log} logModel - log model of the application
+ * @returns {vnode} - component representing the selection of a log level filter
+ */
+const selectFilterLevel = (logModel) => selectBtn(
+  'Filter by log level',
+  'filter-level',
+  [
+    { label: 'Ops', value: '1', selected: logModel.filter.criterias.level.max === 1 },
+    { label: 'Support', value: '6', selected: logModel.filter.criterias.level.max === 6 },
+    { label: 'Devel', value: '11', selected: logModel.filter.criterias.level.max === 11 },
+    { label: 'Trace', value: '', selected: logModel.filter.criterias.level.max === null },
+  ],
+  (value) => logModel.setCriteria('level', 'max', value === '' ? null : parseInt(value, 10)),
+  'Log Level',
+);
+
+/**
+ * Makes a select to set the maximum number of logs to keep in memory
+ * @param {Log} logModel - log model of the application
+ * @returns {vnode} - component representing the selection of a log limit
  */
-const buttonLogLimit = (model, label, limit) => h('button.btn', {
-  className: model.log.limit === limit ? 'active' : '',
-  onclick: () => model.log.setLimit(limit),
-  title: `Keep only ${label} logs in the view`,
-}, label);
+const selectLogLimit = (logModel) => selectBtn(
+  'Maximum logs to keep in the view',
+  'log-limit',
+  [
+    { label: '100k', value: '100000', selected: logModel.limit === 100000 },
+    { label: '500k', value: '500000', selected: logModel.limit === 500000 },
+    { label: '1M', value: '1000000', selected: logModel.limit === 1000000 },
+  ],
+  (value) => logModel.setLimit(parseInt(value, 10)),
+  'Buffer Limit',
+);
 
 /**
  * Makes a button to reset filters

InfoLogger/public/view.js

@@ -36,19 +36,13 @@ export default (model) => [
   cellContextMenu(model),
   h('.flex-column absolute-fill', [
     h('.shadow-level2', [
-      h('header.p1.flex-row.f7', [
-        h('', commandLogs(model)),
-        h(
-          '.flex-grow',
-          {
-            style: 'display: flex; flex-direction:row-reverse;',
-          },
-          commandFilters(model),
-        ),
+      h('header.p1.flex-row.f7.g1.justify-between', [
+        h('.flex-row.g3', commandLogs(model)),
+        h('.flex-row.g3', commandFilters(model)),
       ]),
       h('header.f7', tableFilters(model)),
     ]),
-    h('div.flex-grow.flex-row.shadow-level0.logs-container', [
+    h('.flex-grow.flex-row.shadow-level0.logs-container', [
       aboutComponent(model),
       logsTable(model),
       inspectorSide(model),