GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-30 22:22:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into 412-trace-detail

Browse Source
This commit is contained in:
palash-signoz 2022-06-08 16:25:31 +05:30 committed by GitHub
commit b3dfd567e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 814 additions and 643 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
deploy/docker-swarm/clickhouse-setup/docker-compose.yaml
View File

@ -28,7 +28,7 @@ services:
volumes:
- ./data/alertmanager:/data
command:
- --queryService.url=http://query-service:8080
- --queryService.url=http://query-service:8085
- --storage.path=/data
depends_on:
- query-service

3
deploy/docker/clickhouse-setup/docker-compose.arm.yaml
View File

@ -30,7 +30,7 @@ services:
condition: service_healthy
restart: on-failure
command:
- --queryService.url=http://query-service:8080
- --queryService.url=http://query-service:8085
- --storage.path=/data
# Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
@ -53,7 +53,6 @@ services:
- GODEBUG=netdns=go
- TELEMETRY_ENABLED=true
- DEPLOYMENT_TYPE=docker-standalone-arm
restart: on-failure
healthcheck:
test: ["CMD", "wget", "--spider", "-q", "localhost:8080/api/v1/version"]

2
deploy/docker/clickhouse-setup/docker-compose.yaml
View File

@ -30,7 +30,7 @@ services:
condition: service_healthy
restart: on-failure
command:
- --queryService.url=http://query-service:8080
- --queryService.url=http://query-service:8085
- --storage.path=/data
# Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`

2
frontend/package.json
View File

@ -68,7 +68,7 @@
"react-dom": "17.0.0",
"react-force-graph": "^1.41.0",
"react-graph-vis": "^1.0.5",
"react-grid-layout": "^1.2.5",
"react-grid-layout": "^1.3.4",
"react-i18next": "^11.16.1",
"react-query": "^3.34.19",
"react-redux": "^7.2.2",

53
frontend/src/container/GridGraphLayout/AddWidget/index.tsx
View File

@ -1,53 +0,0 @@
import { PlusOutlined } from '@ant-design/icons';
import { Typography } from 'antd';
import React, { useCallback } from 'react';
import { connect, useSelector } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import {
ToggleAddWidget,
ToggleAddWidgetProps,
} from 'store/actions/dashboard/toggleAddWidget';
import { AppState } from 'store/reducers';
import AppActions from 'types/actions';
import DashboardReducer from 'types/reducer/dashboards';
import { Button, Container } from './styles';
function AddWidget({ toggleAddWidget }: Props): JSX.Element {
const { isAddWidget } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
const onToggleHandler = useCallback(() => {
toggleAddWidget(true);
}, [toggleAddWidget]);
return (
<Container>
{!isAddWidget ? (
<Button onClick={onToggleHandler} icon={<PlusOutlined />}>
Add Widgets
</Button>
) : (
<Typography>Click a widget icon to add it here</Typography>
)}
</Container>
);
}
interface DispatchProps {
toggleAddWidget: (
props: ToggleAddWidgetProps,
) => (dispatch: Dispatch<AppActions>) => void;
}
const mapDispatchToProps = (
dispatch: ThunkDispatch<unknown, unknown, AppActions>,
): DispatchProps => ({
toggleAddWidget: bindActionCreators(ToggleAddWidget, dispatch),
});
type Props = DispatchProps;
export default connect(null, mapDispatchToProps)(AddWidget);

18
frontend/src/container/GridGraphLayout/AddWidget/styles.ts
View File

@ -1,18 +0,0 @@
import { Button as ButtonComponent } from 'antd';
import styled from 'styled-components';
export const Button = styled(ButtonComponent)`
&&& {
display: flex;
justify-content: center;
align-items: center;
border: none;
}
`;
export const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100%;
`;

16
frontend/src/container/GridGraphLayout/EmptyWidget/index.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Typography } from 'antd';
import React from 'react';
import { Container } from './styles';
function EmptyWidget(): JSX.Element {
return (
<Container>
<Typography.Paragraph>
Click one of the widget types above (Time Series / Value) to add here
</Typography.Paragraph>
</Container>
);
}
export default EmptyWidget;

8
frontend/src/container/GridGraphLayout/EmptyWidget/styles.ts Normal file
View File

@ -0,0 +1,8 @@
import styled from 'styled-components';
export const Container = styled.div`
height: 100%;
display: flex;
justify-content: center;
align-items: center;
`;

222
frontend/src/container/GridGraphLayout/Graph/index.tsx
View File

@ -1,13 +1,14 @@
import { Typography } from 'antd';
import getQueryResult from 'api/widgets/getQuery';
import { AxiosError } from 'axios';
import { ChartData } from 'chart.js';
import Spinner from 'components/Spinner';
import GridGraphComponent from 'container/GridGraphComponent';
import getChartData from 'lib/getChartData';
import GetMaxMinTime from 'lib/getMaxMinTime';
import GetStartAndEndTime from 'lib/getStartAndEndTime';
import React, { useCallback, useEffect, useState } from 'react';
import isEmpty from 'lodash-es/isEmpty';
import React, { memo, useCallback, useState } from 'react';
import { Layout } from 'react-grid-layout';
import { useQueries } from 'react-query';
import { connect, useSelector } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
@ -20,6 +21,8 @@ import AppActions from 'types/actions';
import { GlobalTime } from 'types/actions/globalTime';
import { Widgets } from 'types/api/dashboard/getAll';
import { LayoutProps } from '..';
import EmptyWidget from '../EmptyWidget';
import WidgetHeader from '../WidgetHeader';
import FullView from './FullView';
import { ErrorContainer, FullViewContainer, Modal } from './styles';
@ -27,91 +30,65 @@ import { ErrorContainer, FullViewContainer, Modal } from './styles';
function GridCardGraph({
widget,
deleteWidget,
isDeleted,
name,
yAxisUnit,
layout = [],
setLayout,
}: GridCardGraphProps): JSX.Element {
const [state, setState] = useState<GridCardGraphState>({
loading: true,
errorMessage: '',
error: false,
payload: undefined,
});
const [hovered, setHovered] = useState(false);
const [modal, setModal] = useState(false);
const { minTime, maxTime } = useSelector<AppState, GlobalTime>(
(state) => state.globalTime,
);
const [deleteModal, setDeletModal] = useState(false);
const [deleteModal, setDeleteModal] = useState(false);
useEffect(() => {
(async (): Promise<void> => {
try {
const getMaxMinTime = GetMaxMinTime({
graphType: widget?.panelTypes,
maxTime,
minTime,
});
const getMaxMinTime = GetMaxMinTime({
graphType: widget?.panelTypes,
maxTime,
minTime,
});
const { start, end } = GetStartAndEndTime({
type: widget.timePreferance,
maxTime: getMaxMinTime.maxTime,
minTime: getMaxMinTime.minTime,
});
const { start, end } = GetStartAndEndTime({
type: widget?.timePreferance,
maxTime: getMaxMinTime.maxTime,
minTime: getMaxMinTime.minTime,
});
const response = await Promise.all(
widget.query
.filter((e) => e.query.length !== 0)
.map(async (query) => {
const result = await getQueryResult({
end,
query: encodeURIComponent(query.query),
start,
step: '60',
});
const queryLength = widget?.query?.filter((e) => e.query.length !== 0) || [];
return {
query: query.query,
queryData: result,
legend: query.legend,
};
}),
);
const isError = response.find((e) => e.queryData.statusCode !== 200);
if (isError !== undefined) {
setState((state) => ({
...state,
error: true,
errorMessage: isError.queryData.error || 'Something went wrong',
loading: false,
}));
} else {
const chartDataSet = getChartData({
queryData: response.map((e) => ({
query: e.query,
legend: e.legend,
queryData: e.queryData.payload?.result || [],
})),
const response = useQueries(
queryLength?.map((query) => {
return {
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
queryFn: () => {
return getQueryResult({
end,
query: query?.query,
start,
step: '60',
});
},
queryHash: `${query?.query}-${query?.legend}-${start}-${end}`,
retryOnMount: false,
};
}),
);
setState((state) => ({
...state,
loading: false,
payload: chartDataSet,
}));
}
} catch (error) {
setState((state) => ({
...state,
error: true,
errorMessage: (error as AxiosError).toString(),
loading: false,
}));
}
})();
}, [widget, maxTime, minTime]);
const isError =
response.find((e) => e?.data?.statusCode !== 200) !== undefined ||
response.some((e) => e.isError === true);
const isLoading = response.some((e) => e.isLoading === true);
const errorMessage = response.find((e) => e.data?.error !== null)?.data?.error;
const data = response.map((responseOfQuery) =>
responseOfQuery?.data?.payload?.result.map((e, index) => ({
query: queryLength[index]?.query,
queryData: e,
legend: queryLength[index]?.legend,
})),
);
const onToggleModal = useCallback(
(func: React.Dispatch<React.SetStateAction<boolean>>) => {
@ -121,18 +98,20 @@ function GridCardGraph({
);
const onDeleteHandler = useCallback(() => {
deleteWidget({ widgetId: widget.id });
onToggleModal(setDeletModal);
// eslint-disable-next-line no-param-reassign
isDeleted.current = true;
}, [deleteWidget, widget, onToggleModal, isDeleted]);
const isEmptyWidget = widget?.id === 'empty' || isEmpty(widget);
const widgetId = isEmptyWidget ? layout[0].i : widget?.id;
deleteWidget({ widgetId, setLayout });
onToggleModal(setDeleteModal);
}, [deleteWidget, layout, onToggleModal, setLayout, widget]);
const getModals = (): JSX.Element => {
return (
<>
<Modal
destroyOnClose
onCancel={(): void => onToggleModal(setDeletModal)}
onCancel={(): void => onToggleModal(setDeleteModal)}
visible={deleteModal}
title="Delete"
height="10vh"
@ -163,7 +142,16 @@ function GridCardGraph({
);
};
if (state.error) {
const isEmptyLayout = widget?.id === 'empty' || isEmpty(widget);
if (isLoading) {
return <Spinner height="20vh" tip="Loading..." />;
}
if (
(isError || data === undefined || data[0] === undefined) &&
!isEmptyLayout
) {
return (
<>
{getModals()}
@ -172,17 +160,21 @@ function GridCardGraph({
title={widget?.title}
widget={widget}
onView={(): void => onToggleModal(setModal)}
onDelete={(): void => onToggleModal(setDeletModal)}
onDelete={(): void => onToggleModal(setDeleteModal)}
/>
<ErrorContainer>{state.errorMessage}</ErrorContainer>
<ErrorContainer>{errorMessage}</ErrorContainer>
</>
);
}
if (state.loading === true || state.payload === undefined) {
return <Spinner height="20vh" tip="Loading..." />;
}
const chartData = getChartData({
queryData: data.map((e) => ({
query: e?.map((e) => e.query).join(' ') || '',
queryData: e?.map((e) => e.queryData) || [],
legend: e?.map((e) => e.legend).join('') || '',
})),
});
return (
<span
@ -199,38 +191,37 @@ function GridCardGraph({
setHovered(false);
}}
>
<WidgetHeader
parentHover={hovered}
title={widget.title}
widget={widget}
onView={(): void => onToggleModal(setModal)}
onDelete={(): void => onToggleModal(setDeletModal)}
/>
{!isEmptyLayout && (
<WidgetHeader
parentHover={hovered}
title={widget?.title}
widget={widget}
onView={(): void => onToggleModal(setModal)}
onDelete={(): void => onToggleModal(setDeleteModal)}
/>
)}
{getModals()}
{!isEmptyLayout && getModals()}
<GridGraphComponent
{...{
GRAPH_TYPES: widget.panelTypes,
data: state.payload,
isStacked: widget.isStacked,
opacity: widget.opacity,
title: ' ', // empty title to accommodate absolutely positioned widget header
name,
yAxisUnit,
}}
/>
{!isEmpty(widget) && (
<GridGraphComponent
{...{
GRAPH_TYPES: widget.panelTypes,
data: chartData,
isStacked: widget.isStacked,
opacity: widget.opacity,
title: ' ', // empty title to accommodate absolutely positioned widget header
name,
yAxisUnit,
}}
/>
)}
{isEmptyLayout && <EmptyWidget />}
</span>
);
}
interface GridCardGraphState {
loading: boolean;
error: boolean;
errorMessage: string;
payload: ChartData | undefined;
}
interface DispatchProps {
deleteWidget: ({
widgetId,
@ -239,9 +230,12 @@ interface DispatchProps {
interface GridCardGraphProps extends DispatchProps {
widget: Widgets;
isDeleted: React.MutableRefObject<boolean>;
name: string;
yAxisUnit: string | undefined;
// eslint-disable-next-line react/require-default-props
layout?: Layout[];
// eslint-disable-next-line react/require-default-props
setLayout?: React.Dispatch<React.SetStateAction<LayoutProps[]>>;
}
const mapDispatchToProps = (
@ -250,4 +244,4 @@ const mapDispatchToProps = (
deleteWidget: bindActionCreators(DeleteWidget, dispatch),
});
export default connect(null, mapDispatchToProps)(GridCardGraph);
export default connect(null, mapDispatchToProps)(memo(GridCardGraph));

101
frontend/src/container/GridGraphLayout/GraphLayout.tsx Normal file
View File

@ -0,0 +1,101 @@
import { PlusOutlined, SaveFilled } from '@ant-design/icons';
import useComponentPermission from 'hooks/useComponentPermission';
import React from 'react';
import { Layout } from 'react-grid-layout';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { Widgets } from 'types/api/dashboard/getAll';
import AppReducer from 'types/reducer/app';
import { LayoutProps, State } from '.';
import {
Button,
ButtonContainer,
Card,
CardContainer,
ReactGridLayout,
} from './styles';
function GraphLayout({
layouts,
saveLayoutState,
onLayoutSaveHandler,
addPanelLoading,
onAddPanelHandler,
onLayoutChangeHandler,
widgets,
setLayout,
}: GraphLayoutProps): JSX.Element {
const { role } = useSelector<AppState, AppReducer>((state) => state.app);
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
const [saveLayout] = useComponentPermission(['save_layout'], role);
return (
<>
<ButtonContainer>
{saveLayout && (
<Button
loading={saveLayoutState.loading}
onClick={(): Promise<void> => onLayoutSaveHandler(layouts)}
icon={<SaveFilled />}
danger={saveLayoutState.error}
>
Save Layout
</Button>
)}
<Button
loading={addPanelLoading}
disabled={addPanelLoading}
onClick={onAddPanelHandler}
icon={<PlusOutlined />}
>
Add Panel
</Button>
</ButtonContainer>
<ReactGridLayout
isResizable
cols={12}
rowHeight={100}
autoSize
width={100}
isDraggable
isDroppable
useCSSTransforms
allowOverlap={false}
onLayoutChange={onLayoutChangeHandler}
>
{layouts.map(({ Component, ...rest }) => {
const currentWidget = (widgets || [])?.find((e) => e.id === rest.i);
return (
<CardContainer
isDarkMode={isDarkMode}
key={currentWidget?.id || 'empty'} // don't change this key
data-grid={rest}
>
<Card>
<Component setLayout={setLayout} />
</Card>
</CardContainer>
);
})}
</ReactGridLayout>
</>
);
}
interface GraphLayoutProps {
layouts: LayoutProps[];
saveLayoutState: State;
onLayoutSaveHandler: (layout: Layout[]) => Promise<void>;
addPanelLoading: boolean;
onAddPanelHandler: VoidFunction;
onLayoutChangeHandler: (layout: Layout[]) => Promise<void>;
widgets: Widgets[] | undefined;
setLayout: React.Dispatch<React.SetStateAction<LayoutProps[]>>;
}
export default GraphLayout;

2
frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx
View File

@ -104,7 +104,7 @@ function WidgetHeader({
overlay={menu}
trigger={['click']}
overlayStyle={{ minWidth: 100 }}
placement="bottomCenter"
placement="bottom"
>
<HeaderContainer
onMouseOver={(): void => setLocalHover(true)}

479
frontend/src/container/GridGraphLayout/index.tsx
View File

@ -1,285 +1,288 @@
/* eslint-disable react/no-unstable-nested-components */
import { SaveFilled } from '@ant-design/icons';
import { notification } from 'antd';
import updateDashboardApi from 'api/dashboard/update';
import Spinner from 'components/Spinner';
import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
import useComponentPermission from 'hooks/useComponentPermission';
import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { Layout } from 'react-grid-layout';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import AppReducer from 'types/reducer/app';
import DashboardReducer from 'types/reducer/dashboards';
import { v4 } from 'uuid';
import AddWidget from './AddWidget';
import Graph from './Graph';
import { useTranslation } from 'react-i18next';
import { connect, useDispatch, useSelector } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import {
Button,
ButtonContainer,
Card,
CardContainer,
ReactGridLayout,
} from './styles';
import { updateDashboard } from './utils';
ToggleAddWidget,
ToggleAddWidgetProps,
} from 'store/actions/dashboard/toggleAddWidget';
import { AppState } from 'store/reducers';
import AppActions from 'types/actions';
import { UPDATE_DASHBOARD } from 'types/actions/dashboard';
import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
import DashboardReducer from 'types/reducer/dashboards';
function GridGraph(): JSX.Element {
const { dashboards, loading } = useSelector<AppState, DashboardReducer>(
import Graph from './Graph';
import GraphLayoutContainer from './GraphLayout';
import { UpdateDashboard } from './utils';
export const getPreLayouts = (
widgets: Widgets[] | undefined,
layout: Layout[],
): LayoutProps[] =>
layout.map((e, index) => ({
...e,
Component: ({ setLayout }: ComponentProps): JSX.Element => {
const widget = widgets?.find((widget) => widget.id === e.i);
return (
<Graph
name={e.i + index}
widget={widget as Widgets}
yAxisUnit={widget?.yAxisUnit}
layout={layout}
setLayout={setLayout}
/>
);
},
}));
function GridGraph(props: Props): JSX.Element {
const { toggleAddWidget } = props;
const [addPanelLoading, setAddPanelLoading] = useState(false);
const { t } = useTranslation(['common']);
const { dashboards, isAddWidget } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
const [saveLayoutState, setSaveLayoutState] = useState<State>({
loading: false,
error: false,
errorMessage: '',
payload: [],
});
const [selectedDashboard] = dashboards;
const { data } = selectedDashboard;
const { widgets } = data;
const [layouts, setLayout] = useState<LayoutProps[]>([]);
const dispatch = useDispatch<Dispatch<AppActions>>();
const AddWidgetWrapper = useCallback(() => <AddWidget />, []);
const isMounted = useRef(true);
const isDeleted = useRef(false);
const { role } = useSelector<AppState, AppReducer>((state) => state.app);
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
const [saveLayout] = useComponentPermission(['save_layout'], role);
const getPreLayouts: () => LayoutProps[] = useCallback(() => {
if (widgets === undefined) {
return [];
}
// when the layout is not present
if (data.layout === undefined) {
return widgets.map((e, index) => {
return {
h: 2,
w: 6,
y: Infinity,
i: (index + 1).toString(),
x: (index % 2) * 6,
Component: (): JSX.Element => (
<Graph
name={`${e.id + index}non-expanded`}
isDeleted={isDeleted}
widget={widgets[index]}
yAxisUnit={e.yAxisUnit}
/>
),
};
});
}
return data.layout
.filter((_, index) => widgets[index])
.map((e, index) => ({
...e,
Component: (): JSX.Element => {
if (widgets[index]) {
return (
<Graph
name={e.i + index}
isDeleted={isDeleted}
widget={widgets[index]}
yAxisUnit={widgets[index].yAxisUnit}
/>
);
}
return <div />;
},
}));
}, [widgets, data?.layout]);
const [layouts, setLayout] = useState<LayoutProps[]>(
getPreLayouts(widgets, selectedDashboard.data.layout || []),
);
useEffect(() => {
if (
loading === false &&
(isMounted.current === true || isDeleted.current === true)
) {
const preLayouts = getPreLayouts();
setLayout(() => {
const getX = (): number => {
if (preLayouts && preLayouts?.length > 0) {
const last = preLayouts[(preLayouts?.length || 0) - 1];
(async (): Promise<void> => {
if (!isAddWidget) {
const isEmptyLayoutPresent = layouts.find((e) => e.i === 'empty');
if (isEmptyLayoutPresent) {
// non empty layout
const updatedLayout = layouts.filter((e) => e.i !== 'empty');
// non widget
const updatedWidget = widgets?.filter((e) => e.id !== 'empty');
setLayout(updatedLayout);
return (last.w + last.x) % 12;
}
return 0;
};
const updatedDashboard: Dashboard = {
...selectedDashboard,
data: {
...selectedDashboard.data,
layout: updatedLayout,
widgets: updatedWidget,
},
};
return [
...preLayouts,
{
i: (preLayouts.length + 1).toString(),
x: getX(),
y: Infinity,
w: 6,
h: 2,
Component: AddWidgetWrapper,
maxW: 6,
isDraggable: false,
isResizable: false,
isBounded: true,
},
];
});
}
return (): void => {
isMounted.current = false;
};
}, [widgets, layouts.length, AddWidgetWrapper, loading, getPreLayouts]);
const onDropHandler = useCallback(
async (allLayouts: Layout[], currentLayout: Layout, event: DragEvent) => {
event.preventDefault();
if (event.dataTransfer) {
try {
const graphType = event.dataTransfer.getData('text') as GRAPH_TYPES;
const generateWidgetId = v4();
await updateDashboard({
data,
generateWidgetId,
graphType,
selectedDashboard,
layout: allLayouts
.map((e, index) => ({
...e,
i: index.toString(),
// when a new element drops
w: e.i === '__dropping-elem__' ? 6 : e.w,
h: e.i === '__dropping-elem__' ? 2 : e.h,
}))
// removing add widgets layout config
.filter((e) => e.maxW === undefined),
await updateDashboardApi({
data: updatedDashboard.data,
uuid: updatedDashboard.uuid,
});
} catch (error) {
notification.error({
message:
error instanceof Error ? error.toString() : 'Something went wrong',
dispatch({
type: UPDATE_DASHBOARD,
payload: updatedDashboard,
});
}
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const onLayoutSaveHandler = useCallback(
async (layout: Layout[]) => {
try {
setSaveLayoutState((state) => ({
...state,
error: false,
errorMessage: '',
loading: true,
}));
const response = await updateDashboardApi({
data: {
title: data.title,
description: data.description,
name: data.name,
tags: data.tags,
widgets: data.widgets,
layout,
},
uuid: selectedDashboard.uuid,
});
if (response.statusCode === 200) {
setSaveLayoutState((state) => ({
...state,
error: false,
errorMessage: '',
loading: false,
}));
} else {
setSaveLayoutState((state) => ({
...state,
error: true,
errorMessage: response.error || 'Something went wrong',
loading: false,
}));
}
} catch (error) {
console.error(error);
}
},
[data, selectedDashboard],
[
data.description,
data.name,
data.tags,
data.title,
data.widgets,
selectedDashboard.uuid,
],
);
const onLayoutSaveHandler = async (): Promise<void> => {
setSaveLayoutState((state) => ({
...state,
error: false,
errorMessage: '',
loading: true,
}));
const setLayoutFunction = useCallback(
(layout: Layout[]) => {
setLayout(
layout.map((e) => {
const currentWidget =
widgets?.find((widget) => widget.id === e.i) || ({} as Widgets);
const response = await updateDashboardApi({
data: {
title: data.title,
description: data.description,
name: data.name,
tags: data.tags,
widgets: data.widgets,
layout: saveLayoutState.payload.filter((e) => e.maxW === undefined),
},
uuid: selectedDashboard.uuid,
});
if (response.statusCode === 200) {
setSaveLayoutState((state) => ({
...state,
error: false,
errorMessage: '',
loading: false,
}));
} else {
setSaveLayoutState((state) => ({
...state,
error: true,
errorMessage: response.error || 'Something went wrong',
loading: false,
}));
return {
...e,
Component: (): JSX.Element => (
<Graph
name={currentWidget.id}
widget={currentWidget}
yAxisUnit={currentWidget?.yAxisUnit}
layout={layout}
setLayout={setLayout}
/>
),
};
}),
);
},
[widgets],
);
const onEmptyWidgetHandler = useCallback(async () => {
try {
const id = 'empty';
const layout = [
{
i: id,
w: 6,
x: 0,
h: 2,
y: 0,
},
...(data.layout || []),
];
await UpdateDashboard({
data,
generateWidgetId: id,
graphType: 'EMPTY_WIDGET',
selectedDashboard,
layout,
isRedirected: false,
});
setLayoutFunction(layout);
} catch (error) {
notification.error({
message: error instanceof Error ? error.toString() : 'Something went wrong',
});
}
}, [data, selectedDashboard, setLayoutFunction]);
const onLayoutChangeHandler = async (layout: Layout[]): Promise<void> => {
setLayoutFunction(layout);
await onLayoutSaveHandler(layout);
};
const onLayoutChangeHandler = (layout: Layout[]): void => {
setSaveLayoutState({
loading: false,
error: false,
errorMessage: '',
payload: layout,
});
};
const onAddPanelHandler = useCallback(() => {
try {
setAddPanelLoading(true);
const isEmptyLayoutPresent =
layouts.find((e) => e.i === 'empty') !== undefined;
if (layouts.length === 0) {
return <Spinner height="40vh" size="large" tip="Loading..." />;
}
if (!isEmptyLayoutPresent) {
onEmptyWidgetHandler()
.then(() => {
setAddPanelLoading(false);
toggleAddWidget(true);
})
.catch(() => {
notification.error(t('something_went_wrong'));
});
} else {
toggleAddWidget(true);
setAddPanelLoading(false);
}
} catch (error) {
if (typeof error === 'string') {
notification.error({
message: error || t('something_went_wrong'),
});
}
}
}, [layouts, onEmptyWidgetHandler, t, toggleAddWidget]);
return (
<>
{saveLayout && (
<ButtonContainer>
<Button
loading={saveLayoutState.loading}
onClick={onLayoutSaveHandler}
icon={<SaveFilled />}
danger={saveLayoutState.error}
>
Save Layout
</Button>
</ButtonContainer>
)}
<ReactGridLayout
isResizable
isDraggable
cols={12}
rowHeight={100}
autoSize
width={100}
isDroppable
useCSSTransforms
onDrop={onDropHandler}
onLayoutChange={onLayoutChangeHandler}
>
{layouts.map(({ Component, ...rest }, index) => {
const widget = (widgets || [])[index] || {};
const type = widget?.panelTypes || 'TIME_SERIES';
const isQueryType = type === 'VALUE';
return (
<CardContainer
isQueryType={isQueryType}
isDarkMode={isDarkMode}
key={rest.i + JSON.stringify(widget)}
data-grid={rest}
>
<Card isDarkMode={isDarkMode} isQueryType={isQueryType}>
<Component />
</Card>
</CardContainer>
);
})}
</ReactGridLayout>
</>
<GraphLayoutContainer
{...{
addPanelLoading,
layouts,
onAddPanelHandler,
onLayoutChangeHandler,
onLayoutSaveHandler,
saveLayoutState,
widgets,
setLayout,
}}
/>
);
}
interface LayoutProps extends Layout {
Component: () => JSX.Element;
interface ComponentProps {
setLayout: React.Dispatch<React.SetStateAction<LayoutProps[]>>;
}
interface State {
export interface LayoutProps extends Layout {
Component: (props: ComponentProps) => JSX.Element;
}
export interface State {
loading: boolean;
error: boolean;
payload: Layout[];
errorMessage: string;
}
export default memo(GridGraph);
interface DispatchProps {
toggleAddWidget: (
props: ToggleAddWidgetProps,
) => (dispatch: Dispatch<AppActions>) => void;
}
const mapDispatchToProps = (
dispatch: ThunkDispatch<unknown, unknown, AppActions>,
): DispatchProps => ({
toggleAddWidget: bindActionCreators(ToggleAddWidget, dispatch),
});
type Props = DispatchProps;
export default connect(null, mapDispatchToProps)(GridGraph);

22
frontend/src/container/GridGraphLayout/styles.ts
View File

@ -1,14 +1,11 @@
import { Button as ButtonComponent, Card as CardComponent } from 'antd';
import { Button as ButtonComponent, Card as CardComponent, Space } from 'antd';
import { StyledCSS } from 'container/GantChart/Trace/styles';
import RGL, { WidthProvider } from 'react-grid-layout';
import styled, { css } from 'styled-components';
const ReactGridLayoutComponent = WidthProvider(RGL);
interface Props {
isQueryType: boolean;
}
export const Card = styled(CardComponent)<Props>`
export const Card = styled(CardComponent)`
&&& {
height: 100%;
}
@ -54,9 +51,22 @@ export const ReactGridLayout = styled(ReactGridLayoutComponent)`
border: 1px solid #434343;
margin-top: 1rem;
position: relative;
min-height: 40vh;
.react-grid-item.react-grid-placeholder {
background: grey;
opacity: 0.2;
transition-duration: 100ms;
z-index: 2;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
`;
export const ButtonContainer = styled.div`
export const ButtonContainer = styled(Space)`
display: flex;
justify-content: end;
margin-top: 1rem;

33
frontend/src/container/GridGraphLayout/utils.ts
View File

@ -1,18 +1,20 @@
import { notification } from 'antd';
import updateDashboardApi from 'api/dashboard/update';
import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
import history from 'lib/history';
import { Layout } from 'react-grid-layout';
import store from 'store';
import { Dashboard } from 'types/api/dashboard/getAll';
export const updateDashboard = async ({
export const UpdateDashboard = async ({
data,
graphType,
generateWidgetId,
layout,
selectedDashboard,
}: UpdateDashboardProps): Promise<void> => {
const response = await updateDashboardApi({
isRedirected,
}: UpdateDashboardProps): Promise<Dashboard | undefined> => {
const updatedSelectedDashboard: Dashboard = {
...selectedDashboard,
data: {
title: data.title,
description: data.description,
@ -46,17 +48,27 @@ export const updateDashboard = async ({
layout,
},
uuid: selectedDashboard.uuid,
});
};
if (response.statusCode === 200) {
history.push(
`${history.location.pathname}/new?graphType=${graphType}&widgetId=${generateWidgetId}`,
);
} else {
const response = await updateDashboardApi(updatedSelectedDashboard);
if (response.payload) {
store.dispatch({
type: 'UPDATE_DASHBOARD',
payload: response.payload,
});
}
if (isRedirected) {
if (response.statusCode === 200) {
return response.payload;
}
notification.error({
message: response.error || 'Something went wrong',
});
return undefined;
}
return undefined;
};
interface UpdateDashboardProps {
@ -65,4 +77,5 @@ interface UpdateDashboardProps {
generateWidgetId: string;
layout: Layout[];
selectedDashboard: Dashboard;
isRedirected: boolean;
}

19
frontend/src/container/ListOfDashboard/index.tsx
View File

@ -15,11 +15,19 @@ import ROUTES from 'constants/routes';
import SearchFilter from 'container/ListOfDashboard/SearchFilter';
import useComponentPermission from 'hooks/useComponentPermission';
import history from 'lib/history';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import React, {
Dispatch,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { generatePath } from 'react-router-dom';
import { AppState } from 'store/reducers';
import AppActions from 'types/actions';
import { GET_ALL_DASHBOARD_SUCCESS } from 'types/actions/dashboard';
import { Dashboard } from 'types/api/dashboard/getAll';
import AppReducer from 'types/reducer/app';
import DashboardReducer from 'types/reducer/dashboards';
@ -36,6 +44,7 @@ function ListOfAllDashboard(): JSX.Element {
const { dashboards, loading } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
const dispatch = useDispatch<Dispatch<AppActions>>();
const { role } = useSelector<AppState, AppReducer>((state) => state.app);
const [action, createNewDashboard, newDashboard] = useComponentPermission(
@ -131,6 +140,10 @@ function ListOfAllDashboard(): JSX.Element {
});
if (response.statusCode === 200) {
dispatch({
type: GET_ALL_DASHBOARD_SUCCESS,
payload: [],
});
history.push(
generatePath(ROUTES.DASHBOARD, {
dashboardId: response.payload.uuid,
@ -151,7 +164,7 @@ function ListOfAllDashboard(): JSX.Element {
errorMessage: (error as AxiosError).toString() || 'Something went Wrong',
});
}
}, [newDashboardState, t]);
}, [newDashboardState, t, dispatch]);
const getText = useCallback(() => {
if (!newDashboardState.error && !newDashboardState.loading) {

2
frontend/src/container/MetricsTable/SkipOnBoardModal/index.tsx
View File

@ -18,7 +18,7 @@ function SkipOnBoardingModal({ onContinueClick }: Props): JSX.Element {
<iframe
width="100%"
height="265"
src="https://www.youtube.com/embed/Ly34WBQ2640"
src="https://www.youtube.com/embed/J1Bof55DOb4"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen

82
frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
View File

@ -1,17 +1,23 @@
/* eslint-disable @typescript-eslint/naming-convention */
import { notification } from 'antd';
import { updateDashboard } from 'container/GridGraphLayout/utils';
import history from 'lib/history';
import React, { useCallback } from 'react';
import { useSelector } from 'react-redux';
import { connect, useSelector } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import {
ToggleAddWidget,
ToggleAddWidgetProps,
} from 'store/actions/dashboard/toggleAddWidget';
import { AppState } from 'store/reducers';
import AppActions from 'types/actions';
import AppReducer from 'types/reducer/app';
import DashboardReducer from 'types/reducer/dashboards';
import { v4 as uuid } from 'uuid';
import menuItems, { ITEMS } from './menuItems';
import { Card, Container, Text } from './styles';
function DashboardGraphSlider(): JSX.Element {
function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element {
const { dashboards } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
@ -19,47 +25,30 @@ function DashboardGraphSlider(): JSX.Element {
const [selectedDashboard] = dashboards;
const { data } = selectedDashboard;
const onDragStartHandler: React.DragEventHandler<HTMLDivElement> = useCallback(
(event: React.DragEvent<HTMLDivElement>) => {
event.dataTransfer.setData('text/plain', event.currentTarget.id);
},
[],
);
const onClickHandler = useCallback(
async (name: ITEMS) => {
try {
const getX = (): number => {
if (data.layout && data.layout?.length > 0) {
const lastIndexX = data.layout[(data.layout?.length || 0) - 1];
return (lastIndexX.w + lastIndexX.x) % 12;
}
return 0;
};
const emptyLayout = data.layout?.find((e) => e.i === 'empty');
await updateDashboard({
data,
generateWidgetId: uuid(),
graphType: name,
layout: [
...(data.layout || []),
{
h: 2,
i: (((data.layout || [])?.length || 0) + 1).toString(),
w: 6,
x: getX(),
y: 0,
},
],
selectedDashboard,
});
if (emptyLayout === undefined) {
notification.error({
message: 'Please click on Add Panel Button',
});
return;
}
toggleAddWidget(false);
history.push(
`${history.location.pathname}/new?graphType=${name}&widgetId=${emptyLayout.i}`,
);
} catch (error) {
notification.error({
message: 'Something went wrong',
});
}
},
[data, selectedDashboard],
[data, toggleAddWidget],
);
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
const fillColor: React.CSSProperties['color'] = isDarkMode ? 'white' : 'black';
@ -68,11 +57,12 @@ function DashboardGraphSlider(): JSX.Element {
<Container>
{menuItems.map(({ name, Icon, display }) => (
<Card
onClick={(): Promise<void> => onClickHandler(name)}
onClick={(event): void => {
event.preventDefault();
onClickHandler(name);
}}
id={name}
onDragStart={onDragStartHandler}
key={name}
draggable
>
<Icon fillColor={fillColor} />
<Text>{display}</Text>
@ -84,4 +74,18 @@ function DashboardGraphSlider(): JSX.Element {
export type GRAPH_TYPES = ITEMS;
export default DashboardGraphSlider;
interface DispatchProps {
toggleAddWidget: (
props: ToggleAddWidgetProps,
) => (dispatch: Dispatch<AppActions>) => void;
}
const mapDispatchToProps = (
dispatch: ThunkDispatch<unknown, unknown, AppActions>,
): DispatchProps => ({
toggleAddWidget: bindActionCreators(ToggleAddWidget, dispatch),
});
type Props = DispatchProps;
export default connect(null, mapDispatchToProps)(DashboardGraphSlider);

2
frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts
View File

@ -14,7 +14,7 @@ const Items: ItemsProps[] = [
},
];
export type ITEMS = 'TIME_SERIES' | 'VALUE';
export type ITEMS = 'TIME_SERIES' | 'VALUE' | 'EMPTY_WIDGET';
interface ItemsProps {
name: ITEMS;

8
frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
View File

@ -5,7 +5,6 @@ import React, { memo } from 'react';
import { useSelector } from 'react-redux';
import { useLocation } from 'react-router-dom';
import { AppState } from 'store/reducers';
import AppReducer from 'types/reducer/app';
import DashboardReducer from 'types/reducer/dashboards';
import { NewWidgetProps } from '../../index';
@ -19,7 +18,6 @@ function WidgetGraph({
const { dashboards, isQueryFired } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
const [selectedDashboard] = dashboards;
const { search } = useLocation();
@ -33,11 +31,7 @@ function WidgetGraph({
const selectedWidget = widgets.find((e) => e.id === widgetId);
if (selectedWidget === undefined) {
return (
<Card isDarkMode={isDarkMode} isQueryType={false}>
Invalid widget
</Card>
);
return <Card>Invalid widget</Card>;
}
const { queryData } = selectedWidget;

14
frontend/src/pages/NewDashboard/index.tsx
View File

@ -19,16 +19,20 @@ function NewDashboardPage({ getDashboard }: NewDashboardProps): JSX.Element {
const { dashboardId } = useParams<Params>();
useEffect(() => {
getDashboard({
uuid: dashboardId,
});
}, [getDashboard, dashboardId]);
if (dashboards.length !== 1) {
getDashboard({
uuid: dashboardId,
});
}
}, [getDashboard, dashboardId, dashboards.length]);
if (error && !loading && dashboards.length === 0) {
return <div>{errorMessage}</div>;
}
if (loading || dashboards.length === 0) {
// when user comes from dashboard page. dashboard array is populated with some dashboard as dashboard is populated
// so to avoid any unmount call dashboard must have length zero
if (loading || dashboards.length === 0 || dashboards.length !== 1) {
return <Spinner tip="Loading.." />;
}

3
frontend/src/pages/SignUp/SignUp.tsx
View File

@ -340,7 +340,8 @@ function SignUp({ version }: SignUpProps): JSX.Element {
!organizationName ||
!password ||
!confirmPassword ||
confirmPasswordError
confirmPasswordError ||
isPasswordPolicyError
}
>
Get Started

25
frontend/src/store/actions/dashboard/deleteWidget.ts
View File

@ -1,12 +1,15 @@
import updateDashboardApi from 'api/dashboard/update';
import { AxiosError } from 'axios';
import { getPreLayouts, LayoutProps } from 'container/GridGraphLayout';
import { Dispatch } from 'redux';
import store from 'store';
import AppActions from 'types/actions';
import { Widgets } from 'types/api/dashboard/getAll';
import { UPDATE_DASHBOARD } from 'types/actions/dashboard';
import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
export const DeleteWidget = ({
widgetId,
setLayout,
}: DeleteWidgetProps): ((dispatch: Dispatch<AppActions>) => void) => {
return async (dispatch: Dispatch<AppActions>): Promise<void> => {
try {
@ -15,25 +18,32 @@ export const DeleteWidget = ({
const { widgets = [] } = selectedDashboard.data;
const updatedWidgets = widgets.filter((e) => e.id !== widgetId);
const updatedLayout =
selectedDashboard.data.layout?.filter((e) => e.i !== widgetId) || [];
const response = await updateDashboardApi({
const updatedSelectedDashboard: Dashboard = {
...selectedDashboard,
data: {
title: selectedDashboard.data.title,
description: selectedDashboard.data.description,
name: selectedDashboard.data.name,
tags: selectedDashboard.data.tags,
widgets: updatedWidgets,
layout: updatedLayout,
},
uuid: selectedDashboard.uuid,
});
};
const response = await updateDashboardApi(updatedSelectedDashboard);
if (response.statusCode === 200) {
dispatch({
type: 'DELETE_WIDGET_SUCCESS',
payload: {
widgetId,
},
type: UPDATE_DASHBOARD,
payload: updatedSelectedDashboard,
});
if (setLayout) {
setLayout(getPreLayouts(updatedWidgets, updatedLayout));
}
} else {
dispatch({
type: 'DELETE_WIDGET_ERROR',
@ -55,4 +65,5 @@ export const DeleteWidget = ({
export interface DeleteWidgetProps {
widgetId: Widgets['id'];
setLayout?: React.Dispatch<React.SetStateAction<LayoutProps[]>>;
}

33
frontend/src/store/actions/dashboard/saveDashboard.ts
View File

@ -2,11 +2,13 @@ import updateDashboardApi from 'api/dashboard/update';
import { AxiosError } from 'axios';
import ROUTES from 'constants/routes';
import history from 'lib/history';
import { Layout } from 'react-grid-layout';
import { generatePath } from 'react-router-dom';
import { Dispatch } from 'redux';
import store from 'store';
import AppActions from 'types/actions';
import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
import { v4 } from 'uuid';
export const SaveDashboard = ({
uuid,
@ -20,9 +22,11 @@ export const SaveDashboard = ({
dashboardId,
yAxisUnit,
}: SaveDashboardProps): ((dispatch: Dispatch<AppActions>) => void) => {
// eslint-disable-next-line sonarjs/cognitive-complexity
return async (dispatch: Dispatch<AppActions>): Promise<void> => {
try {
const dashboard = store.getState();
const search = new URLSearchParams(history.location.search);
const selectedDashboard = dashboard.dashboards.dashboards.find(
(e) => e.uuid === uuid,
@ -46,16 +50,41 @@ export const SaveDashboard = ({
(e) => e.id === widgetId,
);
const isEmptyWidget = widgetId === 'empty';
const emptyLayoutIndex = data.layout?.findIndex((e) => e.i === 'empty');
const newWidgetId = v4();
const preWidget = data.widgets?.slice(0, selectedWidgetIndex) || [];
const afterWidget =
data.widgets?.slice(
(selectedWidgetIndex || 0) + 1, // this is never undefined
data.widgets?.length,
) || [];
const selectedWidget = (selectedDashboard.data.widgets || [])[
selectedWidgetIndex || 0
];
const getAllLayout = (): Layout[] => {
const allLayout = data.layout || [];
// empty layout is not present
if (emptyLayoutIndex === -1 || emptyLayoutIndex === undefined) {
return allLayout;
}
return [
...allLayout.slice(0, emptyLayoutIndex),
{ ...allLayout[emptyLayoutIndex], i: newWidgetId },
...allLayout.slice(emptyLayoutIndex + 1, allLayout.length),
];
};
const allLayout = getAllLayout();
const response = await updateDashboardApi({
data: {
...selectedDashboard.data,
@ -64,19 +93,21 @@ export const SaveDashboard = ({
description: selectedDashboard.data.description,
tags: selectedDashboard.data.tags,
name: selectedDashboard.data.name,
layout: allLayout,
// as we are updated the widget only
widgets: [
...preWidget,
{
...selectedWidget,
description: updatedDescription,
id: widgetId,
id: isEmptyWidget ? newWidgetId : widgetId,
isStacked: updatedisStacked,
nullZeroValues: updatednullZeroValues,
opacity: updatedopacity,
title: updatedTitle,
timePreferance: updatedtimePreferance,
yAxisUnit: updatedYAxisUnit,
panelTypes: search.get('graphType') as Widgets['panelTypes'],
queryData: {
...selectedWidget.queryData,
data: [

2
frontend/src/store/actions/trace/getInitialFilter.ts
View File

@ -191,7 +191,7 @@ export const GetInitialTraceFilter = (
},
});
} catch (error) {
console.log(error);
console.error(error);
dispatch({
type: UPDATE_TRACE_FILTER_LOADING,
payload: {

2
frontend/src/store/actions/trace/parseFilter/filter.ts
View File

@ -26,7 +26,7 @@ export const parseQueryIntoFilter = (
});
}
} catch (error) {
console.log(error);
console.error(error);
}
}

2
frontend/src/store/actions/trace/parseFilter/spanAggregateCurrentPageSize.ts
View File

@ -19,7 +19,7 @@ export const parseQueryIntoPageSize = (
current = parseInt(parsedValue, 10);
}
} catch (error) {
console.log('error while parsing json');
console.error('error while parsing json');
}
}

8
frontend/src/store/reducers/dashboard.ts
View File

@ -17,6 +17,7 @@ import {
QUERY_SUCCESS,
SAVE_SETTING_TO_PANEL_SUCCESS,
TOGGLE_EDIT_MODE,
UPDATE_DASHBOARD,
UPDATE_QUERY,
UPDATE_TITLE_DESCRIPTION_TAGS_SUCCESS,
} from 'types/actions/dashboard';
@ -355,7 +356,8 @@ const dashboard = (
};
}
case SAVE_SETTING_TO_PANEL_SUCCESS: {
case SAVE_SETTING_TO_PANEL_SUCCESS:
case UPDATE_DASHBOARD: {
const selectedDashboard = action.payload;
return {
@ -369,7 +371,7 @@ const dashboard = (
}
case DELETE_WIDGET_SUCCESS: {
const { widgetId } = action.payload;
const { widgetId, layout } = action.payload;
const { dashboards } = state;
const [selectedDashboard] = dashboards;
@ -384,6 +386,7 @@ const dashboard = (
data: {
...data,
widgets: widgets.filter((e) => e.id !== widgetId),
layout,
},
},
],
@ -480,6 +483,7 @@ const dashboard = (
],
};
}
default:
return state;
}

2
frontend/src/types/actions/dashboard.ts
View File

@ -1,3 +1,4 @@
import { Layout } from 'react-grid-layout';
import { ApplySettingsToPanelProps } from 'store/actions/dashboard/applySettingsToPanel';
import { Dashboard, Query, Widgets } from 'types/api/dashboard/getAll';
import { QueryData } from 'types/api/widgets/getQuery';
@ -159,6 +160,7 @@ interface WidgetDeleteSuccess {
type: typeof DELETE_WIDGET_SUCCESS;
payload: {
widgetId: Widgets['id'];
layout: Layout[];
};
}

2
frontend/yarn.lock
View File

@ -10794,7 +10794,7 @@ react-graph-vis@^1.0.5:
vis-data "^7.1.2"
vis-network "^9.0.0"
react-grid-layout@^1.2.5:
react-grid-layout@^1.3.4:
version "1.3.4"
resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-1.3.4.tgz#4fa819be24a1ba9268aa11b82d63afc4762a32ff"
integrity sha512-sB3rNhorW77HUdOjB4JkelZTdJGQKuXLl3gNg+BI8gJkTScspL1myfZzW/EM0dLEn+1eH+xW+wNqk0oIM9o7cw==

5
pkg/query-service/app/http_handler.go
View File

@ -277,6 +277,11 @@ func AdminAccess(f func(http.ResponseWriter, *http.Request)) http.HandlerFunc {
}
}
// RegisterPrivateRoutes registers routes for this handler on the given router
func (aH *APIHandler) RegisterPrivateRoutes(router *mux.Router) {
router.HandleFunc("/api/v1/channels", aH.listChannels).Methods(http.MethodGet)
}
// RegisterRoutes registers routes for this handler on the given router
func (aH *APIHandler) RegisterRoutes(router *mux.Router) {
router.HandleFunc("/api/v1/query_range", ViewAccess(aH.queryRangeMetrics)).Methods(http.MethodGet)

225
pkg/query-service/app/server.go
View File

@ -25,23 +25,24 @@ import (
)
type ServerOptions struct {
HTTPHostPort string
HTTPHostPort string
PrivateHostPort string
}
// Server runs HTTP, Mux and a grpc server
type Server struct {
// logger *zap.Logger
// querySvc *querysvc.QueryService
// queryOptions *QueryOptions
// tracer opentracing.Tracer // TODO make part of flags.Service
serverOptions *ServerOptions
conn net.Listener
// grpcConn net.Listener
httpConn net.Listener
// grpcServer *grpc.Server
httpServer *http.Server
separatePorts bool
// public http router
httpConn net.Listener
httpServer *http.Server
// private http
privateConn net.Listener
privateHTTP *http.Server
unavailableChannel chan healthcheck.Status
}
@ -51,59 +52,20 @@ func (s Server) HealthCheckStatus() chan healthcheck.Status {
}
// NewServer creates and initializes Server
// func NewServer(logger *zap.Logger, querySvc *querysvc.QueryService, options *QueryOptions, tracer opentracing.Tracer) (*Server, error) {
func NewServer(serverOptions *ServerOptions) (*Server, error) {
// _, httpPort, err := net.SplitHostPort(serverOptions.HTTPHostPort)
// if err != nil {
// return nil, err
// }
// _, grpcPort, err := net.SplitHostPort(options.GRPCHostPort)
// if err != nil {
// return nil, err
// }
// grpcServer, err := createGRPCServer(querySvc, options, logger, tracer)
// if err != nil {
// return nil, err
// }
if err := dao.InitDao("sqlite", constants.RELATIONAL_DATASOURCE_PATH); err != nil {
return nil, err
}
s := &Server{
// logger: logger,
// querySvc: querySvc,
// queryOptions: options,
// tracer: tracer,
// grpcServer: grpcServer,
serverOptions: serverOptions,
separatePorts: true,
// separatePorts: grpcPort != httpPort,
unavailableChannel: make(chan healthcheck.Status),
}
httpServer, err := s.createHTTPServer()
if err != nil {
return nil, err
}
s.httpServer = httpServer
return s, nil
}
func (s *Server) createHTTPServer() (*http.Server, error) {
localDB, err := dashboards.InitDB(constants.RELATIONAL_DATASOURCE_PATH)
if err != nil {
return nil, err
}
localDB.SetMaxOpenConns(10)
var reader Reader
storage := os.Getenv("STORAGE")
if storage == "clickhouse" {
zap.S().Info("Using ClickHouse as datastore ...")
@ -119,24 +81,75 @@ func (s *Server) createHTTPServer() (*http.Server, error) {
return nil, err
}
s := &Server{
// logger: logger,
// tracer: tracer,
serverOptions: serverOptions,
unavailableChannel: make(chan healthcheck.Status),
}
httpServer, err := s.createPublicServer(apiHandler)
if err != nil {
return nil, err
}
s.httpServer = httpServer
privateServer, err := s.createPrivateServer(apiHandler)
if err != nil {
return nil, err
}
s.privateHTTP = privateServer
return s, nil
}
func (s *Server) createPrivateServer(api *APIHandler) (*http.Server, error) {
r := NewRouter()
r.Use(setTimeoutMiddleware)
r.Use(s.analyticsMiddleware)
r.Use(loggingMiddlewarePrivate)
api.RegisterPrivateRoutes(r)
c := cors.New(cors.Options{
//todo(amol): find out a way to add exact domain or
// ip here for alert manager
AllowedOrigins: []string{"*"},
AllowedMethods: []string{"GET", "DELETE", "POST", "PUT"},
AllowedHeaders: []string{"Accept", "Authorization", "Content-Type"},
})
handler := c.Handler(r)
handler = handlers.CompressHandler(handler)
return &http.Server{
Handler: handler,
}, nil
}
func (s *Server) createPublicServer(api *APIHandler) (*http.Server, error) {
r := NewRouter()
r.Use(setTimeoutMiddleware)
r.Use(s.analyticsMiddleware)
r.Use(loggingMiddleware)
apiHandler.RegisterRoutes(r)
apiHandler.RegisterMetricsRoutes(r)
api.RegisterRoutes(r)
api.RegisterMetricsRoutes(r)
c := cors.New(cors.Options{
AllowedOrigins: []string{"*"},
// AllowCredentials: true,
AllowedMethods: []string{"GET", "DELETE", "POST", "PUT"},
AllowedHeaders: []string{"Accept", "Authorization", "Content-Type"},
})
handler := c.Handler(r)
// var handler http.Handler = r
handler = handlers.CompressHandler(handler)
@ -145,6 +158,7 @@ func (s *Server) createHTTPServer() (*http.Server, error) {
}, nil
}
// loggingMiddleware is used for logging public api calls
func loggingMiddleware(next http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
route := mux.CurrentRoute(r)
@ -155,6 +169,18 @@ func loggingMiddleware(next http.Handler) http.Handler {
})
}
// loggingMiddlewarePrivate is used for logging private api calls
// from internal services like alert manager
func loggingMiddlewarePrivate(next http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
route := mux.CurrentRoute(r)
path, _ := route.GetPathTemplate()
startTime := time.Now()
next.ServeHTTP(w, r)
zap.S().Info(path, "\tprivatePort: true", "\ttimeTaken: ", time.Now().Sub(startTime))
})
}
type loggingResponseWriter struct {
http.ResponseWriter
statusCode int
@ -198,61 +224,42 @@ func setTimeoutMiddleware(next http.Handler) http.Handler {
})
}
// initListener initialises listeners of the server
func (s *Server) initListener() (cmux.CMux, error) {
if s.separatePorts { // use separate ports and listeners each for gRPC and HTTP requests
var err error
// s.grpcConn, err = net.Listen("tcp", s.queryOptions.GRPCHostPort)
// if err != nil {
// return nil, err
// }
s.httpConn, err = net.Listen("tcp", s.serverOptions.HTTPHostPort)
if err != nil {
return nil, err
}
zap.S().Info("Query server started ...")
return nil, nil
// initListeners initialises listeners of the server
func (s *Server) initListeners() error {
// listen on public port
var err error
publicHostPort := s.serverOptions.HTTPHostPort
if publicHostPort == "" {
return fmt.Errorf("constants.HTTPHostPort is required")
}
// // old behavior using cmux
// conn, err := net.Listen("tcp", s.queryOptions.HostPort)
// if err != nil {
// return nil, err
// }
// s.conn = conn
s.httpConn, err = net.Listen("tcp", publicHostPort)
if err != nil {
return err
}
// var tcpPort int
// if port, err := netutils
zap.S().Info(fmt.Sprintf("Query server started listening on %s...", s.serverOptions.HTTPHostPort))
// utils.GetPort(s.conn.Addr()); err == nil {
// tcpPort = port
// }
// listen on private port to support internal services
privateHostPort := s.serverOptions.PrivateHostPort
// zap.S().Info(
// "Query server started",
// zap.Int("port", tcpPort),
// zap.String("addr", s.queryOptions.HostPort))
if privateHostPort == "" {
return fmt.Errorf("constants.PrivateHostPort is required")
}
// // cmux server acts as a reverse-proxy between HTTP and GRPC backends.
// cmuxServer := cmux.New(s.conn)
// s.grpcConn = cmuxServer.MatchWithWriters(
// cmux.HTTP2MatchHeaderFieldSendSettings("content-type", "application/grpc"),
// cmux.HTTP2MatchHeaderFieldSendSettings("content-type", "application/grpc+proto"),
// )
// s.httpConn = cmuxServer.Match(cmux.Any())
// s.queryOptions.HTTPHostPort = s.queryOptions.HostPort
// s.queryOptions.GRPCHostPort = s.queryOptions.HostPort
return nil, nil
s.privateConn, err = net.Listen("tcp", privateHostPort)
if err != nil {
return err
}
zap.S().Info(fmt.Sprintf("Query server started listening on private port %s...", s.serverOptions.PrivateHostPort))
return nil
}
// Start http, GRPC and cmux servers concurrently
// Start listening on http and private http port concurrently
func (s *Server) Start() error {
_, err := s.initListener()
err := s.initListeners()
if err != nil {
return err
}
@ -283,5 +290,25 @@ func (s *Server) Start() error {
}
}()
var privatePort int
if port, err := utils.GetPort(s.privateConn.Addr()); err == nil {
privatePort = port
}
fmt.Println("starting private http")
go func() {
zap.S().Info("Starting Private HTTP server", zap.Int("port", privatePort), zap.String("addr", s.serverOptions.PrivateHostPort))
switch err := s.privateHTTP.Serve(s.privateConn); err {
case nil, http.ErrServerClosed, cmux.ErrListenerClosed:
// normal exit, nothing to do
zap.S().Info("private http server closed")
default:
zap.S().Error("Could not start private HTTP server", zap.Error(err))
}
s.unavailableChannel <- healthcheck.Unavailable
}()
return nil
}

51
pkg/query-service/constants/constants.go
View File

@ -6,8 +6,9 @@ import (
)
const (
HTTPHostPort = "0.0.0.0:8080" // Address to serve http (query service)
DebugHttpPort = "0.0.0.0:6060" // Address to serve http (pprof)
HTTPHostPort = "0.0.0.0:8080" // Address to serve http (query service)
PrivateHostPort = "0.0.0.0:8085" // Address to server internal services like alert manager
DebugHttpPort = "0.0.0.0:6060" // Address to serve http (pprof)
)
var DEFAULT_TELEMETRY_ANONYMOUS = false
@ -37,29 +38,29 @@ var AmChannelApiPath = GetOrDefaultEnv("ALERTMANAGER_API_CHANNEL_PATH", "v1/rout
var RELATIONAL_DATASOURCE_PATH = GetOrDefaultEnv("SIGNOZ_LOCAL_DB_PATH", "/var/lib/signoz/signoz.db")
const (
ServiceName = "serviceName"
HttpRoute = "httpRoute"
HttpCode = "httpCode"
HttpHost = "httpHost"
HttpUrl = "httpUrl"
HttpMethod = "httpMethod"
Component = "component"
OperationDB = "name"
OperationRequest = "operation"
Status = "status"
Duration = "duration"
DBName = "dbName"
DBOperation = "dbOperation"
DBSystem = "dbSystem"
MsgSystem = "msgSystem"
MsgOperation = "msgOperation"
Timestamp = "timestamp"
Descending = "descending"
Ascending = "ascending"
ContextTimeout = 60 // seconds
StatusPending = "pending"
StatusFailed = "failed"
StatusSuccess = "success"
ServiceName = "serviceName"
HttpRoute = "httpRoute"
HttpCode = "httpCode"
HttpHost = "httpHost"
HttpUrl = "httpUrl"
HttpMethod = "httpMethod"
Component = "component"
OperationDB = "name"
OperationRequest = "operation"
Status = "status"
Duration = "duration"
DBName = "dbName"
DBOperation = "dbOperation"
DBSystem = "dbSystem"
MsgSystem = "msgSystem"
MsgOperation = "msgOperation"
Timestamp = "timestamp"
Descending = "descending"
Ascending = "ascending"
ContextTimeout = 60 // seconds
StatusPending = "pending"
StatusFailed = "failed"
StatusSuccess = "success"
)
func GetOrDefaultEnv(key string, fallback string) string {

3
pkg/query-service/main.go
View File

@ -34,7 +34,8 @@ func main() {
version.PrintVersion()
serverOptions := &app.ServerOptions{
HTTPHostPort: constants.HTTPHostPort,
HTTPHostPort: constants.HTTPHostPort,
PrivateHostPort: constants.PrivateHostPort,
}
// Read the jwt secret key

2
pkg/query-service/tests/test-deploy/docker-compose.arm.yaml
View File

@ -23,7 +23,7 @@ services:
- query-service
restart: on-failure
command:
- --queryService.url=http://query-service:8080
- --queryService.url=http://query-service:8085
- --storage.path=/data
query-service:

2
pkg/query-service/tests/test-deploy/docker-compose.yaml
View File

@ -26,7 +26,7 @@ services:
- query-service
restart: on-failure
command:
- --queryService.url=http://query-service:8080
- --queryService.url=http://query-service:8085
- --storage.path=/data
# Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`