Skip to content

Commit bc97313

Browse files
rtbucknerrtbuckner
committed
updated data file, docker context, and docker model to process data from multiple docker containers,
2 parents bf33936 + ef4f3cd commit bc97313

40 files changed

Lines changed: 794 additions & 423 deletions

‎__tests__/app/App.test.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import ReactDOM from 'react-dom';
23
import { shallow, mount } from 'enzyme';
34
import App from '../../app/App';
45
describe('<App />', () => {
@@ -10,6 +11,11 @@ describe('<App />', () => {
1011
it('should render <Splash /> on the first visit', () => {
1112
expect(wrapper).toBeDefined();
1213
});
14+
it('renders without crashing', () => {
15+
const div = document.createElement('div');
16+
ReactDOM.render(<App />, div);
17+
ReactDOM.unmountComponentAtNode(div);
18+
});
1319
it('should render <DashboardContainer /> if not on the first visit', () => {
1420
jest.useFakeTimers();
1521
wrapper = mount(<App />);

‎__tests__/app/charts/DockerChart.test.tsx‎

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,83 @@
1-
xdescribe('<DockerChart />', () => {
2-
it('should');
1+
import React, { useState, useContext } from 'react';
2+
import { mount, shallow } from 'enzyme';
3+
const { ipcRenderer } = require('electron');
4+
5+
import DockerContextProvider, { DockerContext } from '../../../app/context/DockerContext';
6+
7+
// Setup electron mock
8+
jest.mock('electron', () => ({ ipcRenderer: { on: jest.fn(), send: jest.fn() } }));
9+
10+
describe('React unit tests', () => {
11+
describe('<DockerChart />', () => {
12+
let wrapper: any;
13+
let shallow: any;
14+
15+
beforeEach(() => {
16+
const TestComponent = () => {
17+
const { dockerData } = useContext(DockerContext);
18+
const [mockData, setMockData] = useState([
19+
{
20+
containerid: 'f57f5815cb0',
21+
containername: 'chronos-mon-2',
22+
cpupercent: 0.3,
23+
memorylimit: 16665812992,
24+
memorypercent: 0.3,
25+
memoryusage: 48480256,
26+
networkreceived: 6562749,
27+
networksent: 0,
28+
platform: 'Linux',
29+
processcount: 35,
30+
restartcount: 0,
31+
starttime: 'Thu Jul 02 2020 16:18:50 GMT-0700 ',
32+
id: '5efe95ded17eaf0020a80c80',
33+
},
34+
]);
35+
const dataPoint = mockData[0];
36+
return (
37+
<>
38+
<div id="docker-stats-chart">
39+
<header id="docker-stats-chart-header">Docker Container Stats</header>
40+
<span>Container Name: {dataPoint.containername}</span>
41+
<span>Container ID: {dataPoint.containerid}</span>
42+
<span>Platform: {dataPoint.platform}</span>
43+
<span>Start time: {dataPoint.starttime}</span>
44+
<span>Memory Usage: {(dataPoint.memoryusage / 1000000).toFixed(2)}</span>
45+
<span>Memory Limit: {(dataPoint.memorylimit / 1000000).toFixed(2)}</span>
46+
<span>Memory Percent: {dataPoint.memorypercent.toFixed(2)}%</span>
47+
<span>CPU percent: {dataPoint.cpupercent.toFixed(2)}%</span>
48+
<span>Network I/O - Received (Kb): {dataPoint.networkreceived / 1000}</span>
49+
<span>Network I/O - Sent (Kb): {dataPoint.networksent / 1000}</span>
50+
<span>Process Count: {dataPoint.processcount}</span>
51+
<span>Restart Count: {dataPoint.restartcount}</span>
52+
</div>
53+
</>
54+
);
55+
};
56+
wrapper = mount(
57+
<DockerContextProvider>
58+
<TestComponent />
59+
</DockerContextProvider>
60+
);
61+
});
62+
63+
it('should render', () => {
64+
expect(wrapper).toMatchSnapshot();
65+
});
66+
67+
it('should display all tags with docker information', () => {
68+
expect(wrapper.find('span')).toHaveLength(12);
69+
});
70+
71+
it('should display <header> tag with docker stats', () => {
72+
expect(wrapper.find('header').text()).toEqual('Docker Container Stats');
73+
});
74+
75+
it('should display container name, id, platform, and memory usage', () => {
76+
expect(wrapper.find('div').find('span').at(0).text()).toContain('chronos-mon-2');
77+
expect(wrapper.find('div').find('span').at(1).text()).toContain('f57f5815cb0');
78+
expect(wrapper.find('div').find('span').at(2).text()).toContain('Linux');
79+
expect(wrapper.find('div').find('span').at(4).text()).toContain('48.48');
80+
expect(wrapper.find('div').find('span').at(5).text()).toContain('16665.81');
81+
});
82+
});
383
});

‎__tests__/app/charts/LatencyChart.test.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
describe('tests for latency chart', () => {
2+
xit('should render plot with latency values', () => {});
3+
});

‎__tests__/app/context/CommsContext.test.tsx‎

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,71 @@
1-
xdescribe('<CommsContext />', () => {
2-
xit('should');
1+
import React, { useContext, useState } from 'react';
2+
import { mount, shallow } from 'enzyme';
3+
const { ipcRenderer } = require('electron');
4+
5+
import CommsContextProvider, { CommsContext } from '../../../app/context/CommsContext';
6+
7+
// Setup electron mock
8+
jest.mock('electron', () => ({ ipcRenderer: { on: jest.fn(), send: jest.fn() } }));
9+
10+
describe('<CommsContext />', () => {
11+
let wrapper: any;
12+
let shallow: any;
13+
14+
beforeEach(() => {
15+
const TestComponent = () => {
16+
const { commsData, setCommsData, fetchCommsData } = useContext(CommsContext);
17+
const [mockData, setMockData] = useState([
18+
{
19+
correlatingid: '7bdad8c0',
20+
endpoint: '/customers/createcustomer',
21+
microservice: 'customers',
22+
request: 'GET',
23+
responsemessage: 'OK',
24+
responsestatus: 200,
25+
time: '2020-06-27T05:30:43.567Z',
26+
id: 36,
27+
},
28+
]);
29+
return (
30+
<>
31+
<div id="commsData">{JSON.stringify(commsData)}</div>
32+
<div id="parsedData">{JSON.stringify(mockData)}</div>
33+
<button id="fetchCommsData" onClick={() => fetchCommsData('customers')}>
34+
Test fetchCommsData
35+
</button>
36+
<button id="setCommsData" onClick={() => setCommsData({ foo: 'bar' })}>
37+
Test setCommsData
38+
</button>
39+
</>
40+
);
41+
};
42+
wrapper = mount(
43+
<CommsContextProvider>
44+
<TestComponent />
45+
</CommsContextProvider>
46+
);
47+
});
48+
49+
it('should render correctly', () => {
50+
expect(wrapper).toMatchSnapshot();
51+
});
52+
53+
it("should emit the 'commsRequest' event and listen on 'commsResponse' when invoking fetchCommsData", () => {
54+
const button = wrapper.find('#fetchCommsData');
55+
button.simulate('click');
56+
expect(ipcRenderer.send).toHaveBeenCalledWith('commsRequest', 'customers');
57+
expect(ipcRenderer.on).toHaveBeenCalledWith('commsResponse', expect.any(Function));
58+
});
59+
60+
it('should update dockerData when setCommsData is invoked with new data', () => {
61+
const button = wrapper.find('#setCommsData');
62+
button.simulate('click');
63+
expect(wrapper.find('#commsData').text()).toEqual(JSON.stringify({ foo: 'bar' }));
64+
});
65+
66+
it('should display status code information', () => {
67+
console.log(wrapper.debug());
68+
expect(wrapper.find('#parsedData').text()).toMatch('GET');
69+
expect(wrapper.find('#parsedData').text()).toMatch('OK');
70+
});
371
});

‎__tests__/app/context/DockerContext.test.tsx‎

Lines changed: 81 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,82 @@
1-
xdescribe('<DockerContext />', () => {
2-
xit('should');
1+
import React, { useContext, useState } from 'react';
2+
import { mount, shallow } from 'enzyme';
3+
const { ipcRenderer } = require('electron');
4+
5+
import DockerContextProvider, { DockerContext } from '../../../app/context/DockerContext';
6+
7+
// Setup electron mock
8+
jest.mock('electron', () => ({ ipcRenderer: { on: jest.fn(), send: jest.fn() } }));
9+
10+
describe('React unit tests', () => {
11+
describe('<DockerContext />', () => {
12+
let wrapper: any;
13+
let shallow: any;
14+
15+
beforeEach(() => {
16+
const TestComponent = () => {
17+
const { dockerData, setDockerData, fetchDockerData } = useContext(DockerContext);
18+
const [mockData, setMockData] = useState([
19+
{
20+
containerid: 'f57f5815cb0',
21+
containername: 'chronos-mon-2',
22+
cpupercent: 0.3,
23+
memorylimit: 16665812992,
24+
memorypercent: 0.3,
25+
memoryusage: 48480256,
26+
networkreceived: 6562749,
27+
networksent: 0,
28+
platform: 'Linux',
29+
processcount: 35,
30+
restartcount: 0,
31+
starttime: 'Thu Jul 02 2020 16:18:50 GMT-0700 ',
32+
id: '5efe95ded17eaf0020a80c80',
33+
},
34+
]);
35+
return (
36+
<>
37+
<div id="dockerData">{JSON.stringify(dockerData)}</div>
38+
<div id="parsedData">{JSON.stringify(mockData)}</div>
39+
<button id="fetchDockerData" onClick={() => fetchDockerData('chronos-mon-3')}>
40+
Test fetchDockerData
41+
</button>
42+
<button id="setDockerData" onClick={() => setDockerData({ foo: 'bar' })}>
43+
Test setDockerData
44+
</button>
45+
</>
46+
);
47+
};
48+
wrapper = mount(
49+
<DockerContextProvider>
50+
<TestComponent />
51+
</DockerContextProvider>
52+
);
53+
});
54+
55+
it('should render', () => {
56+
expect(wrapper).toMatchSnapshot();
57+
});
58+
59+
it('should display a given container name', () => {
60+
const containerName = wrapper.find('#parsedData');
61+
expect(containerName.text()).toMatch('chronos-mon-2');
62+
});
63+
64+
it("should emit the 'dockerRequest' event and listen on 'dockerResponse' when invoking fetchDockerData", () => {
65+
const button = wrapper.find('#fetchDockerData');
66+
button.simulate('click');
67+
expect(ipcRenderer.send).toHaveBeenCalledWith('dockerRequest', 'chronos-mon-3');
68+
expect(ipcRenderer.on).toHaveBeenCalledWith('dockerResponse', expect.any(Function));
69+
});
70+
71+
it('should update dockerData when setDockerData is invoked with new data', () => {
72+
const button = wrapper.find('#setDockerData');
73+
button.simulate('click');
74+
expect(wrapper.find('#dockerData').text()).toEqual(JSON.stringify({ foo: 'bar' }));
75+
});
76+
77+
it('should note which platform is being used', () => {
78+
const parsedData = wrapper.find('#parsedData');
79+
expect(parsedData.text()).toMatch('Linux');
80+
});
81+
});
382
});

‎app/assets/chronos-v4.png‎

525 KB
Loading

‎app/charts/DockerChart.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React, { useContext } from 'react';
2+
3+
import moment from 'moment';
24
import { DockerContext } from '../context/DockerContext';
35

46
interface IContainer {
@@ -22,6 +24,7 @@ interface IContainer {
2224
*/
2325
const DockerStatsChart = () => {
2426
const { dockerData } = useContext(DockerContext);
27+
console.log('in dockerchart',dockerData )
2528
const {
2629
containername,
2730
containerid,
@@ -36,15 +39,14 @@ const DockerStatsChart = () => {
3639
processcount,
3740
restartcount,
3841
}: IContainer = dockerData;
39-
42+
console.log('in dockerchart',dockerData.contaiinername )
4043
// Render the component if there is available data
4144
return containerid ? (
42-
<div id="docker-stats-chart">
43-
<header id="docker-stats-chart-header">Docker Container Stats</header>
45+
<div className="chart docker-chart">
46+
<h2>Docker Container Stats</h2>
4447
<span>Container Name: {containername}</span>
45-
<span>Container ID: {containerid}</span>
4648
<span>Platform: {platform}</span>
47-
<span>Start time: {starttime}</span>
49+
<span>Start time: {moment(starttime).format('LLL')}</span>
4850
<span>Memory Usage: {(memoryusage / 1000000).toFixed(2)}</span>
4951
<span>Memory Limit: {(memorylimit / 1000000).toFixed(2)}</span>
5052
<span>Memory Percent: {memorypercent.toFixed(2)}%</span>

‎app/charts/LatencyChart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const LatencyChart = () => {
3232
font: {
3333
color: 'black',
3434
size: 15,
35-
family: 'Nunito, san serif',
35+
family: 'Nunito sans, sans serif',
3636
},
3737
paper_bgcolor: 'white',
3838
plot_bgcolor: 'white',
@@ -61,7 +61,7 @@ const LatencyChart = () => {
6161
);
6262
};
6363

64-
return <div className="latencyChart">{createChart()}</div>;
64+
return <div className="chart">{createChart()}</div>;
6565
};
6666

6767
export default LatencyChart;

‎app/charts/MemoryChart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const MemoryChart = () => {
4444
font: {
4545
color: 'black',
4646
size: 15,
47-
family: 'Nunito, san serif',
47+
family: 'Nunito sans, sans serif',
4848
},
4949
paper_bgcolor: 'white',
5050
plot_bgcolor: 'white',
@@ -63,7 +63,7 @@ const MemoryChart = () => {
6363
);
6464
};
6565

66-
return <div className="memoryChart">{createChart()}</div>;
66+
return <div className="chart">{createChart()}</div>;
6767
};
6868

6969
export default MemoryChart;

‎app/charts/ProcessesChart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const ProcessesChart = () => {
5050
font: {
5151
color: 'black',
5252
size: 15,
53-
family: 'Nunito, san serif',
53+
family: 'Nunito sans, sans serif',
5454
},
5555
paper_bgcolor: 'white',
5656
plot_bgcolor: 'white',
@@ -64,7 +64,7 @@ const ProcessesChart = () => {
6464
);
6565
};
6666

67-
return <div className="processesChart">{createChart()}</div>;
67+
return <div className="chart">{createChart()}</div>;
6868
};
6969

7070
export default ProcessesChart;

0 commit comments

Comments
 (0)