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