Qstick
1 year ago
parent
0f160707d3
commit
3dd3c80b54
@ -0,0 +1,8 @@
|
||||
import AppSectionState from 'App/State/AppSectionState';
|
||||
import History from 'typings/History';
|
||||
|
||||
interface HistoryAppState extends AppSectionState<History> {
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
export default HistoryAppState;
|
||||
@ -1,20 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
|
||||
import RelativeDateCell from './RelativeDateCell';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
createUISettingsSelector(),
|
||||
(uiSettings) => {
|
||||
return {
|
||||
showRelativeDates: uiSettings.showRelativeDates,
|
||||
shortDateFormat: uiSettings.shortDateFormat,
|
||||
longDateFormat: uiSettings.longDateFormat,
|
||||
timeFormat: uiSettings.timeFormat
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(createMapStateToProps, null)(RelativeDateCell);
|
||||
@ -1,5 +0,0 @@
|
||||
.markAsFailedButton {
|
||||
composes: button from '~Components/Link/Button.css';
|
||||
|
||||
margin-right: auto;
|
||||
}
|
||||
@ -0,0 +1,134 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import AppState from 'App/State/AppState';
|
||||
import { IndexerHistoryAppState } from 'App/State/IndexerAppState';
|
||||
import Alert from 'Components/Alert';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import Table from 'Components/Table/Table';
|
||||
import TableBody from 'Components/Table/TableBody';
|
||||
import { kinds } from 'Helpers/Props';
|
||||
import Indexer from 'Indexer/Indexer';
|
||||
import {
|
||||
clearIndexerHistory,
|
||||
fetchIndexerHistory,
|
||||
} from 'Store/Actions/indexerHistoryActions';
|
||||
import { createIndexerSelectorForHook } from 'Store/Selectors/createIndexerSelector';
|
||||
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import IndexerHistoryRow from './IndexerHistoryRow';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: 'eventType',
|
||||
isVisible: true,
|
||||
},
|
||||
{
|
||||
name: 'query',
|
||||
label: () => translate('Query'),
|
||||
isVisible: true,
|
||||
},
|
||||
{
|
||||
name: 'date',
|
||||
label: () => translate('Date'),
|
||||
isVisible: true,
|
||||
},
|
||||
{
|
||||
name: 'source',
|
||||
label: () => translate('Source'),
|
||||
isVisible: true,
|
||||
},
|
||||
{
|
||||
name: 'details',
|
||||
label: () => translate('Details'),
|
||||
isVisible: true,
|
||||
},
|
||||
];
|
||||
|
||||
function createIndexerHistorySelector() {
|
||||
return createSelector(
|
||||
(state: AppState) => state.indexerHistory,
|
||||
createUISettingsSelector(),
|
||||
(state: AppState) => state.history.pageSize,
|
||||
(indexerHistory: IndexerHistoryAppState, uiSettings, pageSize) => {
|
||||
return {
|
||||
...indexerHistory,
|
||||
shortDateFormat: uiSettings.shortDateFormat,
|
||||
timeFormat: uiSettings.timeFormat,
|
||||
pageSize,
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
interface IndexerHistoryProps {
|
||||
indexerId: number;
|
||||
}
|
||||
|
||||
function IndexerHistory(props: IndexerHistoryProps) {
|
||||
const {
|
||||
isFetching,
|
||||
isPopulated,
|
||||
error,
|
||||
items,
|
||||
shortDateFormat,
|
||||
timeFormat,
|
||||
pageSize,
|
||||
} = useSelector(createIndexerHistorySelector());
|
||||
|
||||
const indexer = useSelector(
|
||||
createIndexerSelectorForHook(props.indexerId)
|
||||
) as Indexer;
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(
|
||||
fetchIndexerHistory({ indexerId: props.indexerId, limit: pageSize })
|
||||
);
|
||||
|
||||
return () => {
|
||||
dispatch(clearIndexerHistory());
|
||||
};
|
||||
}, [props, pageSize, dispatch]);
|
||||
|
||||
const hasItems = !!items.length;
|
||||
|
||||
if (isFetching) {
|
||||
return <LoadingIndicator />;
|
||||
}
|
||||
|
||||
if (!isFetching && !!error) {
|
||||
return (
|
||||
<Alert kind={kinds.DANGER}>{translate('IndexerHistoryLoadError')}</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
if (isPopulated && !hasItems && !error) {
|
||||
return <Alert kind={kinds.INFO}>{translate('NoIndexerHistory')}</Alert>;
|
||||
}
|
||||
|
||||
if (isPopulated && hasItems && !error) {
|
||||
return (
|
||||
<Table columns={columns}>
|
||||
<TableBody>
|
||||
{items.map((item) => {
|
||||
return (
|
||||
<IndexerHistoryRow
|
||||
key={item.id}
|
||||
indexer={indexer}
|
||||
shortDateFormat={shortDateFormat}
|
||||
timeFormat={timeFormat}
|
||||
{...item}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default IndexerHistory;
|
||||
@ -0,0 +1,18 @@
|
||||
.query {
|
||||
composes: cell from '~Components/Table/Cells/TableRowCell.css';
|
||||
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.elapsedTime,
|
||||
.source {
|
||||
composes: cell from '~Components/Table/Cells/TableRowCell.css';
|
||||
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.details {
|
||||
composes: cell from '~Components/Table/Cells/TableRowCell.css';
|
||||
|
||||
width: 70px;
|
||||
}
|
||||
@ -1,7 +1,10 @@
|
||||
// This file is automatically generated.
|
||||
// Please do not change this file!
|
||||
interface CssExports {
|
||||
'markAsFailedButton': string;
|
||||
'details': string;
|
||||
'elapsedTime': string;
|
||||
'query': string;
|
||||
'source': string;
|
||||
}
|
||||
export const cssExports: CssExports;
|
||||
export default cssExports;
|
||||
@ -0,0 +1,83 @@
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import IconButton from 'Components/Link/IconButton';
|
||||
import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
|
||||
import TableRowCell from 'Components/Table/Cells/TableRowCell';
|
||||
import TableRow from 'Components/Table/TableRow';
|
||||
import { icons } from 'Helpers/Props';
|
||||
import HistoryDetailsModal from 'History/Details/HistoryDetailsModal';
|
||||
import HistoryEventTypeCell from 'History/HistoryEventTypeCell';
|
||||
import Indexer from 'Indexer/Indexer';
|
||||
import { HistoryData } from 'typings/History';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import styles from './IndexerHistoryRow.css';
|
||||
|
||||
interface IndexerHistoryRowProps {
|
||||
data: HistoryData;
|
||||
date: string;
|
||||
eventType: string;
|
||||
successful: boolean;
|
||||
indexer: Indexer;
|
||||
shortDateFormat: string;
|
||||
timeFormat: string;
|
||||
}
|
||||
|
||||
function IndexerHistoryRow(props: IndexerHistoryRowProps) {
|
||||
const {
|
||||
data,
|
||||
date,
|
||||
eventType,
|
||||
successful,
|
||||
indexer,
|
||||
shortDateFormat,
|
||||
timeFormat,
|
||||
} = props;
|
||||
|
||||
const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
|
||||
|
||||
const onDetailsModalPress = useCallback(() => {
|
||||
setIsDetailsModalOpen(true);
|
||||
}, [setIsDetailsModalOpen]);
|
||||
|
||||
const onDetailsModalClose = useCallback(() => {
|
||||
setIsDetailsModalOpen(false);
|
||||
}, [setIsDetailsModalOpen]);
|
||||
|
||||
return (
|
||||
<TableRow>
|
||||
<HistoryEventTypeCell
|
||||
indexer={indexer}
|
||||
eventType={eventType}
|
||||
data={data}
|
||||
successful={successful}
|
||||
/>
|
||||
|
||||
<TableRowCell className={styles.query}>{data.query}</TableRowCell>
|
||||
|
||||
<RelativeDateCell date={date} />
|
||||
|
||||
<TableRowCell className={styles.source}>
|
||||
{data.source ? data.source : null}
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell className={styles.details}>
|
||||
<IconButton
|
||||
name={icons.INFO}
|
||||
onPress={onDetailsModalPress}
|
||||
title={translate('HistoryDetails')}
|
||||
/>
|
||||
</TableRowCell>
|
||||
|
||||
<HistoryDetailsModal
|
||||
isOpen={isDetailsModalOpen}
|
||||
eventType={eventType}
|
||||
data={data}
|
||||
indexer={indexer}
|
||||
shortDateFormat={shortDateFormat}
|
||||
timeFormat={timeFormat}
|
||||
onModalClose={onDetailsModalClose}
|
||||
/>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
|
||||
export default IndexerHistoryRow;
|
||||
@ -0,0 +1,81 @@
|
||||
import { createAction } from 'redux-actions';
|
||||
import { batchActions } from 'redux-batched-actions';
|
||||
import { createThunk, handleThunks } from 'Store/thunks';
|
||||
import createAjaxRequest from 'Utilities/createAjaxRequest';
|
||||
import { set, update } from './baseActions';
|
||||
import createHandleActions from './Creators/createHandleActions';
|
||||
|
||||
//
|
||||
// Variables
|
||||
|
||||
export const section = 'indexerHistory';
|
||||
|
||||
//
|
||||
// State
|
||||
|
||||
export const defaultState = {
|
||||
isFetching: false,
|
||||
isPopulated: false,
|
||||
error: null,
|
||||
items: []
|
||||
};
|
||||
|
||||
//
|
||||
// Actions Types
|
||||
|
||||
export const FETCH_INDEXER_HISTORY = 'indexerHistory/fetchIndexerHistory';
|
||||
export const CLEAR_INDEXER_HISTORY = 'indexerHistory/clearIndexerHistory';
|
||||
|
||||
//
|
||||
// Action Creators
|
||||
|
||||
export const fetchIndexerHistory = createThunk(FETCH_INDEXER_HISTORY);
|
||||
export const clearIndexerHistory = createAction(CLEAR_INDEXER_HISTORY);
|
||||
|
||||
//
|
||||
// Action Handlers
|
||||
|
||||
export const actionHandlers = handleThunks({
|
||||
|
||||
[FETCH_INDEXER_HISTORY]: function(getState, payload, dispatch) {
|
||||
dispatch(set({ section, isFetching: true }));
|
||||
|
||||
const promise = createAjaxRequest({
|
||||
url: '/history/indexer',
|
||||
data: payload
|
||||
}).request;
|
||||
|
||||
promise.done((data) => {
|
||||
dispatch(batchActions([
|
||||
update({ section, data }),
|
||||
|
||||
set({
|
||||
section,
|
||||
isFetching: false,
|
||||
isPopulated: true,
|
||||
error: null
|
||||
})
|
||||
]));
|
||||
});
|
||||
|
||||
promise.fail((xhr) => {
|
||||
dispatch(set({
|
||||
section,
|
||||
isFetching: false,
|
||||
isPopulated: false,
|
||||
error: xhr
|
||||
}));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
// Reducers
|
||||
|
||||
export const reducers = createHandleActions({
|
||||
|
||||
[CLEAR_INDEXER_HISTORY]: (state) => {
|
||||
return Object.assign({}, state, defaultState);
|
||||
}
|
||||
|
||||
}, defaultState, section);
|
||||
@ -0,0 +1,21 @@
|
||||
import ModelBase from 'App/ModelBase';
|
||||
|
||||
export interface HistoryData {
|
||||
source: string;
|
||||
host: string;
|
||||
limit: number;
|
||||
offset: number;
|
||||
elapsedTime: number;
|
||||
query: string;
|
||||
queryType: string;
|
||||
}
|
||||
|
||||
interface History extends ModelBase {
|
||||
indexerId: number;
|
||||
date: string;
|
||||
successful: boolean;
|
||||
eventType: string;
|
||||
data: HistoryData;
|
||||
}
|
||||
|
||||
export default History;
|
||||
Loading…
Reference in new issue