Add 'Execute' tab to Digital Twins page preview

client/DEVELOPER.md

@@ -111,6 +111,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',
     REACT_APP_AUTH_AUTHORITY: 'https://gitlab.com/',
@@ -140,6 +141,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',
     REACT_APP_AUTH_AUTHORITY: 'https://gitlab.com/',
@@ -197,6 +199,12 @@ api, read_api, read_user, create_runner, k8s_proxy, read_repository, write_repos
 
 The token information needs to be updated in `config/gitlab.json`.
 
+In addition to the personal access token, you also need to create a
+[pipeline trigger token](https://archives.docs.gitlab.com/16.4/ee/ci/triggers/index.html).
+This token is required to trigger pipelines by using the API.
+You can create this token in your GitLab project's CI/CD settings under
+the *Pipeline trigger tokens* section.
+
 Once the token configuration is in place, the gitlab code can be developed
 and tested using the following yarn commands.
 
@@ -230,3 +238,11 @@ Execution Logs: [
   }
 ]
 ```
+
+## Digital Twins page preview
+
+In the Workbench section, there is a link to preview the **Digital Twins**
+page. The GitLab account used as OAuth provider must have a *DTaaS* group,
+a project under your username, and a *digital_twins* folder which contains
+the Digital Twins. From this interface, you can start or stop execution of
+Digital Twins, and once the execution is complete, view the complete logs.

client/README.md

@@ -97,3 +97,38 @@ This error is expected.
 If you would like to try the complete DTaaS application, please see
 localhost installation in
 [docs](https://into-cps-association.github.io/DTaaS/development/admin/localhost.html).
+
+## Gitlab Runner configuration
+
+To properly use the Digital Twins page preview, you need to configure at least
+one project runner in your GitLab profile. Follow the steps below:
+
+1. Login to the GitLab profile that will be used as the OAuth provider.
+
+1. Navigate to the *DTaaS* group and select the project named after your
+   GitLab username.
+
+1. In the project menu, go to Settings and select CI/CD.
+
+1. Expand the **Runners** section and click on *New project runner*. Follow the
+   configuration instructions carefully:
+   - Add **linux** as a tag during configuration.
+   - Click on *Create runner*.
+   - Ensure GitLab Runner is installed before proceeding. Depending on your
+     environment, you will be shown the correct command to install GitLab Runner.
+   - Once GitLab Runner is installed, follow these steps to register the runner:
+     - Copy and paste the command shown in the GitLab interface into your command
+       line to register the runner. It includes a URL and a token for your specific
+       GitLab instance.
+     - Choose *docker* as executor when prompted by the command line.
+     - Choose the default docker image. You must use an image based on Linux,
+       like the default one (*ruby:2.7*).
+
+You can manually verify that the runner is available to pick up jobs by running
+the following command:
+
+```bash
+sudo gitlab-runner run
+```
+
+It can also be used to reactivate offline runners during subsequent sessions.

client/config/dev.js

@@ -9,6 +9,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',
     REACT_APP_AUTH_AUTHORITY: 'https://gitlab.foo.com/',

client/config/local.js

@@ -9,6 +9,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',
     REACT_APP_AUTH_AUTHORITY: 'https://gitlab.com/',

client/config/prod.js

@@ -9,6 +9,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',
     REACT_APP_AUTH_AUTHORITY: 'https://gitlab.com/',

client/config/test.js

@@ -9,9 +9,10 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
-    REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',
-    REACT_APP_AUTH_AUTHORITY: 'https://gitlab.com/',
+    REACT_APP_CLIENT_ID: '38bf4764fad5ebb2ebbf49b4f57c7720145b61266f13bf4891ff7851dd5c6563',
+    REACT_APP_AUTH_AUTHORITY: 'https://maestro.cps.digit.au.dk/gitlab',
     REACT_APP_REDIRECT_URI: 'http://localhost:4000/Library',
     REACT_APP_LOGOUT_REDIRECT_URI: 'http://localhost:4000/',
     REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',

client/env.d.ts

@@ -12,6 +12,7 @@ declare global {
       REACT_APP_WORKBENCHLINK_VSCODE: string;
       REACT_APP_WORKBENCHLINK_JUPYTERLAB: string;
       REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: string;
+      REACT_APP_WORKBENCHLINK_DT_PREVIEW: string;
 
       REACT_APP_CLIENT_ID: string;
       REACT_APP_AUTH_AUTHORITY: string;

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@into-cps-association/dtaas-web",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Web client for Digital Twin as a Service (DTaaS)",
   "main": "index.tsx",
   "author": "prasadtalasila <[email protected]> (http://prasad.talasila.in/)",
@@ -16,7 +16,7 @@
   "type": "module",
   "scripts": {
     "build": "npx shx cp config/gitlab.json src/util/gitlab.json && npx react-scripts build && npx rimraf src/util/gitlab.json",
-    "clean": "npx rimraf build/ dist/ node_modules/ coverage/ playwright-report/  *.svg src/util/gitlab.json",
+    "clean": "npx rimraf build/ dist/ node_modules/ coverage/ playwright-report/ test-results/  *.svg src/util/gitlab.json",
     "config:dev": "npx shx cp config/dev.js public/env.js && npx shx cp config/dev.js build/env.js",
     "config:local": "npx shx cp config/local.js public/env.js && npx shx cp config/local.js build/env.js",
     "config:prod": "npx shx cp config/prod.js public/env.js && npx shx cp config/prod.js build/env.js",
@@ -30,9 +30,12 @@
     "stop": "npx kill-port 4000",
     "syntax": "npx eslint . --fix",
     "test:all": "yarn test:unit && yarn test:int && yarn test:e2e",
-    "test:e2e": "yarn build && yarn config:test && npx kill-port 4000 && yarn start >/dev/null & playwright test && npx kill-port 4000",
+    "test:e2e:ext": "cross-env ext=true yarn test:e2e",
+    "test:e2e": "playwright test -c ./playwright.config.ts",
     "test:int": "jest -c ./jest.config.json ../test/integration --setupFilesAfterEnv ./test/integration/jest.setup.ts",
-    "test:unit": "jest -c ./jest.config.json ../test/unit --setupFilesAfterEnv ./test/unit/jest.setup.ts"
+    "test:unit": "jest -c ./jest.config.json ../test/unit --setupFilesAfterEnv ./test/unit/jest.setup.ts",
+    "test:preview:int": "jest -c ./jest.config.json ../test/preview/integration --setupFilesAfterEnv ./test/preview/integration/jest.setup.ts",
+    "test:preview:unit": "jest -c ./jest.config.json ../test/preview/unit --setupFilesAfterEnv ./test/preview/unit/jest.setup.ts"
   },
   "eslintConfig": {
     "extends": [
@@ -53,6 +56,7 @@
     "@types/styled-components": "^5.1.32",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
+    "cross-env": "^7.0.3",
     "dotenv": "^16.1.4",
     "eslint": "8.54.0",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -71,6 +75,7 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.20.0",
     "react-scripts": "^5.0.1",
+    "react-syntax-highlighter": "^15.5.0",
     "react-tabs": "^6.0.2",
     "redux": "^4.2.1",
     "resize-observer-polyfill": "^1.5.1",
@@ -92,6 +97,7 @@
     "@types/react-dom": "^18.2.17",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "monocart-coverage-reports": "^2.10.2",
     "playwright": "^1.32.1",
     "prettier": "^3.2.4",
     "shx": "^0.3.4",

client/src/components/LinkIconsLib.tsx

@@ -6,6 +6,7 @@ import NoteAltOutlinedIcon from '@mui/icons-material/NoteAltOutlined';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import TabIcon from '@mui/icons-material/Tab';
 
 type LinkIconsType = {
   [key: string]: { icon: React.ReactElement; name: string | undefined };
@@ -28,6 +29,10 @@ const LinkIcons: LinkIconsType = {
     icon: <NoteAltOutlinedIcon />,
     name: 'Jupyter Notebook',
   },
+  DT_PREVIEW: {
+    icon: <TabIcon />,
+    name: 'Digital Twins page preview',
+  },
   GITHUB: {
     icon: <GitHubIcon />,
     name: 'ToolbarIcon',

client/src/preview/components/asset/Asset.ts

@@ -0,0 +1,5 @@
+export interface Asset {
+  name: string;
+  description?: string;
+  path: string;
+}

client/src/preview/components/asset/AssetBoard.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Grid } from '@mui/material';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from 'store/store';
+import { deleteAsset } from 'store/assets.slice';
+import { AssetCardExecute } from './AssetCard';
+import { Asset } from './Asset';
+
+const outerGridContainerProps = {
+  container: true,
+  spacing: 2,
+  sx: {
+    justifyContent: 'flex-start',
+    overflow: 'auto',
+    maxHeight: 'inherent',
+    marginTop: 2,
+  },
+};
+
+interface AssetBoardProps {
+  tab: string;
+  error: string | null;
+}
+
+const AssetGridItem: React.FC<{
+  asset: Asset;
+  tab: string;
+  onDelete: (path: string, dispatch: ReturnType<typeof useDispatch>) => void;
+}> = ({ asset }) => (
+  <Grid
+    key={asset.path}
+    item
+    xs={12}
+    sm={6}
+    md={4}
+    lg={3}
+    sx={{ minWidth: 250 }}
+  >
+    <AssetCardExecute asset={asset} />
+  </Grid>
+);
+
+export const handleDelete =
+  (deletedAssetPath: string, dispatch: ReturnType<typeof useDispatch>) =>
+  () => {
+    dispatch(deleteAsset(deletedAssetPath));
+  };
+
+const AssetBoard: React.FC<AssetBoardProps> = ({ tab, error }) => {
+  const assets = useSelector((state: RootState) => state.assets.items);
+  const dispatch = useDispatch();
+
+  if (error) {
+    return <em style={{ textAlign: 'center' }}>{error}</em>;
+  }
+
+  return (
+    <Grid {...outerGridContainerProps}>
+      {assets.map((asset: Asset) => (
+        <AssetGridItem
+          key={asset.path}
+          asset={asset}
+          tab={tab}
+          onDelete={handleDelete(asset.path, dispatch)}
+        />
+      ))}
+    </Grid>
+  );
+};
+
+export default AssetBoard;