41 lines
982 B
TypeScript
Raw Normal View History

import { PANEL_TYPES } from 'constants/queryBuilder';
Improved graph panel full view (#3039) * feat: done with prd full view * refactor: updated some variable and naming convection * feat: when click on label only select associated graph * feat: made the table scrollable * feat: update the table column length * feat: save notification after saving state * refactor: removed unwanted code * refactor: renamed some file * fix: linter issue * fix: position of save button * refactor: seperated widgetGraphComponent from gridGraphComponent * feat: fetching the localstorage data while initial loading of graph * fix: dependency of graphVisibilityHandler for other component * refactor: updated the notification msg on save * fix: linter error * refactor: remove the update logic of graph from graph component * refactor: created utils and move some utility code * refactor: place the checkbox component in fullview * refactor: updated the utils function added enun localstorage * refactor: added enum for table columns data * refactor: name changes to graphVisibilityStates * refactor: shifted the type to types.ts * refactor: sepearated the type from graph componnet * refactor: seperated graphOptions from graph component * refactor: updated imports * refactor: shifted the logic to utils * refactor: remove unused file and check for full view * refactor: using PanelType instead of GraphType * refactor: changed the variable name * refactor: provided checks of useEffect * test: added unit test case for utility function * refactor: one on one maping of props and value * refactor: panelTypeAndGraphManagerVisibility as a props * refactor: remove the enforing of type in useChartMutable * refactor: updated the test case * refactor: moved types to types.ts files * refactor: separated types from components * refactor: one to one mapping and cancel feature * refactor: remove unwanted useEffect and used eventEmitter * fix: only open chart visibility will change issue * refactor: removed unwanted useEffect * refactor: resolve the hang issue for full view * refactor: legend to checkbox connection, separated code * refactor: updated styled component GraphContainer * chore: removed unwanted consoles * refactor: ux changes * fix: eslint and updated test case * refactor: review comments * chore: fix types * refactor: made utils for getIsGraphLegendToggleAvailable * refactor: removed the ref mutation from graphPanelSwitch * refactor: resolve the issue of chart state not getting reflect outside fullview * refactor: common utility for toggle graphs visibility in chart * refactor: shifted ref to perticular component level * test: removed extra space * chore: close on save and NaN infinity check * refactor: added yAxisUnit to GraphManager table header * refactor: create a function for appending yAxisUnit to table header * fix: decimal upto 2 decimal points --------- Co-authored-by: Vishal Sharma <makeavish786@gmail.com> Co-authored-by: Pranay Prateek <pranay@signoz.io> Co-authored-by: Palash Gupta <palashgdev@gmail.com>
2023-08-02 20:41:09 +05:30
import { themeColors } from 'constants/theme';
import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
Improved graph panel full view (#3039) * feat: done with prd full view * refactor: updated some variable and naming convection * feat: when click on label only select associated graph * feat: made the table scrollable * feat: update the table column length * feat: save notification after saving state * refactor: removed unwanted code * refactor: renamed some file * fix: linter issue * fix: position of save button * refactor: seperated widgetGraphComponent from gridGraphComponent * feat: fetching the localstorage data while initial loading of graph * fix: dependency of graphVisibilityHandler for other component * refactor: updated the notification msg on save * fix: linter error * refactor: remove the update logic of graph from graph component * refactor: created utils and move some utility code * refactor: place the checkbox component in fullview * refactor: updated the utils function added enun localstorage * refactor: added enum for table columns data * refactor: name changes to graphVisibilityStates * refactor: shifted the type to types.ts * refactor: sepearated the type from graph componnet * refactor: seperated graphOptions from graph component * refactor: updated imports * refactor: shifted the logic to utils * refactor: remove unused file and check for full view * refactor: using PanelType instead of GraphType * refactor: changed the variable name * refactor: provided checks of useEffect * test: added unit test case for utility function * refactor: one on one maping of props and value * refactor: panelTypeAndGraphManagerVisibility as a props * refactor: remove the enforing of type in useChartMutable * refactor: updated the test case * refactor: moved types to types.ts files * refactor: separated types from components * refactor: one to one mapping and cancel feature * refactor: remove unwanted useEffect and used eventEmitter * fix: only open chart visibility will change issue * refactor: removed unwanted useEffect * refactor: resolve the hang issue for full view * refactor: legend to checkbox connection, separated code * refactor: updated styled component GraphContainer * chore: removed unwanted consoles * refactor: ux changes * fix: eslint and updated test case * refactor: review comments * chore: fix types * refactor: made utils for getIsGraphLegendToggleAvailable * refactor: removed the ref mutation from graphPanelSwitch * refactor: resolve the issue of chart state not getting reflect outside fullview * refactor: common utility for toggle graphs visibility in chart * refactor: shifted ref to perticular component level * test: removed extra space * chore: close on save and NaN infinity check * refactor: added yAxisUnit to GraphManager table header * refactor: create a function for appending yAxisUnit to table header * fix: decimal upto 2 decimal points --------- Co-authored-by: Vishal Sharma <makeavish786@gmail.com> Co-authored-by: Pranay Prateek <pranay@signoz.io> Co-authored-by: Palash Gupta <palashgdev@gmail.com>
2023-08-02 20:41:09 +05:30
import { GraphContainerProps } from './types';
interface Props {
$panelType: PANEL_TYPES;
}
feat: Metrics (#281) * refactor: store is updated * temp * fix: eslint error is fixed * fix:eslint linting error is updated * chore: react-grid-layout is added * chore: linting changes are updated * chore: linting changes are updated * chore: @types/node is moved to devDependecies and @types/react-grid-layout is added * chore: tsconfig is updated * chore: updateUrl function is updated * feat: All Dashboard is updated * feat: All Dashboard page is updated * feat: New Dashboard is added * feat: App Layout is updated * feat: Add Tags is updated * chore: uuid package is added * chore: AppRoutes is updated * chore: UI components are updated * chore: baseUrl is added in the apiUrl and removed from other api request * chore: commonApi Response is updated * chore: ErrorResponse handler is updated * chore: useFetch hook is made * chore: axios instance is updated * chore:some of the changes are updated * chore: list of all dashboard types is updated * chore: logic is updated to the global state * chore: all dashboard data is fetched from the global state * chore: unnessary prop is removed * chore: changes are updated * chore: getAll and create is updated * chore: getDashboard is updated * chore: isEditMode is moved to the global state * chore: get,getAll is updated * chore: update title,tags,description is now fixed * chore: new widget is updated * chore: graph is updated * chore: input component accept input props * chore: name of the dashboard is updated * chore: Widgets page in WIP * chore: types for the error api is updated * chore: getQuery data is updated * chore: widget types is updated * default widget is updated * chore: getQuery is updated * chore: Add Query is updated * fix: creating new widget bug is resolved * chore: widget type is updated * chore: Query error is updated * chore: query error and success state is handled * chore: label of graph in WIP * chore: legend input placeholder is updated * chore: changes are updated * chore: no data component is updated and error component is rendered along with the data * chore: data fetching over the initial render is fixed over the initial mount * chore: convertDateToAndPm is updated * chore: x-axis label is now fixed * chore: label is updated * chore: labels name is updated * chore: labels name is updated * chore: labels color is updated * chore: values are parsed in float * chore: tags is updated * chore: datasets type is updated * chore: graph is updated * chore: more eslint rules are updated * chore: some of the linting changes and data is updated * chore: chart.js version is updated * chore: gitignore is updated * chore: graph component is updated * chore: apply functionality is updated * chore: dashboard is now saved * chore: getChartData is updated * feat: Dashboard graph is reflected * chore: some of the bugs is resolved * fix: aspect ratio is made false * chore: some small css are fixed * chore: widgetId and graphType is preAdded if present in the search params * chore: user is now able to change the time via global time and reflect new graph values * chore: query is updated * chore: onBlurHandler is updated * fix: usage explorer is now fixed * chore: bar element is updated * chore: chartjs adapter is added * chore: old instance for the charts are removed via re-chart * chore: re-chart is removed * chore: get chart data is updated * chore: added the counter in the useEffect * chore: history is added * chore: some of the features are updated * chore: history package is updated * chore: AppRoutes is updated * fix: some are components breaking while moving from BrowserRouter to Router * chore: Dashboard icon is updated * chore: Full screen component is updated * stepSize (optional) is added in the widgets type * fix: fetching query result is fixed * update: start and end time function is updated * fix: Alert color is updated * update: Query fetching is updated * fix: start and end time is fixed * fix: chartjs data is compatable for larger data set and no ajax call for empty query is fixed * fix: last 1 week selection is fixed * fix: legends is added * update: antd version is updated * feat: value graph is updated * feat: Title is added for the value graph * fix: Full Screen view is updated with refresh functionality and alignment is updated to flex-end * fix: Graph component is updated * fix: metric graph are fixed * feature: Delete widget functionality is updated * fix: empty value bug is resolved * fix: delete widget position is fixed * fix: resize functionality is fixed * fix: sumation of the query is fixed * update: default legend is removed * update: resize handlers is removed and service metric component is updated * fix: legends is updated * update: querySuccess reducer is updated * Modal component is updated * fix: ant-d tab css is updated of the tabs * update: stringToHTML is made * update: graph component is updated * fix: several component in the metric and traces are updated * wip: build error is fixed * fix: metric section is fixed * update: console.log are commented * fix: onClick graph re-render is stopped * fix: trace graph is updated * fix: updated the min,max time for the value type graph * getQueryMaxMin Time is updated * fix: trace chart is updated * fix: re-render is fixed * fix: localstorage persistance is there * update: if label is not present legend is not displayed * fix: graph is changed while updated the global time * fix: default title is updated while creation of the dashboard * update: external database call tabs are made of same size * fix: query graph max-min time is updated in the full screen mode * fix: Request per sec graph is fixed * fix: ErrorChart is fixed Co-authored-by: Palash gupta <palashgdev@gmail.com>
2021-09-23 15:43:43 +05:30
export const NotFoundContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 55vh;
`;
export const TimeContainer = styled.div<Props>`
feat: Metrics (#281) * refactor: store is updated * temp * fix: eslint error is fixed * fix:eslint linting error is updated * chore: react-grid-layout is added * chore: linting changes are updated * chore: linting changes are updated * chore: @types/node is moved to devDependecies and @types/react-grid-layout is added * chore: tsconfig is updated * chore: updateUrl function is updated * feat: All Dashboard is updated * feat: All Dashboard page is updated * feat: New Dashboard is added * feat: App Layout is updated * feat: Add Tags is updated * chore: uuid package is added * chore: AppRoutes is updated * chore: UI components are updated * chore: baseUrl is added in the apiUrl and removed from other api request * chore: commonApi Response is updated * chore: ErrorResponse handler is updated * chore: useFetch hook is made * chore: axios instance is updated * chore:some of the changes are updated * chore: list of all dashboard types is updated * chore: logic is updated to the global state * chore: all dashboard data is fetched from the global state * chore: unnessary prop is removed * chore: changes are updated * chore: getAll and create is updated * chore: getDashboard is updated * chore: isEditMode is moved to the global state * chore: get,getAll is updated * chore: update title,tags,description is now fixed * chore: new widget is updated * chore: graph is updated * chore: input component accept input props * chore: name of the dashboard is updated * chore: Widgets page in WIP * chore: types for the error api is updated * chore: getQuery data is updated * chore: widget types is updated * default widget is updated * chore: getQuery is updated * chore: Add Query is updated * fix: creating new widget bug is resolved * chore: widget type is updated * chore: Query error is updated * chore: query error and success state is handled * chore: label of graph in WIP * chore: legend input placeholder is updated * chore: changes are updated * chore: no data component is updated and error component is rendered along with the data * chore: data fetching over the initial render is fixed over the initial mount * chore: convertDateToAndPm is updated * chore: x-axis label is now fixed * chore: label is updated * chore: labels name is updated * chore: labels name is updated * chore: labels color is updated * chore: values are parsed in float * chore: tags is updated * chore: datasets type is updated * chore: graph is updated * chore: more eslint rules are updated * chore: some of the linting changes and data is updated * chore: chart.js version is updated * chore: gitignore is updated * chore: graph component is updated * chore: apply functionality is updated * chore: dashboard is now saved * chore: getChartData is updated * feat: Dashboard graph is reflected * chore: some of the bugs is resolved * fix: aspect ratio is made false * chore: some small css are fixed * chore: widgetId and graphType is preAdded if present in the search params * chore: user is now able to change the time via global time and reflect new graph values * chore: query is updated * chore: onBlurHandler is updated * fix: usage explorer is now fixed * chore: bar element is updated * chore: chartjs adapter is added * chore: old instance for the charts are removed via re-chart * chore: re-chart is removed * chore: get chart data is updated * chore: added the counter in the useEffect * chore: history is added * chore: some of the features are updated * chore: history package is updated * chore: AppRoutes is updated * fix: some are components breaking while moving from BrowserRouter to Router * chore: Dashboard icon is updated * chore: Full screen component is updated * stepSize (optional) is added in the widgets type * fix: fetching query result is fixed * update: start and end time function is updated * fix: Alert color is updated * update: Query fetching is updated * fix: start and end time is fixed * fix: chartjs data is compatable for larger data set and no ajax call for empty query is fixed * fix: last 1 week selection is fixed * fix: legends is added * update: antd version is updated * feat: value graph is updated * feat: Title is added for the value graph * fix: Full Screen view is updated with refresh functionality and alignment is updated to flex-end * fix: Graph component is updated * fix: metric graph are fixed * feature: Delete widget functionality is updated * fix: empty value bug is resolved * fix: delete widget position is fixed * fix: resize functionality is fixed * fix: sumation of the query is fixed * update: default legend is removed * update: resize handlers is removed and service metric component is updated * fix: legends is updated * update: querySuccess reducer is updated * Modal component is updated * fix: ant-d tab css is updated of the tabs * update: stringToHTML is made * update: graph component is updated * fix: several component in the metric and traces are updated * wip: build error is fixed * fix: metric section is fixed * update: console.log are commented * fix: onClick graph re-render is stopped * fix: trace graph is updated * fix: updated the min,max time for the value type graph * getQueryMaxMin Time is updated * fix: trace chart is updated * fix: re-render is fixed * fix: localstorage persistance is there * update: if label is not present legend is not displayed * fix: graph is changed while updated the global time * fix: default title is updated while creation of the dashboard * update: external database call tabs are made of same size * fix: query graph max-min time is updated in the full screen mode * fix: Request per sec graph is fixed * fix: ErrorChart is fixed Co-authored-by: Palash gupta <palashgdev@gmail.com>
2021-09-23 15:43:43 +05:30
display: flex;
justify-content: flex-end;
${({ $panelType }): FlattenSimpleInterpolation =>
$panelType === PANEL_TYPES.TABLE
? css`
margin-bottom: 1rem;
`
: css``}
feat: Metrics (#281) * refactor: store is updated * temp * fix: eslint error is fixed * fix:eslint linting error is updated * chore: react-grid-layout is added * chore: linting changes are updated * chore: linting changes are updated * chore: @types/node is moved to devDependecies and @types/react-grid-layout is added * chore: tsconfig is updated * chore: updateUrl function is updated * feat: All Dashboard is updated * feat: All Dashboard page is updated * feat: New Dashboard is added * feat: App Layout is updated * feat: Add Tags is updated * chore: uuid package is added * chore: AppRoutes is updated * chore: UI components are updated * chore: baseUrl is added in the apiUrl and removed from other api request * chore: commonApi Response is updated * chore: ErrorResponse handler is updated * chore: useFetch hook is made * chore: axios instance is updated * chore:some of the changes are updated * chore: list of all dashboard types is updated * chore: logic is updated to the global state * chore: all dashboard data is fetched from the global state * chore: unnessary prop is removed * chore: changes are updated * chore: getAll and create is updated * chore: getDashboard is updated * chore: isEditMode is moved to the global state * chore: get,getAll is updated * chore: update title,tags,description is now fixed * chore: new widget is updated * chore: graph is updated * chore: input component accept input props * chore: name of the dashboard is updated * chore: Widgets page in WIP * chore: types for the error api is updated * chore: getQuery data is updated * chore: widget types is updated * default widget is updated * chore: getQuery is updated * chore: Add Query is updated * fix: creating new widget bug is resolved * chore: widget type is updated * chore: Query error is updated * chore: query error and success state is handled * chore: label of graph in WIP * chore: legend input placeholder is updated * chore: changes are updated * chore: no data component is updated and error component is rendered along with the data * chore: data fetching over the initial render is fixed over the initial mount * chore: convertDateToAndPm is updated * chore: x-axis label is now fixed * chore: label is updated * chore: labels name is updated * chore: labels name is updated * chore: labels color is updated * chore: values are parsed in float * chore: tags is updated * chore: datasets type is updated * chore: graph is updated * chore: more eslint rules are updated * chore: some of the linting changes and data is updated * chore: chart.js version is updated * chore: gitignore is updated * chore: graph component is updated * chore: apply functionality is updated * chore: dashboard is now saved * chore: getChartData is updated * feat: Dashboard graph is reflected * chore: some of the bugs is resolved * fix: aspect ratio is made false * chore: some small css are fixed * chore: widgetId and graphType is preAdded if present in the search params * chore: user is now able to change the time via global time and reflect new graph values * chore: query is updated * chore: onBlurHandler is updated * fix: usage explorer is now fixed * chore: bar element is updated * chore: chartjs adapter is added * chore: old instance for the charts are removed via re-chart * chore: re-chart is removed * chore: get chart data is updated * chore: added the counter in the useEffect * chore: history is added * chore: some of the features are updated * chore: history package is updated * chore: AppRoutes is updated * fix: some are components breaking while moving from BrowserRouter to Router * chore: Dashboard icon is updated * chore: Full screen component is updated * stepSize (optional) is added in the widgets type * fix: fetching query result is fixed * update: start and end time function is updated * fix: Alert color is updated * update: Query fetching is updated * fix: start and end time is fixed * fix: chartjs data is compatable for larger data set and no ajax call for empty query is fixed * fix: last 1 week selection is fixed * fix: legends is added * update: antd version is updated * feat: value graph is updated * feat: Title is added for the value graph * fix: Full Screen view is updated with refresh functionality and alignment is updated to flex-end * fix: Graph component is updated * fix: metric graph are fixed * feature: Delete widget functionality is updated * fix: empty value bug is resolved * fix: delete widget position is fixed * fix: resize functionality is fixed * fix: sumation of the query is fixed * update: default legend is removed * update: resize handlers is removed and service metric component is updated * fix: legends is updated * update: querySuccess reducer is updated * Modal component is updated * fix: ant-d tab css is updated of the tabs * update: stringToHTML is made * update: graph component is updated * fix: several component in the metric and traces are updated * wip: build error is fixed * fix: metric section is fixed * update: console.log are commented * fix: onClick graph re-render is stopped * fix: trace graph is updated * fix: updated the min,max time for the value type graph * getQueryMaxMin Time is updated * fix: trace chart is updated * fix: re-render is fixed * fix: localstorage persistance is there * update: if label is not present legend is not displayed * fix: graph is changed while updated the global time * fix: default title is updated while creation of the dashboard * update: external database call tabs are made of same size * fix: query graph max-min time is updated in the full screen mode * fix: Request per sec graph is fixed * fix: ErrorChart is fixed Co-authored-by: Palash gupta <palashgdev@gmail.com>
2021-09-23 15:43:43 +05:30
`;
Improved graph panel full view (#3039) * feat: done with prd full view * refactor: updated some variable and naming convection * feat: when click on label only select associated graph * feat: made the table scrollable * feat: update the table column length * feat: save notification after saving state * refactor: removed unwanted code * refactor: renamed some file * fix: linter issue * fix: position of save button * refactor: seperated widgetGraphComponent from gridGraphComponent * feat: fetching the localstorage data while initial loading of graph * fix: dependency of graphVisibilityHandler for other component * refactor: updated the notification msg on save * fix: linter error * refactor: remove the update logic of graph from graph component * refactor: created utils and move some utility code * refactor: place the checkbox component in fullview * refactor: updated the utils function added enun localstorage * refactor: added enum for table columns data * refactor: name changes to graphVisibilityStates * refactor: shifted the type to types.ts * refactor: sepearated the type from graph componnet * refactor: seperated graphOptions from graph component * refactor: updated imports * refactor: shifted the logic to utils * refactor: remove unused file and check for full view * refactor: using PanelType instead of GraphType * refactor: changed the variable name * refactor: provided checks of useEffect * test: added unit test case for utility function * refactor: one on one maping of props and value * refactor: panelTypeAndGraphManagerVisibility as a props * refactor: remove the enforing of type in useChartMutable * refactor: updated the test case * refactor: moved types to types.ts files * refactor: separated types from components * refactor: one to one mapping and cancel feature * refactor: remove unwanted useEffect and used eventEmitter * fix: only open chart visibility will change issue * refactor: removed unwanted useEffect * refactor: resolve the hang issue for full view * refactor: legend to checkbox connection, separated code * refactor: updated styled component GraphContainer * chore: removed unwanted consoles * refactor: ux changes * fix: eslint and updated test case * refactor: review comments * chore: fix types * refactor: made utils for getIsGraphLegendToggleAvailable * refactor: removed the ref mutation from graphPanelSwitch * refactor: resolve the issue of chart state not getting reflect outside fullview * refactor: common utility for toggle graphs visibility in chart * refactor: shifted ref to perticular component level * test: removed extra space * chore: close on save and NaN infinity check * refactor: added yAxisUnit to GraphManager table header * refactor: create a function for appending yAxisUnit to table header * fix: decimal upto 2 decimal points --------- Co-authored-by: Vishal Sharma <makeavish786@gmail.com> Co-authored-by: Pranay Prateek <pranay@signoz.io> Co-authored-by: Palash Gupta <palashgdev@gmail.com>
2023-08-02 20:41:09 +05:30
export const GraphContainer = styled.div<GraphContainerProps>`
height: ${({ isGraphLegendToggleAvailable }): string =>
isGraphLegendToggleAvailable ? '50%' : '100%'};
`;
export const LabelContainer = styled.button`
max-width: 18.75rem;
cursor: pointer;
border: none;
background-color: transparent;
color: ${themeColors.white};
`;