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