-
Notifications
You must be signed in to change notification settings - Fork 57
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
Changes from 30 commits
5c78206
2d2b717
3d6fb92
a3ff550
4a9740b
e7f2964
6beacfa
663cc3d
c35450d
4f8e74a
f0f1160
8536453
a86a47b
56b412e
c8dc464
8d20c28
f61ea59
3f35520
7806eef
ea3fd03
41cd332
cb8c5e8
3a70879
d54bbb8
19b893f
6bc73f9
a3a3b68
751a2e2
d4d5b14
809cdc8
52a5f21
b6b1f01
da096ac
5095cc1
af9009b
2effdf1
ed9ecee
7a07d77
579f7db
51bfd6d
b75d586
ede2311
c0561f5
b755928
bcf6030
6fe33c2
c2e3d60
41bf25f
5f38a79
22ce9ae
3b9fc76
46c4c6a
f952324
4fc5a05
aa2f607
98037b0
58cca12
15bdaf6
0809a1c
60cd817
84f8901
7535eb4
fe2563b
06176f6
2f7ce42
2f65511
d1f1b87
5168797
488ca46
f044b6c
a518099
99b4ff3
e80192c
33c9351
5a1eae8
94614ec
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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,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 | ||
|
||
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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Line length |
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" | ||
} |
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; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -32,4 +32,4 @@ function DTContent() { | |
|
||
export default function DigitalTwins() { | ||
return <DTContent />; | ||
} | ||
} |
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() { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Function There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Function There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Function |
||
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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please rebase the PR