feat: add queries statistics for mysql

packages/manager/apps/pci-databases-analytics/src/__tests__/helpers/mocks/queries.ts

@@ -27,13 +27,13 @@ export const mockedQueries: database.service.currentqueries.Query = {
 
 export const mockedQueryStatistics: database.mysql.querystatistics.Query = {
   avgTimerWait: 3,
-  countStar: 3,
+  countStar: 11,
   digest: 'digest',
   digestText: 'digestText',
   firstSeen: 'firstSeen',
   lastSeen: 'lastSeen',
-  maxTimerWait: 3,
-  minTimerWait: 3,
+  maxTimerWait: 9,
+  minTimerWait: 2.01,
   quantile95: 3,
   quantile99: 1,
   quantile999: 78987,
@@ -49,7 +49,7 @@ export const mockedQueryStatistics: database.mysql.querystatistics.Query = {
   sumNoIndexUsed: 3,
   sumRowsAffected: 3,
   sumRowsExamined: 3,
-  sumRowsSent: 3,
+  sumRowsSent: 8,
   sumSelectFullJoin: 3,
   sumSelectFullRangeJoin: 3,
   sumSelectRange: 3,
@@ -59,7 +59,7 @@ export const mockedQueryStatistics: database.mysql.querystatistics.Query = {
   sumSortRange: 3,
   sumSortRows: 3,
   sumSortScan: 3,
-  sumTimerWait: 3,
+  sumTimerWait: 4,
   sumWarnings: 3,
 };
 

packages/manager/apps/pci-databases-analytics/src/pages/services/[serviceId]/queries/Queries.page.tsx

@@ -2,10 +2,10 @@ import { useTranslation } from 'react-i18next';
 import { useServiceData } from '../Service.context';
 import * as database from '@/types/cloud/project/database';
 import CurrentQueries from './_components/CurrentQueries.component';
-import QueryStatistics from './_components/QueryStatistics.component';
 import BreadcrumbItem from '@/components/breadcrumb/BreadcrumbItem.component';
 import Guides from '@/components/guides/Guides.component';
 import { GuideSections } from '@/types/guide';
+import QueryStatistics from './_components/QueryStatistics.component';
 
 export function breadcrumb() {
   return (
@@ -30,10 +30,7 @@ const Queries = () => {
       {service.capabilities.currentQueries?.read ===
         database.service.capability.StateEnum.enabled && <CurrentQueries />}
       {service.capabilities.queryStatistics?.read ===
-        database.service.capability.StateEnum.enabled &&
-        service.engine === database.EngineEnum.postgresql && (
-          <QueryStatistics />
-        )}
+        database.service.capability.StateEnum.enabled && <QueryStatistics />}
     </>
   );
 };

packages/manager/apps/pci-databases-analytics/src/pages/services/[serviceId]/queries/Queries.spec.tsx

@@ -18,6 +18,7 @@ import { RouterWithQueryClientWrapper } from '@/__tests__/helpers/wrappers/Route
 import { mockedService as mockedServiceOrig } from '@/__tests__/helpers/mocks/services';
 import {
   mockedQueries,
+  mockedQueryStatistics,
   mockedQueryStatisticsPG,
 } from '@/__tests__/helpers/mocks/queries';
 import { CdbError } from '@/data/api/database';
@@ -246,4 +247,45 @@ describe('Action of queries and statistics', () => {
       expect(queriesApi.cancelCurrentQuery).toHaveBeenCalled();
     });
   });
+
+  it('renders and shows mysql queries statistics table', async () => {
+    vi.mocked(ServiceContext.useServiceData).mockReturnValue({
+      projectId: 'projectId',
+      service: {
+        ...mockedService,
+        engine: database.EngineEnum.mysql,
+      },
+      category: 'operational',
+      serviceQuery: {} as UseQueryResult<database.Service, CdbError>,
+    });
+    vi.mocked(queriesApi.getQueryStatistics).mockResolvedValue([
+      mockedQueryStatistics,
+    ]);
+
+    render(<Queries />, { wrapper: RouterWithQueryClientWrapper });
+    await waitFor(() => {
+      expect(
+        screen.getByText(mockedQueryStatistics.sumRowsSent),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(mockedQueryStatistics.countStar),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(mockedQueryStatistics.minTimerWait.toFixed(2)),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(mockedQueryStatistics.maxTimerWait.toFixed(2)),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          (
+            mockedQueryStatistics.sumTimerWait / mockedQueryStatistics.countStar
+          ).toFixed(2),
+        ),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(mockedQueryStatistics.sumTimerWait.toFixed(2)),
+      ).toBeInTheDocument();
+    });
+  });
 });

packages/manager/apps/pci-databases-analytics/src/pages/services/[serviceId]/queries/_components/QueryStatistics.component.tsx

@@ -6,10 +6,11 @@ import DataTable from '@/components/data-table';
 import * as database from '@/types/cloud/project/database';
 import { Button } from '@/components/ui/button';
 import { useToast } from '@/components/ui/use-toast';
-import { getColumns } from './QueryStatisticsTableColumns.component';
 import { useGetQueryStatistics } from '@/hooks/api/database/query/useGetQueryStatistics.hook';
 import { useResetQueryStatistics } from '@/hooks/api/database/query/useResetQueryStatistics.hook';
 import { getCdbApiErrorMessage } from '@/lib/apiHelper';
+import { getColumns } from './QueryStatisticsTableColumns.component';
+import { QueryStatistics as QueryStatisticsType } from '@/data/api/database/queries.api';
 
 const QueryStatistics = () => {
   const { t } = useTranslation(
@@ -46,9 +47,9 @@ const QueryStatistics = () => {
     });
   };
 
-  const columns: ColumnDef<
-    database.postgresql.querystatistics.Query
-  >[] = getColumns();
+  const columns = getColumns(service.engine) as ColumnDef<
+    QueryStatisticsType
+  >[];
   return (
     <>
       <h3>{t('queryStatisticsTitle')}</h3>
@@ -74,9 +75,7 @@ const QueryStatistics = () => {
       {queryStatisticsQuery.isSuccess ? (
         <DataTable.Provider
           columns={columns}
-          data={
-            queryStatisticsQuery.data as database.postgresql.querystatistics.Query[]
-          }
+          data={queryStatisticsQuery.data as QueryStatisticsType[]}
           pageSize={25}
         />
       ) : (

packages/manager/apps/pci-databases-analytics/src/pages/services/[serviceId]/queries/_components/QueryStatisticsTableColumns.component.tsx

@@ -4,85 +4,156 @@ import DataTable from '@/components/data-table';
 import { ExpandableSqlQuery } from './ExpandableSqlQuery.component';
 import * as database from '@/types/cloud/project/database';
 
-export const getColumns = () => {
+export const getColumns = (engine: database.EngineEnum) => {
   const { t } = useTranslation(
     'pci-databases-analytics/services/service/queries',
   );
+
+  if (engine === database.EngineEnum.postgresql) {
+    return [
+      {
+        id: 'query',
+        header: ({ column }) => (
+          <DataTable.SortableHeader column={column}>
+            {t('tableQueryStatisticsHeadName')}
+          </DataTable.SortableHeader>
+        ),
+        accessorFn: (row) => row.query,
+        cell: ({ row }) => <ExpandableSqlQuery sqlQuery={row.original.query} />,
+      },
+      {
+        id: 'rows',
+        header: ({ column }) => (
+          <DataTable.SortableHeader column={column}>
+            {t('tableQueryStatisticsHeadRows')}
+          </DataTable.SortableHeader>
+        ),
+        accessorFn: (row) => row.rows,
+      },
+      {
+        id: 'calls',
+        header: ({ column }) => (
+          <DataTable.SortableHeader column={column}>
+            {t('tableQueryStatisticsHeadCalls')}
+          </DataTable.SortableHeader>
+        ),
+        accessorFn: (row) => row.calls,
+      },
+      {
+        id: 'minTime',
+        header: ({ column }) => (
+          <DataTable.SortableHeader column={column}>
+            {t('tableQueryStatisticsHeadMinTime')}
+          </DataTable.SortableHeader>
+        ),
+        accessorFn: (row) => row.minTime.toFixed(2),
+      },
+      {
+        id: 'maxTime',
+        header: ({ column }) => (
+          <DataTable.SortableHeader column={column}>
+            {t('tableQueryStatisticsHeadMaxTime')}
+          </DataTable.SortableHeader>
+        ),
+        accessorFn: (row) => row.maxTime.toFixed(2),
+      },
+      {
+        id: 'meanTime',
+        header: ({ column }) => (
+          <DataTable.SortableHeader column={column}>
+            {t('tableQueryStatisticsHeadMeanTime')}
+          </DataTable.SortableHeader>
+        ),
+        accessorFn: (row) => row.meanTime.toFixed(2),
+      },
+      {
+        id: 'stdDevTime',
+        header: ({ column }) => (
+          <DataTable.SortableHeader column={column}>
+            {t('tableQueryStatisticsHeadStdDevTime')}
+          </DataTable.SortableHeader>
+        ),
+        accessorFn: (row) => row.stddevTime.toFixed(2),
+      },
+      {
+        id: 'totalTime',
+        header: ({ column }) => (
+          <DataTable.SortableHeader column={column}>
+            {t('tableQueryStatisticsHeadTotalTime')}
+          </DataTable.SortableHeader>
+        ),
+        accessorFn: (row) => row.totalTime.toFixed(2),
+      },
+    ] as ColumnDef<database.postgresql.querystatistics.Query>[];
+  }
+
+  // MySQL Columns
   return [
     {
-      id: 'query',
+      id: 'digestText',
       header: ({ column }) => (
         <DataTable.SortableHeader column={column}>
           {t('tableQueryStatisticsHeadName')}
         </DataTable.SortableHeader>
       ),
-      accessorFn: (row) => row.query,
-      cell: ({ row }) => <ExpandableSqlQuery sqlQuery={row.original.query} />,
+      accessorFn: (row) => row.digestText,
+      cell: ({ row }) => (
+        <ExpandableSqlQuery sqlQuery={row.original.digestText} />
+      ),
     },
     {
-      id: 'rows',
+      id: 'sumRowsSent',
       header: ({ column }) => (
         <DataTable.SortableHeader column={column}>
           {t('tableQueryStatisticsHeadRows')}
         </DataTable.SortableHeader>
       ),
-      accessorFn: (row) => row.rows,
+      accessorFn: (row) => row.sumRowsSent,
     },
     {
-      id: 'calls',
+      id: 'countStar',
       header: ({ column }) => (
         <DataTable.SortableHeader column={column}>
           {t('tableQueryStatisticsHeadCalls')}
         </DataTable.SortableHeader>
       ),
-      accessorFn: (row) => row.calls,
+      accessorFn: (row) => row.countStar,
     },
     {
-      id: 'minTime',
+      id: 'minTimerWait',
       header: ({ column }) => (
         <DataTable.SortableHeader column={column}>
           {t('tableQueryStatisticsHeadMinTime')}
         </DataTable.SortableHeader>
       ),
-      accessorFn: (row) => row.minTime.toFixed(2),
+      accessorFn: (row) => row.minTimerWait.toFixed(2),
     },
     {
-      id: 'maxTime',
+      id: 'maxTimerWait',
       header: ({ column }) => (
         <DataTable.SortableHeader column={column}>
           {t('tableQueryStatisticsHeadMaxTime')}
         </DataTable.SortableHeader>
       ),
-      accessorFn: (row) => row.maxTime.toFixed(2),
+      accessorFn: (row) => row.maxTimerWait.toFixed(2),
     },
-
     {
-      id: 'meamTime',
+      id: 'meanTime',
       header: ({ column }) => (
         <DataTable.SortableHeader column={column}>
           {t('tableQueryStatisticsHeadMeanTime')}
         </DataTable.SortableHeader>
       ),
-      accessorFn: (row) => row.meanTime.toFixed(2),
-    },
-
-    {
-      id: 'stdDevTime',
-      header: ({ column }) => (
-        <DataTable.SortableHeader column={column}>
-          {t('tableQueryStatisticsHeadStdDevTime')}
-        </DataTable.SortableHeader>
-      ),
-      accessorFn: (row) => row.stddevTime.toFixed(2),
+      accessorFn: (row) => (row.sumTimerWait / row.countStar).toFixed(2),
     },
     {
-      id: 'totalTime',
+      id: 'sumTimerWait',
       header: ({ column }) => (
         <DataTable.SortableHeader column={column}>
           {t('tableQueryStatisticsHeadTotalTime')}
         </DataTable.SortableHeader>
       ),
-      accessorFn: (row) => row.totalTime.toFixed(2),
+      accessorFn: (row) => row.sumTimerWait.toFixed(2),
     },
-  ] as ColumnDef<database.postgresql.querystatistics.Query>[];
+  ] as ColumnDef<database.mysql.querystatistics.Query>[];
 };