Merge pull request #962 from kubeshop/release/v1.16.0

Release/v1.16.0

README.md

@@ -32,13 +32,13 @@
 
 Dashboard to manage your [**Testkube**](https://testkube.io) cluster and monitor its real-time results.
 
-The Dashboard is deployed as an application in the cluster.
-It runs in a browser, and it communicates with the [**Testkube API Server**](https://github.com/kubeshop/testkube) via Ingress Controller (either provided or bundled).
+The Dashboard is deployed as an application in the cluster. It runs in a browser, and it communicates with the
+[**Testkube API Server**](https://github.com/kubeshop/testkube) via Ingress Controller (either provided or bundled).
 
 ## Table of Contents
 
 1. [Running Dashboard](#running-dashboard)
-   1. [Bundled](#bundled) 
+   1. [Bundled](#bundled)
    2. [Repository](#repository)
    3. [Docker](#docker)
 2. [Configuring Application](#configuring-application)
@@ -55,61 +55,72 @@ It runs in a browser, and it communicates with the [**Testkube API Server**](htt
 
 By default, Dashboard is installed in your cluster along with your Testkube system.
 
-To use the bundled Dashboard, run `testkube dashboard` command with [**Testkube CLI**](https://docs.testkube.io/articles/install-cli/),
-to forward the UI and API ports from the Kubernetes cluster.
+To use the bundled Dashboard, run `testkube dashboard` command with
+[**Testkube CLI**](https://docs.testkube.io/articles/install-cli/), to forward the UI and API ports from the Kubernetes
+cluster.
 
 > <details>
-> <summary>:warning: <strong>Testkube Cloud and Enterprise</strong></summary>
+> <summary>:warning: <strong>Testkube Pro and Enterprise</strong></summary>
 > <br>
-> 
-> This Dashboard works only for the Testkube Open Source installations.
-> To manage the Testkube in Enterprise or Cloud offering, use their corresponding dashboards:
-> * [**cloud.testkube.io**](https://cloud.testkube.io?utm_source=github-dashboard) for Testkube Cloud
-> * Your Enterprise URL for Testkube Enterprise
+>
+> This Dashboard works only for the Testkube Open Source installations. To manage the Testkube in Enterprise or Pro
+> offering, use their corresponding dashboards:
+>
+> - [**app.testkube.io**](https://app.testkube.io?utm_source=github-dashboard) for Testkube Pro
+> - Your Enterprise URL for Testkube Enterprise
 > </details>
 
 > <details>
 > <summary>:eight_spoked_asterisk: <strong>Disable bundling dashboard</strong></summary>
 > <br>
-> 
-> To disable Dashboard installation with the Testkube system, you may use `testkube-dashboard.enabled=false` value in the [**Helm chart**](https://github.com/kubeshop/helm-charts/tree/main/charts/testkube).
+>
+> To disable Dashboard installation with the Testkube system, you may use `testkube-dashboard.enabled=false` value in
+> the [**Helm chart**](https://github.com/kubeshop/helm-charts/tree/main/charts/testkube).
+>
 > </details>
 
 ### Repository
 
 To run the Testkube Dashboard for development:
-* Install Node 20.x
-* Fork the repository and clone it (or just clone it, if you are Testkube member or want to read it only)
-* Install NPM dependencies
-* Run `npm start` command
+
+- Install Node 20.x
+- Fork the repository and clone it (or just clone it, if you are Testkube member or want to read it only)
+- Install NPM dependencies
+- Run `npm start` command
 
 ```bash
 git clone [email protected]:kubeshop/testkube-dashboard.git && cd testkube-dashboard
 npm install
 npm start
 ```
 
-To learn more about the Testkube Dashboard development and architecture, see the [**Contribution manual**](CONTRIBUTING.md).
+To learn more about the Testkube Dashboard development and architecture, see the
+[**Contribution manual**](CONTRIBUTING.md).
 
 > <details>
 > <summary>:eight_spoked_asterisk: <strong>Environment variables</strong></summary>
 > <br>
-> 
+>
 > To configure your [**environment variables**](#environment-variables), either:
-> * create `.env` file in the repository, or
-> * export the environment variables globally
-> 
+>
+> - create `.env` file in the repository, or
+> - export the environment variables globally
+>
 > You may use both [**build time**](#build-time-variables) and [**dynamic variables**](#dynamic-variables) here.
 >
-> Please note, that you may want to use [**Create React App's variables**](https://create-react-app.dev/docs/advanced-configuration/) too,
-> i.e. `BROWSER=none` to avoid opening the browser.
+> Please note, that you may want to use
+> [**Create React App's variables**](https://create-react-app.dev/docs/advanced-configuration/) too, i.e. `BROWSER=none`
+> to avoid opening the browser.
+>
 > </details>
 
 ### Docker
 
-The Docker images for the Testkube Dashboard are deployed to the Docker Hub as [**kubeshop/testkube-dashboard**](https://hub.docker.com/r/kubeshop/testkube-dashboard).
+The Docker images for the Testkube Dashboard are deployed to the Docker Hub as
+[**kubeshop/testkube-dashboard**](https://hub.docker.com/r/kubeshop/testkube-dashboard).
 
-To start Dashboard using Docker, run the image with the [**dynamic environment variables**](#dynamic-variables) you would like to pass, i.e.:
+To start Dashboard using Docker, run the image with the [**dynamic environment variables**](#dynamic-variables) you
+would like to pass, i.e.:
 
 ```bash
 docker run --rm \
@@ -121,8 +132,10 @@ docker run --rm \
 > <details>
 > <summary>:warning: <strong>Environment variables</strong></summary>
 > <br>
-> 
-> To override the [**build time environment variables**](#build-time-variables) too, you need to [**build the Docker image**](#building-docker-image) on your own.
+>
+> To override the [**build time environment variables**](#build-time-variables) too, you need to
+> [**build the Docker image**](#building-docker-image) on your own.
+>
 > </details>
 
 ## Configuring Application
@@ -131,32 +144,32 @@ docker run --rm \
 
 All the Dashboard is configured with the environment variables.
 
-Part of them is included directly in the production build,
-while the rest may be modified for the running application.
+Part of them is included directly in the production build, while the rest may be modified for the running application.
 
-The latest variables are listed in [**env.ts**](packages/web/src/env.ts) file,
-but for simplicity we keep them documented below too.
+The latest variables are listed in [**env.ts**](packages/web/src/env.ts) file, but for simplicity we keep them
+documented below too.
 
 > <details>
 > <summary>:eight_spoked_asterisk: <strong>Deep-linking overrides</strong></summary>
 > <br>
-> 
-> You may temporarily override the variables in the running application using the query string.
-> The Dashboard seeks for query params starting with `~` and try to override any matching known variable.
->
-> The query param name should be a variable name,
-> but for simplicity it may omit `REACT_APP_` prefix and is case-insensitive.
-> Short name from the tables above may be used.
-> 
-> As an example, to change the API endpoint, you may use `https://demo.testkube.io?~api_server_endpoint=http://localhost:8088`.
+>
+> You may temporarily override the variables in the running application using the query string. The Dashboard seeks for
+> query params starting with `~` and try to override any matching known variable.
+>
+> The query param name should be a variable name, but for simplicity it may omit `REACT_APP_` prefix and is
+> case-insensitive. Short name from the tables above may be used.
+>
+> As an example, to change the API endpoint, you may use
+> `https://demo.testkube.io?~api_server_endpoint=http://localhost:8088`.
+>
 > </details>
 
 #### Build Time Variables
 
 The build time environments are loaded from `process.env` during build time.
 
 | Name                   | Short Name   | Description                                                               |
-|------------------------|--------------|---------------------------------------------------------------------------|
+| ---------------------- | ------------ | ------------------------------------------------------------------------- |
 | `REACT_APP_SENTRY_DSN` | `sentry_dsn` | [**Sentry**](https://sentry.io/) DSN for error reporting                  |
 | `REACT_APP_GTM_ID`     | `gtm_id`     | [**Google Tag Manager**](https://tagmanager.google.com/) ID for telemetry |
 | `REACT_APP_VERSION`    | `version`    | Dashboard version used for reporting and displaying                       |
@@ -166,7 +179,7 @@ The build time environments are loaded from `process.env` during build time.
 The dynamic variables are loaded from automatically generated `env-config.js` file.
 
 | Name                              | Short Name              | Description                                                                                                                               |
-|-----------------------------------|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|
+| --------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | `REACT_APP_API_SERVER_ENDPOINT`   | `api_server_endpoint`   | URL for the Testkube API Server                                                                                                           |
 | `REACT_APP_DISABLE_TELEMETRY`     | `disable_telemetry`     | Force disabling telemetry in the Dashboard                                                                                                |
 | `REACT_APP_DEBUG_TELEMETRY`       | `debug_telemetry`       | Display debugging information about telemetry in the console log                                                                          |
@@ -175,8 +188,8 @@ The dynamic variables are loaded from automatically generated `env-config.js` fi
 
 ### Building Docker Image
 
-To build the Docker image of Testkube Dashboard locally,
-simply build the [**Dockerfile**](Dockerfile), optionally with the [**environment variables**](#environment-variables) from above.
+To build the Docker image of Testkube Dashboard locally, simply build the [**Dockerfile**](Dockerfile), optionally with
+the [**environment variables**](#environment-variables) from above.
 
 ```bash
 docker build \
@@ -187,27 +200,29 @@ docker build \
 > <details>
 > <summary>:eight_spoked_asterisk: <strong>Environment variables</strong></summary>
 > <br>
-> 
-> When you are building images with `docker build`, you may either both set the [**build time variables**](#build-time-variables),
-> and set defaults for the [**dynamic variables**](#dynamic-variables).
+>
+> When you are building images with `docker build`, you may either both set the
+> [**build time variables**](#build-time-variables), and set defaults for the
+> [**dynamic variables**](#dynamic-variables).
+>
 > </details>
 
 ## Learn more
 
 ### Contributing and Architecture
 
-To learn more about the Testkube Dashboard development and architecture, see the [**Contribution manual**](CONTRIBUTING.md).
+To learn more about the Testkube Dashboard development and architecture, see the
+[**Contribution manual**](CONTRIBUTING.md).
 
 ### Telemetry
 
-To learn more about what custom events we expose to [**Google Tag Manager**](https://tagmanager.google.com/),
-see [**Telemetry**](telemetry.md) document.
+To learn more about what custom events we expose to [**Google Tag Manager**](https://tagmanager.google.com/), see
+[**Telemetry**](telemetry.md) document.
 
 ### Testkube
 
-* For the documentation of the Testkube system, see [**docs.testkube.io**](https://docs.testkube.io).
-* To see the live demo, you may take a look at [**demo.testkube.io**](https://demo.testkube.io) *(some API endpoints are disabled there though, to avoid modifications)*
+- For the documentation of the Testkube system, see [**docs.testkube.io**](https://docs.testkube.io).
+- To see the live demo, you may take a look at [**demo.testkube.io**](https://demo.testkube.io) _(some API endpoints are
+  disabled there though, to avoid modifications)_
 
 > **Unleash the power of cloud native testing in Kubernetes with Testkube.**
->
-> Consider [**Testkube Cloud**](https://cloud.testkube.io?utm_source=github-dashboard) for simpler integration and more features!

packages/web/craco.config.js

@@ -77,6 +77,17 @@ module.exports = {
       return webpackConfig;
     },
   },
+  babel: {
+    loaderOptions: babelLoaderOptions => {
+      if (process.env.NODE_ENV === 'development') {
+        if (!babelLoaderOptions.plugins) {
+          babelLoaderOptions.plugins = [];
+        }
+        babelLoaderOptions.plugins.push('babel-plugin-styled-components');
+      }
+      return babelLoaderOptions;
+    },
+  },
   jest: {
     configure: config => ({
       ...config,

packages/web/package.json

@@ -40,6 +40,7 @@
     "@types/react-transition-group": "4.4.4",
     "@types/semver": "^7.5.0",
     "@types/styled-components": "5.1.18",
+    "babel-plugin-styled-components": "^2.1.4",
     "file-loader": "6.2.0",
     "less": "4.1.2",
     "postcss-styled-syntax": "0.4.0",

packages/web/src/components/organisms/EntityDetails/Settings/SettingsScheduling/NextExecution.spec.tsx

@@ -0,0 +1,47 @@
+import {act, render} from '@testing-library/react';
+import parser from 'cron-parser';
+
+import NextExecution from './NextExecution';
+
+describe('organisms', () => {
+  describe('SettingsScheduling', () => {
+    describe('NextExecution', () => {
+      beforeEach(() => {
+        jest.useFakeTimers('modern').setSystemTime(new Date('2023-11-24T10:03:33'));
+      });
+
+      const expression = parser.parseExpression('*/1 * * * *');
+
+      it('should display error', () => {
+        const result = render(<NextExecution error />);
+        expect(result.container.textContent).toEqual('Invalid cron format');
+      });
+
+      it('should display information about no schedule', () => {
+        const result = render(<NextExecution />);
+        expect(result.container.textContent).toEqual('Not scheduled');
+      });
+
+      it('should display time', () => {
+        const result = render(<NextExecution expression={expression} />);
+        expect(result.container.textContent).toEqual('in 27 seconds');
+      });
+
+      it('should show now when the time is very near', () => {
+        const result = render(<NextExecution expression={expression} />);
+        act(() => {
+          jest.advanceTimersByTime(26999);
+        });
+        expect(result.container.textContent).toEqual('now');
+      });
+
+      it('should iterate with next value after queue passed', () => {
+        const result = render(<NextExecution expression={expression} />);
+        act(() => {
+          jest.advanceTimersByTime(30000);
+        });
+        expect(result.container.textContent).toEqual('in 57 seconds');
+      });
+    });
+  });
+});

packages/web/src/components/organisms/EntityDetails/Settings/SettingsScheduling/NextExecution.tsx

@@ -1,26 +1,35 @@
-import {useState} from 'react';
-import {useInterval} from 'react-use';
+import {memo} from 'react';
+import {useInterval, useUpdate} from 'react-use';
 
+import parser from 'cron-parser';
 import {formatDuration, intervalToDuration} from 'date-fns';
 
 type NextExecutionProps = {
-  value: string | Date;
+  expression?: parser.CronExpression;
+  error?: boolean;
 };
 
-const NextExecution: React.FC<NextExecutionProps> = props => {
-  const {value} = props;
-  const [duration, setDuration] = useState('Not scheduled');
+const getDuration = (expression?: parser.CronExpression, error?: boolean) => {
+  if (error) {
+    return 'Invalid cron format';
+  }
+  if (!expression) {
+    return 'Not scheduled';
+  }
+  const start = new Date();
+  expression.reset(start);
+  const end = expression?.next().toDate();
+  const duration = formatDuration(intervalToDuration({start, end}));
+  return duration ? `in ${duration}` : 'now';
+};
 
-  useInterval(() => {
-    if (typeof value === 'string') {
-      setDuration(value);
-      return;
-    }
+const NextExecution: React.FC<NextExecutionProps> = ({expression, error}) => {
+  const duration = getDuration(expression, error);
+  const update = useUpdate();
 
-    setDuration(`in ${formatDuration(intervalToDuration({start: new Date(), end: value}))}`);
-  }, 1000);
+  useInterval(update, 1000);
 
   return <>{duration}</>;
 };
 
-export default NextExecution;
+export default memo(NextExecution);

packages/web/src/components/organisms/EntityDetails/Settings/SettingsScheduling/Schedule.tsx

@@ -75,17 +75,14 @@ const Schedule: React.FC<ScheduleProps> = ({label, useUpdateEntity}) => {
     setWasTouched(true);
   };
 
-  const [nextExecution, isValidFormat] = useMemo(() => {
+  const [cronExpression, isValidFormat] = useMemo(() => {
     if (!cronString) {
-      return ['Not scheduled', true];
+      return [undefined, true];
     }
-
     try {
-      const nextDate = parser.parseExpression(cronString).next().toDate();
-
-      return [nextDate, true];
+      return [parser.parseExpression(cronString), true];
     } catch (e) {
-      return ['Invalid cron format', false];
+      return [undefined, false];
     }
   }, [cronString]);
 
@@ -158,7 +155,7 @@ const Schedule: React.FC<ScheduleProps> = ({label, useUpdateEntity}) => {
             <StyledColumn>
               <Text className="middle regular">Next Execution</Text>
               <Text style={{color: Colors.slate400}} className="middle regular">
-                <NextExecution value={nextExecution} />
+                <NextExecution expression={cronExpression} error={!isValidFormat} />
               </Text>
             </StyledColumn>
           </StyledRow>