Merge branch 'master' of https://github.com/errsole/errsole.js

lib/main/server/controllers/logController.js

@@ -4,11 +4,20 @@ const { getStorageConnection } = require('../storageConnection');
 exports.getLogs = async (req, res) => {
   try {
     const query = req.query || {};
+    let searchTerms;
+    if (query.search_terms) {
+      searchTerms = query.search_terms.split(',');
+    }
     if (query.levels) {
       query.levels = query.levels.split(',').map(item => item.trim());
     }
     const storageConnection = getStorageConnection();
-    const logs = await storageConnection.getLogs(query);
+    let logs = {};
+    if (searchTerms) {
+      logs = await storageConnection.searchLogs(searchTerms, query);
+    } else {
+      logs = await storageConnection.getLogs(query);
+    }
     if (logs && logs.items) {
       res.send(Jsonapi.Serializer.serialize(Jsonapi.UserType, logs.items));
     } else {

lib/main/server/index.js

@@ -1,4 +1,5 @@
 const express = require('express');
+const expressStaticGzip = require('express-static-gzip');
 const path = require('path');
 const apiRoutes = require('./routes/apiRoutes');
 const { initializeStorageConnection } = require('./storageConnection');
@@ -19,7 +20,7 @@ app.addPath = function (options) {
   if (!filePath.endsWith('/')) {
     filePath += '/';
   }
-  app.use(filePath + 'dist', express.static(path.join(__dirname, '..', '..', 'web', 'dist')));
+  app.use(filePath + 'dist', expressStaticGzip(path.join(__dirname, '..', '..', 'web', 'dist')));
   app.use(filePath + 'assets', express.static(path.join(__dirname, '..', '..', 'web', 'assets')));
 };
 

lib/web/assets/css/app.css

@@ -273,4 +273,61 @@ body {
   background: #f0eded;
   padding: 10px 20px;
   border-radius: 2px;
+}
+
+.filter-div {
+  padding: 10px !important;
+  margin-bottom: 20px !important;
+}
+
+.filter-tags-div {
+  margin-left: 22px;
+  padding-left: 10px 10px 10px 0px !important;
+}
+
+.filter-tags {
+  font-size: 13px !important;
+}
+
+.filter-logs .ant-select-selection__placeholder {
+  display: block !important;
+}
+
+.filter-input-div {
+  width: calc(100% - 535px);
+}
+
+.filter-input {
+  width: 100%;
+}
+
+.filter-input .ant-select-selection__choice  {
+  background-color: #108ee9 !important;
+  color: #ffffff !important;
+}
+
+.filter-input .ant-select-selection__choice__remove {
+  color: #ffffff !important;
+}
+
+.search-div {
+  padding: 10px !important;
+}
+
+.search-logs-dropdown {
+  display: none !important;
+}
+
+.search-input {
+  margin: 0px 10px !important;
+  width: 90% !important;
+}
+
+.search-input .ant-select-selection__choice  {
+  background-color: #108ee9 !important;
+  color: #ffffff !important;
+}
+
+.search-input .ant-select-selection__choice__remove {
+  color: #ffffff !important;
 }

lib/web/src/components/ConsoleLogs.js

@@ -17,7 +17,7 @@ const cookies = new Cookies();
 
 const { Content } = Layout;
 const { Panel } = Collapse;
-const { Option } = Select;
+const { Option, OptGroup } = Select;
 
 /* mapStateToProps */
 const mapStateToProps = (state) => ({
@@ -36,10 +36,11 @@ class ConsoleLogs extends React.Component {
     this.state = {
       currentConsoleLogs: [],
       consoleLogLoading: false,
-      logsType: 'errorsLog',
+      logsType: ['console.errorLogs'],
       searchDate: null,
       searchTime: null,
       selectedDatetime: null,
+      searchTerms: [],
       timezone
     };
   }
@@ -76,42 +77,47 @@ class ConsoleLogs extends React.Component {
         query.gt_id = queryRequest.logId;
       }
     }
-
     this.getCurrentConsoleLogs(query, logsType);
   }
 
   getCurrentConsoleLogs (query, logsType) {
     const self = this;
-    if (logsType === 'errorsLog' || logsType === 'combinedLogs') {
-      this.setState({
-        consoleLogLoading: true
-      });
-      if (logsType === 'errorsLog') query.levels = 'error';
-      if (logsType === 'combinedLogs') query.levels = 'error,info';
-      this.props.consoleLogActions.getConsoleLogs(query, function (err, data) {
-        if (!err) {
-          try {
-            let logs = data.data || [];
-            if (logs.length === 0) {
-              self.notificationMsg('info', 'No logs to load');
-            } else {
-              logs = self.sortLogs(logs);
-              self.setState({
-                currentConsoleLogs: logs
-              });
-            }
-          } catch (e) {
-            console.error(e);
-            self.notificationMsg();
+    const searchTerms = this.state.searchTerms || [];
+    this.setState({
+      consoleLogLoading: true
+    });
+    if (logsType.length > 0) {
+      query.levels = [];
+      if (logsType.includes('console.errorLogs')) query.levels.push('error');
+      if (logsType.includes('console.infoLogs')) query.levels.push('info');
+      query.levels = query.levels.join(',');
+    }
+    if (searchTerms.length > 0) {
+      query.search_terms = searchTerms.join(',');
+    }
+    this.props.consoleLogActions.getConsoleLogs(query, function (err, data) {
+      if (!err) {
+        try {
+          let logs = data.data || [];
+          if (logs.length === 0) {
+            self.notificationMsg('info', 'No logs to load');
+          } else {
+            logs = self.sortLogs(logs);
+            self.setState({
+              currentConsoleLogs: logs
+            });
           }
-        } else {
+        } catch (e) {
+          console.error(e);
           self.notificationMsg();
         }
-        self.setState({
-          consoleLogLoading: false
-        });
+      } else {
+        self.notificationMsg();
+      }
+      self.setState({
+        consoleLogLoading: false
       });
-    }
+    });
   }
 
   notificationMsg (type = 'info', message = 'Something went wrong. Please report the issue using the Help & Support section', description = '') {
@@ -123,12 +129,28 @@ class ConsoleLogs extends React.Component {
     });
   }
 
-  changeLogsFilter (value) {
+  updateLogsFilter (item) {
+    let logsType = [];
+    logsType = logsType.concat(item);
+    this.setState({
+      logsType
+    });
+  }
+
+  removeFilterTags (value) {
+    let logsType = this.state.logsType || [];
+    logsType = logsType.filter(type => type !== value);
+    this.setState({
+      logsType
+    });
+  }
+
+  updateSearchTerms (terms) {
+    let searchTerms = [];
+    searchTerms = searchTerms.concat(terms);
     this.setState({
-      logsType: value,
-      currentConsoleLogs: []
+      searchTerms
     });
-    this.getConsoleLogs({ logsType: value });
   }
 
   loadMoreErrors (logOrder) {
@@ -238,6 +260,9 @@ class ConsoleLogs extends React.Component {
       isTimeEmpty = true;
     }
     if (isDateEmpty && isTimeEmpty) {
+      this.setState({
+        currentConsoleLogs: []
+      });
       this.getConsoleLogs(null);
     } else if (this.isValidDateFormat(searchDate) && this.isValidTimeFormat(searchTime)) {
       this.setSelectedDatetime(searchDate, searchTime);
@@ -248,10 +273,12 @@ class ConsoleLogs extends React.Component {
 
   reset () {
     this.setState({
+      logsType: [],
       selectedDatetime: null,
       searchDate: null,
       searchTime: null,
-      currentConsoleLogs: []
+      currentConsoleLogs: [],
+      searchTerms: []
     });
     const currentTime = new Date().toISOString();
     this.getConsoleLogs({ datetime: currentTime, logOrder: 'old' });
@@ -319,7 +346,7 @@ class ConsoleLogs extends React.Component {
   }
 
   render () {
-    const logsType = this.state.logsType;
+    const logsType = this.state.logsType || [];
     const consoleLogLoading = this.state.consoleLogLoading || false;
     const searchDate = this.state.searchDate;
     const searchTime = this.state.searchTime;
@@ -329,8 +356,8 @@ class ConsoleLogs extends React.Component {
     const combinedLogsModalStatus = this.state.combinedLogsModalStatus || false;
     const errorLogTimestamp = this.state.errorLogTimestamp || null;
     const errorLogId = this.state.errorLogId || null;
-
     const antIcon = <Icon type='loading' style={{ fontSize: 30 }} spin />;
+    const searchTerms = this.state.searchTerms || [];
 
     const renderConsoleLogs = () => {
       return currentConsoleLogs.map((log) => {
@@ -348,7 +375,7 @@ class ConsoleLogs extends React.Component {
         }
 
         let panel;
-        if (logsType === 'errorsLog') {
+        if (logsType.length === 1 && logsType[0] === 'console.errorLogs') {
           panel = <Panel className='log_panel' header={header} key={logId}><pre className='log_message_detail'><Tooltip placement='topRight' title='View all logs around this error'><Button onClick={this.openCombinedLogsModal.bind(this, occurredAt, logId)} className='view-log-btn'>View Logs</Button></Tooltip>{message}</pre></Panel>;
         } else {
           panel = <Panel className='log_panel' header={header} key={logId}><pre className='log_message_detail'>{message}</pre></Panel>;
@@ -357,15 +384,23 @@ class ConsoleLogs extends React.Component {
         return panel;
       });
     };
+
     return (
       <div className='logs-layout'>
         <Spin indicator={antIcon} spinning={consoleLogLoading} delay={100}>
           <Content>
-            <div className='filter_sort p-20'>
-              <div className='filter float-l filter-logs'>
-                <Select value={logsType} style={{ width: 150 }} onChange={this.changeLogsFilter.bind(this)}>
-                  <Option value='errorsLog'>Error Logs</Option>
-                  <Option value='combinedLogs'>Combined Logs</Option>
+            <div className='search-div'>
+              <div className='search-logs'>
+                <Select dropdownClassName='search-logs-dropdown' className='search-input' mode='tags' placeholder='Search Keywords' onChange={this.updateSearchTerms.bind(this)} value={searchTerms} />
+              </div>
+            </div>
+            <div className='filter-div'>
+              <div className='filter filter-input-div float-l filter-logs'>
+                <Select className='filter-input' mode='multiple' placeholder='Select Filters' onChange={this.updateLogsFilter.bind(this)} value={logsType}>
+                  <OptGroup label='Console'>
+                    <Option value='console.errorLogs'>Error Logs</Option>
+                    <Option value='console.infoLogs'>Info Logs</Option>
+                  </OptGroup>
                 </Select>
               </div>
               <div className='filter float-l date-picker'>
@@ -380,12 +415,16 @@ class ConsoleLogs extends React.Component {
               <div className='filter float-l log-btn-reset'>
                 <Button onClick={this.reset.bind(this)}>Reset</Button>
               </div>
-              <div className='filter float-r log-btn-reset'>
-                <span>Timezone <Switch checkedChildren='Local' unCheckedChildren='UTC' checked={timezone === 'Local'} onChange={this.changeTimezone.bind(this)} /></span>
-              </div>
             </div>
             <div className='filter_sort p-20 console_log_content'>
-              <div className='content-box'><p className='header'><Icon className='header_col_icon' onClick={this.handleAllPanel.bind(this)} type={activeKeys.length > 0 ? 'down' : 'right'} /><span className='header_col_1'>Timestamp</span><span className='header_col_2'>Message</span><span className='log-ttl-msg' /></p>
+              <div className='content-box'>
+                <p className='header'><Icon className='header_col_icon' onClick={this.handleAllPanel.bind(this)} type={activeKeys.length > 0 ? 'down' : 'right'} /><span className='header_col_1'>Timestamp</span>
+                  <span className='header_col_2'>Message
+                    <div className='filter float-r log-btn-reset'>
+                      <span>Timezone <Switch checkedChildren='Local' unCheckedChildren='UTC' checked={timezone === 'Local'} onChange={this.changeTimezone.bind(this)} /></span>
+                    </div>
+                  </span><span className='log-ttl-msg' />
+                </p>
                 {currentConsoleLogs.length !== 0 &&
                   <Collapse activeKey={activeKeys} onChange={this.handlePanelChange.bind(this)}>
                     <p className='logs_more'>There maybe older logs to load. <a onClick={this.loadMoreErrors.bind(this, 'old')}>Load More</a> </p>

lib/web/src/components/Sidebar.js

@@ -104,7 +104,7 @@ class Sidebar extends React.Component {
         msg1 = <p>A new version of the {updates.name} and {updates.storage_name} modules have been released. Currently, you are using <b>{updates.name} v{updates.version}</b> and <b>{storageUpdates.name} v{updates.storage_version}</b></p>;
         install = <b>npm install {updates.name}@{updates.latest_version} {updates.storage_name}@{updates.storage_latest_version}</b>;
       } else if (errsoleUpdates.updateNeeded) {
-        msg1 = <p>A new version of the {updates.name} module has been released. Currently, you are using <b>{updates.name} v {updates.version}</b></p>;
+        msg1 = <p>A new version of the {updates.name} module has been released. Currently, you are using <b>{updates.name} v{updates.version}</b></p>;
         install = <b>npm install {updates.name}@{updates.latest_version}</b>;
       } else if (storageUpdates.updateNeeded) {
         msg1 = <p>A new version of the {storageUpdates.name} module has been released. Currently, you are using <b>{updates.storage_name} v{updates.storage_version}</b></p>;

lib/web/webpack/website.config.js

@@ -7,7 +7,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const bundleConfig = require('./bundle.config.js');
 
 /* params */
-const mode = 'development';
+const mode = 'production';
 
 const websiteOutput = merge(bundleConfig, {
   mode,

package.json

@@ -29,6 +29,7 @@
     "axios": "^1.6.8",
     "body-parser": "^1.20.2",
     "express": "^4.17.1",
+    "express-static-gzip": "^2.1.7",
     "json-api-serializer": "^2.6.6",
     "jsonwebtoken": "^9.0.2",
     "strip-ansi": "^6.0.1",