Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
feudal
feudalWebpage
Commits
0cd7b267
Commit
0cd7b267
authored
Jul 05, 2018
by
Lukas Burgey
Browse files
Refactor the depiction of VO services
parent
62b54714
Changes
9
Hide whitespace changes
Inline
Side-by-side
src/app/body/body.component.html
View file @
0cd7b267
<div
class=
"body"
>
<div
*ngIf=
"userService.loggedIn()"
class=
"mat-typography"
>
<div
style=
"padding-bottom: 30px;"
>
<h2>
Your Virtual Organisations
</h2>
<mat-accordion
*ngIf=
"userService.user.groups.length > 0"
>
<app-vo
*ngFor=
"let group of userService.getGroups()"
[group]=
"group"
[deployment]=
"userService.getDeploymentByGroup(group)"
></app-vo>
</mat-accordion>
</div>
<div
style=
"padding-bottom: 30px;"
>
<h2>
Services
</h2>
<mat-accordion
*ngIf=
"userService.services.length > 0"
>
...
...
@@ -10,11 +16,5 @@
This is due services requiring users to be member of a certain group.
</p>
</div>
<div
*ngIf=
"userService.user"
style=
"padding-bottom: 30px;"
>
<h2>
Your Virtual Organisations
</h2>
<mat-accordion
*ngIf=
"userService.user.groups.length > 0"
>
<app-vo
*ngFor=
"let group of userService.getGroups()"
[group]=
"group"
></app-vo>
</mat-accordion>
</div>
</div>
</div>
src/app/dialogues/credentials/credentials.component.html
View file @
0cd7b267
<div
class=
"mat-typography"
>
<h2>
Credentials
</h2>
<p>
You can access the service {{
stateItem.
service.name }} at {{ s
tateItem
.site.name }} using
the
SSH Key {{ stateItem.key.name }}.
You can access the service {{ service.name }} at {{ s
ervice
.site
[0]
.name }} using
your
SSH Key {{ stateItem.key.name }}.
</p>
<div
*ngIf=
"credentialCount > 0"
>
<p>
...
...
src/app/dialogues/credentials/credentials.component.ts
View file @
0cd7b267
...
...
@@ -13,6 +13,7 @@ import * as t from '../../types/types.module';
export
class
CredentialsComponent
implements
OnInit
{
public
columns
=
[
"
name
"
,
"
value
"
];
public
stateItem
:
t
.
DeploymentStateItem
;
public
service
:
t
.
Service
;
public
credentialCount
:
number
=
0
;
public
table
:
MatTableDataSource
<
any
>
;
...
...
@@ -21,6 +22,7 @@ export class CredentialsComponent implements OnInit {
@
Inject
(
MAT_DIALOG_DATA
)
public
data
:
any
,
)
{
this
.
stateItem
=
data
.
stateItem
;
this
.
service
=
data
.
service
;
}
ngOnInit
()
{
...
...
src/app/dialogues/dialog.service.ts
View file @
0cd7b267
...
...
@@ -57,12 +57,13 @@ export class DialogService {
);
}
public
openCredentials
(
stateItem
:
t
.
DeploymentStateItem
)
{
public
openCredentials
(
service
:
t
.
Service
,
stateItem
:
t
.
DeploymentStateItem
)
{
this
.
credentialsDialog
=
this
.
dialog
.
open
(
CredentialsComponent
,
{
data
:
{
stateItem
:
stateItem
,
service
:
service
,
}
}
);
...
...
src/app/service/service.component.html
View file @
0cd7b267
...
...
@@ -28,7 +28,7 @@
<span
[ngSwitch]=
"taskState(site, key)"
class=
"childs-inline"
>
<!-- states with actions -->
<button
*ngSwitchCase=
"'deployed'"
mat-button
mat-icon-button
(click)=
"dialog.openCredentials(taskItem(site, key))"
(click)=
"dialog.openCredentials(
service,
taskItem(site, key))"
matTooltip=
"The key {{key.name}} is deployed to the site. Click to see details."
>
<mat-icon
style=
"vertical-align: middle"
>
call_made
</mat-icon>
</button>
...
...
src/app/types/types.module.ts
View file @
0cd7b267
...
...
@@ -48,7 +48,8 @@ export interface SSHKeyRef {
export
interface
Service
{
id
:
number
;
name
:
string
;
sites
:
Site
[];
site
:
Site
[];
description
:
string
;
groups
:
Group
[];
}
...
...
@@ -64,10 +65,14 @@ export interface DeploymentStateItem {
credentials
:
JSONObject
;
key
:
SSHKeyRef
;
service
:
Service
;
services
:
Service
[];
group
:
Group
;
}
export
interface
DeploymentState
{
id
:
number
;
service
:
Service
;
services
:
Service
[];
group
:
Group
;
key
:
SSHKeyRef
;
state_items
:
DeploymentStateItem
[];
}
...
...
@@ -78,6 +83,7 @@ export interface Deployment {
group
:
number
;
// the group id
ssh_keys
:
SSHKeyRef
[];
states
:
DeploymentState
[];
sites
:
Site
[];
}
export
interface
User
{
...
...
src/app/user.service.ts
View file @
0cd7b267
...
...
@@ -75,7 +75,7 @@ export class UserService {
private
connectLiveUpdates
()
{
this
.
initStomp
();
let
subscription
=
this
.
_stompService
.
subscribe
(
'
/exchange/u
pdate
/
'
+
this
.
user
.
id
.
toString
()
'
/exchange/u
sers
/
'
+
this
.
user
.
id
.
toString
()
);
subscription
.
subscribe
(
...
...
@@ -178,6 +178,12 @@ export class UserService {
}
// PUBLIC API
public
serviceDescription
(
service
:
t
.
Service
):
string
{
if
(
service
.
description
!=
""
)
{
return
service
.
description
;
}
return
"
No description
"
;
}
public
getDeployment
(
service
:
t
.
Service
):
t
.
Deployment
{
return
this
.
userState
.
deployments
.
find
(
dep
=>
{
...
...
@@ -193,6 +199,15 @@ export class UserService {
return
this
.
groupMap
.
get
(
group
.
name
);
}
private
getDeploymentByGroup
(
group
:
t
.
Group
):
t
.
Deployment
|
undefined
{
let
dep
=
this
.
userState
.
deployments
.
find
(
(
d
:
t
.
Deployment
)
=>
{
return
d
.
group
===
group
.
id
;
}
);
return
dep
}
public
getGroups
():
t
.
Group
[]
{
if
(
this
.
user
.
groups
)
{
return
this
.
user
.
groups
.
sort
(
...
...
src/app/vo/vo.component.html
View file @
0cd7b267
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title
style=
"min-width: 100px;"
>
{{ group.name }}
</mat-panel-title>
<mat-panel-description>
VO "{{ group.name }}" (Group ID: {{ group.id }})
</mat-panel-description>
<!--
<mat-panel-description>VO "{{ group.name }}" (Group ID: {{ group.id }})</mat-panel-description>
-->
</mat-expansion-panel-header>
<div
*ngIf=
"userService.getServices(group).length > 0; then serviceList else noServiceList"
></div>
<ng-template
#serviceList
>
<p>
You have access to these services, because you are a
member of th
e
VO
"{{ group.name }}"
:
These services are provided for
member
s
of th
is
VO:
</p>
<table
style=
"margin-bottom: 30px;"
>
<table
style=
"margin-bottom: 30px;
margin: auto;
"
>
<thead>
<tr>
<td></td>
...
...
@@ -16,69 +18,76 @@
<td>
SSH Keys
</td>
</tr>
<tr>
<td
style=
"min-width: 150px;"
>
Service
</td>
<td
style=
"min-width: 150px;"
>
Site
</td>
<td
style=
"min-width: 150px;"
>
Service
</td>
<td
*ngFor=
"let key of userService.user.ssh_keys"
style=
"min-width: 100px;"
>
{{key.name}}
</td>
</tr>
</thead>
<tbody>
<tr
*ngFor=
"let service of services()"
style=
"height: 42px;"
>
<td>
<span
style=
"margin-right: 10px;"
>
<mat-icon>
web
</mat-icon>
{{ service.name }}
</span>
</td>
<td>
<span
*ngFor=
"let site of service.site"
matTooltip=
"Provided at site {{ site.name }}"
style=
"margin-right: 10px;"
>
<mat-icon>
account_balance
</mat-icon>
{{ site.name }}
</span>
</td>
<td
*ngFor=
"let key of userService.user.ssh_keys"
>
<span
*ngFor=
"let site of service.site"
[ngSwitch]=
"taskState(site, key)"
class=
"childs-inline"
>
<!-- states with actions -->
<button
*ngSwitchCase=
"'deployed'"
mat-button
mat-icon-button
(click)=
"dialog.openCredentials(taskItem(site, key))"
matTooltip=
"The key {{key.name}} is deployed to the site. Click to see details."
>
<mat-icon>
call_made
</mat-icon>
</button>
<button
*ngSwitchCase=
"'questionnaire'"
mat-button
mat-icon-button
(click)=
"dialog.openQuestionnaire(taskItem(site, y))"
matTooltip=
"This site needs more data to deploy the keys. Please click to submit the data."
>
<mat-icon>
warning
</mat-icon>
</button>
<!-- states without actions -->
<span
*ngSwitchCase=
"'deployment_pending'"
mat-icon-button
matTooltip=
"Waiting for the deployment of the key {{ key.name }} by the site"
>
<mat-progress-spinner
diameter=
"24"
mode=
"indeterminate"
></mat-progress-spinner>
<ng-container
*ngFor=
"let site of sites()"
>
<tr
*ngFor=
"let service of servicesBySite(site);"
style=
"height: 42px;"
>
<td>
<span
style=
"margin-right: 10px;"
matTooltip=
"Site {{ site.name }} provides the service {{ service.name }} for members of
{{ group.name }}"
>
<mat-icon>
account_balance
</mat-icon>
{{ site.name }}
</span>
<span
*ngSwitchCase=
"'removal_pending'"
mat-icon-button
matTooltip=
"Waiting for the removal of the key {{ key.name }} from the site"
>
<mat-progress-spinner
diameter=
"24"
mode=
"indeterminate"
></mat-progress-spinner>
</td>
<td>
<span
style=
"margin-right: 10px;"
matTooltip=
"{{ userService.serviceDescription(service) }}"
>
<mat-icon>
web
</mat-icon>
{{ service.name }}
</span>
<button
*ngSwitchCase=
"'not_deployed'"
mat-icon-button
matTooltip=
"The key {{ key.name }} is not deployed to this site."
>
<mat-icon>
call_received
</mat-icon>
</button>
<button
*ngSwitchCase=
"'failed'"
mat-icon-button
matTooltip=
"This site failed to deploy the credentials. The deployment will be retried."
>
<mat-icon>
error
</mat-icon>
</button>
<button
*ngSwitchCase=
"'rejected'"
mat-icon-button
matTooltip=
"This site rejected the deployment of the key {{ key.name }}."
>
<mat-icon>
error
</mat-icon>
</button>
<!-- if we have no deployment -> assume state == not_deployed -->
<span
*ngSwitchDefault
mat-icon-button
matTooltip=
"The key {{ key.name }} is not deployed to this site."
>
<mat-icon>
call_received
</mat-icon>
</td>
<td
*ngFor=
"let key of userService.user.ssh_keys"
>
<span
[ngSwitch]=
"taskState(site, key)"
class=
"childs-inline"
>
<!-- states with actions -->
<button
*ngSwitchCase=
"'deployed'"
mat-button
mat-icon-button
(click)=
"dialog.openCredentials(service, taskItem(site, key))"
matTooltip=
"The key {{ key.name }} is deployed for the service {{ service.name }}. Click to see details."
>
<mat-icon>
call_made
</mat-icon>
</button>
<button
*ngSwitchCase=
"'questionnaire'"
mat-button
mat-icon-button
(click)=
"dialog.openQuestionnaire(taskItem(site, key))"
matTooltip=
"This site needs more data to deploy the keys. Please click to submit the data."
>
<mat-icon>
warning
</mat-icon>
</button>
<!-- states without actions -->
<span
*ngSwitchCase=
"'deployment_pending'"
mat-icon-button
matTooltip=
"Waiting for the deployment of the key {{
key.name }} to the site {{ site.name }}"
>
<mat-progress-spinner
diameter=
"24"
mode=
"indeterminate"
></mat-progress-spinner>
</span>
<span
*ngSwitchCase=
"'removal_pending'"
mat-icon-button
matTooltip=
"Waiting for the removal of the key {{ key.name }}
from the site {{ site.name }}"
>
<mat-progress-spinner
diameter=
"24"
mode=
"indeterminate"
></mat-progress-spinner>
</span>
<button
*ngSwitchCase=
"'not_deployed'"
mat-icon-button
matTooltip=
"The key {{ key.name }} is not deployed for the service {{ service.name }}."
>
<mat-icon>
call_received
</mat-icon>
</button>
<button
*ngSwitchCase=
"'failed'"
mat-icon-button
matTooltip=
"Site {{ site.name }} failed to deploy the credentials. The deployment will be retried."
>
<mat-icon>
error
</mat-icon>
</button>
<button
*ngSwitchCase=
"'rejected'"
mat-icon-button
matTooltip=
"Site {{ site.name }} rejected the deployment of the key {{ key.name }}."
>
<mat-icon>
error
</mat-icon>
</button>
<!-- if we have no deployment -> assume state == not_deployed -->
<span
*ngSwitchDefault
mat-icon-button
matTooltip=
"The key {{ key.name }} is not deployed to the site {{ site.name }}."
>
<mat-icon>
call_received
</mat-icon>
</span>
</span>
</
span
>
</t
d
>
</
t
r>
</
td
>
</t
r
>
</
ng-containe
r>
</tbody>
</table>
</ng-template>
<ng-template
#noServiceList
>
<p>
No services need membership of the VO "{{ group.name }}".
Currently, no services need membership of this VO. You can select keys for this VO anyway. We will deploy them to new services, that need
membership of this VO.
</p>
</ng-template>
<mat-action-row>
...
...
src/app/vo/vo.component.ts
View file @
0cd7b267
import
{
Component
,
OnInit
,
Input
}
from
'
@angular/core
'
;
import
{
HttpClient
}
from
'
@angular/common/http
'
;
import
{
DialogService
}
from
'
../dialogues/dialog.service
'
;
import
{
UserService
}
from
'
../user.service
'
;
import
*
as
t
from
'
../types/types.module
'
;
...
...
@@ -12,24 +13,46 @@ import * as t from '../types/types.module';
export
class
VoComponent
implements
OnInit
{
@
Input
()
group
:
t
.
Group
;
public
deployment
:
t
.
Deployment
;
@
Input
()
deployment
:
t
.
Deployment
;
constructor
(
public
userService
:
UserService
,
public
http
:
HttpClient
,
public
dialog
:
DialogService
,
)
{
}
ngOnInit
()
{
this
.
deployment
=
this
.
_deployment
();
}
private
_deployment
():
t
.
Deployment
|
undefined
{
let
dep
=
this
.
userService
.
userState
.
deployments
.
find
(
(
d
:
t
.
Deployment
)
=>
{
return
d
.
group
===
this
.
group
.
id
;
public
sites
():
t
.
Site
[]
{
if
(
this
.
deployment
)
{
return
this
.
deployment
.
sites
;
}
return
this
.
userService
.
getServices
(
this
.
group
).
map
(
(
s
:
t
.
Service
)
=>
{
if
(
s
.
site
.
length
==
1
)
{
return
s
.
site
[
0
];
}
else
{
console
.
log
(
"
Group service is provided by more than one site!
"
)
return
undefined
}
}
);
return
dep
}
public
servicesBySite
(
site
:
t
.
Site
):
t
.
Service
[]
{
if
(
this
.
deployment
)
{
return
this
.
deployment
.
services
.
filter
(
(
s
:
t
.
Service
)
=>
{
return
s
.
site
.
some
(
(
ss
:
t
.
Site
)
=>
{
return
ss
.
id
===
site
.
id
;
}
);
}
);
}
return
this
.
userService
.
getServices
(
this
.
group
);
}
public
services
():
t
.
Service
[]
{
...
...
@@ -39,7 +62,7 @@ export class VoComponent implements OnInit {
return
this
.
userService
.
getServices
(
this
.
group
);
}
public
taskItem
(
site
:
t
.
Site
,
key
:
t
.
SSHKeyRef
):
t
.
DeploymentStateItem
|
undefined
{
public
taskItem
(
site
:
t
.
Site
,
key
:
t
.
SSHKeyRef
):
t
.
DeploymentStateItem
{
if
(
this
.
deployment
==
undefined
)
{
return
undefined
;
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment