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/jest.config.json

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

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@into-cps-association/dtaas-web",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Web client for Digital Twin as a Service (DTaaS)",
   "main": "index.tsx",
   "author": "prasadtalasila <[email protected]> (http://prasad.talasila.in/)",
@@ -46,7 +46,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
-    "@gitbeaker/rest": "^40.1.2",
+    "@gitbeaker/rest": "^40.1.3",
     "@mui/icons-material": "^5.14.8",
     "@mui/material": "^5.14.8",
     "@reduxjs/toolkit": "^1.9.7",
@@ -75,6 +75,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"
   },

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/Asset.ts

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

client/src/components/asset/AssetBoard.tsx

@@ -0,0 +1,51 @@
+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;