1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
// The index file for the spa running on the summary page
const React = require('react');
const ReactDOM = require('react-dom');
const SummaryTableHeader = require('./summaryTableHeader');
const SummaryTableLine = require('./summaryTableLine');
const SummaryHeader = require('./summaryHeader');
const getChildData = require('./getChildData');
const FlattenToggle = require('./flattenToggle');
const FilterToggle = require('./filterToggle');
const FileBreadcrumbs = require('./fileBreadcrumbs');
const { setLocation, decodeLocation } = require('./routing');
const { useState, useMemo, useEffect } = React;
const sourceData = window.data;
const metricsToShow = {};
for (let i = 0; i < window.metricsToShow.length; i++) {
metricsToShow[window.metricsToShow[i]] = true;
}
let firstMount = true;
function App() {
const routingDefaults = decodeLocation();
const [activeSort, setSort] = useState(
(routingDefaults && routingDefaults.activeSort) || {
sortKey: 'file',
order: 'desc'
}
);
const [isFlat, setIsFlat] = useState(
(routingDefaults && routingDefaults.isFlat) || false
);
const [activeFilters, setFilters] = useState(
(routingDefaults && routingDefaults.activeFilters) || {
low: true,
medium: true,
high: true
}
);
const [expandedLines, setExpandedLines] = useState(
(routingDefaults && routingDefaults.expandedLines) || []
);
const [fileFilter, setFileFilter] = useState(
(routingDefaults && routingDefaults.fileFilter) || ''
);
const childData = useMemo(
() =>
getChildData(
sourceData,
metricsToShow,
activeSort,
isFlat,
activeFilters,
fileFilter
),
[activeSort, isFlat, activeFilters, fileFilter]
);
const overallMetrics = sourceData.metrics;
useEffect(() => {
setLocation(
firstMount,
activeSort,
isFlat,
activeFilters,
fileFilter,
expandedLines
);
firstMount = false;
}, [activeSort, isFlat, activeFilters, fileFilter, expandedLines]);
useEffect(() => {
window.onpopstate = () => {
const routingState = decodeLocation();
if (routingState) {
// make sure all the state is set before rendering to avoid url updates
// alternative is to merge all the states into one so it can be set in one go
// https://github.com/facebook/react/issues/14259
ReactDOM.unstable_batchedUpdates(() => {
setFilters(routingState.activeFilters);
setSort(routingState.activeSort);
setIsFlat(routingState.isFlat);
setExpandedLines(routingState.expandedLines);
setFileFilter(routingState.fileFilter);
});
}
};
}, []);
return (
<div className="layout">
<div className="layout__section">
<SummaryHeader
metrics={overallMetrics}
metricsToShow={metricsToShow}
/>
</div>
<div className="layout__section">
<div className="toolbar">
<div className="toolbar__item">
<FlattenToggle setIsFlat={setIsFlat} isFlat={isFlat} />
</div>
<div className="toolbar__item">
<FilterToggle
activeFilters={activeFilters}
setFilters={setFilters}
/>
</div>
</div>
</div>
<div className="layout__section">
<h1>
<FileBreadcrumbs
fileFilter={fileFilter}
setFileFilter={setFileFilter}
/>
</h1>
</div>
<div className="layout__section layout__section--fill">
<table className="coverage-summary">
<SummaryTableHeader
onSort={newSort => {
setSort(newSort);
}}
activeSort={activeSort}
metricsToShow={metricsToShow}
/>
<tbody>
{childData.map(child => (
<SummaryTableLine
{...child}
key={child.file}
metricsToShow={metricsToShow}
expandedLines={expandedLines}
setExpandedLines={setExpandedLines}
fileFilter={fileFilter}
setFileFilter={setFileFilter}
/>
))}
</tbody>
</table>
</div>
<div className="layout__section center small quiet">
Code coverage generated by{' '}
<a
href="https://istanbul.js.org/"
target="_blank"
rel="noopener noreferrer"
>
istanbul
</a>{' '}
at {window.generatedDatetime}
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
|
