Commit 14fdffe0 authored by Mike Cardwell's avatar Mike Cardwell

Display User Agent info

parent 33d9dec2
import React, { Component } from 'react';
import css from 'next/css';
const style = {
root: css({
margin: '0.3em 1em 0 1em',
}),
list: css({
listStyleType: 'none',
margin: 0,
padding: 0,
}),
};
export default class TestResultsAgents extends Component {
render() {
const agents = this.agents();
if (!agents.length) return null;
return (
<div className={ style.root }>
<h3>User Agents</h3>
<ul className={ style.list }>
{
agents.map(agent => (
<li key={ agent }>
{ agent }
</li>
))
}
</ul>
</div>
);
}
agents() {
const { results } = this.props;
const agents = {};
results.forEach(({ http = {} }) => {
if (http.httpUserAgent) {
agents[http.httpUserAgent] = true;
}
});
return Object.keys(agents).sort();
}
}
import React, { Component } from 'react';
import css from 'next/css';
const style = {
root: css({
margin: '0.3em 1em 0 1em',
}),
list: css({
listStyleType: 'none',
margin: 0,
padding: 0,
}),
};
export default class TestResultsIPs extends Component {
render() {
......@@ -8,15 +21,18 @@ export default class TestResultsIPs extends Component {
if (!ips.length) return null;
return (
<ul>
{
ips.map(ip => (
<li key={ ip }>
{ ip }
</li>
))
}
</ul>
<div className={ style.root }>
<h3>IP Addresses</h3>
<ul className={ style.list }>
{
ips.map(ip => (
<li key={ ip }>
{ ip }
</li>
))
}
</ul>
</div>
);
}
......
......@@ -6,9 +6,10 @@ import css from 'next/css';
const style = {
root: css({
display: 'flex',
flexWrap: 'wrap',
maxWidth: '60em',
display: 'flex',
flexWrap: 'wrap',
maxWidth: '60em',
marginTop: '1em',
}),
};
......
......@@ -2,8 +2,9 @@ import React, { Component } from 'react';
import Wrapper from '../lib/components/Wrapper';
import TestResults from '../lib/components/TestResults';
import TestResultsIPs from '../lib/components/TestResults/IPs';
import TestResults from '../lib/components/TestResults';
import TestResultsIPs from '../lib/components/TestResults/IPs';
import TestResultsAgents from '../lib/components/TestResults/Agents';
import api from '../lib/api';
......@@ -14,8 +15,12 @@ const style = {
error: css({ maxWidth: '30em', color: 'red' }),
actions: {
root: css({ display: 'flex' }),
action: css({ margin: '0.1em 0.5em' }),
action: css({ margin: '0 0.5em' }),
},
resultsSummary: css({
display: 'flex',
justifyContent: 'space-between',
}),
};
export default class TestPage extends Component {
......@@ -124,7 +129,10 @@ export default class TestPage extends Component {
</p>
)
}
<TestResultsIPs results={ results }/>
<div className={ style.resultsSummary }>
<TestResultsIPs results={ results }/>
<TestResultsAgents results={ results }/>
</div>
<TestResults tests={ tests } results={ results }/>
</Wrapper>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment