Bug fixes, add group in "View More', add class emitter for Logs

Author: dok

packages/api-logs/__tests__/index.test.jsx

@@ -3,7 +3,7 @@ require('isomorphic-fetch');
 const React = require('react');
 const { shallow } = require('enzyme');
 
-const { Logs } = require('../index.jsx');
+const { Logs, LogsEmitter } = require('../index.jsx');
 const requestmodel = require('./fixtures/requestmodel.json');
 const oas = require('./fixtures/oas.json');
 const operation = require('./fixtures/operation.json');
@@ -39,6 +39,20 @@ describe('Logs', () => {
     expect(comp.html()).toBe(null);
   });
 
+  test('should render a log with no user-agent', () => {
+    const comp = shallow(<LogTest {...props} />);
+    const clonedLog = JSON.parse(JSON.stringify(requestmodel));
+    clonedLog.request.log.entries[0].request.headers[0].name = '';
+    comp.setState({ logs: [clonedLog] });
+
+    expect(
+      comp
+        .find('tbody tr')
+        .childAt(4)
+        .text(),
+    ).toBe('-');
+  });
+
   test('should be in a loading state', () => {
     const comp = shallow(<LogTest {...props} />);
     comp.setState({ loading: true });
@@ -113,6 +127,23 @@ describe('Logs', () => {
     expect(global.open).toBeCalled();
   });
 
+  test('on stale call refresh', () => {
+    const comp = shallow(<Logs {...props} />);
+    comp.setState({ stale: true });
+    const instance = comp.instance();
+    jest.spyOn(instance, 'refresh');
+    instance.onVisible();
+    expect(instance.refresh).toHaveBeenCalledWith('1230');
+  });
+
+  test('remove listener on component unmount', () => {
+    const comp = shallow(<Logs {...props} />);
+    comp.setState({ stale: true });
+    const instance = comp.instance();
+    instance.componentWillUnmount();
+    expect(LogsEmitter.listeners().length).toBe(0);
+  });
+
   test('when parsed agent is not Other', () => {
     const comp = shallow(<LogTest {...props} />);
     requestmodel.request.log.entries[0].request.headers[0].value = 'IE4.0';

packages/api-logs/dist/index.js

@@ -1,6 +1,8 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const querystring = require('querystring');
+const VisibilitySensor = require('react-visibility-sensor');
+const EventsEmitter = require('events');
 
 const LoadingSvg = props => (
   <svg
@@ -47,34 +49,53 @@ function getGroup(userData) {
   return undefined;
 }
 
+const emitter = new EventsEmitter();
+let selectedGroup;
+
 class Logs extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       loading: false,
+      stale: false,
       logs: [],
-      group: getGroup(props.user),
+      group: selectedGroup || getGroup(props.user),
       groups: props.user.keys && props.user.keys.map(key => ({ id: key.id, name: key.name })),
     };
 
     this.renderSelect = this.renderSelect.bind(this);
     this.onSelect = this.onSelect.bind(this);
     this.renderTable = this.renderTable.bind(this);
     this.visitLogItem = this.visitLogItem.bind(this);
+    this.changeGroup = this.changeGroup.bind(this);
+    this.onVisible = this.onVisible.bind(this);
   }
 
   componentDidMount() {
-    this.refresh();
+    const { group } = this.state;
+    emitter.on('changeGroup', this.changeGroup);
+    this.refresh(group);
+  }
+
+  componentWillUnmount() {
+    emitter.removeListener('changeGroup', this.changeGroup);
   }
 
   onSelect(event) {
-    this.setState({ group: event.target.value });
-    this.refresh();
+    emitter.emit('changeGroup', event.target.value);
+    // this.changeGroup(event.target.value);
+    this.refresh(event.target.value);
+  }
+
+  onVisible() {
+    const { stale, group } = this.state;
+    if (stale) {
+      this.refresh(group);
+    }
   }
 
-  getData() {
+  getData(group) {
     const { oas, operation, baseUrl } = this.props;
-    const { group } = this.state;
     this.setState({ loading: true });
 
     const limit = 5;
@@ -106,8 +127,19 @@ class Logs extends React.Component {
     throw new Error(`Failed to fetch logs`);
   }
 
-  refresh() {
-    this.getData()
+  changeGroup(group) {
+    selectedGroup = group;
+    this.setState({
+      group,
+      stale: true,
+    });
+  }
+
+  refresh(group) {
+    this.setState({
+      stale: false,
+    });
+    this.getData(group)
       .then(logs => {
         this.setState({ logs });
       })
@@ -198,24 +230,27 @@ class Logs extends React.Component {
 
     const find = {
       url: `${oas.servers[0].url}${operation.path}`,
+      group,
     };
     const url = `${baseUrl}logs?${querystring.stringify(find)}`;
 
     return (
-      <div className="logs">
-        <div className="log-header">
-          <h3>Logs</h3>
-          <div className="select-container">
-            <div>
-              <a href={url} target="_blank" rel="noopener noreferrer">
-                View More
-              </a>
-              {this.renderSelect()}
+      <VisibilitySensor onChange={this.onVisible}>
+        <div className="logs">
+          <div className="log-header">
+            <h3>Logs</h3>
+            <div className="select-container">
+              <div>
+                <a href={url} target="_blank" rel="noopener noreferrer">
+                  View More
+                </a>
+                {this.renderSelect()}
+              </div>
             </div>
           </div>
+          <div className="logs-list">{this.renderTable()}</div>
         </div>
-        <div className="logs-list">{this.renderTable()}</div>
-      </div>
+      </VisibilitySensor>
     );
   }
 }
@@ -236,3 +271,4 @@ Logs.defaultProps = {
 
 module.exports = Logs;
 module.exports.Logs = Logs;
+module.exports.LogsEmitter = emitter;

packages/api-logs/index.jsx

@@ -5,7 +5,8 @@
   "main": "dist/index.js",
   "dependencies": {
     "prop-types": "^15.6.2",
-    "react": "^16.4.2"
+    "react": "^16.4.2",
+    "react-visibility-sensor": "^4.1.3"
   },
   "scripts": {
     "lint": "eslint -f unix . --ext .jsx --ext .js",