feat: tf changes

Signed-off-by: Shivanshu Raj Shrivastava <shivanshu1333@gmail.com>

.github/CODEOWNERS

@@ -2,7 +2,7 @@
 # Owners are automatically requested for review for PRs that changes code
 # that they own.
 
-/frontend/ @YounixM
+/frontend/ @SigNoz/frontend @YounixM
 /frontend/src/container/MetricsApplication @srikanthccv
 /frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
 /deploy/ @SigNoz/devops

.github/pull_request_template.md

@@ -1,17 +1,74 @@
-### Summary
+## 📄 Summary
 
-<!-- ✍️ A clear and concise description...-->
+<!-- Describe the purpose of the PR in a few sentences. What does it fix/add/update? -->
 
-#### Related Issues / PR's
+---
 
-<!-- ✍️ Add the issues being resolved here and related PR's where applicable  -->
+## ✅ Changes
 
-#### Screenshots
+- [ ] Feature: Brief description
+- [ ] Bug fix: Brief description
 
-NA
+---
 
-<!-- ✍️ Add screenshots of before and after changes where applicable-->
+## 🏷️ Required: Add Relevant Labels
 
-#### Affected Areas and Manually Tested Areas
+> ⚠️ **Manually add appropriate labels in the PR sidebar**  
+Please select one or more labels (as applicable):
 
-<!-- ✍️ Add details of blast radius and dev testing areas where applicable-->
+ex:
+
+- `frontend`
+- `backend`
+- `devops`
+- `bug`
+- `enhancement`
+- `ui`
+- `test`
+
+---
+
+## 👥 Reviewers
+
+> Tag the relevant teams for review:
+
+- [ ] @SigNoz/frontend
+- [ ] @SigNoz/backend
+- [ ] @SigNoz/devops
+
+---
+
+## 🧪 How to Test
+
+<!-- Describe how reviewers can test this PR -->
+1. ...
+2. ...
+3. ...
+
+---
+
+## 🔍 Related Issues
+
+<!-- Reference any related issues (e.g. Fixes #123, Closes #456) -->
+Closes #
+
+---
+
+## 📸 Screenshots / Screen Recording (if applicable / mandatory for UI related changes)
+
+<!-- Add screenshots or GIFs to help visualize changes -->
+
+---
+
+## 📋 Checklist
+
+- [ ] Dev Review
+- [ ] Test cases added (Unit/ Integration / E2E)
+- [ ] Manually tested the changes
+
+
+---
+
+## 👀 Notes for Reviewers
+
+<!-- Anything reviewers should keep in mind while reviewing -->

.github/workflows/build-community.yaml

@@ -62,6 +62,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
+      GO_VERSION: 1.23
       GO_NAME: signoz-community
       GO_INPUT_ARTIFACT_CACHE_KEY: community-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build

.github/workflows/build-enterprise.yaml

@@ -94,6 +94,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
+      GO_VERSION: 1.23
       GO_INPUT_ARTIFACT_CACHE_KEY: enterprise-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
       GO_BUILD_CONTEXT: ./ee/query-service

.github/workflows/build-staging.yaml

@@ -91,6 +91,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
+      GO_VERSION: 1.23
       GO_INPUT_ARTIFACT_CACHE_KEY: staging-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
       GO_BUILD_CONTEXT: ./ee/query-service

.github/workflows/goci.yaml

@@ -18,6 +18,7 @@ jobs:
     with:
       PRIMUS_REF: main
       GO_TEST_CONTEXT: ./...
+      GO_VERSION: 1.23
   fmt:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -26,6 +27,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
+      GO_VERSION: 1.23
   lint:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -34,6 +36,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
+      GO_VERSION: 1.23
   build:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -45,7 +48,7 @@ jobs:
       - name: go-install
         uses: actions/setup-go@v5
         with:
-          go-version: "1.22"
+          go-version: "1.23"
       - name: qemu-install
         uses: docker/setup-qemu-action@v3
       - name: aarch64-install

.github/workflows/gor-signoz-community.yaml

@@ -58,7 +58,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.22"
+          go-version: "1.23"
       - name: cross-compilation-tools
         if: matrix.os == 'ubuntu-latest'
         run: |
@@ -122,7 +122,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.22"
+          go-version: "1.23"
 
       # copy the caches from build
       - name: get-sha

.github/workflows/gor-signoz.yaml

@@ -73,7 +73,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.22"
+          go-version: "1.23"
       - name: cross-compilation-tools
         if: matrix.os == 'ubuntu-latest'
         run: |
@@ -136,7 +136,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.22"
+          go-version: "1.23"
 
       # copy the caches from build
       - name: get-sha

.gitignore

@@ -60,9 +60,7 @@ ee/query-service/db
 
 e2e/node_modules/
 e2e/test-results/
-e2e/playwright-report/
 e2e/blob-report/
-e2e/playwright/.cache/
 e2e/.auth
 
 # go

Makefile

@@ -76,9 +76,7 @@ go-run-enterprise: ## Runs the enterprise go backend server
 	go run -race \
 		$(GO_BUILD_CONTEXT_ENTERPRISE)/main.go \
 		--config ./conf/prometheus.yml \
-		--cluster cluster \
-		--use-logs-new-schema true \
-		--use-trace-new-schema true
+		--cluster cluster
 
 .PHONY: go-test
 go-test: ## Runs go unit tests
@@ -96,9 +94,7 @@ go-run-community: ## Runs the community go backend server
 	go run -race \
 		$(GO_BUILD_CONTEXT_COMMUNITY)/main.go \
 		--config ./conf/prometheus.yml \
-		--cluster cluster \
-		--use-logs-new-schema true \
-		--use-trace-new-schema true
+		--cluster cluster
 
 .PHONY: go-build-community $(GO_BUILD_ARCHS_COMMUNITY)
 go-build-community: ## Builds the go backend server for community

conf/example.yaml

@@ -164,3 +164,9 @@ alertmanager:
       maintenance_interval: 15m
       # Retention of the notification logs.
       retention: 120h
+
+
+##################### Analytics #####################
+analytics:
+  # Whether to enable analytics.
+  enabled: false

deploy/docker-swarm/docker-compose.ha.yaml

@@ -177,8 +177,6 @@ services:
     image: signoz/signoz:v0.82.0
     command:
       - --config=/root/config/prometheus.yml
-      - --use-logs-new-schema=true
-      - --use-trace-new-schema=true
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -113,8 +113,6 @@ services:
     image: signoz/signoz:v0.82.0
     command:
       - --config=/root/config/prometheus.yml
-      - --use-logs-new-schema=true
-      - --use-trace-new-schema=true
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker/docker-compose.ha.yaml

@@ -181,8 +181,6 @@ services:
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
-      - --use-logs-new-schema=true
-      - --use-trace-new-schema=true
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker/docker-compose.yaml

@@ -114,8 +114,6 @@ services:
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
-      - --use-logs-new-schema=true
-      - --use-trace-new-schema=true
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

ee/query-service/Dockerfile.integration

@@ -1,4 +1,4 @@
-FROM golang:1.22-bullseye
+FROM golang:1.23-bullseye
 
 ARG OS="linux"
 ARG TARGETARCH

ee/query-service/app/api/dashboard.go

@@ -41,8 +41,8 @@ func (ah *APIHandler) lockUnlockDashboard(w http.ResponseWriter, r *http.Request
 		return
 	}
 
-	dashboard, err := dashboards.GetDashboard(r.Context(), claims.OrgID, uuid)
-	if err != nil {
+	dashboard, apiErr := dashboards.GetDashboard(r.Context(), claims.OrgID, uuid)
+	if apiErr != nil {
 		render.Error(w, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to get dashboard"))
 		return
 	}
@@ -53,8 +53,8 @@ func (ah *APIHandler) lockUnlockDashboard(w http.ResponseWriter, r *http.Request
 	}
 
 	// Lock/Unlock the dashboard
-	err = dashboards.LockUnlockDashboard(r.Context(), claims.OrgID, uuid, lock)
-	if err != nil {
+	apiErr = dashboards.LockUnlockDashboard(r.Context(), claims.OrgID, uuid, lock)
+	if apiErr != nil {
 		render.Error(w, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to lock/unlock dashboard"))
 		return
 	}

ee/query-service/app/server.go

@@ -322,6 +322,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterMessagingQueuesRoutes(r, am)
 	apiHandler.RegisterThirdPartyApiRoutes(r, am)
 	apiHandler.MetricExplorerRoutes(r, am)
+	apiHandler.RegisterTraceFunnelsRoutes(r, am)
 
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},

ee/query-service/model/plans.go

@@ -62,13 +62,6 @@ var BasicPlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
-	basemodel.Feature{
-		Name:       basemodel.TraceFunnels,
-		Active:     false,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	},
 }
 
 var EnterprisePlan = basemodel.FeatureSet{
@@ -121,11 +114,4 @@ var EnterprisePlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
-	basemodel.Feature{
-		Name:       basemodel.TraceFunnels,
-		Active:     false,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	},
 }

ee/sqlstore/postgressqlstore/provider.go

@@ -106,3 +106,7 @@ func (provider *provider) WrapAlreadyExistsErrf(err error, code errors.Code, for
 
 	return err
 }
+
+func (dialect *dialect) ToggleForeignKeyConstraint(ctx context.Context, bun *bun.DB, enable bool) error {
+	return nil
+}

frontend/.prettierignore

@@ -1,6 +1,10 @@
 # Ignore artifacts:
 build
 coverage
+public/
 
 # Ignore all MD files:
-**/*.md
+**/*.md
+
+# Ignore all JSON files:
+**/*.json

frontend/example.env

@@ -3,5 +3,4 @@ BUNDLE_ANALYSER="true"
 FRONTEND_API_ENDPOINT="http://localhost:8080/"
 INTERCOM_APP_ID="intercom-app-id"
 
-PLAYWRIGHT_TEST_BASE_URL="http://localhost:8080"
 CI="1"

frontend/jest.config.ts

@@ -30,11 +30,6 @@ const config: Config.InitialOptions = {
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
 	moduleDirectories: ['node_modules', 'src'],
 	testEnvironment: 'jest-environment-jsdom',
-	testEnvironmentOptions: {
-		'jest-playwright': {
-			browsers: ['chromium', 'firefox', 'webkit'],
-		},
-	},
 	coverageThreshold: {
 		global: {
 			statements: 80,

frontend/package.json

@@ -15,10 +15,6 @@
 		"jest:coverage": "jest --coverage",
 		"jest:watch": "jest --watch",
 		"postinstall": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)",
-		"playwright": "NODE_ENV=testing playwright test --config=./playwright.config.ts",
-		"playwright:local:debug": "PWDEBUG=console yarn playwright --headed --browser=chromium",
-		"playwright:codegen:local": "playwright codegen http://localhost:3301",
-		"playwright:codegen:local:auth": "yarn playwright:codegen:local --load-storage=tests/auth.json",
 		"husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
 		"commitlint": "commitlint --edit $1",
 		"test": "jest",
@@ -82,6 +78,7 @@
 		"history": "4.10.1",
 		"html-webpack-plugin": "5.5.0",
 		"http-proxy-middleware": "3.0.3",
+		"http-status-codes": "2.3.0",
 		"i18next": "^21.6.12",
 		"i18next-browser-languagedetector": "^6.1.3",
 		"i18next-http-backend": "^1.3.2",
@@ -90,7 +87,7 @@
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
-		"lucide-react": "0.427.0",
+		"lucide-react": "0.498.0",
 		"mini-css-extract-plugin": "2.4.5",
 		"motion": "12.4.13",
 		"overlayscrollbars": "^2.8.1",
@@ -163,7 +160,6 @@
 		"@commitlint/config-conventional": "^16.2.4",
 		"@faker-js/faker": "9.3.0",
 		"@jest/globals": "^27.5.1",
-		"@playwright/test": "^1.22.0",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "13.4.0",
 		"@testing-library/user-event": "14.4.3",
@@ -257,6 +253,7 @@
 		"http-proxy-middleware": "3.0.3",
 		"cross-spawn": "7.0.5",
 		"cookie": "^0.7.1",
-		"serialize-javascript": "6.0.2"
+		"serialize-javascript": "6.0.2",
+		"prismjs": "1.30.0"
 	}
 }

frontend/playwright.config.ts

@@ -1,23 +0,0 @@
-import { PlaywrightTestConfig } from '@playwright/test';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const config: PlaywrightTestConfig = {
-	forbidOnly: !!process.env.CI,
-	retries: process.env.CI ? 2 : 0,
-	preserveOutput: 'always',
-	name: 'Signoz',
-	testDir: './tests',
-	use: {
-		trace: 'retain-on-failure',
-		baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3301',
-	},
-	updateSnapshots: 'all',
-	fullyParallel: !!process.env.CI,
-	quiet: false,
-	testMatch: ['**/*.spec.ts'],
-	reporter: process.env.CI ? 'github' : 'list',
-};
-
-export default config;

frontend/public/Icons/funnel-add.svg

@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke="#C0C1C3" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="m12.192 3.18-1.167 2.33-.583 1.165M7.31 12.74a.583.583 0 0 1-.835-.24L1.808 3.179"/><path d="M7 1.167c2.9 0 5.25.783 5.25 1.75 0 .966-2.35 1.75-5.25 1.75s-5.25-.784-5.25-1.75c0-.967 2.35-1.75 5.25-1.75ZM8.75 10.5h3.5M10.5 12.25v-3.5"/></g></svg>

frontend/public/Icons/solid-info-circle.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14.666A6.667 6.667 0 1 0 8 1.333a6.667 6.667 0 0 0 0 13.333Z" fill="#C0C1C3" stroke="#C0C1C3" stroke-width="2"/><path d="M8 11.333v-4H6.333M8 4.667h.007" stroke="#121317" stroke-width="1.333"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

frontend/scripts/typecheck-staged.sh

@@ -9,7 +9,7 @@ done
 # create temporary tsconfig which includes only passed files
 str="{
   \"extends\": \"./tsconfig.json\",
-  \"include\": [ \"src/typings/**/*.ts\",\"src/**/*.d.ts\", \"./babel.config.js\", \"./jest.config.ts\", \"./.eslintrc.js\",\"./__mocks__\",\"./conf/default.conf\",\"./public\",\"./tests\",\"./playwright.config.ts\",\"./commitlint.config.ts\",\"./webpack.config.js\",\"./webpack.config.prod.js\",\"./jest.setup.ts\",\"./**/*.d.ts\",$files]
+  \"include\": [ \"src/typings/**/*.ts\",\"src/**/*.d.ts\", \"./babel.config.js\", \"./jest.config.ts\", \"./.eslintrc.js\",\"./__mocks__\",\"./public\",\"./tests\",\"./commitlint.config.ts\",\"./webpack.config.js\",\"./webpack.config.prod.js\",\"./jest.setup.ts\",\"./**/*.d.ts\",$files]
 }"
 echo $str > tsconfig.tmp
 

frontend/src/AppRoutes/Private.tsx

@@ -1,6 +1,6 @@
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import getOrgUser from 'api/user/getOrgUser';
+import getOrgUser from 'api/v1/user/getOrgUser';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';

frontend/src/AppRoutes/pageComponents.ts

@@ -47,9 +47,10 @@ export const TracesFunnels = Loadable(
 		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),
 );
 export const TracesFunnelDetails = Loadable(
+	// eslint-disable-next-line sonarjs/no-identical-functions
 	() =>
 		import(
-			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesFunnelDetails'
+			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesModulePage'
 		),
 );
 

frontend/src/api/ErrorResponseHandlerV2.ts

@@ -0,0 +1,46 @@
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
+import APIError from 'types/api/error';
+
+// reference - https://axios-http.com/docs/handling_errors
+export function ErrorResponseHandlerV2(error: AxiosError<ErrorV2Resp>): never {
+	const { response, request } = error;
+	// The request was made and the server responded with a status code
+	// that falls out of the range of 2xx
+	if (response) {
+		throw new APIError({
+			httpStatusCode: response.status || 500,
+			error: {
+				code: response.data.error.code,
+				message: response.data.error.message,
+				url: response.data.error.url,
+				errors: response.data.error.errors,
+			},
+		});
+	}
+	// The request was made but no response was received
+	// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+	// http.ClientRequest in node.js
+	if (request) {
+		throw new APIError({
+			httpStatusCode: error.status || 500,
+			error: {
+				code: error.code || error.name,
+				message: error.message,
+				url: '',
+				errors: [],
+			},
+		});
+	}
+
+	// Something happened in setting up the request that triggered an Error
+	throw new APIError({
+		httpStatusCode: error.status || 500,
+		error: {
+			code: error.name,
+			message: error.message,
+			url: '',
+			errors: [],
+		},
+	});
+}

frontend/src/api/channels/createEmail.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createEmail';
 
 const create = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/channels', {
+		const response = await axios.post<PayloadProps>('/channels', {
 			name: props.name,
 			email_configs: [
 				{
@@ -21,13 +21,12 @@ const create = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/createMsTeams.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createMsTeams';
 
 const create = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/channels', {
+		const response = await axios.post<PayloadProps>('/channels', {
 			name: props.name,
 			msteamsv2_configs: [
 				{
@@ -21,13 +21,12 @@ const create = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/createOpsgenie.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';
 
 const create = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/channels', {
+		const response = await axios.post<PayloadProps>('/channels', {
 			name: props.name,
 			opsgenie_configs: [
 				{
@@ -24,13 +24,12 @@ const create = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/createPager.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createPager';
 
 const create = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/channels', {
+		const response = await axios.post<PayloadProps>('/channels', {
 			name: props.name,
 			pagerduty_configs: [
 				{
@@ -29,13 +29,12 @@ const create = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/createSlack.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createSlack';
 
 const create = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/channels', {
+		const response = await axios.post<PayloadProps>('/channels', {
 			name: props.name,
 			slack_configs: [
 				{
@@ -22,13 +22,12 @@ const create = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/createWebhook.ts

@@ -1,12 +1,12 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createWebhook';
 
 const create = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
 		let httpConfig = {};
 		const username = props.username ? props.username.trim() : '';
@@ -28,7 +28,7 @@ const create = async (
 			};
 		}
 
-		const response = await axios.post('/channels', {
+		const response = await axios.post<PayloadProps>('/channels', {
 			name: props.name,
 			webhook_configs: [
 				{
@@ -40,13 +40,12 @@ const create = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/delete.ts

@@ -1,23 +1,22 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/delete';
 
 const deleteChannel = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.delete(`/channels/${props.id}`);
+		const response = await axios.delete<PayloadProps>(`/channels/${props.id}`);
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/editEmail.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editEmail';
 
 const editEmail = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.put(`/channels/${props.id}`, {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
 			name: props.name,
 			email_configs: [
 				{
@@ -21,13 +21,12 @@ const editEmail = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/editMsTeams.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editMsTeams';
 
 const editMsTeams = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.put(`/channels/${props.id}`, {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
 			name: props.name,
 			msteamsv2_configs: [
 				{
@@ -21,13 +21,12 @@ const editMsTeams = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/editOpsgenie.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorResponse, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editOpsgenie';
 
 const editOpsgenie = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.put(`/channels/${props.id}`, {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
 			name: props.name,
 			opsgenie_configs: [
 				{
@@ -25,13 +25,12 @@ const editOpsgenie = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/editPager.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editPager';
 
 const editPager = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.put(`/channels/${props.id}`, {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
 			name: props.name,
 			pagerduty_configs: [
 				{
@@ -29,13 +29,12 @@ const editPager = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/editSlack.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editSlack';
 
 const editSlack = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.put(`/channels/${props.id}`, {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
 			name: props.name,
 			slack_configs: [
 				{
@@ -22,13 +22,12 @@ const editSlack = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/editWebhook.ts

@@ -1,12 +1,12 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editWebhook';
 
 const editWebhook = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
 		let httpConfig = {};
 		const username = props.username ? props.username.trim() : '';
@@ -28,7 +28,7 @@ const editWebhook = async (
 			};
 		}
 
-		const response = await axios.put(`/channels/${props.id}`, {
+		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
 			name: props.name,
 			webhook_configs: [
 				{
@@ -40,13 +40,12 @@ const editWebhook = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/get.ts

@@ -1,23 +1,21 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/get';
+import { Channels } from 'types/api/channels/getAll';
 
-const get = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+const get = async (props: Props): Promise<SuccessResponseV2<Channels>> => {
 	try {
-		const response = await axios.get(`/channels/${props.id}`);
+		const response = await axios.get<PayloadProps>(`/channels/${props.id}`);
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/getAll.ts

@@ -1,23 +1,20 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps } from 'types/api/channels/getAll';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Channels, PayloadProps } from 'types/api/channels/getAll';
 
-const getAll = async (): Promise<
-	SuccessResponse<PayloadProps> | ErrorResponse
-> => {
+const getAll = async (): Promise<SuccessResponseV2<Channels[]>> => {
 	try {
-		const response = await axios.get('/channels');
+		const response = await axios.get<PayloadProps>('/channels');
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/testEmail.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createEmail';
 
 const testEmail = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/testChannel', {
+		const response = await axios.post<PayloadProps>('/testChannel', {
 			name: props.name,
 			email_configs: [
 				{
@@ -21,13 +21,12 @@ const testEmail = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/testMsTeams.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createMsTeams';
 
 const testMsTeams = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/testChannel', {
+		const response = await axios.post<PayloadProps>('/testChannel', {
 			name: props.name,
 			msteamsv2_configs: [
 				{
@@ -21,13 +21,12 @@ const testMsTeams = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/testOpsgenie.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';
 
 const testOpsgenie = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/testChannel', {
+		const response = await axios.post<PayloadProps>('/testChannel', {
 			name: props.name,
 			opsgenie_configs: [
 				{
@@ -24,13 +24,12 @@ const testOpsgenie = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/testPager.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createPager';
 
 const testPager = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/testChannel', {
+		const response = await axios.post<PayloadProps>('/testChannel', {
 			name: props.name,
 			pagerduty_configs: [
 				{
@@ -29,13 +29,12 @@ const testPager = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/testSlack.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createSlack';
 
 const testSlack = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post('/testChannel', {
+		const response = await axios.post<PayloadProps>('/testChannel', {
 			name: props.name,
 			slack_configs: [
 				{
@@ -22,13 +22,12 @@ const testSlack = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/channels/testWebhook.ts

@@ -1,12 +1,12 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createWebhook';
 
 const testWebhook = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
 		let httpConfig = {};
 		const username = props.username ? props.username.trim() : '';
@@ -28,7 +28,7 @@ const testWebhook = async (
 			};
 		}
 
-		const response = await axios.post('/testChannel', {
+		const response = await axios.post<PayloadProps>('/testChannel', {
 			name: props.name,
 			webhook_configs: [
 				{
@@ -40,13 +40,12 @@ const testWebhook = async (
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
 	}
 };
 

frontend/src/api/index.ts

@@ -2,7 +2,7 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import getLocalStorageApi from 'api/browser/localstorage/get';
-import loginApi from 'api/user/login';
+import loginApi from 'api/v1/user/login';
 import afterLogin from 'AppRoutes/utils';
 import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 import { ENVIRONMENT } from 'constants/env';

frontend/src/api/traceFunnels/index.ts

@@ -5,6 +5,7 @@ import {
 	CreateFunnelPayload,
 	CreateFunnelResponse,
 	FunnelData,
+	FunnelStepData,
 } from 'types/api/traceFunnels';
 
 const FUNNELS_BASE_PATH = '/trace-funnels';
@@ -13,7 +14,7 @@ export const createFunnel = async (
 	payload: CreateFunnelPayload,
 ): Promise<SuccessResponse<CreateFunnelResponse> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.post(
-		`${FUNNELS_BASE_PATH}/new-funnel`,
+		`${FUNNELS_BASE_PATH}/new`,
 		payload,
 	);
 
@@ -25,60 +26,45 @@ export const createFunnel = async (
 	};
 };
 
-interface GetFunnelsListParams {
-	search?: string;
-}
-
-export const getFunnelsList = async ({
-	search = '',
-}: GetFunnelsListParams = {}): Promise<
+export const getFunnelsList = async (): Promise<
 	SuccessResponse<FunnelData[]> | ErrorResponse
 > => {
-	const params = new URLSearchParams();
-	if (search.length) {
-		params.set('search', search);
-	}
-
-	const response: AxiosResponse = await axios.get(
-		`${FUNNELS_BASE_PATH}/list${
-			params.toString() ? `?${params.toString()}` : ''
-		}`,
-	);
+	const response: AxiosResponse = await axios.get(`${FUNNELS_BASE_PATH}/list`);
 
 	return {
 		statusCode: 200,
 		error: null,
 		message: '',
-		payload: response.data,
+		payload: response.data.data,
 	};
 };
 
 export const getFunnelById = async (
-	funnelId: string,
+	funnelId?: string,
 ): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.get(
-		`${FUNNELS_BASE_PATH}/get/${funnelId}`,
+		`${FUNNELS_BASE_PATH}/${funnelId}`,
 	);
-
 	return {
 		statusCode: 200,
 		error: null,
 		message: '',
-		payload: response.data,
+		payload: response.data.data,
 	};
 };
 
-interface RenameFunnelPayload {
-	id: string;
+export interface RenameFunnelPayload {
+	funnel_id: string;
 	funnel_name: string;
+	timestamp: number;
 }
 
 export const renameFunnel = async (
 	payload: RenameFunnelPayload,
 ): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.put(
-		`${FUNNELS_BASE_PATH}/${payload.id}/update`,
-		{ funnel_name: payload.funnel_name },
+		`${FUNNELS_BASE_PATH}/${payload.funnel_id}`,
+		payload,
 	);
 
 	return {
@@ -97,7 +83,7 @@ export const deleteFunnel = async (
 	payload: DeleteFunnelPayload,
 ): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.delete(
-		`${FUNNELS_BASE_PATH}/delete/${payload.id}`,
+		`${FUNNELS_BASE_PATH}/${payload.id}`,
 	);
 
 	return {
@@ -107,3 +93,247 @@ export const deleteFunnel = async (
 		payload: response.data,
 	};
 };
+
+export interface UpdateFunnelStepsPayload {
+	funnel_id: string;
+	steps: FunnelStepData[];
+	timestamp: number;
+}
+
+export const updateFunnelSteps = async (
+	payload: UpdateFunnelStepsPayload,
+): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.put(
+		`${FUNNELS_BASE_PATH}/steps/update`,
+		payload,
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Funnel steps updated successfully',
+		payload: response.data.data,
+	};
+};
+
+export interface ValidateFunnelPayload {
+	start_time: number;
+	end_time: number;
+}
+
+export interface ValidateFunnelResponse {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: {
+			trace_id: string;
+		};
+	}> | null;
+}
+
+export const validateFunnelSteps = async (
+	funnelId: string,
+	payload: ValidateFunnelPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<ValidateFunnelResponse> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/validate`,
+		payload,
+		{ signal },
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+
+export interface UpdateFunnelStepDetailsPayload {
+	funnel_id: string;
+	steps: Array<{
+		step_name: string;
+		description: string;
+	}>;
+	updated_at: number;
+}
+
+interface UpdateFunnelDescriptionPayload {
+	funnel_id: string;
+	description: string;
+}
+
+export const saveFunnelDescription = async (
+	payload: UpdateFunnelDescriptionPayload,
+): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.post(
+		`${FUNNELS_BASE_PATH}/save`,
+		payload,
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Funnel description updated successfully',
+		payload: response.data,
+	};
+};
+
+export interface FunnelOverviewPayload {
+	start_time: number;
+	end_time: number;
+	step_start?: number;
+	step_end?: number;
+}
+
+export interface FunnelOverviewResponse {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: {
+			avg_duration: number;
+			avg_rate: number;
+			conversion_rate: number | null;
+			errors: number;
+			p99_latency: number;
+		};
+	}>;
+}
+
+export const getFunnelOverview = async (
+	funnelId: string,
+	payload: FunnelOverviewPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<FunnelOverviewResponse> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/overview`,
+		payload,
+		{
+			signal,
+		},
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+
+export interface SlowTracesPayload {
+	start_time: number;
+	end_time: number;
+	step_a_order: number;
+	step_b_order: number;
+}
+
+export interface SlowTraceData {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: {
+			duration_ms: string;
+			span_count: number;
+			trace_id: string;
+		};
+	}>;
+}
+
+export const getFunnelSlowTraces = async (
+	funnelId: string,
+	payload: SlowTracesPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<SlowTraceData> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/slow-traces`,
+		payload,
+		{
+			signal,
+		},
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+export interface ErrorTracesPayload {
+	start_time: number;
+	end_time: number;
+	step_a_order: number;
+	step_b_order: number;
+}
+
+export interface ErrorTraceData {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: {
+			duration_ms: string;
+			span_count: number;
+			trace_id: string;
+		};
+	}>;
+}
+
+export const getFunnelErrorTraces = async (
+	funnelId: string,
+	payload: ErrorTracesPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<ErrorTraceData> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/error-traces`,
+		payload,
+		{
+			signal,
+		},
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+
+export interface FunnelStepsPayload {
+	start_time: number;
+	end_time: number;
+}
+
+export interface FunnelStepGraphMetrics {
+	[key: `total_s${number}_spans`]: number;
+	[key: `total_s${number}_errored_spans`]: number;
+}
+
+export interface FunnelStepsResponse {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: FunnelStepGraphMetrics;
+	}>;
+}
+
+export const getFunnelSteps = async (
+	funnelId: string,
+	payload: FunnelStepsPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<FunnelStepsResponse> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/steps`,
+		payload,
+		{ signal },
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};

frontend/src/api/v1/login/login.ts

@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/user/login';
+
+const login = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>(`/login`, {
+			...props,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		// this line is never reached but ts isn't detecting the never type properly for the ErrorResponseHandlerV2
+		throw error;
+	}
+};
+
+export default login;

frontend/src/api/v1/user/preferences/get.ts

@@ -8,7 +8,7 @@ const getPreference = async (): Promise<
 	SuccessResponse<PayloadProps> | ErrorResponse
 > => {
 	try {
-		const response = await axios.get(`/userPreferences`);
+		const response = await axios.get(`/user/preferences`);
 
 		return {
 			statusCode: 200,

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -9,18 +9,27 @@ import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOpt
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { useCallback, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
-interface SelectOptionConfig {
+export interface SelectOptionConfig {
 	placeholder: string;
 	queryParam: QueryParams;
 	filterType: string | string[];
+	shouldSetQueryParams?: boolean;
+	onChange?: (value: string | string[]) => void;
+	values?: string | string[];
+	isMultiple?: boolean;
 }
 
-function FilterSelect({
+export function FilterSelect({
 	placeholder,
 	queryParam,
 	filterType,
+	values,
+	shouldSetQueryParams,
+	onChange,
+	isMultiple,
 }: SelectOptionConfig): JSX.Element {
 	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
 		filterType,
@@ -30,20 +39,73 @@ function FilterSelect({
 	const history = useHistory();
 	const location = useLocation();
 
+	// Add state to track the current search input
+	const [searchValue, setSearchValue] = useState<string>('');
+
+	// Use externally provided `values` if `shouldSetQueryParams` is false, otherwise get from URL params.
+	const selectValue =
+		!shouldSetQueryParams && !!values?.length
+			? values
+			: getValuesFromQueryParams(queryParam, urlQuery) || [];
+
+	// Memoize options to include the typed value if not present
+	const mergedOptions = useMemo(() => {
+		if (
+			!!searchValue.trim().length &&
+			!options.some((opt) => opt.value === searchValue)
+		) {
+			return [{ value: searchValue, label: searchValue }, ...options];
+		}
+		return options;
+	}, [options, searchValue]);
+
+	const handleSelectChange = useCallback(
+		(value: string | string[]): void => {
+			handleSearch('');
+			setSearchValue(''); // Clear search value after selection
+			if (shouldSetQueryParams) {
+				setQueryParamsFromOptions(
+					value as string[],
+					urlQuery,
+					history,
+					location,
+					queryParam,
+				);
+			}
+			onChange?.(value);
+		},
+		[
+			handleSearch,
+			shouldSetQueryParams,
+			urlQuery,
+			history,
+			location,
+			queryParam,
+			onChange,
+		],
+	);
+
+	// Update searchValue on user input
+	const handleSearchInput = (input: string): void => {
+		setSearchValue(input);
+		handleSearch(input);
+	};
+
 	return (
 		<Select
 			key={filterType.toString()}
 			placeholder={placeholder}
 			showSearch
-			mode="multiple"
-			options={options}
+			// eslint-disable-next-line react/jsx-props-no-spreading
+			{...(isMultiple ? { mode: 'multiple' } : {})}
+			options={mergedOptions}
 			loading={isFetching}
 			className="config-select-option"
-			onSearch={handleSearch}
+			onSearch={handleSearchInput}
 			maxTagCount={4}
 			allowClear
 			maxTagPlaceholder={SelectMaxTagPlaceholder}
-			value={getValuesFromQueryParams(queryParam, urlQuery) || []}
+			value={selectValue}
 			notFoundContent={
 				isFetching ? (
 					<span>
@@ -53,14 +115,18 @@ function FilterSelect({
 					<span>No {placeholder} found</span>
 				)
 			}
-			onChange={(value): void => {
-				handleSearch('');
-				setQueryParamsFromOptions(value, urlQuery, history, location, queryParam);
-			}}
+			onChange={handleSelectChange}
 		/>
 	);
 }
 
+FilterSelect.defaultProps = {
+	shouldSetQueryParams: true,
+	onChange: (): void => {},
+	values: [],
+	isMultiple: true,
+};
+
 function CeleryOverviewConfigOptions(): JSX.Element {
 	const selectConfigs: SelectOptionConfig[] = [
 		{

frontend/src/components/ChangePercentagePill/ChangePercentagePill.styles.scss

@@ -0,0 +1,40 @@
+.change-percentage-pill {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	padding: 1px 4px;
+	border-radius: 50px;
+
+	&__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	&__label {
+		font-family: 'Geist Mono';
+		font-size: 12px;
+		line-height: normal;
+	}
+	&--positive {
+		.change-percentage-pill {
+			&__icon {
+				color: var(--bg-forest-500);
+			}
+			&__label {
+				color: var(--bg-forest-500);
+			}
+		}
+	}
+	&--negative {
+		background: rgba(229, 72, 77, 0.1);
+
+		.change-percentage-pill {
+			&__icon {
+				color: var(--bg-cherry-500);
+			}
+			&__label {
+				color: var(--bg-cherry-500);
+			}
+		}
+	}
+}

frontend/src/components/ChangePercentagePill/ChangePercentagePill.tsx

@@ -0,0 +1,38 @@
+import './ChangePercentagePill.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import cx from 'classnames';
+import { ArrowDown, ArrowUp } from 'lucide-react';
+
+interface ChangePercentagePillProps {
+	percentage: number;
+	direction: number;
+}
+function ChangePercentagePill({
+	percentage,
+	direction,
+}: ChangePercentagePillProps): JSX.Element | null {
+	if (direction === 0 || percentage === 0) {
+		return null;
+	}
+	const isPositive = direction > 0;
+	return (
+		<div
+			className={cx('change-percentage-pill', {
+				'change-percentage-pill--positive': isPositive,
+				'change-percentage-pill--negative': !isPositive,
+			})}
+		>
+			<div className="change-percentage-pill__icon">
+				{isPositive ? (
+					<ArrowUp size={12} color={Color.BG_FOREST_500} />
+				) : (
+					<ArrowDown size={12} color={Color.BG_CHERRY_500} />
+				)}
+			</div>
+			<div className="change-percentage-pill__label">{percentage}%</div>
+		</div>
+	);
+}
+
+export default ChangePercentagePill;

frontend/src/components/DropDown/DropDown.styles.scss

@@ -1,11 +1,11 @@
 .dropdown-button {
-    color: #fff;
+	color: #fff;
 }
 
 .dropdown-button--dark {
-    color: #000;
+	color: #000;
 }
 
 .dropdown-icon {
-    font-size: 1.2rem;
-}
+	font-size: 1.2rem;
+}

frontend/src/components/LearnMore/LearnMore.styles.scss

@@ -1,14 +1,15 @@
 .learn-more {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 0;
-    font-family: Inter;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 18px; /* 128.571% */
-    letter-spacing: -0.07px;
-    &,&:hover {
-        color: var(--bg-robin-400) !important;    
-    }
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 0;
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
+	&,
+	&:hover {
+		color: var(--bg-robin-400) !important;
+	}
 }

frontend/src/components/QuickFilters/tests/__snapshots__/QuickFilters.test.tsx.snap

@@ -110,6 +110,7 @@ exports[`Quick Filters renders correctly with default props 1`] = `
                 class="left-action"
               >
                 <svg
+                  aria-hidden="true"
                   class="lucide lucide-chevron-down"
                   cursor="pointer"
                   fill="none"
@@ -347,6 +348,7 @@ exports[`Quick Filters renders correctly with default props 1`] = `
                 class="left-action"
               >
                 <svg
+                  aria-hidden="true"
                   class="lucide lucide-chevron-right"
                   cursor="pointer"
                   fill="none"

frontend/src/components/SignozRadioGroup/SignozRadioGroup.styles.scss

@@ -0,0 +1,55 @@
+.signoz-radio-group.ant-radio-group {
+	color: var(--text-vanilla-400);
+
+	.view-title {
+		display: flex;
+		gap: var(--margin-2);
+		align-items: center;
+		justify-content: center;
+		font-size: var(--font-size-xs);
+		font-style: normal;
+		font-weight: var(--font-weight-normal);
+	}
+
+	.tab {
+		border: 1px solid var(--bg-slate-400);
+		&:hover {
+			color: var(--text-vanilla-100);
+		}
+		&::before {
+			background: var(--bg-slate-400);
+		}
+	}
+
+	.selected_view {
+		&,
+		&:hover {
+			background: var(--bg-slate-300);
+			color: var(--text-vanilla-100);
+			border: 1px solid var(--bg-slate-400);
+		}
+		&::before {
+			background: var(--bg-slate-400);
+		}
+	}
+}
+
+// Light mode styles
+.lightMode {
+	.signoz-radio-group {
+		.tab {
+			background: var(--bg-vanilla-100);
+		}
+
+		.selected_view {
+			background: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-slate-300);
+			color: var(--text-ink-400);
+		}
+
+		.selected_view::before {
+			background: var(--bg-vanilla-300);
+			border-left: 1px solid var(--bg-slate-300);
+		}
+	}
+}

frontend/src/components/SignozRadioGroup/SignozRadioGroup.tsx

@@ -0,0 +1,48 @@
+import './SignozRadioGroup.styles.scss';
+
+import { Radio } from 'antd';
+import { RadioChangeEvent } from 'antd/es/radio';
+
+interface Option {
+	value: string;
+	label: string;
+}
+
+interface SignozRadioGroupProps {
+	value: string;
+	options: Option[];
+	onChange: (e: RadioChangeEvent) => void;
+	className?: string;
+}
+
+function SignozRadioGroup({
+	value,
+	options,
+	onChange,
+	className = '',
+}: SignozRadioGroupProps): JSX.Element {
+	return (
+		<Radio.Group
+			value={value}
+			buttonStyle="solid"
+			className={`signoz-radio-group ${className}`}
+			onChange={onChange}
+		>
+			{options.map((option) => (
+				<Radio.Button
+					key={option.value}
+					value={option.value}
+					className={value === option.value ? 'selected_view tab' : 'tab'}
+				>
+					{option.label}
+				</Radio.Button>
+			))}
+		</Radio.Group>
+	);
+}
+
+SignozRadioGroup.defaultProps = {
+	className: '',
+};
+
+export default SignozRadioGroup;

frontend/src/components/TableRenderer/LabelColumn.styles.scss

@@ -1,10 +1,9 @@
 .label-column {
+	display: flex;
+	flex-wrap: wrap;
 
-    display: flex;
-    flex-wrap: wrap;
-
-    .label-column--tag {
-        white-space: normal;
-        margin: 0.2rem 0.2rem;
-    }
+	.label-column--tag {
+		white-space: normal;
+		margin: 0.2rem 0.2rem;
+	}
 }

frontend/src/components/TextToolTip/TextToolTip.style.scss

@@ -1,3 +1,3 @@
 .overlay--text-wrap {
-    white-space: pre-wrap;
-}
+	white-space: pre-wrap;
+}

frontend/src/constants/features.ts

@@ -8,5 +8,6 @@ export enum FeatureKeys {
 	PREMIUM_SUPPORT = 'PREMIUM_SUPPORT',
 	ANOMALY_DETECTION = 'ANOMALY_DETECTION',
 	ONBOARDING_V3 = 'ONBOARDING_V3',
+	THIRD_PARTY_API = 'THIRD_PARTY_API',
 	TRACE_FUNNELS = 'TRACE_FUNNELS',
 }

frontend/src/constants/reactQueryKeys.ts

@@ -53,7 +53,7 @@ export const REACT_QUERY_KEY = {
 	GET_RELATED_METRICS: 'GET_RELATED_METRICS',
 	GET_INSPECT_METRICS_DETAILS: 'GET_INSPECT_METRICS_DETAILS',
 
-	// API Monitoring Query Keys
+	// Traces Funnels Query Keys
 	GET_DOMAINS_LIST: 'GET_DOMAINS_LIST',
 	GET_DOMAIN_METRICS_DATA: 'GET_DOMAIN_METRICS_DATA',
 	GET_ENDPOINTS_LIST_BY_DOMAIN: 'GET_ENDPOINTS_LIST_BY_DOMAIN',
@@ -71,4 +71,11 @@ export const REACT_QUERY_KEY = {
 		'GET_ENDPOINT_STATUS_CODE_LATENCY_BAR_CHARTS_DATA',
 	GET_FUNNELS_LIST: 'GET_FUNNELS_LIST',
 	GET_FUNNEL_DETAILS: 'GET_FUNNEL_DETAILS',
+	UPDATE_FUNNEL_STEPS: 'UPDATE_FUNNEL_STEPS',
+	VALIDATE_FUNNEL_STEPS: 'VALIDATE_FUNNEL_STEPS',
+	UPDATE_FUNNEL_STEP_DETAILS: 'UPDATE_FUNNEL_STEP_DETAILS',
+	GET_FUNNEL_OVERVIEW: 'GET_FUNNEL_OVERVIEW',
+	GET_FUNNEL_SLOW_TRACES: 'GET_FUNNEL_SLOW_TRACES',
+	GET_FUNNEL_ERROR_TRACES: 'GET_FUNNEL_ERROR_TRACES',
+	GET_FUNNEL_STEPS_GRAPH_DATA: 'GET_FUNNEL_STEPS_GRAPH_DATA',
 } as const;

frontend/src/container/APIKeys/APIKeys.tsx

@@ -27,6 +27,7 @@ import axios, { AxiosError } from 'axios';
 import cx from 'classnames';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import { useGetAllAPIKeys } from 'hooks/APIKeys/useGetAllAPIKeys';
 import { useNotifications } from 'hooks/useNotifications';
 import {
@@ -52,6 +53,8 @@ import { useCopyToClipboard } from 'react-use';
 import { APIKeyProps } from 'types/api/pat/types';
 import { USER_ROLES } from 'types/roles';
 
+dayjs.extend(relativeTime);
+
 export const showErrorNotification = (
 	notifications: NotificationInstance,
 	err: Error,
@@ -495,7 +498,7 @@ function APIKeys(): JSX.Element {
 										expiresIn <= 3 ? 'danger' : 'warning',
 									)}
 								>
-									<span className="dot" /> Expires in {expiresIn} Days
+									<span className="dot" /> Expires {dayjs().to(expiresOn)}
 								</div>
 							)}
 

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -10,7 +10,7 @@ import { useAppContext } from 'providers/App/App';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
-import { Channels, PayloadProps } from 'types/api/channels/getAll';
+import { Channels } from 'types/api/channels/getAll';
 
 import Delete from './Delete';
 
@@ -68,7 +68,7 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 }
 
 interface AlertChannelsProps {
-	allChannels: PayloadProps;
+	allChannels: Channels[];
 }
 
 export default AlertChannels;

frontend/src/container/AllAlertChannels/Delete.tsx

@@ -4,6 +4,7 @@ import deleteChannel from 'api/channels/delete';
 import { Dispatch, SetStateAction, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Channels } from 'types/api/channels/getAll';
+import APIError from 'types/api/error';
 
 function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
@@ -12,30 +13,20 @@ function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
 	const onClickHandler = async (): Promise<void> => {
 		try {
 			setLoading(true);
-			const response = await deleteChannel({
+			await deleteChannel({
 				id,
 			});
 
-			if (response.statusCode === 200) {
-				notifications.success({
-					message: 'Success',
-					description: t('channel_delete_success'),
-				});
-				setChannels((preChannels) => preChannels.filter((e) => e.id !== id));
-			} else {
-				notifications.error({
-					message: 'Error',
-					description: response.error || t('channel_delete_unexp_error'),
-				});
-			}
+			notifications.success({
+				message: 'Success',
+				description: t('channel_delete_success'),
+			});
+			setChannels((preChannels) => preChannels.filter((e) => e.id !== id));
 			setLoading(false);
 		} catch (error) {
 			notifications.error({
-				message: 'Error',
-				description:
-					error instanceof Error
-						? error.toString()
-						: t('channel_delete_unexp_error'),
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
 			});
 			setLoading(false);
 		}

frontend/src/container/AllAlertChannels/__tests__/AlertChannels.test.tsx

@@ -1,15 +1,7 @@
 import ROUTES from 'constants/routes';
 import AlertChannels from 'container/AllAlertChannels';
-import { allAlertChannels } from 'mocks-server/__mockdata__/alerts';
 import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
-jest.mock('hooks/useFetch', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => ({
-		payload: allAlertChannels,
-	})),
-}));
-
 const successNotification = jest.fn();
 jest.mock('hooks/useNotifications', () => ({
 	__esModule: true,
@@ -29,8 +21,11 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('Alert Channels Settings List page', () => {
-	beforeEach(() => {
+	beforeEach(async () => {
 		render(<AlertChannels />);
+		await waitFor(() =>
+			expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
+		);
 	});
 	afterEach(() => {
 		jest.restoreAllMocks();

frontend/src/container/AllAlertChannels/__tests__/AlertChannelsNormalUser.test.tsx

@@ -1,15 +1,8 @@
+/* eslint-disable sonarjs/no-identical-functions */
 import ROUTES from 'constants/routes';
 import AlertChannels from 'container/AllAlertChannels';
-import { allAlertChannels } from 'mocks-server/__mockdata__/alerts';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
-jest.mock('hooks/useFetch', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => ({
-		payload: allAlertChannels,
-	})),
-}));
-
 const successNotification = jest.fn();
 jest.mock('hooks/useNotifications', () => ({
 	__esModule: true,
@@ -34,27 +27,31 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('Alert Channels Settings List page (Normal User)', () => {
-	beforeEach(() => {
+	beforeEach(async () => {
 		render(<AlertChannels />);
+		await waitFor(() =>
+			expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
+		);
 	});
 	afterEach(() => {
 		jest.restoreAllMocks();
 	});
 	describe('Should display the Alert Channels page properly', () => {
-		it('Should check if "The alerts will be sent to all the configured channels." is visible ', () => {
-			expect(screen.getByText('sending_channels_note')).toBeInTheDocument();
+		it('Should check if "The alerts will be sent to all the configured channels." is visible ', async () => {
+			await waitFor(() =>
+				expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
+			);
 		});
 
-		it('Should check if "New Alert Channel" Button is visble and disabled', () => {
+		it('Should check if "New Alert Channel" Button is visble and disabled', async () => {
 			const newAlertButton = screen.getByRole('button', {
 				name: 'plus button_new_channel',
 			});
-			expect(newAlertButton).toBeInTheDocument();
+			await waitFor(() => expect(newAlertButton).toBeInTheDocument());
 			expect(newAlertButton).toBeDisabled();
 		});
 		it('Should check if the help icon is visible and displays "tooltip_notification_channels ', async () => {
 			const helpIcon = screen.getByLabelText('question-circle');
-
 			fireEvent.mouseOver(helpIcon);
 
 			await waitFor(() => {
@@ -64,13 +61,13 @@ describe('Alert Channels Settings List page (Normal User)', () => {
 		});
 	});
 	describe('Should check if the channels table is properly displayed', () => {
-		it('Should check if the table columns are properly displayed', () => {
+		it('Should check if the table columns are properly displayed', async () => {
 			expect(screen.getByText('column_channel_name')).toBeInTheDocument();
 			expect(screen.getByText('column_channel_type')).toBeInTheDocument();
 			expect(screen.queryByText('column_channel_action')).not.toBeInTheDocument();
 		});
 
-		it('Should check if the data in the table is displayed properly', () => {
+		it('Should check if the data in the table is displayed properly', async () => {
 			expect(screen.getByText('Dummy-Channel')).toBeInTheDocument();
 			expect(screen.getAllByText('slack')[0]).toBeInTheDocument();
 			expect(screen.queryByText('column_channel_edit')).not.toBeInTheDocument();

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx

@@ -119,12 +119,7 @@ describe('Create Alert Channel', () => {
 
 			fireEvent.click(saveButton);
 
-			await waitFor(() =>
-				expect(errorNotification).toHaveBeenCalledWith({
-					description: 'Something went wrong',
-					message: 'Error',
-				}),
-			);
+			await waitFor(() => expect(errorNotification).toHaveBeenCalled());
 		});
 		it('Should check if clicking on Test button shows "An alert has been sent to this channel" success message if testing passes', async () => {
 			server.use(
@@ -158,12 +153,7 @@ describe('Create Alert Channel', () => {
 
 			fireEvent.click(testButton);
 
-			await waitFor(() =>
-				expect(errorNotification).toHaveBeenCalledWith({
-					message: 'Error',
-					description: 'channel_test_failed',
-				}),
-			);
+			await waitFor(() => expect(errorNotification).toHaveBeenCalled());
 		});
 	});
 	describe('New Alert Channel Cascading Fields Based on Channel Type', () => {

frontend/src/container/AllAlertChannels/index.tsx

@@ -6,12 +6,15 @@ import Spinner from 'components/Spinner';
 import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
-import useFetch from 'hooks/useFetch';
 import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
+import { SuccessResponseV2 } from 'types/api';
+import { Channels } from 'types/api/channels/getAll';
+import APIError from 'types/api/error';
 
 import AlertChannelsComponent from './AlertChannels';
 import { Button, ButtonContainer, RightActionContainer } from './styles';
@@ -29,21 +32,26 @@ function AlertChannels(): JSX.Element {
 		history.push(ROUTES.CHANNELS_NEW);
 	}, []);
 
-	const { loading, payload, error, errorMessage } = useFetch(getAll);
+	const { isLoading, data, error } = useQuery<
+		SuccessResponseV2<Channels[]>,
+		APIError
+	>(['getChannels'], {
+		queryFn: () => getAll(),
+	});
 
 	useEffect(() => {
-		if (!isUndefined(payload)) {
+		if (!isUndefined(data?.data)) {
 			logEvent('Alert Channel: Channel list page visited', {
-				number: payload?.length,
+				number: data?.data?.length,
 			});
 		}
-	}, [payload]);
+	}, [data?.data]);
 
 	if (error) {
-		return <Typography>{errorMessage}</Typography>;
+		return <Typography>{error.getErrorMessage()}</Typography>;
 	}
 
-	if (loading || payload === undefined) {
+	if (isLoading || isUndefined(data?.data)) {
 		return <Spinner tip={t('loading_channels_message')} height="90vh" />;
 	}
 
@@ -78,7 +86,7 @@ function AlertChannels(): JSX.Element {
 				</RightActionContainer>
 			</ButtonContainer>
 
-			<AlertChannelsComponent allChannels={payload} />
+			<AlertChannelsComponent allChannels={data?.data || []} />
 		</>
 	);
 }

frontend/src/container/AppLayout/index.tsx

@@ -9,8 +9,8 @@ import manageCreditCardApi from 'api/billing/manage';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
-import getUserLatestVersion from 'api/user/getLatestVersion';
-import getUserVersion from 'api/user/getVersion';
+import getUserLatestVersion from 'api/v1/version/getLatestVersion';
+import getUserVersion from 'api/v1/version/getVersion';
 import cx from 'classnames';
 import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -42,7 +42,7 @@ import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQueries } from 'react-query';
 import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { matchPath, useLocation } from 'react-router-dom';
 import { Dispatch } from 'redux';
 import AppActions from 'types/actions';
 import {
@@ -362,6 +362,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		routeKey === 'INFRASTRUCTURE_MONITORING_HOSTS' ||
 		routeKey === 'INFRASTRUCTURE_MONITORING_KUBERNETES';
 	const isTracesFunnels = (): boolean => routeKey === 'TRACES_FUNNELS';
+	const isTracesFunnelDetails = (): boolean =>
+		!!matchPath(pathname, ROUTES.TRACES_FUNNELS_DETAIL);
+
 	const isPathMatch = (regex: RegExp): boolean => regex.test(pathname);
 
 	const isDashboardView = (): boolean =>
@@ -672,7 +675,11 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 												? 0
 												: '0 1rem',
 
-										...(isTraceDetailsView() || isTracesFunnels() ? { margin: 0 } : {}),
+										...(isTraceDetailsView() ||
+										isTracesFunnels() ||
+										isTracesFunnelDetails()
+											? { margin: 0 }
+											: {}),
 									}}
 								>
 									{isToDisplayLayout && !renderFullScreen && <TopNav />}

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.style.scss

@@ -35,13 +35,13 @@
 		font-weight: 500;
 		line-height: 16px;
 		padding: 8px 17px;
-	
+
 		&.primary {
 			background: var(--bg-robin-500);
 			border: none;
 			color: var(--bg-vanilla-100);
 		}
-	
+
 		&.secondary {
 			display: flex;
 			align-items: center;

frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.scss

@@ -45,4 +45,3 @@
 		}
 	}
 }
-