change(ui) - table sort asc or desc
This commit is contained in:
Shekar Siri
parent
3e3da8b660
commit
60fc56ca09
5 changed files with 44 additions and 30 deletions
|
|
@ -15,6 +15,7 @@ import { Duration } from 'luxon';
|
|||
import { connectPlayer, jump, pause } from 'Player';
|
||||
import { useModal } from 'App/components/Modal';
|
||||
import FetchDetailsModal from 'Shared/FetchDetailsModal';
|
||||
import { sort } from 'App/duck/sessions';
|
||||
|
||||
const ALL = 'ALL';
|
||||
const XHR = 'xhr';
|
||||
|
|
@ -33,7 +34,7 @@ const TAB_TO_TYPE_MAP: any = {
|
|||
[OTHER]: TYPES.OTHER,
|
||||
};
|
||||
const TABS: any = [ALL, XHR, JS, CSS, IMG, MEDIA, OTHER].map((tab) => ({
|
||||
text: tab,
|
||||
text: tab === 'xhr' ? 'XHR (Fetch)' : tab,
|
||||
key: tab,
|
||||
}));
|
||||
|
||||
|
|
@ -46,7 +47,7 @@ function compare(a: any, b: any, key: string) {
|
|||
return 0;
|
||||
}
|
||||
|
||||
export function renderType(r) {
|
||||
export function renderType(r: any) {
|
||||
return (
|
||||
<Popup style={{ width: '100%' }} content={<div>{r.type}</div>}>
|
||||
<div>{r.type}</div>
|
||||
|
|
@ -181,6 +182,7 @@ function NetworkPanel(props: Props) {
|
|||
const { showModal, hideModal } = useModal();
|
||||
const [activeTab, setActiveTab] = useState(ALL);
|
||||
const [sortBy, setSortBy] = useState('time');
|
||||
const [sortAscending, setSortAscending] = useState(true);
|
||||
const [filter, setFilter] = useState('');
|
||||
const [showOnlyErrors, setShowOnlyErrors] = useState(false);
|
||||
const onTabClick = (activeTab: any) => setActiveTab(activeTab);
|
||||
|
|
@ -200,22 +202,29 @@ function NetworkPanel(props: Props) {
|
|||
);
|
||||
|
||||
const filterRE = getRE(filter, 'i');
|
||||
let filtered = resources;
|
||||
fetchList.forEach(
|
||||
(fetchCall: any) =>
|
||||
(filtered = filtered.filter((networkCall: any) => networkCall.url !== fetchCall.url))
|
||||
);
|
||||
filtered = filtered.concat(fetchList);
|
||||
filtered = filtered.sort((a: any, b: any) => {
|
||||
return compare(a, b, sortBy);
|
||||
});
|
||||
let filtered = React.useMemo(() => {
|
||||
let list = resources;
|
||||
fetchList.forEach(
|
||||
(fetchCall: any) =>
|
||||
(list = list.filter((networkCall: any) => networkCall.url !== fetchCall.url))
|
||||
);
|
||||
list = list.concat(fetchList);
|
||||
list = list.sort((a: any, b: any) => {
|
||||
return compare(a, b, sortBy);
|
||||
});
|
||||
|
||||
filtered = filtered.filter(
|
||||
({ type, name, status }: any) =>
|
||||
(!!filter ? filterRE.test(status) || filterRE.test(name) || filterRE.test(type) : true) &&
|
||||
(activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab]) &&
|
||||
(showOnlyErrors ? parseInt(status) >= 400 : true)
|
||||
);
|
||||
if (!sortAscending) {
|
||||
list = list.reverse();
|
||||
}
|
||||
|
||||
list = list.filter(
|
||||
({ type, name, status }: any) =>
|
||||
(!!filter ? filterRE.test(status) || filterRE.test(name) || filterRE.test(type) : true) &&
|
||||
(activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab]) &&
|
||||
(showOnlyErrors ? parseInt(status) >= 400 : true)
|
||||
);
|
||||
return list;
|
||||
}, [filter, sortBy, sortAscending, showOnlyErrors, activeTab]);
|
||||
|
||||
// const lastIndex = currentIndex || filtered.filter((item: any) => item.time <= time).length - 1;
|
||||
const referenceLines = [];
|
||||
|
|
@ -240,10 +249,10 @@ function NetworkPanel(props: Props) {
|
|||
|
||||
const handleSort = (sortKey: string) => {
|
||||
if (sortKey === sortBy) {
|
||||
setSortBy('time');
|
||||
} else {
|
||||
setSortBy(sortKey);
|
||||
setSortAscending(!sortAscending);
|
||||
// setSortBy('time');
|
||||
}
|
||||
setSortBy(sortKey);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -330,6 +339,7 @@ function NetworkPanel(props: Props) {
|
|||
additionalHeight={additionalHeight}
|
||||
onJump={jump}
|
||||
sortBy={sortBy}
|
||||
sortAscending={sortAscending}
|
||||
// activeIndex={lastIndex}
|
||||
>
|
||||
{[
|
||||
|
|
|
|||
|
|
@ -71,7 +71,8 @@ type Props = {
|
|||
hoverable?: boolean;
|
||||
onRowClick?: (row: any, index: number) => void;
|
||||
onJump?: (time: any) => void;
|
||||
sortBy?: string
|
||||
sortBy?: string;
|
||||
sortAscending?: boolean;
|
||||
};
|
||||
|
||||
type TimeLineInfo = {
|
||||
|
|
@ -262,10 +263,10 @@ export default class TimeTable extends React.PureComponent<Props, State> {
|
|||
onColumnClick = (dataKey: string, onClick: any) => {
|
||||
if (typeof onClick === 'function') {
|
||||
// this.scroller.current.scrollToRow(0);
|
||||
onClick(dataKey)
|
||||
onClick(dataKey);
|
||||
this.scroller.current.forceUpdateGrid();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
|
|
@ -277,6 +278,7 @@ export default class TimeTable extends React.PureComponent<Props, State> {
|
|||
additionalHeight = 0,
|
||||
activeIndex,
|
||||
sortBy = '',
|
||||
sortAscending = true,
|
||||
} = this.props;
|
||||
const { timewidth, timestart } = this.state;
|
||||
|
||||
|
|
@ -324,14 +326,14 @@ export default class TimeTable extends React.PureComponent<Props, State> {
|
|||
<div className={stl.infoHeaders}>
|
||||
{columns.map(({ label, width, dataKey, onClick = null }) => (
|
||||
<div
|
||||
className={cn(stl.headerCell, 'flex items-center', { 'cursor-pointer': typeof onClick === 'function' })}
|
||||
className={cn(stl.headerCell, 'flex items-center select-none', {
|
||||
'cursor-pointer': typeof onClick === 'function',
|
||||
})}
|
||||
style={{ width: `${width}px` }}
|
||||
onClick={() => this.onColumnClick(dataKey, onClick)}
|
||||
>
|
||||
<span>{label}</span>
|
||||
{!!sortBy && sortBy === dataKey && (
|
||||
<Icon name="caret-down-fill" className="ml-1" />
|
||||
)}
|
||||
{!!sortBy && sortBy === dataKey && <Icon name={ sortAscending ? "caret-down-fill" : "caret-up-fill" } className="ml-1" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ const SVG = (props: Props) => {
|
|||
case 'caret-down-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>;
|
||||
case 'caret-left-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/></svg>;
|
||||
case 'caret-right-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg>;
|
||||
case 'caret-up-fill': return <svg viewBox="0 0 320 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"/></svg>;
|
||||
case 'caret-up-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/></svg>;
|
||||
case 'chat-dots': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/><path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z"/></svg>;
|
||||
case 'chat-right-text': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/><path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/></svg>;
|
||||
case 'chat-square-quote': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/></svg>;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
|
||||
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 222 B After Width: | Height: | Size: 242 B |
|
|
@ -1 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-caret-up-fill" viewBox="0 0 16 16">
|
||||
<path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 240 B After Width: | Height: | Size: 242 B |
Loading…
Add table
Reference in a new issue