revamps api layer

frontend/src/api/apiV1.ts

@@ -0,0 +1,3 @@
+const apiV1 = "/api/v1/";
+
+export default apiV1;

frontend/src/api/graphQuery.js

@@ -1,8 +0,0 @@
-import axios from "axios";
-import { ENVIRONMENT } from "Src/constants/env";
-import { Token } from "../utils/token";
-
-// No auth for the API
-export default axios.create({
-	baseURL: `${ENVIRONMENT.baseURL}/api/prom/api/v1`,
-});

frontend/src/api/index.ts

@@ -0,0 +1,9 @@
+import axios, { AxiosRequestConfig } from "axios";
+import { ENVIRONMENT } from "Src/constants/env";
+import apiV1 from "./apiV1";
+
+export default axios.create({
+	baseURL: `${ENVIRONMENT.baseURL}`,
+});
+
+export { apiV1 };

frontend/src/api/metricsAPI.js

@@ -1,6 +0,0 @@
-import axios from "axios";
-import { ENVIRONMENT } from "Src/constants/env";
-
-export default axios.create({
-	baseURL: `${ENVIRONMENT.baseURL}/api/v1/`,
-});

frontend/src/api/submitForm.js

@@ -1,15 +0,0 @@
-import axios from "axios";
-import { ENVIRONMENT } from "Src/constants/env";
-import { Token } from "../utils/token";
-
-export default axios.create({
-	// baseURL: 'https://api.telegram.org/bot1518273960:AAHcgVvym9a0Qkl-PKiCI84X1VZaVbkTud0/',
-	// baseURL: 'http://104.211.113.204:8080/api/v1/',
-	// baseURL: "/api/v1/",
-	baseURL: `${ENVIRONMENT.baseURL}/api/v1/`,
-});
-
-//https://api.telegram.org/bot1518273960:AAHcgVvym9a0Qkl-PKiCI84X1VZaVbkTud0/sendMessage?chat_id=351813222&text=Hello%20there
-
-// Chat ID can be obtained from here
-//https://api.telegram.org/bot1518273960:AAHcgVvym9a0Qkl-PKiCI84X1VZaVbkTud0/getUpdates

frontend/src/api/tracesAPI.js

@@ -1,12 +0,0 @@
-import axios from "axios";
-import { ENVIRONMENT } from "Src/constants/env";
-import { Token } from "../utils/token";
-//import { format } from 'path';
-
-export default axios.create({
-	// baseURL: 'http://104.211.113.204:8080/api/v1/' //comment this line and remove  this comment before pushing
-	// baseURL: process.env.QUERY_SERVICE_URL,
-	// console.log('in traces API', process.env.QUERY_SERVICE_URL)
-	// baseURL: "/api/v1/",
-	baseURL: `${ENVIRONMENT.baseURL}/api/v1/`,
-});

frontend/src/components/Signup.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useRef, Suspense } from "react";
+import React, { useState } from "react";
-import { Row, Space, Button, Input, Checkbox } from "antd";
+import { Row, Space, Button, Input } from "antd";
-import submitForm from "../api/submitForm";
+import api, { apiV1 } from "../api";
+
 import { withRouter } from "react-router";
 import { RouteComponentProps } from "react-router-dom";
 
@@ -15,14 +16,10 @@ const Signup = (props: SignUpProps) => {
 		password: { value: "", valid: true },
 		emailOptIn: { value: true },
 	});
-	const passwordInput = useRef(null);
-	// const { createAccount } = useActions(signupLogic)
-	// const { accountLoading } = useValues(signupLogic)
-	// const { plan } = fromParams()
 
 	const updateForm = (name: any, target: any, valueAttr = "value") => {
 		/* Validate password (if applicable) */
-        if (name === "firstName") {
+		if (name === "firstName") {
 			setFormState({
 				...formState,
 				firstName: { ...formState.firstName, value: target[valueAttr] },
@@ -49,9 +46,7 @@ const Signup = (props: SignUpProps) => {
 
 		let texttolog = JSON.stringify(payload);
 
-
+		api.post(apiV1 + "/user?email=" + texttolog).then((res) => {
-
-		submitForm.post("user?email=" + texttolog).then((res) => {
 			console.log(res);
 			console.log(res.data);
 		});
@@ -118,8 +113,6 @@ const Signup = (props: SignUpProps) => {
 							/>
 						</div>
 
-
-
 						<div className="input-set">
 							<label htmlFor="signupFirstName">First Name</label>
 							<Input
@@ -133,7 +126,7 @@ const Signup = (props: SignUpProps) => {
 							/>
 						</div>
 
-						<div className="text-center space-top" style={{marginTop: 12}}>
+						<div className="text-center space-top" style={{ marginTop: 12 }}>
 							<Button
 								type="primary"
 								htmlType="submit"

frontend/src/components/traces/TraceFilter.tsx

@@ -15,7 +15,7 @@ import LatencyModalForm from "./LatencyModalForm";
 import { FilterStateDisplay } from "./FilterStateDisplay";
 
 import FormItem from "antd/lib/form/FormItem";
-import metricsAPI from "../../api/metricsAPI";
+import api, { apiV1 } from "../../api";
 import { useLocation } from "react-router-dom";
 import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
 
@@ -46,18 +46,18 @@ const _TraceFilter = (props: TraceFilterProps) => {
 	const location = useLocation();
 	const urlParams = new URLSearchParams(location.search.split("?")[1]);
 
-	useEffect(()=>{
+	useEffect(() => {
 		handleApplyFilterForm({
 			service: "",
 			tags: [],
 			operation: "",
 			latency: { min: "", max: "" },
-		})
+		});
-	},[])
+	}, []);
 
 	useEffect(() => {
-		metricsAPI
+		api
-			.get<string[]>("services/list")
+			.get<string[]>(`${apiV1}/services/list`)
 			.then((response) => {
 				setServiceList(response.data);
 			})
@@ -154,15 +154,17 @@ const _TraceFilter = (props: TraceFilterProps) => {
 
 	function handleChangeService(value: string) {
 		let service_request = "/service/" + value + "/operations";
-		metricsAPI.get<string[]>(service_request).then((response) => {
+		api.get<string[]>(apiV1 + service_request).then((response) => {
 			// form_basefilter.resetFields(['operation',])
 			setOperationsList(response.data);
 		});
 
-		let tagkeyoptions_request = "tags?service=" + value;
+		let tagkeyoptions_request = "/tags?service=" + value;
-		metricsAPI.get<TagKeyOptionItem[]>(tagkeyoptions_request).then((response) => {
+		api
-			setTagKeyOptions(response.data);
+			.get<TagKeyOptionItem[]>(apiV1 + tagkeyoptions_request)
-		});
+			.then((response) => {
+				setTagKeyOptions(response.data);
+			});
 
 		props.updateTraceFilters({ ...props.traceFilters, service: value });
 	}
@@ -287,21 +289,21 @@ const _TraceFilter = (props: TraceFilterProps) => {
 			operation: values.operation,
 			latency: {
 				max: "",
-				min: ""
+				min: "",
 			},
 		});
 	};
 
-	useEffect(()=>{
+	useEffect(() => {
-		return ()=>{
+		return () => {
 			props.updateTraceFilters({
 				service: "",
 				operation: "",
 				tags: [],
 				latency: { min: "", max: "" },
 			});
-		}
+		};
-	},[])
+	}, []);
 
 	return (
 		<div>

frontend/src/store/actions/metrics.ts

@@ -1,5 +1,6 @@
 import { Dispatch } from "redux";
-import metricsAPI from "../../api/metricsAPI";
+import api, { apiV1 } from "../../api";
+
 import { GlobalTime } from "./global";
 import { ActionTypes } from "./types";
 import { Token } from "../../utils/token";
@@ -62,9 +63,9 @@ export interface getFilteredTraceMetricsAction {
 export const getServicesList = (globalTime: GlobalTime) => {
 	return async (dispatch: Dispatch) => {
 		let request_string =
-			"services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime;
+			"/services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime;
 
-		const response = await metricsAPI.get<servicesListItem[]>(request_string);
+		const response = await api.get<servicesListItem[]>(apiV1 + request_string);
 
 		dispatch<getServicesListAction>({
 			type: ActionTypes.getServicesList,
@@ -80,14 +81,14 @@ export const getServicesMetrics = (
 ) => {
 	return async (dispatch: Dispatch) => {
 		let request_string =
-			"service/overview?service=" +
+			"/service/overview?service=" +
 			serviceName +
 			"&start=" +
 			globalTime.minTime +
 			"&end=" +
 			globalTime.maxTime +
 			"&step=60";
-		const response = await metricsAPI.get<metricItem[]>(request_string);
+		const response = await api.get<metricItem[]>(apiV1 + request_string);
 
 		dispatch<getServiceMetricsAction>({
 			type: ActionTypes.getServiceMetrics,
@@ -103,13 +104,13 @@ export const getTopEndpoints = (
 ) => {
 	return async (dispatch: Dispatch) => {
 		let request_string =
-			"service/top_endpoints?service=" +
+			"/service/top_endpoints?service=" +
 			serviceName +
 			"&start=" +
 			globalTime.minTime +
 			"&end=" +
 			globalTime.maxTime;
-		const response = await metricsAPI.get<topEndpointListItem[]>(request_string);
+		const response = await api.get<topEndpointListItem[]>(apiV1 + request_string);
 
 		dispatch<getTopEndpointsAction>({
 			type: ActionTypes.getTopEndpoints,
@@ -125,13 +126,13 @@ export const getFilteredTraceMetrics = (
 ) => {
 	return async (dispatch: Dispatch) => {
 		let request_string =
-			"spans/aggregates?start=" +
+			"/spans/aggregates?start=" +
 			toUTCEpoch(globalTime.minTime) +
 			"&end=" +
 			toUTCEpoch(globalTime.maxTime) +
 			"&" +
 			filter_params;
-		const response = await metricsAPI.get<customMetricsItem[]>(request_string);
+		const response = await api.get<customMetricsItem[]>(apiV1 + request_string);
 
 		dispatch<getFilteredTraceMetricsAction>({
 			type: ActionTypes.getFilteredTraceMetrics,

frontend/src/store/actions/traces.ts

@@ -1,5 +1,6 @@
 import { ActionTypes } from "./types";
-import tracesAPI from "../../api/tracesAPI";
+import api, { apiV1 } from "../../api";
+
 import { Dispatch } from "redux";
 import { GlobalTime } from "./global";
 import { toUTCEpoch } from "../../utils/timeUtils";
@@ -121,13 +122,13 @@ export const fetchTraces = (globalTime: GlobalTime, filter_params: string) => {
 	return async (dispatch: Dispatch) => {
 		if (globalTime) {
 			let request_string =
-				"spans?limit=100&lookback=2d&start=" +
+				"/spans?limit=100&lookback=2d&start=" +
 				toUTCEpoch(globalTime.minTime) +
 				"&end=" +
 				toUTCEpoch(globalTime.maxTime) +
 				"&" +
 				filter_params;
-			const response = await tracesAPI.get<traceResponseNew>(request_string);
+			const response = await api.get<traceResponseNew>(apiV1 + request_string);
 
 			dispatch<FetchTracesAction>({
 				type: ActionTypes.fetchTraces,
@@ -140,9 +141,9 @@ export const fetchTraces = (globalTime: GlobalTime, filter_params: string) => {
 
 export const fetchTraceItem = (traceID: string) => {
 	return async (dispatch: Dispatch) => {
-		let request_string = "traces/" + traceID;
+		let request_string = "/traces/" + traceID;
-		const response = await tracesAPI.get<spansWSameTraceIDResponse>(
+		const response = await api.get<spansWSameTraceIDResponse>(
-			request_string,
+			apiV1 + request_string,
 		);
 
 		dispatch<FetchTraceItemAction>({

frontend/src/store/actions/usage.ts

@@ -1,5 +1,6 @@
 import { Dispatch } from "redux";
-import metricsAPI from "../../api/metricsAPI";
+import api, { apiV1 } from "../../api";
+
 import { ActionTypes } from "./types";
 import { GlobalTime } from "./global";
 import { toUTCEpoch } from "../../utils/timeUtils";
@@ -21,11 +22,11 @@ export const getUsageData = (
 	service: string,
 ) => {
 	return async (dispatch: Dispatch) => {
-		let request_string = `usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch(
+		let request_string = `/usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch(
 			maxTime,
 		)}&step=${step}&service=${service ? service : ""}`;
 		//Step can only be multiple of 3600
-		const response = await metricsAPI.get<usageDataItem[]>(request_string);
+		const response = await api.get<usageDataItem[]>(apiV1 + request_string);
 
 		dispatch<getUsageDataAction>({
 			type: ActionTypes.getUsageData,