signoz/frontend/src/components/usage/UsageExplorer.tsx

import React, { useEffect, useMemo, useState } from "react";
import { Bar } from "react-chartjs-2";
import { Card, Form, Select, Space } from "antd";
import { connect } from "react-redux";

import { getServicesList, getUsageData, GlobalTime, servicesListItem, usageDataItem } from "../../actions";
import { StoreState } from "../../reducers";
import moment from "moment";
import { isOnboardingSkipped } from "../../utils/app";
const { Option } = Select;

interface UsageExplorerProps {
	usageData: usageDataItem[];
	getUsageData: Function;
	getServicesList: Function;
	globalTime: GlobalTime;
	servicesList: servicesListItem[];
	totalCount: number;
}
const timeDaysOptions = [
	{ value: 30, label: "Last 30 Days" },
	{ value: 7, label: "Last week" },
	{ value: 1, label: "Last day" }
];

const interval = [
	{ value: 604800, chartDivideMultiplier: 1, label: "Weekly", applicableOn: [timeDaysOptions[0]] },
	{ value: 86400, chartDivideMultiplier: 30,label: "Daily", applicableOn: [timeDaysOptions[0],timeDaysOptions[1]]  },
	{ value: 3600, chartDivideMultiplier: 10,label: "Hours", applicableOn: [timeDaysOptions[2],timeDaysOptions[1]]  },,
];

const _UsageExplorer = (props: UsageExplorerProps) => {
	const [selectedTime, setSelectedTime] = useState(timeDaysOptions[1])
	const [selectedInterval, setSelectedInterval] = useState(interval[2])
	const [selectedService, setSelectedService] = useState<string>("")

	useEffect(() => {
		if(selectedTime && selectedInterval) {
			const maxTime = new Date().getTime() * 1000000  ;
			const minTime = (maxTime - (selectedTime.value * 24 * 3600000 * 1000000 ) );

			props.getUsageData(minTime, maxTime, selectedInterval!.value, selectedService);
		}
	}, [selectedTime,selectedInterval,selectedService]);

	useEffect(() => {
	props.getServicesList(props.globalTime);
	}, []);



	const data = {
		labels: props.usageData.map((s) => moment(s.timestamp/1000000).format("MMM Do h a")),
		datasets: [
			{
				label: "Span Count",
				data: props.usageData.map((s) => s.count),
				backgroundColor: "rgba(255, 99, 132, 0.2)",
				borderColor: "rgba(255, 99, 132, 1)",
				borderWidth: 2,
			},
		],
	};


	const options = {
		scales: {
			yAxes: [
				{
					ticks: {
						beginAtZero: true,
						fontSize: 10,
					},
				},
			],
		},
		legend: {
			display: false,
		},
	};

	return (
		<React.Fragment>
			{/* PNOTE - TODO - Keep it in reponsive row column tab */}
			<Space style={{marginTop: 40, marginLeft: 20}}>
					<Space>
						<Select onSelect={(value, option)=>{
							setSelectedTime(timeDaysOptions.filter((item)=>item.value == parseInt(value))[0])
						}} value={selectedTime.label}>
							{timeDaysOptions.map(({ value, label }) => (
								<Option value={value}>{label}</Option>
							))}
						</Select>
					</Space>
				<Space>
					<Select onSelect={(value)=>{
					 setSelectedInterval(interval.filter((item)=>item!.value === parseInt(value))[0])
					}} value={selectedInterval!.label}>

						{interval.filter((interval)=>interval!.applicableOn.includes(selectedTime)).map((item) => (
							<Option value={item!.value}>{item!.label}</Option>
						))}
					</Select>
				</Space>

				<Space>
					<Select onSelect={(value) => {
						setSelectedService(value)
					}} value={ selectedService || "All Services"}>
						<Option value={""}>All Services</Option>
						{props.servicesList.map((service)=><Option value={service.serviceName}>{service.serviceName}</Option>)}
					</Select>
				</Space>

				{	isOnboardingSkipped() && props.totalCount === 0 ? (
					<Space style={{width: '100%', margin: "40px 0", marginLeft: 20, justifyContent: "center"}}>
						No spans found. Please add instrumentation (follow this
						<a href={"https://signoz.io/docs/instrumentation/overview"} target={"_blank"} style={{marginLeft: 3}}>guide</a>)</Space>
				): (
					<Space style={{display: "block", marginLeft: 20, width:200}}>
						{`Total count is ${props.totalCount}`}
					</Space>
				)
				}

			</Space>


			<Card style={{ width: "90%", margin: 20 }} bodyStyle={{ padding: 20 }}>
				<Bar data={data} options={options} />
			</Card>
		</React.Fragment>
	);
};

const mapStateToProps = (
	state: StoreState
): { totalCount: number; globalTime: GlobalTime; servicesList: servicesListItem[]; usageData: usageDataItem[]; } => {
	let totalCount = 0;
	for(let item of state.usageDate){
		totalCount = totalCount+item.count;
	}
	return {totalCount:totalCount, usageData: state.usageDate, globalTime: state.globalTime, servicesList: state.servicesList };
};

export const UsageExplorer = connect(mapStateToProps, {
	getUsageData: getUsageData,
	getServicesList: getServicesList
})(_UsageExplorer);