Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Digital Twins page preview - trigger pipeline from client #891

Closed
Show file tree
Hide file tree
Changes from 30 commits
Commits
Show all changes
76 commits
Select commit Hold shift + click to select a range
5c78206
configuration changes
VanessaScherma May 2, 2024
2d2b717
pre-commit-configuration
VanessaScherma May 2, 2024
3d6fb92
Merge branch 'INTO-CPS-Association:feature/distributed-demo' into fea…
VanessaScherma Jun 11, 2024
a3ff550
Merge branch 'INTO-CPS-Association:feature/distributed-demo' into fea…
VanessaScherma Jun 20, 2024
4a9740b
class DigitalTwin added
Jun 20, 2024
e7f2964
configuration changes
Jun 20, 2024
6beacfa
Merge branch 'INTO-CPS-Association:feature/distributed-demo' into fea…
VanessaScherma Jul 30, 2024
663cc3d
Update gitlab.ts and gitlab.test.ts
VanessaScherma Jul 30, 2024
c35450d
Eslint fixes
VanessaScherma Jul 30, 2024
4f8e74a
gitlab class updated
VanessaScherma Aug 1, 2024
f0f1160
Add DigitalTwinSubfolders
VanessaScherma Aug 1, 2024
8536453
Fix
VanessaScherma Aug 1, 2024
a86a47b
Add GitlabDriver and divide GitlabInstance and GitlabDigitalTwin
VanessaScherma Aug 2, 2024
56b412e
Change imports
VanessaScherma Aug 7, 2024
c8dc464
Adds config for managing gitlab code of client
prasadtalasila Aug 16, 2024
8d20c28
Adds instructions for running gitlab code of client
prasadtalasila Aug 16, 2024
f61ea59
Merge branch 'INTO-CPS-Association:feature/distributed-demo' into fea…
VanessaScherma Aug 16, 2024
3f35520
Merge branch 'pr-830' of https://github.com/VanessaScherma/DTaaS into…
VanessaScherma Aug 16, 2024
7806eef
Comments resolved
VanessaScherma Aug 17, 2024
ea3fd03
Refactor
VanessaScherma Aug 18, 2024
41cd332
Refactor
VanessaScherma Aug 18, 2024
cb8c5e8
Temporary update
VanessaScherma Aug 18, 2024
3a70879
Merge branch 'feature/distributed-demo' of https://github.com/Vanessa…
VanessaScherma Aug 18, 2024
d54bbb8
Change GitlabInstance constructor parameters
VanessaScherma Aug 23, 2024
19b893f
Digital Twins page preview completed
VanessaScherma Aug 26, 2024
6bc73f9
Merge branch 'feature/distributed-demo' of https://github.com/Vanessa…
VanessaScherma Aug 30, 2024
a3a3b68
Code review fixes
VanessaScherma Aug 30, 2024
751a2e2
Convert DTContent into class
VanessaScherma Sep 1, 2024
d4d5b14
Add class for DigitalTwinsPreview
VanessaScherma Sep 1, 2024
809cdc8
Add documentation to DEVELOPER.md
VanessaScherma Sep 2, 2024
52a5f21
Use Asset components (graphical adaptation)
VanessaScherma Sep 3, 2024
b6b1f01
Add GITLAB-RUNNER.md
VanessaScherma Sep 4, 2024
da096ac
Remove unused import
VanessaScherma Sep 4, 2024
5095cc1
Update gitlab-runner instructions
VanessaScherma Sep 4, 2024
af9009b
Use asset components
VanessaScherma Sep 5, 2024
2effdf1
Use asset components
VanessaScherma Sep 5, 2024
ed9ecee
Little fix
VanessaScherma Sep 5, 2024
7a07d77
Update gitlab-runner instructions
VanessaScherma Sep 5, 2024
579f7db
Fix codeclimate issues
VanessaScherma Sep 5, 2024
51bfd6d
Fix codeclimate issues
VanessaScherma Sep 5, 2024
b75d586
Temporary update
VanessaScherma Aug 18, 2024
ede2311
Digital Twins page preview completed
VanessaScherma Aug 26, 2024
c0561f5
Code review fixes
VanessaScherma Aug 30, 2024
b755928
Convert DTContent into class
VanessaScherma Sep 1, 2024
bcf6030
Add class for DigitalTwinsPreview
VanessaScherma Sep 1, 2024
6fe33c2
Add documentation to DEVELOPER.md
VanessaScherma Sep 2, 2024
c2e3d60
Use Asset components (graphical adaptation)
VanessaScherma Sep 3, 2024
41bf25f
Add GITLAB-RUNNER.md
VanessaScherma Sep 4, 2024
5f38a79
Update gitlab-runner instructions
VanessaScherma Sep 4, 2024
22ce9ae
Use asset components
VanessaScherma Sep 5, 2024
3b9fc76
Little fix
VanessaScherma Sep 5, 2024
46c4c6a
Update gitlab-runner instructions
VanessaScherma Sep 5, 2024
f952324
Fix codeclimate issues
VanessaScherma Sep 5, 2024
4fc5a05
Fix codeclimate issues
VanessaScherma Sep 5, 2024
aa2f607
Update
VanessaScherma Sep 5, 2024
98037b0
Merge branch 'gitlab' of https://github.com/VanessaScherma/DTaaS into…
VanessaScherma Sep 5, 2024
58cca12
Temporary update
VanessaScherma Aug 18, 2024
15bdaf6
Digital Twins page preview completed
VanessaScherma Aug 26, 2024
0809a1c
Code review fixes
VanessaScherma Aug 30, 2024
60cd817
Convert DTContent into class
VanessaScherma Sep 1, 2024
84f8901
Add class for DigitalTwinsPreview
VanessaScherma Sep 1, 2024
7535eb4
Add documentation to DEVELOPER.md
VanessaScherma Sep 2, 2024
fe2563b
Use Asset components (graphical adaptation)
VanessaScherma Sep 3, 2024
06176f6
Use asset components
VanessaScherma Sep 5, 2024
2f7ce42
Merge branch 'gitlab' of https://github.com/VanessaScherma/DTaaS into…
VanessaScherma Sep 5, 2024
2f65511
Temporary update
VanessaScherma Aug 18, 2024
d1f1b87
Digital Twins page preview completed
VanessaScherma Aug 26, 2024
5168797
Code review fixes
VanessaScherma Aug 30, 2024
488ca46
Convert DTContent into class
VanessaScherma Sep 1, 2024
f044b6c
Add class for DigitalTwinsPreview
VanessaScherma Sep 1, 2024
a518099
Add documentation to DEVELOPER.md
VanessaScherma Sep 2, 2024
99b4ff3
Use Asset components (graphical adaptation)
VanessaScherma Sep 3, 2024
e80192c
Use asset components
VanessaScherma Sep 5, 2024
33c9351
Merge branch 'gitlab' of https://github.com/VanessaScherma/DTaaS into…
VanessaScherma Sep 5, 2024
5a1eae8
use redux to store digital twin
VanessaScherma Sep 5, 2024
94614ec
Fix codeclimate issues
VanessaScherma Sep 5, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -164,4 +164,4 @@ runner.yml
.workspace

# command scripts for runner
servers/execution/runner/lifecycle*
servers/execution/runner/lifecycle*
19 changes: 19 additions & 0 deletions client/DEVELOPER.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/',
Expand Down Expand Up @@ -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/',
Expand Down Expand Up @@ -178,3 +180,20 @@ 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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please rebase the PR

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
```
VanessaScherma marked this conversation as resolved.
Show resolved Hide resolved

## 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.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line length

1 change: 1 addition & 0 deletions client/config/dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -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/',
Expand Down
5 changes: 5 additions & 0 deletions client/config/gitlab.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
VanessaScherma marked this conversation as resolved.
Show resolved Hide resolved
"username": "user1",
"host": "https://maestro.cps.digit.au.dk/gitlab",
"oauth_token": "glpat-xyaBAhsD6h4L5SukfG6Q"
}
3 changes: 2 additions & 1 deletion client/config/local.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
};
};
};
1 change: 1 addition & 0 deletions client/config/prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -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/',
Expand Down
5 changes: 3 additions & 2 deletions client/config/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions client/env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 8 additions & 2 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -44,12 +46,15 @@
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.0.8",
"@gitbeaker/rest": "^40.1.2",
"@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",
VanessaScherma marked this conversation as resolved.
Show resolved Hide resolved
"dotenv": "^16.1.4",
"eslint": "8.54.0",
"eslint-config-airbnb-base": "^15.0.0",
Expand All @@ -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"
},
Expand Down Expand Up @@ -106,4 +112,4 @@
"last 1 safari version"
]
}
}
}
5 changes: 5 additions & 0 deletions client/src/components/LinkIconsLib.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand All @@ -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',
Expand Down
22 changes: 22 additions & 0 deletions client/src/route/digitaltwins/DigitalTwinCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react';
import { Card, CardContent, Typography } from '@mui/material';

const DigitalTwinCard: React.FC<{ name: string, description: string, buttons: React.ReactNode }> = props => <Card style={{ width: 300, height: 200, margin: '20px', display: 'flex', flexDirection: 'column', position: 'relative' }}>
<CardContent style={{ flex: 1, overflow: 'hidden' }}>
<Typography variant="h5" component="div" gutterBottom>
{props.name}
</Typography>
<div style={{
maxHeight: '85px',
overflowY: 'auto',
paddingRight: '8px'
}}>
<Typography variant="body2" color="textSecondary">
{props.description}
</Typography>
</div>
</CardContent>
{ props.buttons }
</Card>;

export default DigitalTwinCard;
2 changes: 1 addition & 1 deletion client/src/route/digitaltwins/DigitalTwins.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,4 @@ function DTContent() {

export default function DigitalTwins() {
return <DTContent />;
}
}
48 changes: 48 additions & 0 deletions client/src/route/digitaltwins/DigitalTwinsPreview.tsx
prasadtalasila marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React, { useState, useEffect } from 'react';
import { Typography } from '@mui/material';
import Layout from 'page/Layout';
import TabComponent from 'components/tab/TabComponent';
import { TabData } from 'components/tab/subcomponents/TabRender';
import { FolderEntry } from 'util/gitlab';
import tabs from './DigitalTwinTabData';
import ExecuteTab from './ExecuteTab';
import GitlabService from './GitlabService';

function DTContent() {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function DTContent has 38 lines of code (exceeds 25 allowed). Consider refactoring.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function DTContent has 30 lines of code (exceeds 25 allowed). Consider refactoring.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function DTContent has 36 lines of code (exceeds 25 allowed). Consider refactoring.

const [subfolders, setSubfolders] = useState<FolderEntry[]>([]);
const [error, setError] = useState<string | null>(null);
const gitlabService = new GitlabService();

useEffect(() => {
const fetchSubfolders = async () => {
const result = await gitlabService.getSubfolders();
if (typeof result === 'string') {
setError(result);
} else {
setSubfolders(result);
}
};

fetchSubfolders();
}, []);

const DTTab: TabData[] = tabs
.filter((tab) => tab.label === 'Execute')
.map((tab) => ({
label: tab.label,
body: (
<>
<Typography variant="body1">{tab.body}</Typography>
{gitlabService.getInstance() && <ExecuteTab subfolders={subfolders} gitlabInstance={gitlabService.getInstance()} error={error} />}
</>
),
}));

return (
<Layout>
<TabComponent assetType={DTTab} scope={[]} />
</Layout>
);
}

export default DTContent;
Loading