Merge branch 'feature/RI-2586_database_analysis' into fe/feature/RI-3558_extrapolate-results

# Conflicts:
#	redisinsight/ui/src/components/charts/donut-chart/DonutChart.tsx
#	redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.tsx

Author: rsergeenko

redisinsight/ui/src/components/charts/donut-chart/DonutChart.spec.tsx

@@ -72,6 +72,11 @@ describe('DonutChart', () => {
     expect(screen.getByTestId('label-E-30')).toHaveTextContent('E: 30')
   })
 
+  it('should render label value without title', () => {
+    render(<DonutChart data={mockData} config={{ percentToShowLabel: 5 }} hideLabelTitle />)
+    expect(screen.getByTestId('label-E-30').textContent).toBe('30')
+  })
+
   it('should call render tooltip and label methods', () => {
     const renderLabel = jest.fn()
     const renderTooltip = jest.fn()

redisinsight/ui/src/components/charts/donut-chart/DonutChart.tsx

@@ -57,7 +57,7 @@ const DonutChart = (props: IProps) => {
     labelAs = 'value',
     renderLabel,
     renderTooltip,
-    hideLabelTitle = false
+    hideLabelTitle = false,
   } = props
 
   const margin = config?.margin || 98
@@ -123,6 +123,15 @@ const DonutChart = (props: IProps) => {
     return `translate(${(x / h) * (radius + 12)}, ${((y + 4) / h) * (radius + 12)})`
   }
 
+  useEffect(() => {
+    d3
+      .select(svgRef.current)
+      .attr('width', width)
+      .attr('height', height)
+      .select('g')
+      .attr('transform', `translate(${width / 2},${height / 2})`)
+  }, [height, width])
+
   useEffect(() => {
     const pie = d3.pie<ChartData>().value((d: ChartData) => d.value).sort(null)
     const dataReady = pie(data.filter((d) => d.value !== 0))
@@ -184,7 +193,7 @@ const DonutChart = (props: IProps) => {
         return truncateNumberToRange(d.value)
       })
       .attr('class', cx(styles.chartLabelValue, classNames?.arcLabelValue))
-  }, [data])
+  }, [data, hideLabelTitle])
 
   if (!data.length || sum === 0) {
     return null

redisinsight/ui/src/components/monitor/Monitor/Monitor.tsx

@@ -76,7 +76,7 @@ const Monitor = (props: Props) => {
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiTextColor color="warning" className="warning--light" style={{ paddingLeft: 4 }} data-testid="monitor-warning-message">
-              Running Profiler will decrease throughput, avoid running it in production databases
+              Running Profiler will decrease throughput, avoid running it in production databases.
             </EuiTextColor>
           </EuiFlexItem>
         </EuiFlexGroup>

redisinsight/ui/src/pages/databaseAnalysis/components/empty-analysis-message/EmptyAnalysisMessage.tsx

@@ -15,7 +15,7 @@ interface Props {
 const emptyMessageContent: { [key in EmptyMessage]: Content } = {
   [EmptyMessage.Reports]: {
     title: 'No Reports found',
-    text: () => 'Run "New Analysis" to generate first report'
+    text: () => 'Run "New Analysis" to generate first report.'
   },
   [EmptyMessage.Keys]: {
     title: 'No keys to display',

redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.tsx

@@ -20,11 +20,16 @@ export interface Props {
   onSwitchExtrapolation?: (value: boolean) => void
 }
 
+const widthResponsiveSize = 1024
+const CHART_WITH_LABELS_WIDTH = 432
+const CHART_WIDTH = 320
+
 const SummaryPerData = ({ data, loading, extrapolation, onSwitchExtrapolation }: Props) => {
   const { totalMemory, totalKeys } = data || {}
   const [memoryData, setMemoryData] = useState<ChartData[]>([])
   const [keysData, setKeysData] = useState<ChartData[]>([])
   const [isExtrapolated, setIsExtrapolated] = useState<boolean>(true)
+  const [hideLabelTitle, setHideLabelTitle] = useState(false)
 
   const getChartData = (t: SimpleTypeSummary) => ({
     value: t.total,
@@ -33,10 +38,22 @@ const SummaryPerData = ({ data, loading, extrapolation, onSwitchExtrapolation }:
     meta: { ...t }
   })
 
+  const updateChartSize = () => {
+    setHideLabelTitle(globalThis.innerWidth < widthResponsiveSize)
+  }
+
   useEffect(() => {
     setIsExtrapolated(extrapolation !== 1)
   }, [data, extrapolation])
 
+  useEffect(() => {
+    updateChartSize()
+    globalThis.addEventListener('resize', updateChartSize)
+    return () => {
+      globalThis.removeEventListener('resize', updateChartSize)
+    }
+  }, [])
+
   useEffect(() => {
     if (data && totalMemory && totalKeys) {
       setMemoryData(totalMemory.types?.map(getChartData) as ChartData[])
@@ -125,7 +142,8 @@ const SummaryPerData = ({ data, loading, extrapolation, onSwitchExtrapolation }:
           name="memory"
           data={memoryData}
           labelAs="percentage"
-          width={432}
+          hideLabelTitle={hideLabelTitle}
+          width={hideLabelTitle ? CHART_WIDTH : CHART_WITH_LABELS_WIDTH}
           config={{ radius: 94 }}
           renderTooltip={renderMemoryTooltip}
           title={(
@@ -151,7 +169,8 @@ const SummaryPerData = ({ data, loading, extrapolation, onSwitchExtrapolation }:
           name="keys"
           data={keysData}
           labelAs="percentage"
-          width={432}
+          hideLabelTitle={hideLabelTitle}
+          width={hideLabelTitle ? CHART_WIDTH : CHART_WITH_LABELS_WIDTH}
           config={{ radius: 94 }}
           renderTooltip={renderKeysTooltip}
           title={(

tests/e2e/docker.web.docker-compose.yml

@@ -11,6 +11,7 @@ services:
       - ./report:/usr/src/app/report
       - ./plugins:/usr/src/app/plugins
       - .redisinsight-v2:/root/.redisinsight-v2
+      - .ritmp:/tmp
     env_file:
       - ./.env
     entrypoint: [
@@ -38,4 +39,5 @@ services:
       - ./.env
     volumes:
       - .redisinsight-v2:/root/.redisinsight-v2
+      - .ritmp:/tmp
 

tests/e2e/pageObjects/memory-efficiency-page.ts

@@ -14,15 +14,19 @@ export class MemoryEfficiencyPage {
     showNoExpiryToggle = Selector('[data-testid=show-no-expiry-switch]');
     reportItem = Selector('[data-test-subj^=items-report-]');
     selectedReport = Selector('[data-testid=select-report]');
+    sortByLength = Selector('[data-testid=btn-change-table-keys]');
     // ICONS
     reportTooltipIcon = Selector('[data-testid=db-new-reports-icon]');
     // TEXT ELEMENTS
     noReportsText = Selector('[data-testid=empty-analysis-no-reports]');
     noKeysText = Selector('[data-testid=empty-analysis-no-keys]');
     scannedPercentageInReport = Selector('[data-testid=analysis-progress]');
     scannedKeysInReport = Selector('[data-testid=bulk-delete-summary]');
+    topKeysTitle = Selector('[data-testid=top-keys-title]');
+    topKeysKeyName = Selector('[data-testid=top-keys-table-name]');
     // TABLE
-    tableRows = Selector('tr[class*=euiTableRow]');
+    namespaceTable = Selector('[data-testid=nsp-table-memory]');
+    nameSpaceTableRows = this.namespaceTable.find('[data-testid^=row-]');
     expandedRow = Selector('#row_test_expansion');
     tableKeyPatternHeader = Selector('[data-test-subj*=tableHeaderCell_nsp]');
     tableMemoryHeader = Selector('[data-test-subj*=tableHeaderCell_memory]');

tests/e2e/pageObjects/workbench-page.ts

@@ -51,6 +51,7 @@ export class WorkbenchPage {
     cancelButton = Selector('[data-testid=cancel-btn]');
     applyButton = Selector('[data-testid=apply-btn]');
     documentButtonInQuickGuides = Selector('[data-testid=accordion-button-document]');
+    guidesGraphAccordion = Selector('[data-testid=accordion-button-graph]');
     redisStackTutorialsButton = Selector('[data-testid=accordion-button-redis_stack]');
     nextPageButton = Selector('[data-testid=enablement-area__next-page-btn]');
     prevPageButton = Selector('[data-testid=enablement-area__prev-page-btn]');
@@ -60,6 +61,7 @@ export class WorkbenchPage {
     showSalesPerRegiomButton = Selector('[data-testid="preselect-Show all sales per region"]');
     queryCardNoModuleButton = Selector('[data-testid=query-card-no-module-button] a');
     rawModeBtn = Selector('[data-testid="btn-change-mode"]');
+    closeEnablementPage = Selector('[data-testid=enablement-area__page-close]');
     groupMode = Selector('[data-testid=btn-change-group-mode]');
     copyCommand = Selector('[data-testid=copy-command]');
     redisStackTimeSeriesLoadMorePoints = Selector('[data-testid=preselect-Load more data points]');
@@ -69,7 +71,9 @@ export class WorkbenchPage {
     //LINKS
     timeSeriesLink = Selector('[data-testid=internal-link-redis_for_time_series]');
     redisStackLinks = Selector('[data-testid=accordion-redis_stack] [data-testid^=internal-link]');
-    workingWithGraphLink = Selector('[data-testid=internal-link-working_with_graphs]');
+    tutorialsWorkingWithGraphLink = Selector('[data-testid=internal-link-working_with_graphs]');
+    guidesWorkingWithGraphLink = Selector('[data-testid=internal-link-working-with-graphs]');
+    guidesIntroductionGraphLink = Selector('[data-testid=internal-link-introduction]');
     internalLinkWorkingWithHashes = Selector('[data-testid=internal-link-working-with-hashes]');
     vectorSimilitaritySearchButton = Selector('[data-testid=internal-link-vector_similarity_search]');
     //TEXT INPUTS (also referred to as 'Text fields')
@@ -104,6 +108,7 @@ export class WorkbenchPage {
     runButtonToolTip = Selector('[data-testid=run-query-tooltip]');
     loadedCommand = Selector('[class=euiLoadingContent__singleLine]');
     runButtonSpinner = Selector('[data-testid=loading-spinner]');
+    enablementAreaEmptyContent = Selector('[data-testid=enablement-area__empty-prompt]');
     workbenchCommandInHistory = Selector(this.cssWorkbenchCommandInHistory);
     workbenchCommandSuccessResultInHistory = Selector(this.cssWorkbenchCommandSuccessResultInHistory);
     workbenchCommandFailedResultInHistory = Selector(this.cssWorkbenchCommandFailedResultInHistory);

tests/e2e/tests/critical-path/database/autoupdate-of-json.e2e.ts

@@ -0,0 +1,77 @@
+import { join } from 'path';
+import * as os from 'os';
+import * as fs from 'fs';
+import * as editJsonFile from 'edit-json-file';
+import { acceptLicenseTermsAndAddDatabaseApi} from '../../../helpers/database';
+import { MyRedisDatabasePage, WorkbenchPage } from '../../../pageObjects';
+import { commonUrl, ossStandaloneConfig } from '../../../helpers/conf';
+import { rte, env } from '../../../helpers/constants';
+import { deleteStandaloneDatabaseApi } from '../../../helpers/api/api-database';
+
+const myRedisDatabasePage = new MyRedisDatabasePage();
+const workbenchPage = new WorkbenchPage();
+
+const workingDirectory = process.env.APP_FOLDER_ABSOLUTE_PATH
+    || (join(os.homedir(), process.env.APP_FOLDER_NAME || '.redisinsight-v2'));
+if (fs.existsSync(workingDirectory)) {
+    // Guides content
+    const guidesTimestampPath = `${workingDirectory}/guides/build.json`;
+    const guidesGraphIntroductionFilePath = `${workingDirectory}/guides/quick-guides/graph/introduction.md`;
+
+    // Tutorials content
+    const tutorialsTimestampPath = `${workingDirectory}/tutorials/build.json`;
+    const tutorialsTimeSeriesFilePath = `${workingDirectory}/tutorials/redis_stack/redis_for_time_series.md`;
+
+    // Remove md files from local folder. When desktop tests are started, files will be updated from remote repository
+    // Need to uncomment when desktop tests are started
+    // fs.unlinkSync(guidesGraphIntroductionFilePath);
+    // fs.unlinkSync(tutorialsTimeSeriesFilePath);
+
+    // Update timestamp for build files
+    const guidesTimestampFile = editJsonFile(guidesTimestampPath);
+    const tutorialsTimestampFile = editJsonFile(tutorialsTimestampPath);
+
+    const guidesNewTimestamp = guidesTimestampFile.get('timestamp') - 10;
+    const tutorialNewTimestamp = tutorialsTimestampFile.get('timestamp') - 10;
+
+    guidesTimestampFile.set('timestamp', guidesNewTimestamp);
+    guidesTimestampFile.save();
+    tutorialsTimestampFile.set('timestamp', tutorialNewTimestamp);
+    tutorialsTimestampFile.save();
+
+    fixture `Auto-update in Enablement Area`
+        .meta({ type: 'critical_path' })
+        .page(commonUrl)
+        .beforeEach(async() => {
+            await acceptLicenseTermsAndAddDatabaseApi(ossStandaloneConfig, ossStandaloneConfig.databaseName);
+        })
+        .afterEach(async() => {
+            await deleteStandaloneDatabaseApi(ossStandaloneConfig);
+        });
+    test
+        .meta({ rte: rte.standalone, env: env.desktop })('Verify that user can see updated info in Enablement Area', async t => {
+            // Create new file due to cache-ability
+            const guidesTimestampFileNew = editJsonFile(guidesTimestampPath);
+            const tutorialsTimestampFileNew = editJsonFile(tutorialsTimestampPath);
+
+            // Open Workbench page
+            await t.click(myRedisDatabasePage.workbenchButton);
+
+            // Check Enablement area and validate that removed file is existed in Guides
+            await t.click(workbenchPage.guidesGraphAccordion);
+            await t.click(workbenchPage.guidesIntroductionGraphLink.nth(1));
+            await t.expect(workbenchPage.enablementAreaEmptyContent.visible).notOk('Guides folder is not updated');
+            await t.click(workbenchPage.closeEnablementPage);
+
+            // Check Enablement area and validate that removed file is existed in Tutorials
+            await t.click(workbenchPage.redisStackTutorialsButton);
+            await t.click(workbenchPage.timeSeriesLink);
+            await t.expect(workbenchPage.enablementAreaEmptyContent.visible).notOk('Tutorials folder is not updated');
+
+            // Check that timestamp is new
+            const actualGuidesTimestamp = await guidesTimestampFileNew.get('timestamp');
+            const actualTutorialTimestamp = await tutorialsTimestampFileNew.get('timestamp');
+            await t.expect(actualGuidesTimestamp).notEql(guidesNewTimestamp, 'Guides timestamp is not updated');
+            await t.expect(actualTutorialTimestamp).notEql(tutorialNewTimestamp, 'Tutorials timestamp is not updated');
+        });
+}