Merge branch 'develop' into add-cluster-name-flag

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -35,7 +35,11 @@ function GridCardGraph({
 }: GridCardGraphProps): JSX.Element {
  const dispatch = useDispatch();
  const [errorMessage, setErrorMessage] = useState<string>();
- const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+ const {
+ toScrollWidgetId,
+ setToScrollWidgetId,
+ variablesToGetUpdated,
+ } = useDashboard();
  const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
  AppState,
  GlobalReducer
@@ -90,7 +94,11 @@ function GridCardGraph({
  const isEmptyWidget =
  widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
- const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
+ const queryEnabledCondition =
+ isVisible &&
+ !isEmptyWidget &&
+ isQueryEnabled &&
+ isEmpty(variablesToGetUpdated);
 
  const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
  if (widget.panelTypes !== PANEL_TYPES.LIST) {

frontend/src/container/LogsExplorerViews/index.tsx

@@ -608,6 +608,7 @@ function LogsExplorerViews({
  className="periscope-btn"
  onClick={handleToggleShowFormatOptions}
  icon={<Sliders size={14} />}
+ data-testid="periscope-btn"
  />
 
  {showFormatMenuItems && (

frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx

@@ -0,0 +1,151 @@
+import { render, RenderResult } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
+import { logsQueryRangeSuccessResponse } from 'mocks-server/__mockdata__/logs_query_range';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import i18n from 'ReactI18';
+import store from 'store';
+
+import LogsExplorerViews from '..';
+import { logsQueryRangeSuccessNewFormatResponse } from './mock';
+
+const logExplorerRoute = '/logs/logs-explorer';
+
+const queryRangeURL = 'http://localhost/api/v3/query_range';
+
+const lodsQueryServerRequest = (): void =>
+ server.use(
+ rest.post(queryRangeURL, (req, res, ctx) =>
+ res(ctx.status(200), ctx.json(logsQueryRangeSuccessResponse)),
+ ),
+ );
+
+// mocking the graph components in this test as this should be handled separately
+jest.mock(
+ 'container/TimeSeriesView/TimeSeriesView',
+ () =>
+ // eslint-disable-next-line func-names, @typescript-eslint/explicit-function-return-type, react/display-name
+ function () {
+ return <div>Time Series Chart</div>;
+ },
+);
+jest.mock(
+ 'container/LogsExplorerChart',
+ () =>
+ // eslint-disable-next-line func-names, @typescript-eslint/explicit-function-return-type, react/display-name
+ function () {
+ return <div>Histogram Chart</div>;
+ },
+);
+
+jest.mock('constants/panelTypes', () => ({
+ AVAILABLE_EXPORT_PANEL_TYPES: ['graph', 'table'],
+}));
+
+jest.mock('d3-interpolate', () => ({
+ interpolate: jest.fn(),
+}));
+
+jest.mock('hooks/queryBuilder/useGetExplorerQueryRange', () => ({
+ __esModule: true,
+ useGetExplorerQueryRange: jest.fn(),
+}));
+
+// Set up the specific behavior for useGetExplorerQueryRange in individual test cases
+beforeEach(() => {
+ (useGetExplorerQueryRange as jest.Mock).mockReturnValue({
+ data: { payload: logsQueryRangeSuccessNewFormatResponse },
+ });
+});
+
+const renderer = (): RenderResult =>
+ render(
+ <MemoryRouter initialEntries={[logExplorerRoute]}>
+ <Provider store={store}>
+ <I18nextProvider i18n={i18n}>
+ <MockQueryClientProvider>
+ <QueryBuilderProvider>
+ <VirtuosoMockContext.Provider
+ value={{ viewportHeight: 300, itemHeight: 100 }}
+ >
+ <LogsExplorerViews selectedView={SELECTED_VIEWS.SEARCH} showHistogram />
+ </VirtuosoMockContext.Provider>
+ </QueryBuilderProvider>
+ </MockQueryClientProvider>
+ </I18nextProvider>
+ </Provider>
+ </MemoryRouter>,
+ );
+
+describe('LogsExplorerViews -', () => {
+ it('render correctly with props - list and table', async () => {
+ lodsQueryServerRequest();
+ const { queryByText, queryByTestId } = renderer();
+
+ expect(queryByTestId('periscope-btn')).toBeInTheDocument();
+ await userEvent.click(queryByTestId('periscope-btn') as HTMLElement);
+
+ expect(document.querySelector('.menu-container')).toBeInTheDocument();
+
+ const menuItems = document.querySelectorAll('.menu-items .item');
+ expect(menuItems.length).toBe(3);
+
+ // switch to table view
+ // eslint-disable-next-line sonarjs/no-duplicate-string
+ await userEvent.click(queryByTestId('table-view') as HTMLElement);
+
+ expect(
+ queryByText(
+ '{"container_id":"container_id","container_name":"container_name","driver":"driver","eta":"2m0s","location":"frontend","log_level":"INFO","message":"Dispatch successful","service":"frontend","span_id":"span_id","trace_id":"span_id"}',
+ ),
+ ).toBeInTheDocument();
+ });
+
+ it('check isLoading state', async () => {
+ lodsQueryServerRequest();
+ (useGetExplorerQueryRange as jest.Mock).mockReturnValue({
+ data: { payload: logsQueryRangeSuccessNewFormatResponse },
+ isLoading: true,
+ isFetching: false,
+ });
+ const { queryByText, queryByTestId } = renderer();
+
+ // switch to table view
+ await userEvent.click(queryByTestId('table-view') as HTMLElement);
+ expect(
+ queryByText(
+ 'Just a bit of patience, just a little bit’s enough ⎯ we’re getting your logs!',
+ ),
+ ).toBeInTheDocument();
+ });
+
+ it('check error state', async () => {
+ lodsQueryServerRequest();
+ (useGetExplorerQueryRange as jest.Mock).mockReturnValue({
+ data: { payload: logsQueryRangeSuccessNewFormatResponse },
+ isLoading: false,
+ isFetching: false,
+ isError: true,
+ });
+ const { queryByText, queryByTestId } = renderer();
+
+ expect(
+ queryByText('Something went wrong. Please try again or contact support.'),
+ ).toBeInTheDocument();
+
+ // switch to table view
+ await userEvent.click(queryByTestId('table-view') as HTMLElement);
+
+ expect(
+ queryByText('Something went wrong. Please try again or contact support.'),
+ ).toBeInTheDocument();
+ });
+});

frontend/src/container/LogsExplorerViews/tests/mock.ts

@@ -0,0 +1,51 @@
+export const logsQueryRangeSuccessNewFormatResponse = {
+ data: {
+ result: [],
+ resultType: '',
+ newResult: {
+ status: 'success',
+ data: {
+ resultType: '',
+ result: [
+ {
+ queryName: 'A',
+ series: null,
+ list: [
+ {
+ timestamp: '2024-02-15T21:20:22Z',
+ data: {
+ attributes_bool: {},
+ attributes_float64: {},
+ attributes_int64: {},
+ attributes_string: {
+ container_id: 'container_id',
+ container_name: 'container_name',
+ driver: 'driver',
+ eta: '2m0s',
+ location: 'frontend',
+ log_level: 'INFO',
+ message: 'Dispatch successful',
+ service: 'frontend',
+ span_id: 'span_id',
+ trace_id: 'span_id',
+ },
+ body:
+ '2024-02-15T21:20:22.035Z\tINFO\tfrontend\tDispatch successful\t{"service": "frontend", "trace_id": "span_id", "span_id": "span_id", "driver": "driver", "eta": "2m0s"}',
+ id: 'id',
+ resources_string: {
+ 'container.name': 'container_name',
+ },
+ severity_number: 0,
+ severity_text: '',
+ span_id: '',
+ trace_flags: 0,
+ trace_id: '',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ },
+ },
+};

frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -1,25 +1,24 @@
 import { Row } from 'antd';
+import { isNull } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useState } from 'react';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
-import { convertVariablesToDbFormat } from './util';
 import VariableItem from './VariableItem';
 
 function DashboardVariableSelection(): JSX.Element | null {
  const {
  selectedDashboard,
  setSelectedDashboard,
  updateLocalStorageDashboardVariables,
+ variablesToGetUpdated,
+ setVariablesToGetUpdated,
  } = useDashboard();
 
  const { data } = selectedDashboard || {};
 
  const { variables } = data || {};
 
- const [update, setUpdate] = useState<boolean>(false);
- const [lastUpdatedVar, setLastUpdatedVar] = useState<string>('');
-
  const [variablesTableData, setVariablesTableData] = useState<any>([]);
 
  useEffect(() => {
@@ -45,8 +44,27 @@ function DashboardVariableSelection(): JSX.Element | null {
  }, [variables]);
 
  const onVarChanged = (name: string): void => {
- setLastUpdatedVar(name);
- setUpdate(!update);
+ /**
+ * this function takes care of adding the dependent variables to current update queue and removing
+ * the updated variable name from the queue
+ */
+ const dependentVariables = variablesTableData
+ ?.map((variable: any) => {
+ if (variable.type === 'QUERY') {
+ const re = new RegExp(`\\{\\{\\s*?\\.${name}\\s*?\\}\\}`); // regex for `{{.var}}`
+ const queryValue = variable.queryValue || '';
+ const dependVarReMatch = queryValue.match(re);
+ if (dependVarReMatch !== null && dependVarReMatch.length > 0) {
+ return variable.name;
+ }
+ }
+ return null;
+ })
+ .filter((val: string | null) => !isNull(val));
+ setVariablesToGetUpdated((prev) => [
+ ...prev.filter((v) => v !== name),
+ ...dependentVariables,
+ ]);
  };
 
  const onValueUpdate = (
@@ -56,37 +74,31 @@ function DashboardVariableSelection(): JSX.Element | null {
  allSelected: boolean,
  ): void => {
  if (id) {
- const newVariablesArr = variablesTableData.map(
- (variable: IDashboardVariable) => {
- const variableCopy = { ...variable };
-
- if (variableCopy.id === id) {
- variableCopy.selectedValue = value;
- variableCopy.allSelected = allSelected;
- }
-
- return variableCopy;
- },
- );
  updateLocalStorageDashboardVariables(name, value, allSelected);
 
- const variables = convertVariablesToDbFormat(newVariablesArr);
-
  if (selectedDashboard) {
- setSelectedDashboard({
- ...selectedDashboard,
- data: {
- ...selectedDashboard?.data,
- variables: {
- ...variables,
- },
- },
+ setSelectedDashboard((prev) => {
+ if (prev) {
+ return {
+ ...prev,
+ data: {
+ ...prev?.data,
+ variables: {
+ ...prev?.data.variables,
+ [id]: {
+ ...prev.data.variables[id],
+ selectedValue: value,
+ allSelected,
+ },
+ },
+ },
+ };
+ }
+ return prev;
  });
  }
 
  onVarChanged(name);
-
- setUpdate(!update);
  }
  };
 
@@ -107,13 +119,12 @@ function DashboardVariableSelection(): JSX.Element | null {
  <VariableItem
  key={`${variable.name}${variable.id}}${variable.order}`}
  existingVariables={variables}
- lastUpdatedVar={lastUpdatedVar}
  variableData={{
  name: variable.name,
  ...variable,
- change: update,
  }}
  onValueUpdate={onValueUpdate}
+ variablesToGetUpdated={variablesToGetUpdated}
  />
  ))}
  </Row>