`
+ :hover {
+ .react-resizable-handle {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ bottom: 0;
+ right: 0;
+ background-position: bottom right;
+ padding: 0 3px 3px 0;
+ background-repeat: no-repeat;
+ background-origin: content-box;
+ box-sizing: border-box;
+ cursor: se-resize;
+
+ ${({ isDarkMode }): StyledCSS => {
+ const uri = `data:image/svg+xml,%3Csvg viewBox='0 0 6 6' style='background-color:%23ffffff00' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' x='0px' y='0px' width='6px' height='6px'%0A%3E%3Cg opacity='0.302'%3E%3Cpath d='M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z' fill='${
+ isDarkMode ? 'white' : 'grey'
+ }'/%3E%3C/g%3E%3C/svg%3E`;
+
+ return css`
+ background-image: ${(): string => `url("${uri}")`};
+ `;
+ }}
}
`;
diff --git a/frontend/src/container/IsRouteAccessible/index.tsx b/frontend/src/container/IsRouteAccessible/index.tsx
deleted file mode 100644
index 3e3b246288..0000000000
--- a/frontend/src/container/IsRouteAccessible/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-function IsRouteAccessible(): JSX.Element {
- return asd
;
-}
-
-export default IsRouteAccessible;
diff --git a/frontend/src/container/ListAlertRules/index.tsx b/frontend/src/container/ListAlertRules/index.tsx
index abcf1efe58..2b81729e7e 100644
--- a/frontend/src/container/ListAlertRules/index.tsx
+++ b/frontend/src/container/ListAlertRules/index.tsx
@@ -1,6 +1,7 @@
+import { notification } from 'antd';
import getAll from 'api/alerts/getAll';
import Spinner from 'components/Spinner';
-import React from 'react';
+import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useQuery } from 'react-query';
@@ -8,15 +9,37 @@ import ListAlert from './ListAlert';
function ListAlertRules(): JSX.Element {
const { t } = useTranslation('common');
- const { data, isError, isLoading, refetch } = useQuery('allAlerts', {
+ const { data, isError, isLoading, refetch, status } = useQuery('allAlerts', {
queryFn: getAll,
cacheTime: 0,
});
+ useEffect(() => {
+ if (status === 'error' || (status === 'success' && data.statusCode >= 400)) {
+ notification.error({
+ message: data?.error || t('something_went_wrong'),
+ });
+ }
+ }, [data?.error, data?.statusCode, status, t]);
+
+ // api failed to load the data
if (isError) {
return {data?.error || t('something_went_wrong')}
;
}
+ // api is successful but error is present
+ if (status === 'success' && data.statusCode >= 400) {
+ return (
+
+ );
+ }
+
+ // in case of loading
if (isLoading || !data?.payload) {
return ;
}
diff --git a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
index 24b2d8b753..99f5fb0eeb 100644
--- a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
+++ b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
@@ -77,6 +77,9 @@ function ImportJSON({
...queryData,
queryData: [],
})),
+ error: false,
+ errorMessage: '',
+ loading: false,
},
})),
};
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
index b7c44efac4..fbc1a855ac 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
@@ -16,7 +16,7 @@ import MetricReducer from 'types/reducer/metrics';
import { Card, Col, GraphContainer, GraphTitle, Row } from '../styles';
import TopEndpointsTable from '../TopEndpointsTable';
-import { Button, TableContainerCard } from './styles';
+import { Button } from './styles';
function Application({ getWidget }: DashboardProps): JSX.Element {
const { servicename } = useParams<{ servicename?: string }>();
@@ -48,7 +48,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
);
};
- const onClickhandler = async (
+ const onClickHandler = async (
event: ChartEvent,
elements: ActiveElement[],
chart: Chart,
@@ -119,7 +119,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
{
- onClickhandler(ChartEvent, activeElements, chart, data, 'Application');
+ onClickHandler(ChartEvent, activeElements, chart, data, 'Application');
}}
name="application_latency"
type="line"
@@ -189,7 +189,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
name="request_per_sec"
fullViewOptions={false}
onClickHandler={(event, element, chart, data): void => {
- onClickhandler(event, element, chart, data, 'Request');
+ onClickHandler(event, element, chart, data, 'Request');
}}
widget={getWidget([
{
@@ -223,7 +223,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
name="error_percentage_%"
fullViewOptions={false}
onClickHandler={(ChartEvent, activeElements, chart, data): void => {
- onClickhandler(ChartEvent, activeElements, chart, data, 'Error');
+ onClickHandler(ChartEvent, activeElements, chart, data, 'Error');
}}
widget={getWidget([
{
@@ -238,9 +238,9 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
-
+
-
+