fix folder name

Author: egor-zalenski

redisinsight/ui/src/pages/browser/components/stream-details/stream-data-view/StreamDataView/StreamDataView.spec.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { render } from 'uiSrc/utils/test-utils'
+import StreamDataView, { Props } from './StreamDataView'
+
+const mockedProps = mock<Props>()
+
+describe('StreamDataView', () => {
+  it('should render', () => {
+    expect(render(<StreamDataView {...instance(mockedProps)} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/pages/browser/components/stream-details/stream-data-view/StreamDataView/StreamDataView.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { isNull } from 'lodash'
+import cx from 'classnames'
+
+import {
+  fetchStreamEntries,
+  streamDataSelector,
+  streamSelector,
+} from 'uiSrc/slices/browser/stream'
+import VirtualTable from 'uiSrc/components/virtual-table/VirtualTable'
+import { ITableColumn } from 'uiSrc/components/virtual-table/interfaces'
+import { selectedKeyDataSelector } from 'uiSrc/slices/browser/keys'
+import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
+import { SortOrder } from 'uiSrc/constants'
+import { StreamEntryDto } from 'apiSrc/modules/browser/dto/stream.dto'
+
+import styles from './styles.module.scss'
+
+const headerHeight = 60
+const rowHeight = 54
+const actionsWidth = 54
+const minColumnWidth = 190
+const noItemsMessageInEmptyStream = 'There are no Entries in the Stream.'
+const noItemsMessageInRange = 'No results found.'
+
+interface IStreamEntry extends StreamEntryDto {
+  editing: boolean
+}
+
+export interface Props {
+  data: IStreamEntry[]
+  columns: ITableColumn[]
+  onEditEntry: (entryId:string, editing: boolean) => void
+  onClosePopover: () => void
+  loadMoreItems: () => void
+  isFooterOpen?: boolean
+}
+
+const StreamDataView = (props: Props) => {
+  const { data: entries = [], columns = [], onClosePopover, loadMoreItems, isFooterOpen } = props
+  const dispatch = useDispatch()
+
+  const { loading } = useSelector(streamSelector)
+  const {
+    total,
+    firstEntry,
+    lastEntry,
+  } = useSelector(streamDataSelector)
+  const { name: key } = useSelector(selectedKeyDataSelector) ?? { name: '' }
+
+  const [sortedColumnName, setSortedColumnName] = useState<string>('id')
+  const [sortedColumnOrder, setSortedColumnOrder] = useState<SortOrder>(SortOrder.DESC)
+
+  const onChangeSorting = (column: any, order: SortOrder) => {
+    setSortedColumnName(column)
+    setSortedColumnOrder(order)
+
+    dispatch(fetchStreamEntries(key, SCAN_COUNT_DEFAULT, order, false))
+  }
+
+  return (
+    <>
+
+      <div
+        className={cx(
+          'key-details-table',
+          'stream-details-table',
+          styles.container,
+          { footerOpened: isFooterOpen }
+        )}
+        data-test-id="stream-entries-container"
+      >
+        {/* <div className={styles.columnManager}>
+          <EuiButtonIcon iconType="boxesVertical" aria-label="manage columns" />
+        </div> */}
+        <VirtualTable
+          hideProgress
+          selectable={false}
+          keyName={key}
+          headerHeight={entries?.length ? headerHeight : 0}
+          rowHeight={rowHeight}
+          columns={columns}
+          footerHeight={0}
+          loadMoreItems={loadMoreItems}
+          loading={loading}
+          items={entries}
+          totalItemsCount={total}
+          onWheel={onClosePopover}
+          onChangeSorting={onChangeSorting}
+          noItemsMessage={isNull(firstEntry) && isNull(lastEntry) ? noItemsMessageInEmptyStream : noItemsMessageInRange}
+          tableWidth={columns.length * minColumnWidth - actionsWidth}
+          sortedColumn={entries?.length ? {
+            column: sortedColumnName,
+            order: sortedColumnOrder,
+          } : undefined}
+        />
+      </div>
+    </>
+  )
+}
+
+export default StreamDataView

redisinsight/ui/src/pages/browser/components/stream-details/stream-data-view/StreamDataView/index.ts

@@ -0,0 +1,3 @@
+import StreamDataView from './StreamDataView'
+
+export default StreamDataView

redisinsight/ui/src/pages/browser/components/stream-details/stream-data-view/StreamDataView/styles.module.scss

@@ -0,0 +1,94 @@
+.container {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  padding-top: 3px;
+  background-color: var(--euiColorEmptyShade);
+
+  :global {
+    .ReactVirtualized__Grid__innerScrollContainer {
+      .ReactVirtualized__Table__rowColumn {
+        border-right: 1px solid var(--tableDarkestBorderColor) !important;
+
+        &:last-of-type,
+        &:nth-last-of-type(2) {
+          border-right: none !important;
+        }
+      }
+
+      .ReactVirtualized__Table__row {
+        border-bottom: 1px solid var(--tableDarkestBorderColor) !important;
+        &:last-of-type {
+          border-bottom: none !important;
+        }
+      }
+
+      & > div:hover {
+        background: var(--euiColorLightestShade);
+
+        .value-table-actions {
+          background-color: var(--euiColorLightestShade) !important;
+        }
+
+        .streamEntry {
+          color: var(--inputTextColor) !important;
+        }
+
+        .streamEntryId {
+          color: var(--euiTextSubduedColor) !important;
+        }
+      }
+    }
+
+    .ReactVirtualized__Table__headerRow {
+      border: none !important;
+    }
+
+    .ReactVirtualized__Table__Grid {
+      border: 1px solid var(--tableDarkestBorderColor) !important;
+    }
+  }
+
+  .cellHeader {
+    border: none !important;
+  }
+}
+
+:global(.streamEntry) {
+  color: var(--euiTextSubduedColor) !important;
+  white-space: normal;
+  max-width: 100%;
+  word-break: break-all;
+}
+
+:global(.streamEntryId) {
+  color: var(--euiColorMediumShade) !important;
+  display: flex;
+}
+
+:global(.stream-entry-actions) {
+  margin-left: -5px;
+}
+
+.actions,
+.actionsHeader {
+  width: 54px;
+}
+
+.actions {
+  :global(.value-table-actions) {
+    background-color: var(--euiColorEmptyShade) !important;
+  }
+}
+
+.columnManager {
+  z-index: 11;
+  position: absolute;
+  right: 18px;
+  margin-top: 20px;
+  width: 40px;
+  button {
+    width: 40px;
+    background-color: var(--euiColorEmptyShade) !important;
+  }
+}