better exception view and infinite scroll

Author: icewind1991

build/.gitkeep

@@ -10,9 +10,20 @@ table.logs td, table.logs th {
 	padding: .8em;
 	text-align: left;
 	font-weight: normal;
+	position: relative;
 }
 
-/*levels = ['Debug', 'Info', 'Warning', 'Error', 'Fatal'];*/
+table.logs .time {
+	width: 100px;
+}
+
+table.logs .app {
+	width: 150px;
+}
+
+table.logs .level {
+	width: 100px;
+}
 
 /*info*/
 table.logs tr.level_1 {
@@ -43,6 +54,21 @@ span.exceptionRow {
 	width: 100%;
 }
 
+span.exceptionRow.retracted::after, span.exceptionRow.expanded::after {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	margin: 10px;
+}
+
+span.exceptionRow.retracted::after {
+	content: '▼';
+}
+
+span.exceptionRow.expanded::after {
+	content: '▲';
+}
+
 ol.trace {
 	padding-top: 0.5em;
 }

css/app.css

@@ -1,35 +1,49 @@
-import {Component} from 'react/addons';
+import React, {Component} from 'react/addons';
+import {decorate} from 'react-mixin';
+import ReactScrolla from 'react-scrolla';
 
 import {LogProvider} from './Providers/LogProvider.js';
 import {LogTable} from './Components/LogTable.js';
 import {SideBar} from './Components/SideBar.js';
 
 export class App extends Component {
 	state = {
-		'entries': []
+		'entries': [],
+		'loading': false
 	};
 
 	constructor () {
 		super();
-		this.logProvider = new LogProvider();
+		this.logProvider = new LogProvider(25);
 		this.logProvider.on('entries', entries => {
 			this.setState({entries});
 		});
 		this.logProvider.load();
 	}
 
+	fetchNextPage = async() => {
+		this.setState({loading: true});
+		this.logProvider.limit += 25;
+		await this.logProvider.load();
+		this.setState({loading: false});
+	};
+
 	render () {
 		return (
 			<div id="content" role="main" className={"app-" + this.props.appId}>
 				<SideBar>
-					<p>test1</p>
+					<p>Dummy 1</p>
 
-					<p>test2</p>
+					<p>Dummy 2</p>
 				</SideBar>
 
-				<div id="app-content">
+				<ReactScrolla
+					id="app-content"
+					percentage={85}
+					onPercentage={this.fetchNextPage}
+					isLoading={this.state.loading}>
 					<LogTable entries={this.state.entries}/>
-				</div>
+				</ReactScrolla>
 			</div>
 		);
 	}

js/App.js

@@ -16,9 +16,9 @@ export class Exception extends Component {
 		var trace = this.props.Trace.split('\n');
 		var traceElements;
 		if (this.state.expanded) {
-			traceElements = trace.map(line => {
+			traceElements = trace.map((line, i) => {
 				return (
-					<TraceLine line={line}/>
+					<TraceLine key={i} line={line}/>
 				);
 			});
 			traceElements = (
@@ -30,10 +30,11 @@ export class Exception extends Component {
 			traceElements = [];
 		}
 		return (
-			<span className="exceptionRow" onClick={this.clickHandler}>
+			<span
+				className={"exceptionRow " + (this.state.expanded ? 'expanded':'retracted')}
+				onClick={this.clickHandler}>
 				<span className="exception">{this.props.Exception}</span>:&nbsp;
 				<span className="message">{this.props.Message}</span>
-				&nbsp;{this.state.expanded ? '▲' : '▼'}
 				{traceElements}
 			</span>
 		);

js/Components/Exception.js

@@ -7,34 +7,29 @@ export class LogProvider extends EventEmitter {
 
 	_limit = 0;
 
-	constructor (limit = 25) {
+	constructor (limit = 50) {
 		super();
-		this._limit = limit;
-	}
-
-	get limit () {
-		return this._limit;
-	}
-
-	set limit (newLimit) {
-		this._limit = newLimit;
-		this.load();
+		this.loading = false;
+		this.limit = limit;
 	}
 
 	get entries () {
 		return cachedEntries;
 	}
 
 	async load () {
+		this.loading = true;
 		if (this.cachedEntries.length >= this.limit) {
+			console.log('got ' + this.cachedEntries.length + 'entries');
 			return;
 		}
 		var newData = await this.loadEntries(this.cachedEntries.length, this.limit - this.cachedEntries.length);
 		this.cachedEntries = this.cachedEntries.concat(newData.data);
+		this.loading = false;
 		this.emit('entries', this.cachedEntries);
 	}
 
-	loadEntries (offset, count = 25) {
+	loadEntries (offset, count = 50) {
 		return $.get(OC.generateUrl('/settings/admin/log/entries'), {
 			offset,
 			count

js/Providers/LogProvider.js

@@ -20,7 +20,10 @@
   },
   "dependencies": {
     "babel-runtime": "^5.8.3",
+    "envify": "^3.4.0",
     "react": "^0.13.3",
+    "react-mixin": "^1.6.0",
+    "react-scrolla": "^0.1.0",
     "react-time": "^3.0.0"
   }
 }