EPMRPP-77905 || preparation to highlight error log (#3249)

* EPMRPP-77905 || preparation to highlight error log

* EPMRPP-77905 || code review fixes - 1

app/localization/translated/be.json

@@ -1190,9 +1190,11 @@
   "LogsGrid.statusColumnTitle": "Статус",
   "LogsGrid.timeColumnTitle": "Час",
   "LogsGridToolbar.consoleView": "Кансольны выгляд",
+  "LogsGridToolbar.errorLogs": "{count, plural, =0 {Няма логаў з памылкамі} one {{currentItem} лог з памылкай} other {{currentItem} of {totalItems} лог з памылкай}}",
   "LogsGridToolbar.hideEmptySteps": "Схаваць пустыя крокі",
   "LogsGridToolbar.hidePassedLogs": "Схаваць пройдзеныя логі",
   "LogsGridToolbar.markdownMode": "Рэжым разметкі",
+  "LogsGridToolbar.showErrorLog": "Паказаць",
   "LogsGridToolbar.withAttachments": "Логі з ўкладаннямі",
   "MakeDecisionModal.addForAll": "будуць дададзены для ўсіх выбраных элементаў",
   "MakeDecisionModal.allLoadedTIFromHistoryLine": "”To Investigate” элементы з радка гісторыі і бягучы элемент",

app/localization/translated/ru.json

@@ -1190,9 +1190,11 @@
   "LogsGrid.statusColumnTitle": "Статус",
   "LogsGrid.timeColumnTitle": "Время",
   "LogsGridToolbar.consoleView": "Консольный вид",
+  "LogsGridToolbar.errorLogs": "{count, plural, =0 {Нет логов с ошибками} one {{currentItem} лог с ошибкой} other {{currentItem} из {totalItems} лог с ошибкой}}",
   "LogsGridToolbar.hideEmptySteps": "Скрыть пустые шаги",
   "LogsGridToolbar.hidePassedLogs": "Скрыть пройденные логи",
   "LogsGridToolbar.markdownMode": "Режим разметки",
+  "LogsGridToolbar.showErrorLog": "Показать",
   "LogsGridToolbar.withAttachments": "Логи с вложениями",
   "MakeDecisionModal.addForAll": "будут добавлены для всех выбранных элементов",
   "MakeDecisionModal.allLoadedTIFromHistoryLine": "”To Investigate” элементы из строки истории и текущий элемент",

app/localization/translated/uk.json

@@ -1190,9 +1190,11 @@
   "LogsGrid.statusColumnTitle": "Статус",
   "LogsGrid.timeColumnTitle": "Час",
   "LogsGridToolbar.consoleView": "Консольний вигляд",
+  "LogsGridToolbar.errorLogs": "{count, plural, =0 {Немає логів з помилками} one {{currentItem} лог з помилкою} other {{currentItem} of {totalItems} лог з помилкою}}",
   "LogsGridToolbar.hideEmptySteps": "Приховати порожні кроки",
   "LogsGridToolbar.hidePassedLogs": "Приховати пройдені логи",
   "LogsGridToolbar.markdownMode": "Режим розмітки",
+  "LogsGridToolbar.showErrorLog": "Показати",
   "LogsGridToolbar.withAttachments": "Логи з вкладеннями",
   "MakeDecisionModal.addForAll": "будуть додані для всіх вибраних елементів",
   "MakeDecisionModal.allLoadedTIFromHistoryLine": "”To Investigate” елементи з рядка історії та поточний елемент",

app/src/components/main/grid/gridBody/gridRow/gridRow.jsx

@@ -48,6 +48,7 @@ export class GridRow extends Component {
       onGridRowHighlighted: PropTypes.func,
       isGridRowHighlighted: PropTypes.bool,
       highlightedRowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      highlightErrorRow: PropTypes.bool,
     }),
     excludeFromSelection: PropTypes.arrayOf(PropTypes.object),
     gridRowClassName: PropTypes.string,
@@ -72,6 +73,7 @@ export class GridRow extends Component {
       onGridRowHighlighted: () => {},
       isGridRowHighlighted: false,
       highlightedRowId: '',
+      highlightErrorRow: false,
     },
     excludeFromSelection: [],
     gridRowClassName: '',
@@ -107,7 +109,11 @@ export class GridRow extends Component {
     this.overflowCell.style.maxHeight = `${this.overflowCellMaxHeight}px`;
   };
 
-  getHighlightBlockClasses = () => (this.checkIfTheHighlightNeeded() ? cx('highlight') : '');
+  getHighlightBlockClasses = () => {
+    if (!this.checkIfTheHighlightNeeded()) return '';
+
+    return this.props.rowHighlightingConfig.highlightErrorRow ? 'highlight-error-row' : 'highlight';
+  };
 
   handleRowClick = (e) => this.props.onClickRow(e, this.props.value);
 
@@ -127,9 +133,11 @@ export class GridRow extends Component {
 
   highLightGridRow() {
     this.rowRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    setTimeout(() => {
-      this.props.rowHighlightingConfig.onGridRowHighlighted();
-    }, LOG_MESSAGE_HIGHLIGHT_TIMEOUT);
+    const { onGridRowHighlighted } = this.props.rowHighlightingConfig;
+    onGridRowHighlighted &&
+      setTimeout(() => {
+        onGridRowHighlighted();
+      }, LOG_MESSAGE_HIGHLIGHT_TIMEOUT);
   }
 
   removeAccordion = () => {

app/src/components/main/grid/gridBody/gridRow/gridRow.scss

@@ -81,7 +81,7 @@ $LEVEL_OFFSET_STEP: 20px;
     }
   }
 
-  &:hover {
+  &:hover:not(.highlight-error-row):not(.error-row) {
     background-color: $COLOR--tealish-hover;
 
     .accordion-block {
@@ -131,6 +131,10 @@ $LEVEL_OFFSET_STEP: 20px;
     background-color: $COLOR--go-to-stack-trace;
     transition: background-color 0.01s linear;
   }
+
+  &.highlight-error-row {
+    background-color: $COLOR--light-red;
+  }
 }
 .accordion-wrapper {
   position: absolute;
@@ -154,6 +158,13 @@ $LEVEL_OFFSET_STEP: 20px;
     opacity: 0;
   }
 
+  &.highlight-error-row {
+    left: 4px;
+    width: calc(100% - 4px);
+    background-color: $COLOR--white-two;
+    box-shadow: 0 -15px 20px 0px $COLOR--white-two;
+  }
+
   &.expanded {
     box-shadow: none;
   }

app/src/controllers/log/actionCreators.js

@@ -27,6 +27,7 @@ import {
   UPDATE_HISTORY_ITEM_LAUNCH_ATTRIBUTES,
   SET_ACTIVE_TAB_ID,
   FETCH_HISTORY_ITEMS_WITH_LOADING,
+  FETCH_ERROR_LOGS,
 } from './constants';
 
 export const fetchLogPageData = () => ({
@@ -59,6 +60,11 @@ export const clearLogPageStackTrace = () => ({
   type: CLEAR_LOG_PAGE_STACK_TRACE,
 });
 
+export const fetchErrorLogs = (logItem) => ({
+  type: FETCH_ERROR_LOGS,
+  payload: logItem,
+});
+
 export const setPageLoadingAction = (isLoading) => ({
   type: SET_LOG_PAGE_LOADING,
   payload: isLoading,

app/src/controllers/log/constants.js

@@ -21,6 +21,7 @@ export const NAMESPACE = 'log';
 export const LOG_ITEMS_NAMESPACE = `${NAMESPACE}/logItems`;
 export const ACTIVITY_NAMESPACE = `${NAMESPACE}/activity`;
 export const STACK_TRACE_NAMESPACE = `${NAMESPACE}/stackTrace`;
+export const ERROR_LOGS_NAMESPACE = `${NAMESPACE}/errorLogs`;
 export const FETCH_LOG_PAGE_DATA = 'fetchLogPageData';
 export const FETCH_LOG_PAGE_STACK_TRACE = 'fetchLogPageStackTrace';
 export const DEFAULT_HISTORY_DEPTH = 12;
@@ -52,6 +53,7 @@ export const FETCH_HISTORY_LINE_ITEMS = 'FETCH_HISTORY_LINE_ITEMS';
 export const NUMBER_OF_ITEMS_TO_LOAD = 9;
 export const SET_ACTIVE_TAB_ID = 'SET_ACTIVE_TAB_ID';
 export const FETCH_HISTORY_ITEMS_WITH_LOADING = 'ON_UPDATE_ITEM_STATUS';
+export const FETCH_ERROR_LOGS = 'fetchErrorLogs';
 
 export const LOG_LEVELS = [
   {

app/src/controllers/log/index.js

@@ -21,6 +21,7 @@ export {
   fetchLogPageStackTrace,
   setPageLoadingAction,
   clearLogPageStackTrace,
+  fetchErrorLogs,
   updateHistoryItemIssuesAction,
   setIncludeAllLaunchesAction,
   fetchHistoryItemsAction,
@@ -74,6 +75,7 @@ export {
   logStackTraceItemsSelector,
   logStackTracePaginationSelector,
   logStackTraceLoadingSelector,
+  errorLogsItemsSelector,
   isLoadMoreStackTraceVisible,
   logViewModeSelector,
   isLogPageWithOutNestedSteps,

app/src/controllers/log/reducer.js

@@ -33,6 +33,7 @@ import {
   SET_INCLUDE_ALL_LAUNCHES,
   SET_SHOULD_SHOW_LOAD_MORE,
   SET_ACTIVE_TAB_ID,
+  ERROR_LOGS_NAMESPACE,
 } from './constants';
 import { attachmentsReducer } from './attachments';
 import { sauceLabsReducer } from './sauceLabs';
@@ -131,6 +132,9 @@ const reducer = combineReducers({
       stackTraceContentReducer,
     ),
   }),
+  errorLogs: combineReducers({
+    content: fetchReducer(ERROR_LOGS_NAMESPACE, { contentPath: 'content' }),
+  }),
   attachments: attachmentsReducer,
   sauceLabs: sauceLabsReducer,
   nestedSteps: nestedStepsReducer,

app/src/controllers/log/sagas.js

@@ -27,7 +27,11 @@ import { logItemIdSelector, pathnameChangedSelector } from 'controllers/pages';
 import { debugModeSelector } from 'controllers/launch';
 import { createFetchPredicate, fetchDataAction } from 'controllers/fetch';
 import { fetch, isEmptyObject } from 'common/utils';
-import { HISTORY_LINE_DEFAULT_VALUE, FETCH_HISTORY_ITEMS_WITH_LOADING } from 'controllers/log';
+import {
+  HISTORY_LINE_DEFAULT_VALUE,
+  FETCH_HISTORY_ITEMS_WITH_LOADING,
+  fetchErrorLogs,
+} from 'controllers/log';
 import { collectLogPayload } from './sagaUtils';
 import {
   ACTIVITY_NAMESPACE,
@@ -42,6 +46,8 @@ import {
   SET_INCLUDE_ALL_LAUNCHES,
   FETCH_HISTORY_LINE_ITEMS,
   NUMBER_OF_ITEMS_TO_LOAD,
+  FETCH_ERROR_LOGS,
+  ERROR_LOGS_NAMESPACE,
 } from './constants';
 import {
   activeLogIdSelector,
@@ -114,6 +120,21 @@ function* fetchStackTrace({ payload: logItem }) {
   yield take(createFetchPredicate(STACK_TRACE_NAMESPACE));
 }
 
+function* fetchAllErrorLogs({ payload: logItem }) {
+  // TODO replace to new uri, add filters
+  const activeProject = yield select(activeProjectSelector);
+  const page = yield select(logStackTracePaginationSelector);
+  const { path } = logItem;
+  let pageSize = STACK_TRACE_PAGINATION_OFFSET;
+  if (!isEmptyObject(page) && page.totalElements > 0) {
+    const { totalElements, size } = page;
+    pageSize = size >= totalElements ? totalElements : size + STACK_TRACE_PAGINATION_OFFSET;
+  }
+  yield put(
+    fetchDataAction(ERROR_LOGS_NAMESPACE)(URLS.logItemStackTrace(activeProject, path, pageSize)),
+  );
+}
+
 function* fetchHistoryItems({ payload } = { payload: {} }) {
   const { loadMore, callback } = payload;
   const activeProject = yield select(activeProjectSelector);
@@ -197,24 +218,28 @@ function* fetchHistoryItemData() {
 
 function* fetchLogPageData({ meta = {} }) {
   const isPathNameChanged = yield select(pathnameChangedSelector);
-  const logItem = yield select(activeLogSelector);
+  let logItem = yield select(activeLogSelector);
   yield put({ type: CLEAR_NESTED_STEPS });
   if (meta.refresh) {
     const offset = yield select(logPageOffsetSelector);
     yield all([
       put(fetchTestItemsAction({ offset })),
       put(fetchLogPageStackTrace(logItem)),
       put(fetchFirstAttachmentsAction()),
+      put(fetchErrorLogs(logItem)),
       call(fetchLogs),
     ]);
     return;
   }
   if (isPathNameChanged) {
     yield call(fetchWholePage);
+    logItem = yield select(activeLogSelector);
+    yield put(fetchErrorLogs(logItem));
   } else {
     const logViewMode = yield select(logViewModeSelector);
     if (logViewMode === DETAILED_LOG_VIEW) {
       yield call(fetchHistoryItemData);
+      yield put(fetchErrorLogs(logItem));
     } else {
       yield call(fetchLogItems);
     }
@@ -235,6 +260,10 @@ function* watchFetchLogPageStackTrace() {
   yield takeEvery(FETCH_LOG_PAGE_STACK_TRACE, fetchStackTrace);
 }
 
+function* watchFetchErrorLogs() {
+  yield takeEvery(FETCH_ERROR_LOGS, fetchAllErrorLogs);
+}
+
 function* watchFetchLineHistory() {
   yield takeEvery([SET_INCLUDE_ALL_LAUNCHES, FETCH_HISTORY_LINE_ITEMS], fetchHistoryItems);
 }
@@ -247,6 +276,7 @@ export function* logSagas() {
   yield all([
     watchFetchLogPageData(),
     watchFetchLogPageStackTrace(),
+    watchFetchErrorLogs(),
     watchFetchLineHistory(),
     attachmentSagas(),
     sauceLabsSagas(),

app/src/controllers/log/selectors.js

@@ -64,6 +64,8 @@ export const logStackTraceSelector = (state) => logSelector(state).stackTrace ||
 export const logStackTraceItemsSelector = (state) => logStackTraceSelector(state).content;
 export const logStackTracePaginationSelector = (state) => logStackTraceSelector(state).pagination;
 export const logStackTraceLoadingSelector = (state) => logStackTraceSelector(state).loading;
+export const errorLogsSelector = (state) => logSelector(state).errorLogs || {};
+export const errorLogsItemsSelector = (state) => errorLogsSelector(state).content;
 export const pageLoadingSelector = (state) => logSelector(state).pageLoading;
 export const includeAllLaunchesSelector = (state) => logSelector(state).includeAllLaunches;
 export const shouldShowLoadMoreSelector = (state) => logSelector(state).shouldShowLoadMore;

app/src/pages/inside/logsPage/logsGrid/logsGrid.jsx

@@ -139,6 +139,11 @@ export class LogsGrid extends Component {
     logStatus: PropTypes.string,
     onChangeLogStatusFilter: PropTypes.func,
     isNestedStepView: PropTypes.bool,
+    rowHighlightingConfig: PropTypes.shape({
+      isGridRowHighlighted: PropTypes.bool,
+      highlightedRowId: PropTypes.number,
+      highlightErrorRow: PropTypes.bool,
+    }),
   };
 
   static defaultProps = {
@@ -154,6 +159,7 @@ export class LogsGrid extends Component {
     logStatus: null,
     onChangeLogStatusFilter: () => {},
     isNestedStepView: false,
+    rowHighlightingConfig: {},
   };
 
   getConsoleViewColumns = () => [
@@ -260,12 +266,15 @@ export class LogsGrid extends Component {
     this.props.consoleView ? this.getConsoleViewColumns() : this.getDefaultViewColumns();
 
   getLogRowClasses = (value) => {
-    const { consoleView } = this.props;
+    const { consoleView, rowHighlightingConfig } = this.props;
+    const isHighlightedErrorLog = rowHighlightingConfig.highlightedRowId === value.id;
 
     return {
       log: true,
-      'error-row': !consoleView && (value.level === ERROR || value.level === FATAL),
+      'error-row':
+        !consoleView && (value.level === ERROR || value.level === FATAL) && !isHighlightedErrorLog,
       'row-console': consoleView,
+      'highlight-error-row': isHighlightedErrorLog,
     };
   };
 
@@ -308,6 +317,7 @@ export class LogsGrid extends Component {
       sortingColumn,
       sortingDirection,
       onChangeSorting,
+      rowHighlightingConfig,
     } = this.props;
 
     return (
@@ -323,6 +333,7 @@ export class LogsGrid extends Component {
           onChangeSorting={onChangeSorting}
           toggleAccordionEventInfo={LOG_PAGE_EVENTS.EXPAND_LOG_MSG}
           nestedStepHeader={this.renderNestedStepHeader}
+          rowHighlightingConfig={rowHighlightingConfig}
           nestedView
         />
         {!logItems.length && !loading && (