Amol Umbark 0abae1c09c
feat: show release note in alerts dashboards and services pages (#1840)
* feat: show release note in alerts dashboards and services pages

* fix: made code changes as per review and changed message in release note

* fix: solved build pipeline issue

* fix: solved lint issue

Co-authored-by: mindhash <mindhash@mindhashs-MacBook-Pro.local>
Co-authored-by: Pranay Prateek <pranay@signoz.io>
Co-authored-by: Ankit Nayan <ankit@signoz.io>
2022-12-09 20:16:09 +05:30

116 lines
2.9 KiB
TypeScript

import { notification, Space } from 'antd';
import getLocalStorageKey from 'api/browser/localstorage/get';
import ReleaseNote from 'components/ReleaseNote';
import Spinner from 'components/Spinner';
import { SKIP_ONBOARDING } from 'constants/onboarding';
import ResourceAttributesFilter from 'container/MetricsApplication/ResourceAttributesFilter';
import MetricTable from 'container/MetricsTable';
import { convertRawQueriesToTraceSelectedTags } from 'lib/resourceAttributes';
import React, { useEffect, useMemo } from 'react';
import { connect, useSelector } from 'react-redux';
import { useLocation } from 'react-router-dom';
import { bindActionCreators, Dispatch } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import { GetService, GetServiceProps } from 'store/actions/metrics';
import { AppState } from 'store/reducers';
import AppActions from 'types/actions';
import { GlobalReducer } from 'types/reducer/globalTime';
import MetricReducer from 'types/reducer/metrics';
import { Tags } from 'types/reducer/trace';
function Metrics({ getService }: MetricsProps): JSX.Element {
const { minTime, maxTime, loading, selectedTime } = useSelector<
AppState,
GlobalReducer
>((state) => state.globalTime);
const location = useLocation();
const {
services,
resourceAttributeQueries,
error,
errorMessage,
} = useSelector<AppState, MetricReducer>((state) => state.metrics);
useEffect(() => {
if (error) {
notification.error({
message: errorMessage,
});
}
}, [error, errorMessage]);
const selectedTags = useMemo(
() =>
(convertRawQueriesToTraceSelectedTags(resourceAttributeQueries) as Tags[]) ||
[],
[resourceAttributeQueries],
);
const isSkipped = getLocalStorageKey(SKIP_ONBOARDING) === 'true';
useEffect(() => {
if (loading === false) {
getService({
maxTime,
minTime,
selectedTags,
});
}
}, [getService, loading, maxTime, minTime, selectedTags]);
useEffect(() => {
let timeInterval: NodeJS.Timeout;
if (loading === false && !isSkipped && services.length === 0) {
timeInterval = setInterval(() => {
getService({
maxTime,
minTime,
selectedTags,
});
}, 50000);
}
return (): void => {
clearInterval(timeInterval);
};
}, [
getService,
isSkipped,
loading,
maxTime,
minTime,
services,
selectedTime,
selectedTags,
]);
if (loading) {
return <Spinner tip="Loading..." />;
}
return (
<Space direction="vertical" style={{ width: '100%' }}>
<ReleaseNote path={location.pathname} />
<ResourceAttributesFilter />
<MetricTable />
</Space>
);
}
interface DispatchProps {
getService: (
props: GetServiceProps,
) => (dispatch: Dispatch<AppActions>, getState: () => AppState) => void;
}
const mapDispatchToProps = (
dispatch: ThunkDispatch<unknown, unknown, AppActions>,
): DispatchProps => ({
getService: bindActionCreators(GetService, dispatch),
});
type MetricsProps = DispatchProps;
export default connect(null, mapDispatchToProps)(Metrics);