Logs tab alpha (#61)

components/Buttons/UpdateButton.jsx

@@ -10,22 +10,15 @@ class UpdateButton extends React.Component {
     updateStatus: PropTypes.object,
   };
 
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleAlertDismiss = this.handleAlertDismiss.bind(this);
-    this.reloadPage = this.reloadPage.bind(this);
-  }
-
-  handleClick() {
+  static handleClick() {
     updateWebuiAsync();
   }
 
-  handleAlertDismiss() {
+  static handleAlertDismiss() {
     updateWebui({ status: false });
   }
 
-  reloadPage() {
+  static reloadPage() {
     history.go({ pathname: '/' });
   }
 
@@ -35,12 +28,12 @@ class UpdateButton extends React.Component {
     const { status, error } = this.props.updateStatus.items;
 
     const successAlert = (
-      <Alert bsStyle="success" onDismiss={this.reloadPage}>
+      <Alert bsStyle="success" onDismiss={UpdateButton.reloadPage}>
         <h4>Update Successful!</h4>
         <p>Close this notification to reload.</p>
       </Alert>);
     const errorAlert = (
-      <Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}>
+      <Alert bsStyle="danger" onDismiss={UpdateButton.handleAlertDismiss}>
         <h4>Oops! Something went wrong!</h4>
         <p>Submit an <a href="https://github.com/japanesemediamanager/jmmserver-webui/issues" target="new">Issue on GitHub</a> so we can fix it</p>
         <p>{error.message}</p>
@@ -50,7 +43,7 @@ class UpdateButton extends React.Component {
     return (
       <li className="notification">
         <button
-          onClick={this.handleClick}
+          onClick={UpdateButton.handleClick}
           type="button"
           className={cx('btn btn-info btn-sm', enabled ? '' : 'hidden')}
         >

components/Dialogs/BrowseFolderModal.jsx

@@ -16,6 +16,10 @@ class BrowseFolderModal extends React.Component {
     onSelect: PropTypes.func,
   };
 
+  static handleClose() {
+    store.dispatch(setStatus(false));
+  }
+
   constructor(props) {
     super(props);
     this.state = { folder: '' };
@@ -24,10 +28,6 @@ class BrowseFolderModal extends React.Component {
     this.handleSelect = this.handleSelect.bind(this);
   }
 
-  handleClose() {
-    store.dispatch(setStatus(false));
-  }
-
   handleSelectionChange(folder) {
     this.setState({ folder });
   }

components/Dialogs/ImportFolder/EditTab.jsx

@@ -57,7 +57,7 @@ class EditTab extends React.Component {
       const folders = [];
       let i = 0;
       forEach(items, (item) => {
-        i++;
+        i += 1;
         folders.push(<FolderItem index={i} {...item} />);
       });
 

components/Layout/Layout.jsx

@@ -9,7 +9,6 @@ import s from './Layout.css';
 class Layout extends React.Component {
 
   static propTypes = {
-    className: PropTypes.string,
     sidebarToggle: PropTypes.bool,
     version: PropTypes.string,
     children: PropTypes.any,

components/Link/Link.jsx

@@ -39,6 +39,7 @@ class Link extends React.Component {
 
   render() {
     const { to, ...props } = this.props; // eslint-disable-line no-use-before-define
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
     return <a href={history.createHref(to)} {...props} onClick={this.handleClick} />;
   }
 }

components/Panels/FixedPanel.jsx

@@ -5,7 +5,6 @@ import s from './styles.css';
 
 class FixedPanel extends React.Component {
   static propTypes = {
-    className: PropTypes.string,
     lastUpdated: PropTypes.number,
     title: PropTypes.string,
     description: PropTypes.string,
@@ -32,7 +31,7 @@ class FixedPanel extends React.Component {
       <section className="panel">
         <header className={cx('panel-heading', s.header)}>
           <div className="pull-left">
-          {title}<h6>{description}</h6>
+            {title}<h6>{description}</h6>
           </div>
           {actionName ? <div className="pull-right">
             <a className="btn btn-primary pull-right" onClick={this.handleAction}>{actionName}</a>

components/Panels/InfoPanel.jsx

@@ -16,7 +16,7 @@ class InfoPanel extends React.Component {
         <section className="panel">
           <header className={cx('panel-heading', s.header)}>
             <div className="pull-left">
-            {title}
+              {title}
             </div>
             <div className="pull-right">
               <b className="caret" />

components/Panels/StatusPanel.js → components/Panels/StatusPanel.jsx

@@ -5,8 +5,6 @@ class StatusPanel extends React.Component {
   static propTypes = {
     isFetching: PropTypes.bool,
     lastUpdated: PropTypes.number,
-    StatusCode: PropTypes.number,
-    Message: PropTypes.string,
     items: PropTypes.object,
   };
 

components/Sidebar/Sidebar.jsx

@@ -37,10 +37,10 @@ class Sidebar extends React.Component {
               </Link>
             </li>
             <li className="sub-menu">
-              <a>
+              <Link className={cx({ active: location === '/logs' })} to="/logs">
                 <i className="fa fa-file-text" />
                 <span>Interactive Log</span>
-              </a>
+              </Link>
             </li>
           </ul>
           <div className={cx(s.bottom)}>

components/TreeView/TreeNode.jsx

@@ -53,15 +53,15 @@ class TreeNode extends React.Component {
 
     if (!loaded) {
       fetchApiFolder(basePath)
-        .then((response) => response.json())
+        .then(response => response.json())
         .then((json) => {
           const nodes = [];
           forEach(json.subdir, (item) => {
             nodes.push({ path: item.full_path, text: item.dir });
           });
           return nodes;
         })
-        .then((nodes) => this.setState({ loaded: true, expanded: !expanded, nodes }));
+        .then(nodes => this.setState({ loaded: true, expanded: !expanded, nodes }));
     } else {
       this.setState({ expanded: !expanded });
     }

core/actions.js

@@ -1,8 +1,11 @@
 import 'isomorphic-fetch';
 import { createAction } from 'redux-actions';
 import { forEach } from 'lodash';
+import objPath from 'object-path';
 import store from './store';
 import history from './history';
+import { getDeltaAsync } from './actions/logs/Delta';
+import { appendContents } from './actions/logs/Contents';
 
 const VERSION = __VERSION__; // eslint-disable-line no-undef
 
@@ -13,7 +16,7 @@ export const STATUS_RECEIVE = 'STATUS_RECEIVE';
 export function createAsyncAction(type, key, apiAction, responseCallback) {
   return (forceFetch, apiParams = '') => {
     const state = store.getState();
-    const status = state[key];
+    const status = objPath.get(state, key);
     const apiKey = state.apiSession.apikey;
     let shouldFetch;
 
@@ -120,7 +123,7 @@ export const updateWebuiAsync = createAsyncAction(WEBUI_VERSION_UPDATE,
     }
     return { status: true, error: new Error(`Response status: ${response.status}`) };
   });
-export const updateWebui = createAction(WEBUI_VERSION_UPDATE, (payload) => ({ items: payload }));
+export const updateWebui = createAction(WEBUI_VERSION_UPDATE, payload => ({ items: payload }));
 export const JMM_VERSION = 'JMM_VERSION';
 export const jmmVersionAsync =
   createAsyncAction(JMM_VERSION, 'jmmVersion', '/version', (response) => {
@@ -153,6 +156,17 @@ function autoUpdateTick() {
   if (location === '/dashboard') {
     queueStatusAsync(true);
     recentFilesAsync(true);
+  } else if (location === '/logs') {
+    const state = store.getState();
+    const lines = 10;
+    let position = 0;
+    try {
+      position = state.logs.delta.items.position;
+    } catch (ex) { console.error('Unable to get log position'); }
+    getDeltaAsync(true, `${lines}/${position}`).then(() => {
+      const newState = store.getState();
+      store.dispatch(appendContents(newState.logs.delta.items.lines));
+    });
   }
 }
 let autoupdateTimer = null;

core/actions/logs/Contents.js

@@ -0,0 +1,6 @@
+import { createAction } from 'redux-actions';
+
+export const SET_CONTENTS = 'LOGS_SET_CONTENTS';
+export const setContents = createAction(SET_CONTENTS);
+export const APPEND_CONTENTS = 'LOGS_APPEND_CONTENTS';
+export const appendContents = createAction(APPEND_CONTENTS);

core/actions/logs/Delta.js

@@ -0,0 +1,4 @@
+import { createAsyncAction } from '../../actions';
+
+export const GET_DELTA = 'LOGS_GET_DELTA';
+export const getDeltaAsync = createAsyncAction(GET_DELTA, 'logs.delta', '/log/get/');

core/actions/settings/Log.js

@@ -1,6 +1,6 @@
 import { createAsyncAction, createAsyncPostAction } from '../../actions';
 
 export const GET_LOG = 'SETTINGS_GET_LOG';
-export const getLog = createAsyncAction(GET_LOG, 'logs', '/log/rotate');
+export const getLog = createAsyncAction(GET_LOG, 'settings.logs', '/log/rotate');
 export const SET_LOG = 'SETTINGS_SET_LOG';
-export const setLog = createAsyncPostAction(SET_LOG, 'setLogs', '/log/rotate');
+export const setLog = createAsyncPostAction(SET_LOG, 'settings.setLogs', '/log/rotate');

core/reducers.js

@@ -21,14 +21,15 @@ import {
 } from './actions';
 import modals from './reducers/modals';
 import settings from './reducers/settings';
+import logs from './reducers/logs';
 
 const VERSION = __VERSION__; // eslint-disable-line no-undef
 
 export function createApiReducer(type, dataPropName = 'items', dataPropValue = {},
                                  valueFn = undefined) {
   let valueFunc = null;
   if (valueFn === undefined) {
-    valueFunc = (value) => value;
+    valueFunc = value => value;
   } else {
     valueFunc = valueFn;
   }
@@ -64,12 +65,12 @@ export function createApiReducer(type, dataPropName = 'items', dataPropValue = {
 }
 
 const queueStatus = createApiReducer(QUEUE_STATUS);
-const recentFiles = createApiReducer(RECENT_FILES);
-const jmmNews = createApiReducer(JMM_NEWS);
-const importFolders = createApiReducer(IMPORT_FOLDERS);
+const recentFiles = createApiReducer(RECENT_FILES, 'items', []);
+const jmmNews = createApiReducer(JMM_NEWS, 'items', []);
+const importFolders = createApiReducer(IMPORT_FOLDERS, 'items', []);
 const seriesCount = createApiReducer(SERIES_COUNT);
 const filesCount = createApiReducer(FILES_COUNT);
-const updateAvailable = createApiReducer(UPDATE_AVAILABLE, 'status', false, (payload) =>
+const updateAvailable = createApiReducer(UPDATE_AVAILABLE, 'status', false, payload =>
   VERSION.indexOf('.') !== -1 && payload.version !== VERSION
 );
 const webuiVersionUpdate = createApiReducer(WEBUI_VERSION_UPDATE, 'items',
@@ -108,6 +109,7 @@ const rootReducer = combineReducers({
   selectedImportFolderSeries,
   settings,
   modals,
+  logs,
 });
 
 export default rootReducer;

core/reducers/logs.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import { contents } from './logs/Contents';
+import { delta } from './logs/Delta';
+
+export default combineReducers({
+  contents,
+  delta,
+});

core/reducers/logs/Contents.js

@@ -0,0 +1,23 @@
+import { handleActions } from 'redux-actions';
+import { concat } from 'lodash';
+import { SET_CONTENTS, APPEND_CONTENTS } from '../../actions/logs/Contents';
+
+const defaultState = {
+  lines: [],
+  position: 0,
+};
+
+export const contents = handleActions({
+  [SET_CONTENTS]: (state, action) => {
+    if (action.error) { return state; }
+    const lines = action.payload.lines || [];
+    return Object.assign({}, state, { lines });
+  },
+  [APPEND_CONTENTS]: (state, action) => {
+    if (action.error) { return state; }
+    const lines = concat(state.lines, action.payload);
+    return Object.assign({}, state, { lines });
+  },
+}, defaultState);
+
+export default {};

core/reducers/logs/Delta.js

@@ -0,0 +1,6 @@
+import { createApiReducer } from '../../reducers';
+import { GET_DELTA } from '../../actions/logs/Delta';
+
+export const delta = createApiReducer(GET_DELTA);
+
+export default {};

core/reducers/settings/Log.js

@@ -1,10 +1,5 @@
-import { combineReducers } from 'redux';
 import { createApiReducer } from '../../reducers';
 import { GET_LOG, SET_LOG } from '../../actions/settings/Log';
 
 export const logs = createApiReducer(GET_LOG);
 export const setLogs = createApiReducer(SET_LOG);
-
-export default combineReducers({
-  logs,
-});

core/router.jsx

@@ -30,7 +30,7 @@ function matchURI(route, path) {
 
   const params = Object.create(null);
 
-  for (let i = 1; i < match.length; i++) {
+  for (let i = 1; i < match.length; i += 1) {
     params[route.keys[i - 1].name] = match[i] !== undefined ? decodeParam(match[i]) : undefined;
   }
 
@@ -54,7 +54,7 @@ function resolve(routes, context) {
       const keys = Object.keys(route.data);
       return Promise.all([
         route.load(),
-        ...keys.map(key => { // eslint-disable-line no-loop-func
+        ...keys.map((key) => { // eslint-disable-line no-loop-func
           const query = route.data[key];
           const method = query.substring(0, query.indexOf(' ')); // GET
           const url = query.substr(query.indexOf(' ') + 1);      // /api/tasks/$id

css/main.css

@@ -409,3 +409,6 @@ a.logo span {
     background-color: #fff;
     color: #b0b5b9;
 }
+.log-panel .panel-body {
+    white-space: pre;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jmmserver-webui",
-  "version": "0.1.12-dev",
+  "version": "0.1.12-dev2",
   "private": true,
   "engines": {
     "node": ">=6",
@@ -25,6 +25,7 @@
     "isomorphic-fetch": "^1.0.0",
     "lodash": "^4.15.0",
     "moment": "^2.14.1",
+    "object-path": "^0.11.2",
     "open-sans-fontface": "^1.4.0",
     "path-to-regexp": "^1.5.3",
     "pixrem": "^3.0.1",
@@ -66,12 +67,12 @@
     "babel-preset-stage-1": "^6.5.0",
     "babel-register": "^6.11.6",
     "babel-runtime": "^6.11.6",
-    "css-loader": "^0.23.1",
-    "eslint": "^3.1.1",
-    "eslint-config-airbnb": "^10.0.0",
-    "eslint-plugin-import": "^1.12.0",
+    "css-loader": "^0.25.0",
+    "eslint": "^3.6.0",
+    "eslint-config-airbnb": "^12.0.0",
+    "eslint-plugin-import": "^1.16.0",
     "eslint-plugin-jsx-a11y": "^2.0.1",
-    "eslint-plugin-react": "^6.0.0",
+    "eslint-plugin-react": "^6.3.0",
     "file-loader": "^0.9.0",
     "font-awesome-webpack": "0.0.4",
     "jsdom": "^9.4.2",
@@ -100,7 +101,10 @@
     "extends": "airbnb",
     "rules": {
       "react/prefer-stateless-function": "off",
-      "react/jsx-filename-extension": "off"
+      "react/jsx-filename-extension": "off",
+      "jsx-a11y/no-static-element-interactions": "off",
+      "react/forbid-prop-types": "off",
+      "no-console": ["error", { "allow": ["warn", "error"] }]
     }
   },
   "stylelint": {