Digital Twins page preview - trigger pipeline from client

.gitignore

@@ -164,4 +164,4 @@ runner.yml
 .workspace
 
 # command scripts for runner
-servers/execution/runner/lifecycle*
+servers/execution/runner/lifecycle*

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/',
@@ -178,3 +180,24 @@ port and basename options in the docker-based development environment.
 Each new release of client web application is published as a docker
 container image. Please see [publishing](../docker/README.md) page
 for more information publishing docker images.
+
+## Gitlab Integration
+
+The client codebase has been using Gitlab for OAuth2 only. There is
+an ongoing effort to integrate Gitlab CI/CD capabilities to automate
+the execution of Digital Twins. This code is in alpha stage and is
+available in `src/util/gitlab*.ts`.
+This code can be developed and tested using the following yarn commands.
+
+```bash
+yarn gitlab:compile
+yarn gitlab:run
+```
+
+## 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/gitlab.json

@@ -0,0 +1,5 @@
+{
+    "username": "user1",
+    "host": "https://maestro.cps.digit.au.dk/gitlab",
+    "oauth_token": ""
+}

client/config/local.js

@@ -9,11 +9,12 @@ 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_REDIRECT_URI: 'http://localhost/Library',
     REACT_APP_LOGOUT_REDIRECT_URI: 'http://localhost/',
     REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',
   };
-};
+};

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

@@ -16,13 +16,15 @@
   "type": "module",
   "scripts": {
     "build": "npx react-scripts build",
-    "clean": "npx rimraf build/ node_modules/ coverage/ playwright-report/  *.svg",
+    "clean": "npx rimraf build/ dist/ node_modules/ coverage/ playwright-report/  *.svg",
     "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 react-scripts start",
     "format": "prettier --ignore-path ../.gitignore --write \"**/*.{ts,tsx,css,scss}\"",
+    "gitlab:compile": "npx tsc --project tsconfig.gitlab.json",
+    "gitlab:run": "node dist/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",
@@ -44,12 +46,15 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
+    "@gitbeaker/rest": "^40.1.3",
     "@mui/icons-material": "^5.14.8",
     "@mui/material": "^5.14.8",
     "@reduxjs/toolkit": "^1.9.7",
+    "@types/strip-ansi": "^5.2.1",
     "@types/styled-components": "^5.1.32",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
+    "ansi-regex": "^6.0.1",
     "dotenv": "^16.1.4",
     "eslint": "8.54.0",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -72,6 +77,7 @@
     "redux": "^4.2.1",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.1",
+    "strip-ansi": "^7.1.0",
     "styled-components": "^6.1.1",
     "typescript": "^4.9.5"
   },
@@ -106,4 +112,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

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/components/asset/AddButton.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+import { Asset } from './Asset';
+import useCart from '../../store/CartAccess';
+
+function AddButton(asset: Asset) {
+  const { state, actions } = useCart();
+  return (
+    <Button
+      variant="contained"
+      fullWidth
+      disabled={
+        !!state.assets.find((a: { path: string }) => a.path === asset.path)
+      }
+      size="small"
+      color="primary"
+      onClick={() => {
+        actions.add(asset);
+      }}
+    >
+      Select
+    </Button>
+  );
+}
+
+export default AddButton;

client/src/components/asset/Asset.ts

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

client/src/components/asset/AssetBoard.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Grid } from '@mui/material';
+import { GitlabInstance } from 'util/gitlab';
+import { Asset } from './Asset';
+import AssetCardExecute from './AssetCard';
+
+const outerGridContainerProps = {
+  container: true,
+  spacing: 2,
+  sx: {
+    justifyContent: 'flex-start',
+    overflow: 'auto',
+    maxHeight: 'inherent',
+    marginTop: 2,
+  },
+};
+
+
+/**
+ * Displays a board with navigational properties to locate and select assets for DT configuration.
+ * @param props Takes relative path to Assets. E.g `Functions` for function assets.
+ * @returns
+ */
+function AssetBoard(props: { subfolders: Asset[], gitlabInstance: GitlabInstance, error: string | null }) {
+
+if (props.error) {
+  return (
+    <em style={{ textAlign: 'center' }}>{props.error}</em>
+  );
+}
+
+return (
+  <Grid {...outerGridContainerProps}>
+    {props.subfolders.map((asset) => (
+      <Grid key={asset.path} item xs={12} sm={6} md={4} lg={3} sx={{ minWidth: 250 }}>
+        <AssetCardExecute asset={asset} />
+      </Grid>
+    ))}
+  </Grid>
+  )
+}
+
+export default AssetBoard;