Permalink
Browse files

Improve experimental timeline to debug HTML

  • Loading branch information...
rrrene committed Jul 7, 2018
1 parent 1a4e961 commit 4a06b077a95491f90baf5e500c8f045be4a875e2
Showing with 204 additions and 53 deletions.
  1. +191 −50 debug-template.html
  2. +13 −3 lib/credo/check/runner.ex
View
@@ -1,7 +1,6 @@
<html>
<head>
<title>Credo Debug Log</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
@@ -13,48 +12,7 @@
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.timeline {
position: relative;
margin-bottom: 20px;
font-size: 12px;
color: #aaa;
}
.timeline__row {
padding: 3px;
border-bottom: 1px solid #e5e5e5;
display: flex;
}
.timeline__col {
position: relative;
flex: 1;
border-right: 1px solid #e5e5e5;
}
.timeline__col--graph {
flex: 5;
}
.timeline__span {
position: absolute;
height: 6px;
background-color: deepskyblue;
border-radius: 2px;
}
</style>
</head>
<body>
@@ -162,25 +120,107 @@ <h2>Check Timings</h2>
<script type="text/babel">
class App extends React.Component {
originalTimings;
constructor(props) {
super(props);
this.state = props.state;
this.originalTimings = this.state.timings;
}
round(val) {
return Math.round(val * 1000) / 1000;
}
getStyleModifier(timing, index) {
const colors = [
'#FF3B30',
'#FF9500',
'#FFCC00',
'#4CD964',
'#5AC8FA',
'#007AFF',
'#5856D6',
'#EFEFF4',
'#E5E5EA',
'#D1D1D6',
'#C7C7CC',
'#8E8E93'
];
return `color${index}`;
}
getTaskName(name) {
if( name ) {
return name.toString().replace(/^Elixir\./, '');
} else {
return '- none -';
}
}
filterTimings(timings) {
return timings.filter((x) => {
return x.tags.task && (
x.tags.task.match(/MainProcess/) ||
(this.state.toggledTask && x.tags.parent_task == this.state.toggledTask)
)
});
}
toggleTiming(timing, e) {
if( this.state.toggledTask ) {
this.setState({"toggledTask": null});
} else {
this.setState({"toggledTask": timing.tags.task});
}
}
render() {
console.log(this.props)
let {started_at, ended_at, duration, timings} = this.props.state;
let {started_at, ended_at, duration} = this.props.state;
let timings = this.filterTimings(this.originalTimings);
timings = timings.filter((x) => x.tags.task && x.tags.task.match(/MainProcess/));
let timing_markers = timings.map(({started_at}) => started_at);
return <div className="timeline">
{timings.map((timing) =>
<div className="timeline__row">
<div className="timeline__col timeline__col--graph">
<div className="timeline__span" title={JSON.stringify(timing.tags)} style={{left: this.round((timing.started_at - started_at) / duration * 100) + '%', width: this.round(timing.duration / duration * 100) + '%'}}>
<div className="timeline__container-left">
<div className="timeline__row timeline__row--headline">
Task/Check
</div>
{timings.map((timing) =>
<div className="timeline__row">
<div className="timeline__col">{this.getTaskName(timing.tags.task)}</div>
</div>
)}
</div>
<div className="timeline__container-middle">
<div className="timeline__row timeline__row--headline">
Duration
</div>
{timings.map((timing) =>
<div className="timeline__row">
<div className="timeline__col">{Math.floor(timing.duration / 1000)} ms</div>
</div>
)}
</div>
<div className="timeline__container-right">
{timing_markers.map((time) =>
<div className="timeline__marker" style={{left: this.round((time - started_at) / duration * 100) + '%'}}>
{Math.floor((time - started_at) / 1000)} ms
</div>
)}
<div className="timeline__row">
Timeline
</div>
{timings.map((timing, index) =>
<div className="timeline__row">
<div className="timeline__col timeline__col--graph">
<div onClick={(e) => this.toggleTiming(timing, e)} className={['timeline__span', `timeline__span--${this.getStyleModifier(timing, index)}`].join(' ')} title={JSON.stringify(timing.tags)} style={{left: this.round((timing.started_at - started_at) / duration * 100) + '%', width: this.round(timing.duration / duration * 100) + '%'}}>
</div>
</div>
</div>
)}
</div>
)}
</div>;
}
}
@@ -192,6 +232,107 @@ <h2>Check Timings</h2>
</script>
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.timeline {
display: flex;
align-content: stretch;
margin-bottom: 20px;
width: 100%;
font-size: 12px;
color: #aaa;
border-collapse: collapse;
}
.timeline__marker {
position: absolute;
height: 100%;
width: 1px;
white-space: nowrap;
border-left: 1px solid #f0f0f0;
}
.timeline__container-left {
flex-basis: 20%;
display: flex;
flex-direction: column;
}
.timeline__container-left {
display: flex;
flex-direction: column;
}
.timeline__container-right {
position: relative;
flex-grow: 1;
}
.timeline__row {
height: 24px;
padding: 3px 0;
border-bottom: 1px solid #e5e5e5;
}
.timeline__col {
position: relative;
white-space: nowrap;
padding-top: 3px;
padding-right: 10px;
}
.timeline__span {
position: absolute;
height: 6px;
background-color: deepskyblue;
border-radius: 2px;
}
.timeline__span--color0 {
background-color: #EFEFF4;
}
.timeline__span--color1 {
background-color: #E5E5EA;
}
.timeline__span--color2 {
background-color: #D1D1D6;
}
.timeline__span--color3 {
background-color: #4CD964;
}
.timeline__span--color4 {
background-color: #5AC8FA;
}
.timeline__span--color5 {
background-color: #007AFF;
}
.timeline__span--color6 {
background-color: #5856D6;
}
.timeline__span--color7 {
background-color: #FF3B30;
}
.timeline__span--color8 {
background-color: #FF9500;
}
.timeline__span--color9 {
background-color: #FFCC00;
}
.timeline__span--color10 {
background-color: #C7C7CC;
}
.timeline__span--color11 {
background-color: #8E8E93;
}
</style>
</body>
</html>
View
@@ -50,13 +50,18 @@ defmodule Credo.Check.Runner do
defp append_issues_and_timings(exec, source_file, {issues, {check, filename, started_at, time}}) do
Issues.append(exec, source_file, issues)
Timing.append(exec, [check: check, source_file: filename], started_at, time)
Timing.append(
exec,
[task: exec.current_task, check: check, source_file: filename],
started_at,
time
)
end
defp append_issues_and_timings(exec, source_file, {issues, {check, started_at, time}}) do
Issues.append(exec, source_file, issues)
Timing.append(exec, [check: check], started_at, time)
Timing.append(exec, [task: exec.current_task, check: check], started_at, time)
end
@doc false
@@ -66,7 +71,12 @@ defmodule Credo.Check.Runner do
Enum.into(issues, %{})
{issues, {check, started_at, time}} ->
Timing.append(exec, [check: check, alias: "ConfigCommentFinder"], started_at, time)
Timing.append(
exec,
[task: exec.current_task, check: check, alias: "ConfigCommentFinder"],
started_at,
time
)
Enum.into(issues, %{})
end

0 comments on commit 4a06b07

Please sign in to comment.