GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 08:15:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(UI): usage exploerer is now fixed (#400)

Browse Source
This commit is contained in:
pal-sig 2021-11-22 16:13:14 +05:30 committed by GitHub
parent b47a3e0932
commit 849c3d1156
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/modules/Usage/UsageExplorer.tsx
View File

@ -2,13 +2,14 @@ import { Select, Space } from 'antd';
import Graph from 'components/Graph'; import Graph from 'components/Graph';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { connect, useSelector } from 'react-redux'; import { connect, useSelector } from 'react-redux';
import { getServicesList, getUsageData, usageDataItem } from 'store/actions'; import { GetService, getUsageData, usageDataItem } from 'store/actions';
import { servicesListItem } from 'store/actions/MetricsActions'; import { servicesListItem } from 'store/actions/MetricsActions';
import { AppState } from 'store/reducers'; import { AppState } from 'store/reducers';
import { isOnboardingSkipped } from 'utils/app'; import { isOnboardingSkipped } from 'utils/app';
const { Option } = Select; const { Option } = Select;
import { GlobalTime } from 'types/actions/globalTime'; import { GlobalTime } from 'types/actions/globalTime';
import { GlobalReducer } from 'types/reducer/globalTime'; import { GlobalReducer } from 'types/reducer/globalTime';
import MetricReducer from 'types/reducer/metrics';
import { Card } from './styles'; import { Card } from './styles';
@ -20,7 +21,11 @@ interface UsageExplorerProps {
selectedInterval: any, selectedInterval: any,
selectedService: string, selectedService: string,
) => void; ) => void;
getServicesList: (time: GlobalTime) => void; getServicesList: ({
selectedTimeInterval,
}: {
selectedTimeInterval: GlobalReducer['selectedTime'];
}) => void;
globalTime: GlobalTime; globalTime: GlobalTime;
servicesList: servicesListItem[]; servicesList: servicesListItem[];
totalCount: number; totalCount: number;
@ -56,17 +61,20 @@ const _UsageExplorer = (props: UsageExplorerProps): JSX.Element => {
const [selectedTime, setSelectedTime] = useState(timeDaysOptions[1]); const [selectedTime, setSelectedTime] = useState(timeDaysOptions[1]);
const [selectedInterval, setSelectedInterval] = useState(interval[2]); const [selectedInterval, setSelectedInterval] = useState(interval[2]);
const [selectedService, setSelectedService] = useState<string>(''); const [selectedService, setSelectedService] = useState<string>('');
const { loading } = useSelector<AppState, GlobalReducer>( const { selectedTime: globalSelectedTime } = useSelector<
(state) => state.globalTime, AppState,
); GlobalReducer
>((state) => state.globalTime);
const { const {
getServicesList, getServicesList,
getUsageData, getUsageData,
globalTime, globalTime,
servicesList,
totalCount, totalCount,
usageData, usageData,
} = props; } = props;
const { services } = useSelector<AppState, MetricReducer>(
(state) => state.metrics,
);
useEffect(() => { useEffect(() => {
if (selectedTime && selectedInterval) { if (selectedTime && selectedInterval) {
@ -78,14 +86,10 @@ const _UsageExplorer = (props: UsageExplorerProps): JSX.Element => {
}, [selectedTime, selectedInterval, selectedService, getUsageData]); }, [selectedTime, selectedInterval, selectedService, getUsageData]);
useEffect(() => { useEffect(() => {
/* getServicesList({
Call the apis only when the route is loaded. selectedTimeInterval: globalSelectedTime,
Check this issue: https://github.com/SigNoz/signoz/issues/110 });
*/ }, [globalTime, getServicesList, globalSelectedTime]);
if (loading) {
getServicesList(globalTime);
}
}, [loading, globalTime, getServicesList]);
const data = { const data = {
labels: usageData.map((s) => new Date(s.timestamp / 1000000)), labels: usageData.map((s) => new Date(s.timestamp / 1000000)),
@ -146,7 +150,7 @@ const _UsageExplorer = (props: UsageExplorerProps): JSX.Element => {
value={selectedService || 'All Services'} value={selectedService || 'All Services'}
> >
<Option value={''}>All Services</Option> <Option value={''}>All Services</Option>
{servicesList.map((service) => ( {services?.map((service) => (
<Option key={service.serviceName} value={service.serviceName}> <Option key={service.serviceName} value={service.serviceName}>
{service.serviceName} {service.serviceName}
</Option> </Option>
@ -193,7 +197,6 @@ const mapStateToProps = (
): { ): {
totalCount: number; totalCount: number;
globalTime: GlobalTime; globalTime: GlobalTime;
servicesList: servicesListItem[];
usageData: usageDataItem[]; usageData: usageDataItem[];
} => { } => {
let totalCount = 0; let totalCount = 0;
@ -204,11 +207,10 @@ const mapStateToProps = (
totalCount: totalCount, totalCount: totalCount,
usageData: state.usageDate, usageData: state.usageDate,
globalTime: state.globalTime, globalTime: state.globalTime,
servicesList: state.metricsData.serviceList || [],
}; };
}; };
export const UsageExplorer = connect(mapStateToProps, { export const UsageExplorer = connect(mapStateToProps, {
getUsageData: getUsageData, getUsageData: getUsageData,
getServicesList: getServicesList, getServicesList: GetService,
})(_UsageExplorer); })(_UsageExplorer);