allow toggling between absolute and relative dates

Author: icewind1991

appinfo/routes.php

@@ -13,6 +13,8 @@
 	['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
 	['name' => 'log#get', 'url' => '/get', 'verb' => 'GET'],
 	['name' => 'log#search', 'url' => '/search', 'verb' => 'GET'],
+	['name' => 'log#getSettings', 'url' => '/settings', 'verb' => 'GET'],
 	['name' => 'log#getLevels', 'url' => '/levels', 'verb' => 'GET'],
 	['name' => 'log#setLevels', 'url' => '/levels', 'verb' => 'PUT'],
+	['name' => 'log#setRelative', 'url' => '/relative', 'verb' => 'PUT'],
 ]];

controller/logcontroller.php

@@ -85,6 +85,22 @@ public function getLevels() {
 		return new JSONResponse($this->config->getAppValue('logreader', 'levels', '11111'));
 	}
 
+	public function getSettings() {
+		return new JSONResponse([
+			'levels' => $this->config->getAppValue('logreader', 'levels', '11111'),
+			'dateformat' => $this->config->getSystemValue('logdateformat', \DateTime::ISO8601),
+			'timezone' => $this->config->getSystemValue('logtimezone', 'UTC'),
+			'relativedates' => (bool)$this->config->getAppValue('logreader', 'relativedates', true),
+		]);
+	}
+
+	/**
+	 * @param bool $relative
+	 */
+	public function setRelative($relative) {
+		$this->config->setAppValue('logreader', 'relativedates', $relative);
+	}
+
 	public function setLevels($levels) {
 		$this->config->setAppValue('logreader', 'levels', $levels);
 	}

js/App.js

@@ -5,13 +5,7 @@ import {LogProvider} from './Providers/LogProvider.js';
 import {LogTable} from './Components/LogTable.js';
 import {ToggleEntry} from './Components/ToggleEntry.js';
 import {LogUploader} from './Components/LogUploader.js';
-import {
-	App as AppContainer,
-	Entry,
-	SideBar,
-	Content,
-	Separator
-} from 'oc-react-components';
+import {App as AppContainer, Entry, SideBar, Content, Separator, Settings} from 'oc-react-components';
 
 import {LogSearch} from './Search.js';
 import {LogFile} from './Providers/LogFile.js'
@@ -20,10 +14,12 @@ import styles from '../css/app.css';
 
 export class App extends Component {
 	state = {
-		'entries': [],
-		'loading': false,
-		'levels': [false, false, false, false, false],
-		provider: null
+		entries: [],
+		loading: false,
+		levels: [false, false, false, false, false],
+		provider: null,
+		relative: true,
+		dateFormat: 'Y-m-d\TH:i:sO'
 	};
 
 	constructor () {
@@ -36,11 +32,19 @@ export class App extends Component {
 		});
 		OCA.Search.logreader = new LogSearch(this.logProvider);
 		this.saveLevels = _.debounce(this.logProvider.setLevels, 100);
+		this.saveRelative = _.debounce(this.logProvider.setRelative, 100);
 	}
 
 	async componentDidMount () {
 		const levels = await this.logProvider.getLevels();
-		this.setState({levels, provider: this.logProvider});
+		const relative = await this.logProvider.getRelative();
+		const dateFormat = await this.logProvider.getDateFormat();
+		this.setState({
+			levels,
+			relative,
+			dateFormat,
+			provider: this.logProvider
+		});
 		this.logProvider.load();
 	}
 
@@ -77,6 +81,11 @@ export class App extends Component {
 		logFile.load();
 	};
 
+	setRelative = (relative) => {
+		this.setState({relative});
+		this.saveRelative(relative);
+	};
+
 	render () {
 		let entries = this.state.entries.filter(entry=> {
 			if (!entry.level && entry.level !== 0) {
@@ -95,11 +104,18 @@ export class App extends Component {
 		});
 
 		return (
+
 			<AppContainer appId="logreader">
 				<SideBar><LogUploader
 						onLogFile={this.onLogFile}/>
 					<Separator/>
 					{filters}
+					<Settings>
+						<ToggleEntry key='relative' active={this.state.relative}
+									 onChange={this.setRelative}>
+							Relative Dates
+						</ToggleEntry>
+					</Settings>
 				</SideBar>
 
 				<ReactScrolla
@@ -108,7 +124,9 @@ export class App extends Component {
 					onPercentage={this.fetchNextPage}
 					isLoading={this.state.loading}>
 					<div className={styles.content}>
-						<LogTable entries={entries}/>
+						<LogTable entries={entries}
+								  relative={this.state.relative}
+								  dateFormat={this.state.dateFormat}/>
 					</div>
 				</ReactScrolla>
 			</AppContainer>

js/Components/LogTable.js

@@ -3,38 +3,51 @@ import {LogEntry} from './LogEntry.js';
 import {LogLevel} from './LogLevel.js';
 import Timestamp from 'react-time';
 import MediaQuery from 'react-responsive';
+import {convertDateFormat} from '../DateFormatConverter.js'
 
 import style from './LogTable.less';
 
 export class LogTable extends Component {
 	render () {
-		var rows = this.props.entries.map((entry, i) => {
-			var time = new Date(entry.time);
+		const timeClass = style.time + ((this.props.relative) ? (' ' + style.relative) : '');
+
+		const getTimeStamp = (entry) => {
+			const time = new Date(entry.time);
+			if (this.props.relative) {
+				return <Timestamp value={time} relative/>
+			} else {
+				return <Timestamp value={time}
+								  format={convertDateFormat(this.props.dateFormat)}/>
+			}
+		};
+		const rows = this.props.entries.map((entry, i) => {
 			return (
 				<tr className={style['level_' + entry.level]} key={i}>
 					<td className={style.level}><LogLevel level={entry.level}/>
 					</td>
 					<td className={style.app}>{entry.app}</td>
 					<td className={style.message}><LogEntry
 						message={entry.message}/></td>
-					<td className={style.time}><Timestamp value={time}
-														  relative/></td>
+					<td className={timeClass}>{getTimeStamp(entry)}</td>
 				</tr>
 			)
 		});
 
-		var smallRows = this.props.entries.map((entry, i) => {
-			var time = new Date(entry.time);
+		const smallRows = this.props.entries.map((entry, i) => {
 			return (
-				<div className={style['level_' + entry.level] + ' ' + style.row} key={i}>
-					<div className={style.level + ' ' + style.column}><LogLevel level={entry.level}/>
+				<div className={style['level_' + entry.level] + ' ' + style.row}
+					 key={i}>
+					<div className={style.level + ' ' + style.column}><LogLevel
+						level={entry.level}/>
 					</div>
-					<div className={style.app + ' ' + style.column}>{entry.app}</div>
+					<div
+						className={style.app + ' ' + style.column}>{entry.app}</div>
 
-					<div className={style.time + ' ' + style.column}><Timestamp value={time}
-														   relative/></div>
-					<div className={style.message + ' ' + style.column}><LogEntry
-						message={entry.message}/></div>
+					<div
+						className={timeClass + ' ' + style.column}>{getTimeStamp(entry)}</div>
+					<div className={style.message + ' ' + style.column}>
+						<LogEntry
+							message={entry.message}/></div>
 				</div>
 			)
 		});
@@ -48,7 +61,7 @@ export class LogTable extends Component {
 							<th className={style.level}>Level</th>
 							<th className={style.app}>App</th>
 							<th className={style.message}>Message</th>
-							<th className={style.time}>Time</th>
+							<th className={timeClass}>Time</th>
 						</tr>
 						</thead>
 						<tbody>

js/Components/LogTable.less

@@ -15,8 +15,11 @@
   }
 
   .time {
-    width: 120px;
-    text-align: right;
+    width: 180px;
+  }
+
+  .time.relative {
+    width: 100px;
   }
 
   .app {

js/DateFormatConverter.js

@@ -0,0 +1,46 @@
+/*
+ * PHP => moment.js
+ *
+ * http://www.php.net/manual/en/function.date.php
+ * http://momentjs.com/docs/#/displaying/format/
+ * https://gist.github.com/NTICompass/9375143
+ */
+const formatMap = {
+	d: 'DD',
+	D: 'ddd',
+	j: 'D',
+	l: 'dddd',
+	N: 'E',
+	w: 'd',
+	W: 'W',
+	F: 'MMMM',
+	m: 'MM',
+	M: 'MMM',
+	n: 'M',
+	o: 'GGGG',
+	Y: 'YYYY',
+	y: 'YY',
+	a: 'a',
+	A: 'A',
+	g: 'h',
+	G: 'H',
+	h: 'hh',
+	H: 'HH',
+	i: 'mm',
+	s: 'ss',
+	u: '[u]', // not sure if moment has this
+	e: '[e]', // moment does not have this
+	O: 'ZZ',
+	P: 'Z',
+	T: '\T', // deprecated in moment
+	c: 'YYYY-MM-DD[T]HH:mm:ssZ',
+	r: 'ddd, DD MMM YYYY HH:mm:ss ZZ',
+	U: 'X'
+};
+const formatEx = /[dDjlNSwzWFmMntLoYyaABgGhHisueIOPTZcrU]/g;
+
+export function convertDateFormat (format) {
+	return format.replace(formatEx, (phpStr) => {
+		return typeof formatMap[phpStr] === 'function' ? formatMap[phpStr]() : formatMap[phpStr];
+	});
+}

js/Providers/LogProvider.js

@@ -3,6 +3,7 @@ import {EventEmitter} from 'events';
 export class LogProvider extends EventEmitter {
 	static levels = ['Debug', 'Info', 'Warning', 'Error', 'Fatal'];
 
+	cachedSettings = null;
 	fromFile = false;
 	cachedEntries = [];
 	hasMore = true;
@@ -43,7 +44,7 @@ export class LogProvider extends EventEmitter {
 			return;
 		}
 		var newData = await this.loadEntries(this.cachedEntries.length, this.limit - this.cachedEntries.length);
-		if(newData.data.length === 0) {
+		if (newData.data.length === 0) {
 			this.hasMore = false;
 		}
 		this.cachedEntries = this.cachedEntries.concat(newData.data);
@@ -66,17 +67,43 @@ export class LogProvider extends EventEmitter {
 		}
 	}
 
-	async getLevels() {
-		const levels = await $.get(OC.generateUrl('/apps/logreader/levels'));
+	async getSettings () {
+		if (this.cachedSettings) {
+			return this.cachedSettings;
+		}
+		this.cachedSettings = await $.get(OC.generateUrl('/apps/logreader/settings'));
+		return this.cachedSettings;
+	}
+
+	async getLevels () {
+		const {levels} = await this.getSettings();
 		return levels.split('').map(level => level > 0);
 	}
 
-	setLevels(levels) {
+	setLevels (levels) {
 		const levelsString = levels.map(level => level ? 1 : 0).join('');
 		return $.ajax({
 			type: 'PUT',
 			url: OC.generateUrl('/apps/logreader/levels'),
 			data: {levels: levelsString}
 		});
 	}
+
+	async getRelative () {
+		const {relativedates} = await this.getSettings();
+		return relativedates;
+	}
+
+	async getDateFormat(){
+		const {dateformat} = await this.getSettings();
+		return dateformat;
+	}
+
+	setRelative (relative) {
+		return $.ajax({
+			type: 'PUT',
+			url: OC.generateUrl('/apps/logreader/relative'),
+			data: {relative}
+		});
+	}
 }