Merge pull request #432 from bartoval/refactor_topology_types

Refactor topology types

jest.config.ts

@@ -38,7 +38,7 @@ const config = {
     '^.+\\.svg$': `${MOCKS_PATH}/${FILE_MOCK}`,
     '.+\\.(png)$': `${MOCKS_PATH}/${FILE_MOCK}`
   },
-  coveragePathIgnorePatterns: ['API', './src/index.tsx', 'routes.tsx', './src/config', 'core/components/Graph']
+  coveragePathIgnorePatterns: ['API', './src/index.tsx', 'routes.tsx', './src/config', 'core/components/SkGraph']
 };
 
 export default config;

src/config/prometheus.ts

@@ -1,25 +1,5 @@
 import { IntervalTimeMap } from '@API/Prometheus.interfaces';
 
-export const timeIntervalMap: IntervalTimeMap = {
-  oneMinute: { value: '1m', seconds: 60, step: '5s', key: 'oneMinute', label: 'Last 1 min.' },
-  fiveMinutes: { value: '5m', seconds: 5 * 60, step: '15s', key: 'fiveMinutes', label: 'Last 5 min.' },
-  fifteenMinutes: { value: '15m', seconds: 15 * 60, step: '15s', key: 'fifteenMinutes', label: 'Last 15 min.' },
-  thirtyMinutes: { value: '30m', seconds: 30 * 60, step: '15s', key: 'thirtyMinutes', label: 'Last 30 min.' },
-  oneHours: { value: '1h', seconds: 3600, step: '15s', key: 'oneHours', label: 'Last hour' },
-  twoHours: { value: '2h', seconds: 2 * 3600, step: '30s', key: 'twoHours', label: 'Last 2 hours' },
-  sixHours: { value: '6h', seconds: 6 * 3600, step: '1m', key: 'sixHours', label: 'Last 6 hours' },
-  twelveHours: { value: '12h', seconds: 12 * 3600, step: '2m', key: 'twelveHours', label: 'Last 12 hours' },
-  oneDay: { value: '1d', seconds: 24 * 3600, step: '4m', key: 'oneDay', label: 'Last day' },
-  twoDay: { value: '2d', seconds: 2 * 24 * 3600, step: '9m', key: 'twoDay', label: 'Last 2 day' },
-  threeDay: { value: '3d', seconds: 3 * 24 * 3600, step: '12m', key: 'threeDay', label: 'Last 3 day' },
-  oneWeek: { value: '1w', seconds: 7 * 24 * 3600, step: '10m', key: 'oneWeek', label: 'Last week' },
-  twoWeeks: { value: '2w', seconds: 14 * 24 * 3600, step: '20m', key: 'twoWeeks', label: 'Last2 weeks' }
-};
-
-export const defaultTimeInterval = Object.values(timeIntervalMap)[0];
-export const prometheusSiteNameAndIdSeparator = '@_@'; // This is an internal team role convention to unify a siteId and a siteName in prometheus
-export const prometheusProcessNameseparator = '|';
-
 export function calculateStep(seconds: number) {
   if (seconds <= 60) {
     return '5s';
@@ -49,17 +29,22 @@ export function calculateStep(seconds: number) {
     return '9m';
   }
 
-  if (seconds <= 3 * 24 * 3600) {
-    return '12m';
-  }
-
-  if (seconds <= 7 * 24 * 3600) {
-    return '12m';
-  }
-
-  if (seconds <= 14 * 24 * 3600) {
-    return '20m';
-  }
-
   return `${Math.floor(seconds / 1000)}s`;
 }
+
+export const timeIntervalMap: IntervalTimeMap = {
+  oneMinute: { value: '1m', seconds: 60, step: '5s', key: 'oneMinute', label: 'Last 1 min.' },
+  fiveMinutes: { value: '5m', seconds: 5 * 60, step: '15s', key: 'fiveMinutes', label: 'Last 5 min.' },
+  fifteenMinutes: { value: '15m', seconds: 15 * 60, step: '15s', key: 'fifteenMinutes', label: 'Last 15 min.' },
+  thirtyMinutes: { value: '30m', seconds: 30 * 60, step: '15s', key: 'thirtyMinutes', label: 'Last 30 min.' },
+  oneHours: { value: '1h', seconds: 3600, step: '15s', key: 'oneHours', label: 'Last hour' },
+  twoHours: { value: '2h', seconds: 2 * 3600, step: '30s', key: 'twoHours', label: 'Last 2 hours' },
+  sixHours: { value: '6h', seconds: 6 * 3600, step: '1m', key: 'sixHours', label: 'Last 6 hours' },
+  twelveHours: { value: '12h', seconds: 12 * 3600, step: '2m', key: 'twelveHours', label: 'Last 12 hours' },
+  oneDay: { value: '1d', seconds: 24 * 3600, step: '4m', key: 'oneDay', label: 'Last day' },
+  twoDay: { value: '2d', seconds: 2 * 24 * 3600, step: '9m', key: 'twoDay', label: 'Last 2 day' }
+};
+
+export const defaultTimeInterval = Object.values(timeIntervalMap)[0];
+export const prometheusSiteNameAndIdSeparator = '@_@'; // This is an internal team role convention to unify a siteId and a siteName in prometheus
+export const prometheusProcessNameseparator = '|';

src/core/SkMultiTypeheadWithCheckbox/__tests__/SkMultiTypeheadWithCheckbox.spec.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render } from '@testing-library/react';
+import eventUser from '@testing-library/user-event';
 
 import SkSelectMultiTypeaheadCheckbox from '@core/SkMultiTypeheadWithCheckbox';
 
@@ -27,7 +28,7 @@ describe('SkSelectMultiTypeaheadCheckbox', () => {
     expect(placeholderTextElement).toBeInTheDocument();
   });
 
-  it('renders options correctly', () => {
+  it('renders options correctly', async () => {
     const { getByRole, getByText } = render(
       <SkSelectMultiTypeaheadCheckbox
         initIdsSelected={initialIdsSelected}
@@ -37,15 +38,15 @@ describe('SkSelectMultiTypeaheadCheckbox', () => {
     );
 
     const selectElement = getByRole('button');
-    fireEvent.click(selectElement);
+    await eventUser.click(selectElement);
 
     initOptions.forEach((option) => {
       const optionElement = getByText(option.label);
       expect(optionElement).toBeInTheDocument();
     });
   });
 
-  it('calls selectService function on selecting an option', () => {
+  it('calls selectService function on selecting an option', async () => {
     const { getByRole, getByText } = render(
       <SkSelectMultiTypeaheadCheckbox
         initIdsSelected={initialIdsSelected}
@@ -55,15 +56,15 @@ describe('SkSelectMultiTypeaheadCheckbox', () => {
     );
 
     const selectElement = getByRole('button');
-    fireEvent.click(selectElement);
+    await eventUser.click(selectElement);
 
     const optionToSelect = getByText('Service 1');
-    fireEvent.click(optionToSelect);
+    await eventUser.click(optionToSelect);
 
     expect(mockOnSelected).toHaveBeenCalledWith(['1']);
   });
 
-  it('filters options correctly based on search input', () => {
+  it('filters options correctly based on search input', async () => {
     const { getByRole, getByPlaceholderText, queryByText } = render(
       <SkSelectMultiTypeaheadCheckbox
         initIdsSelected={initialIdsSelected}
@@ -73,7 +74,7 @@ describe('SkSelectMultiTypeaheadCheckbox', () => {
     );
 
     const selectElement = getByRole('button');
-    fireEvent.click(selectElement);
+    await eventUser.click(selectElement);
 
     const searchInput = getByPlaceholderText(`${initialIdsSelected.length} services selected`);
     fireEvent.change(searchInput, { target: { value: 'Service 1' } });

src/core/components/EndTimeCell/index.tsx

@@ -14,7 +14,7 @@ const EndTimeCell = function <T>({ value }: EndTimeProps<T>) {
 
   return (
     <Tooltip content={timeAgo(value as number)}>
-      <Text component="p">
+      <Text component="h4">
         <Icon size="md" isInline>
           <GlobeAmericasIcon />
         </Icon>{' '}