fix: page breaking when query range response is null for table panel … (#5139)

* fix: page breaking when query range response is null for table panel type

* fix: page breaking when query range response is null for table panel type

* fix: page breaking when query range response is null for table panel type
This commit is contained in:
Vikrant Gupta 2024-06-04 00:15:37 +05:30 committed by GitHub
parent 03838f5fcc
commit be9c3f0697
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 22 additions and 20 deletions

View File

@ -135,7 +135,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
}, },
y: { y: {
...getYAxisScale({ ...getYAxisScale({
series: graphCompatibleData?.data.newResult.data.result, series: graphCompatibleData?.data?.newResult?.data?.result,
yAxisUnit: '', yAxisUnit: '',
softMax: null, softMax: null,
softMin: null, softMin: null,

View File

@ -262,7 +262,9 @@ function ChartPreview({
panelType={graphType} panelType={graphType}
data={chartData} data={chartData}
name={name || 'Chart Preview'} name={name || 'Chart Preview'}
panelData={queryResponse.data?.payload.data.newResult.data.result || []} panelData={
queryResponse.data?.payload?.data?.newResult?.data?.result || []
}
query={query || initialQueriesMap.metrics} query={query || initialQueriesMap.metrics}
yAxisUnit={yAxisUnit} yAxisUnit={yAxisUnit}
/> />

View File

@ -215,7 +215,7 @@ function WidgetGraphComponent({
const { const {
graphVisibilityStates: localStoredVisibilityState, graphVisibilityStates: localStoredVisibilityState,
} = getLocalStorageGraphVisibilityState({ } = getLocalStorageGraphVisibilityState({
apiResponse: queryResponse.data.payload.data.result, apiResponse: queryResponse.data?.payload?.data?.result,
name: widget.id, name: widget.id,
}); });
setGraphVisibility(localStoredVisibilityState); setGraphVisibility(localStoredVisibilityState);

View File

@ -84,7 +84,7 @@ export const useContextLogData = ({
const handleSuccess = useCallback( const handleSuccess = useCallback(
(data: SuccessResponse<MetricRangePayloadProps, unknown>) => { (data: SuccessResponse<MetricRangePayloadProps, unknown>) => {
const currentData = data?.payload.data.newResult.data.result || []; const currentData = data?.payload?.data?.newResult?.data?.result || [];
if (currentData.length > 0 && currentData[0].list) { if (currentData.length > 0 && currentData[0].list) {
const currentLogs: ILog[] = currentData[0].list.map((item) => ({ const currentLogs: ILog[] = currentData[0].list.map((item) => ({

View File

@ -84,7 +84,7 @@ function LogsContextList({
const handleSuccess = useCallback( const handleSuccess = useCallback(
(data: SuccessResponse<MetricRangePayloadProps, unknown>) => { (data: SuccessResponse<MetricRangePayloadProps, unknown>) => {
const currentData = data?.payload.data.newResult.data.result || []; const currentData = data?.payload?.data?.newResult?.data?.result || [];
if (currentData.length > 0 && currentData[0].list) { if (currentData.length > 0 && currentData[0].list) {
const currentLogs: ILog[] = currentData[0].list.map((item) => ({ const currentLogs: ILog[] = currentData[0].list.map((item) => ({

View File

@ -409,7 +409,7 @@ function LogsExplorerViews({
useEffect(() => { useEffect(() => {
const currentParams = data?.params as Omit<LogTimeRange, 'pageSize'>; const currentParams = data?.params as Omit<LogTimeRange, 'pageSize'>;
const currentData = data?.payload.data.newResult.data.result || []; const currentData = data?.payload?.data?.newResult?.data?.result || [];
if (currentData.length > 0 && currentData[0].list) { if (currentData.length > 0 && currentData[0].list) {
const currentLogs: ILog[] = currentData[0].list.map((item) => ({ const currentLogs: ILog[] = currentData[0].list.map((item) => ({
...item.data, ...item.data,
@ -650,7 +650,7 @@ function LogsExplorerViews({
{selectedPanelType === PANEL_TYPES.TABLE && ( {selectedPanelType === PANEL_TYPES.TABLE && (
<LogsExplorerTable <LogsExplorerTable
data={data?.payload.data.newResult.data.result || []} data={data?.payload?.data?.newResult?.data?.result || []}
isLoading={isLoading || isFetching} isLoading={isLoading || isFetching}
isError={isError} isError={isError}
/> />

View File

@ -85,7 +85,7 @@ function LogsPanelComponent({
const [lastLog, setLastLog] = useState<ILog>(); const [lastLog, setLastLog] = useState<ILog>();
const { logs } = useLogsData({ const { logs } = useLogsData({
result: queryResponse.data?.payload.data.newResult.data.result, result: queryResponse.data?.payload?.data?.newResult?.data?.result,
panelType: PANEL_TYPES.LIST, panelType: PANEL_TYPES.LIST,
stagedQuery: widget.query, stagedQuery: widget.query,
}); });

View File

@ -56,7 +56,7 @@ function LogsTopNav(): JSX.Element {
: [], : [],
listQueryPayload: listQueryPayload:
listQuery && listQuery[1] listQuery && listQuery[1]
? listQuery[1].payload?.data.newResult.data.result || [] ? listQuery[1].payload?.data?.newResult?.data?.result || []
: [], : [],
}; };
} }

View File

@ -87,7 +87,7 @@ function TopOperationMetrics(): JSX.Element {
}, },
); );
const queryTableData = data?.payload.data.newResult.data.result || []; const queryTableData = data?.payload?.data?.newResult?.data?.result || [];
const renderColumnCell = useMemo( const renderColumnCell = useMemo(
() => () =>

View File

@ -50,7 +50,7 @@ function WidgetGraphContainer({
} }
if ( if (
selectedGraph === PANEL_TYPES.LIST && selectedGraph === PANEL_TYPES.LIST &&
queryResponse.data?.payload.data.newResult?.data?.result?.length === 0 queryResponse.data?.payload?.data?.newResult?.data?.result?.length === 0
) { ) {
return ( return (
<NotFoundContainer> <NotFoundContainer>

View File

@ -117,7 +117,7 @@ export default function LogsConnectionStatus(): JSX.Element {
} }
} }
const currentData = data?.payload.data.newResult.data.result || []; const currentData = data?.payload?.data?.newResult?.data?.result || [];
if (currentData.length > 0 && currentData[0].list) { if (currentData.length > 0 && currentData[0].list) {
const currentLogs: ILog[] = currentData[0].list.map((item) => ({ const currentLogs: ILog[] = currentData[0].list.map((item) => ({
...item.data, ...item.data,

View File

@ -39,7 +39,7 @@ function PiePanelWrapper({
}); });
const panelData = const panelData =
queryResponse.data?.payload?.data.newResult.data.result || []; queryResponse.data?.payload?.data?.newResult?.data?.result || [];
const isDarkMode = useIsDarkMode(); const isDarkMode = useIsDarkMode();

View File

@ -9,7 +9,7 @@ function TablePanelWrapper({
tableProcessedDataRef, tableProcessedDataRef,
}: PanelWrapperProps): JSX.Element { }: PanelWrapperProps): JSX.Element {
const panelData = const panelData =
queryResponse.data?.payload?.data.newResult.data.result || []; queryResponse.data?.payload?.data?.newResult?.data?.result || [];
const { thresholds } = widget; const { thresholds } = widget;
return ( return (
<GridTableComponent <GridTableComponent

View File

@ -81,7 +81,7 @@ export const getServiceListFromQuery = ({
services.push(serviceData); services.push(serviceData);
} }
if (query.data) { if (query.data) {
const queryArray = query.data.payload.data.newResult.data.result; const queryArray = query.data?.payload?.data?.newResult?.data?.result;
const serviceData: ServicesList = { const serviceData: ServicesList = {
serviceName: topLevelOperations[index][0].toString(), serviceName: topLevelOperations[index][0].toString(),
p99: parseFloat(getSeriesValue(queryArray, 'A')), p99: parseFloat(getSeriesValue(queryArray, 'A')),

View File

@ -169,7 +169,7 @@ function DateTimeSelection({
: [], : [],
listQueryPayload: listQueryPayload:
listQuery && listQuery[1] listQuery && listQuery[1]
? listQuery[1].payload?.data.newResult.data.result || [] ? listQuery[1].payload?.data?.newResult?.data?.result || []
: [], : [],
}; };
} }

View File

@ -86,7 +86,7 @@ function ListView(): JSX.Element {
data?.payload?.data?.newResult?.data?.result[0]?.list?.length; data?.payload?.data?.newResult?.data?.result[0]?.list?.length;
const totalCount = useMemo(() => dataLength || 0, [dataLength]); const totalCount = useMemo(() => dataLength || 0, [dataLength]);
const queryTableDataResult = data?.payload.data.newResult.data.result; const queryTableDataResult = data?.payload?.data?.newResult?.data?.result;
const queryTableData = useMemo(() => queryTableDataResult || [], [ const queryTableData = useMemo(() => queryTableDataResult || [], [
queryTableDataResult, queryTableDataResult,
]); ]);

View File

@ -45,7 +45,7 @@ function TableView(): JSX.Element {
<Space.Compact block direction="vertical"> <Space.Compact block direction="vertical">
<QueryTable <QueryTable
query={stagedQuery || initialQueriesMap.traces} query={stagedQuery || initialQueriesMap.traces}
queryTableData={data?.payload.data.newResult.data.result || []} queryTableData={data?.payload?.data?.newResult?.data?.result || []}
loading={isLoading} loading={isLoading}
/> />
</Space.Compact> </Space.Compact>

View File

@ -54,7 +54,7 @@ function TracesTableComponent({
const totalCount = useMemo(() => dataLength || 0, [dataLength]); const totalCount = useMemo(() => dataLength || 0, [dataLength]);
const queryTableDataResult = const queryTableDataResult =
queryResponse.data?.payload.data.newResult.data.result; queryResponse.data?.payload?.data?.newResult?.data?.result;
const queryTableData = useMemo(() => queryTableDataResult || [], [ const queryTableData = useMemo(() => queryTableDataResult || [], [
queryTableDataResult, queryTableDataResult,
]); ]);

View File

@ -145,7 +145,7 @@ export const useLogsData = ({
useEffect(() => { useEffect(() => {
const currentParams = data?.params as Omit<LogTimeRange, 'pageSize'>; const currentParams = data?.params as Omit<LogTimeRange, 'pageSize'>;
const currentData = data?.payload.data.newResult.data.result || []; const currentData = data?.payload?.data?.newResult?.data?.result || [];
if (currentData.length > 0 && currentData[0].list) { if (currentData.length > 0 && currentData[0].list) {
const currentLogs: ILog[] = currentData[0].list.map((item) => ({ const currentLogs: ILog[] = currentData[0].list.map((item) => ({
...item.data, ...item.data,