Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Console log ui #402

Merged
merged 5 commits into from
Jun 28, 2018
Merged

Console log ui #402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
991e471
edit log messages
Newtchuck Jun 21, 2018
ab64b73
improve log display
Newtchuck Jun 21, 2018
1578518
remove unused class
Newtchuck Jun 21, 2018
80be4f7
fix eslint error
Newtchuck Jun 21, 2018
327c013
scroll stays down
Newtchuck Jun 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions lib/ExecutionControlEpic/ConsoleFeature/Epics/ConsoleEpics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const consoleEpic = () => (action$: any) => {
const currentDate = require("moment");
const molecule = {
source: "Molecule",
color: "purple",
color: "#592b71",
version: "0.4.0",
};

Expand Down Expand Up @@ -101,7 +101,7 @@ const consoleEpic = () => (action$: any) => {
addConsoleLogsForTask({
...molecule,
severity: ConsoleLogError,
message: "Crash task",
message: "The task " + action.payload.id + " has crashed",
date: currentDate().format("DD-MM-YYYY kk:mm:ss"),
}),
),
Expand All @@ -110,7 +110,7 @@ const consoleEpic = () => (action$: any) => {
addConsoleLogsForTask({
...molecule,
severity: ConsoleLogError,
message: "The task has stopped",
message: "The task" + action.payload.id + "has stopped",
date: currentDate().format("DD-MM-YYYY kk:mm:ss"),
}),
),
Expand Down
79 changes: 59 additions & 20 deletions lib/ExecutionControlEpic/ConsoleFeature/Presenters/ConsoleTraveller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,85 @@ import styled from "styled-components";
import type { ConsoleLogsReducer } from "../Reducers/ConsoleLogs";
import LogItem from "./LogItem";

const Table = styled.table`
width: 100%;
justify-content: start;
const Flow = styled.ul`
list-style: none;
display: flex;
flex-direction: column;
flex: 1 1 0;
align-items: stretch;
overflow: auto;
padding: 0px;
`;

const Body = styled.tbody`
const Detail = styled.li`
display: flex;
flex: 1 1 0;
flex-direction: column;
flex: 0 0 auto;
align-items: stretch;
overflow: auto;
flex-direction: column;
padding: 0px;
`;

export default class ConsoleTraveller extends React.Component<Props, State> {
state: State;
props: Props;
static defaultProps: DefaultProps;
contain: HTMLElement;
list: HTMLElement;
isDown: boolean;

constructor(props: Props) {
super(props);
}

componentDidMount() {
if (this.contain) this.isDown = true;
this._scroll();
}

componentWillUpdate() {
if (this.contain) this.isDown = this.isScrolledDown();
}

componentDidUpdate() {
this._scroll();
}

isScrolledDown() {
return (
this.contain.scrollTop + this.contain.clientHeight ==
this.contain.scrollHeight
);
}

_scroll() {
if (this.contain && this.isDown) {
this.contain.scrollTop =
this.contain.scrollHeight - this.contain.clientHeight;
}
}

render() {
return (
<Table>
<Body>
{this.props.logs &&
this.props.logs
.toList()
.map(elem => (
<LogItem
key={`${elem.date || ""}-${elem.message || ""}`}
log={elem}
/>
))}
</Body>
</Table>
<Flow
innerRef={ref => {
this.contain = ref;
}}
>
{this.props.logs &&
this.props.logs.toList().map((elem, i) => (
<Detail
key={i}
innerRef={e => {
i == elem.size - 1 ? (this.list = e) : null;
}}
>
<LogItem
key={`${elem.date || ""}-${elem.message || ""}`}
log={elem}
/>
</Detail>
))}
</Flow>
);
}
}
Expand Down
97 changes: 74 additions & 23 deletions lib/ExecutionControlEpic/ConsoleFeature/Presenters/LogItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,51 +5,102 @@ import * as React from "react";
import styled from "styled-components";
import type { ConsoleLog } from "../../LanguageServerProtocolFeature/Types/standard";

const LogCell = styled.td`
padding: 0.5em;
const Box = styled.div`
display: flex;
flex: 0 0 auto;
flex-direction: column;
border-bottom: 1px black solid;
border-radius: 3px;
padding: 4px;
align-items: stretch;
`;

&:nth-child(1) {
padding-left: 2em;
}
const Header = styled.div`
margin: 0px 4px 4px 4px;
display: flex;
flex: 0 0 auto;
`;

const MessageBox = styled.div`
display: flex;
flex-direction: column;
flex: 1 0 0;
align-items: stretch;
`;

const Message = styled.span`
display: inline;
cursor: default;
`;

const Content = styled.div`
display: flex;
list-style: none;
flex: 0 0 auto;
align-items: stretch;
flex-direction: row;
`;

const Source = styled.div`
border-radius: 10px;
width: 2px;
margin: 2px 12px 2px 12px;
`;

const LogType = styled.span`
font-weight: bold;
padding: 0.3em;
border-radius: 0.2em;
const SeverityIcon = styled.span`
height: 16px;
width: 16px;
cursor: default;
`;

export default class LogItem extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
}

severity_flag() {
severity_class() {
switch (this.props.log.severity) {
case 1:
return <LogType className="background-error">Error</LogType>;
return "diagnostic-color-error-text icon icon-issue-opened";
case 2:
return <LogType className="background-warning">Warning</LogType>;
return "diagnostic-color-warning-text icon icon-alert";
case 3:
return <LogType className="custom-branch-color">Infos</LogType>;
case 4:
return <LogType className="background-highlight">Hint</LogType>;
return "diagnostic-color-info-text icon icon-info";
case 5:
return <LogType className="background-success">Success</LogType>;
return "diagnostic-color-success-text icon icon-check";
default:
return "";
}
}

render() {
return (
<tr className="log-line">
<LogCell>{`[${this.props.log.source}]`}</LogCell>
<LogCell>{this.severity_flag()}</LogCell>
<LogCell className="text-highlight">{this.props.log.message}</LogCell>
<LogCell className="text-smaller">{`(at ${this.props.log.date ||
""}, on v${this.props.log.version})`}</LogCell>
</tr>
<Box>
<Header>
<Message
style={{
fontWeight: "bold",
}}
>
<SeverityIcon className={this.severity_class()} />
{`${this.props.log.source}`}
</Message>
</Header>
<Content>
<Source
style={{
backgroundColor: this.props.log.color,
}}
/>
<MessageBox>
<Message className="text-highlight">
{this.props.log.message}
</Message>
<Message className="text-smaller">{`(at ${this.props.log.date ||
""}, on v${this.props.log.version})`}</Message>
</MessageBox>
</Content>
</Box>
);
}
}
Expand Down
37 changes: 0 additions & 37 deletions styles/molecule-dev-environment.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,41 +184,4 @@
}
}

.table-title {
color: @text-color-selected;
background-color: @overlay-background-color;
}

.log-line {
color: @text-color;
// &:nth-child(even) {
// background-color: @button-background-color;
// }
//
// &:nth-child(odd) {
// color: @overlay-background-color;
// background-color: @text-color-highlight;
// }
}

.background-error {
color: @text-color-selected;
background-color: @background-color-error;
}

.background-warning {
color: @text-color-selected;
background-color: @background-color-warning;
}

.background-hint {
color: @text-color-selected;
background-color: @background-color-highlight;
}

.background-success {
color: @text-color-selected;
background-color: @background-color-success;
}

@import (inline) "../node_modules/xterm/dist/xterm.css";