Skip to content

Commit

Permalink
feat: web UI activity log
Browse files Browse the repository at this point in the history
  • Loading branch information
tympanix committed Jun 28, 2018
1 parent 6fd0a42 commit a891539
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 1 deletion.
80 changes: 80 additions & 0 deletions web/js/comp/ActivityLog.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React, { Component } from 'react';

const types = {
"debug": "notify",
"info": "success",
"warn": "warning",
"error": "error",
"fatal": "error",
}

const known = {
"media": m => {
if (m.year) {
return `${m.name} (${m.year})`
}
if (m.season && m.episode) {
return `${m.name} S${m.season}E${m.episode}`
}
}
}

function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}

class ActivityLog extends Component {
constructor() {
super()
}

renderTags(data) {
let tags = []
for (var key in data) {
let value = data[key]

if (!data.hasOwnProperty(key)) {
continue
}

if (known[key]) {
value = known[key](value)
}

if (typeof value !== "string" || !value.length) continue

tags.push((
<span key={key}>
<span className="tag pad">{key}</span>{value}
</span>
))
}
return tags
}

render() {
if (!this.props.log || !this.props.log.length) {
return <h3 className="center meta">No logs to show :(</h3>
}

let logs = this.props.log.map((s) => {
return (
<li className={types[s.level] || "error"} key={s.wsid}>
<span className="title">
{capitalizeFirstLetter(s.level)}
</span>
<span className="message">{s.message}</span>
{this.renderTags(s.data)}
</li>
)
})

return (
<ul className="snackbar log">
{logs}
</ul>
)
}
}

export default ActivityLog
20 changes: 19 additions & 1 deletion web/js/comp/Details.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import FileList from './FileList'
import Flag from './Flag'
import DownloadButtons from './DownloadButtons'
import SubtitleList from './SubtitleList'
import ActivityLog from './ActivityLog'

import API from '../api'
import websocket from '../websocket'
Expand All @@ -28,6 +29,7 @@ class Details extends Component {
busy: false,
loading: true,
failed: false,
logs: [],
}
}

Expand Down Expand Up @@ -58,7 +60,10 @@ class Details extends Component {
found.subtitles.push(sub)
}

return {"media": prev.media}
return {
"media": prev.media,
"logs": prev.logs.concat([msg]),
}
})
}

Expand Down Expand Up @@ -136,6 +141,13 @@ class Details extends Component {
<TabList className="tablist">
<Tab selectedClassName="active">Files</Tab>
<Tab selectedClassName="active">Subtitles</Tab>
<Tab selectedClassName="active">
Activity
{this.state.logs.length
? <span className="tag pad">{this.state.logs.length}</span>
: null
}
</Tab>
</TabList>

<TabPanel className="tab-panel">
Expand All @@ -152,6 +164,12 @@ class Details extends Component {
<SubtitleList/>
</section>
</TabPanel>
<TabPanel className="tab-panel">
<section>
<h2>Activity</h2>
<ActivityLog log={this.state.logs}/>
</section>
</TabPanel>
</Tabs>
</section>
</section>
Expand Down
3 changes: 3 additions & 0 deletions web/js/websocket.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ class Websocket extends EventEmitter {
super()
this.ws = new WebSocket("ws://" + document.location.host + "/api/ws")
this.ws.onmessage = this.__handle.bind(this)
this.__id = 0
this.__handlers = []
}

Expand All @@ -27,6 +28,8 @@ class Websocket extends EventEmitter {
return Snackbar.error("Websocket", "Could not read websocket message", "WS")
}

Object.assign(data, {wsid: this.__id})
this.__id++
this.emit("ws", data)

var log = loggers[data.level] || Snackbar.error
Expand Down
4 changes: 4 additions & 0 deletions web/sass/_log.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.snackbar.log {
position: static;
width: 100%;
}
1 change: 1 addition & 0 deletions web/sass/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
@import "variables";
@import "lists";
@import "flags";
@import "log";

0 comments on commit a891539

Please sign in to comment.