Add 'Execute' tab to Digital Twins page preview (#903)

Adds experimental digital execution on gitlab DevOps
pipeline. This execution can happen with an external
gitlab like gitlab.com but requires certain gitlab project
setup to work.

---------
Co-authored-by: vanessa <[email protected]>

client/.eslintignore

@@ -3,4 +3,8 @@ build/
 config/
 node_modules/
 script/
-coverage/
+coverage/
+dist/
+test-results/
+playwright-report/
+public/

client/DEVELOPER.md

@@ -118,6 +118,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/',
@@ -147,6 +148,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/',
@@ -204,6 +206,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.
 
@@ -237,3 +245,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/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/jest.config.json

@@ -25,7 +25,7 @@
     "src/index.tsx",
     "src/AppProvider.tsx",
     "src/store/store.ts",
-    "src/util/gitlabDriver.ts"
+    "src/preview/util/gitlabDriver.ts"
   ],
   "modulePathIgnorePatterns": [
     "test/e2e",

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@into-cps-association/dtaas-web",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Web client for Digital Twin as a Service (DTaaS)",
   "main": "index.tsx",
   "author": "prasadtalasila <[email protected]> (http://prasad.talasila.in/)",
@@ -9,22 +9,23 @@
     "Asger Busk Breinholm",
     "Mathias Brændgaard",
     "Emre Temel",
-    "Cesar Vela"
+    "Cesar Vela",
+    "Vanessa Scherma"
   ],
   "license": "SEE LICENSE IN <LICENSE.md>",
   "private": false,
   "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/ test-results/  *.svg src/util/gitlab.json",
+    "build": "npx react-scripts build",
+    "clean": "npx rimraf build/ dist/ node_modules/ coverage/ playwright-report/ test-results/  test.svg src.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",
     "config:test": "npx shx cp config/test.js public/env.js && npx shx cp config/test.js build/env.js",
-    "develop": "npx shx cp config/gitlab.json src/util/gitlab.json && npx react-scripts start",
+    "develop": "npx react-scripts start",
     "format": "prettier --ignore-path ../.gitignore --write \"**/*.{ts,tsx,css,scss}\"",
-    "gitlab:compile": "npx shx cp config/gitlab.json src/util/gitlab.json && npx tsc --project tsconfig.gitlab.json && npx rimraf src/util/gitlab.json",
-    "gitlab:run": "node dist/gitlabDriver.js",
+    "gitlab:compile": "npx tsc --project tsconfig.gitlab.json",
+    "gitlab:run": "node dist/src/preview/util/gitlabDriver.js",
     "graph": "npx madge --image src.svg src && npx madge --image test.svg test",
     "start": "serve -s build -l 4000",
     "stop": "npx kill-port 4000",
@@ -33,7 +34,9 @@
     "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": [

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,57 @@
+import * as React from 'react';
+import { Grid } from '@mui/material';
+import { useSelector } from 'react-redux';
+import { RootState } from 'store/store';
+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;
+}> = ({ asset }) => (
+  <Grid
+    key={asset.path}
+    item
+    xs={12}
+    sm={6}
+    md={4}
+    lg={3}
+    sx={{ minWidth: 250 }}
+  >
+    <AssetCardExecute asset={asset} />
+  </Grid>
+);
+
+const AssetBoard: React.FC<AssetBoardProps> = ({ tab, error }) => {
+  const assets = useSelector((state: RootState) => state.assets.items);
+
+  if (error) {
+    return <em style={{ textAlign: 'center' }}>{error}</em>;
+  }
+
+  return (
+    <Grid {...outerGridContainerProps}>
+      {assets.map((asset: Asset) => (
+        <AssetGridItem key={asset.path} asset={asset} tab={tab} />
+      ))}
+    </Grid>
+  );
+};
+
+export default AssetBoard;