src/app/board-config/board-config.component.html
<div class="container">
<header>
<h1>Board-Config</h1>
</header>
<section>
<p class="alert alert-info">
All the configuration variables can be set via GET parameters in the URL.<br>
For example: <code>{{baseUrl}}/?refreshInterval=20&fontSize=22</code><br>
Each config setting contains a short description on how to set it via URL.
</p>
<form (ngSubmit)="submit()" #configForm="ngForm">
<fieldset>
<legend>General</legend>
<div class="form-group">
<label for="boardConfigApiToken">
Refresh Interval
</label>
<input
type="number"
name="refreshInterval"
class="form-control"
id="boardConfigRefreshInterval"
aria-describedby="boardConfigRefreshIntervalHelp"
placeholder="interval in seconds"
[ngClass]="{
'form-control': true,
'is-invalid': refreshInterval.invalid,
'is-valid': refreshInterval.valid
}"
required
min="10"
max="3600"
[(ngModel)]="config.refreshInterval"
#refreshInterval="ngModel"
>
<small id="boardConfigRefreshIntervalHelp" class="form-text text-muted">
Defines the interval between polling the builds from CircleCi in seconds. (min 10 – max 3600)<br>
It’s possible ot inject the token value via GET URL parameter. For Example: <code>?refreshInterval=<30></code>.
</small>
</div>
<div class="form-group">
<label for="boardConfigTheme">Theme</label>
<select class="custom-select" name="theme" [(ngModel)]="config.theme" id="boardConfigTheme">
<option value="">default</option>
<option value="dark">dark</option>
</select>
<small id="boardConfigThemeHelp" class="form-text text-muted">
Optional alternate theme that should be used, may require a complete refresh after change.
<code>?theme=dark</code>
</small>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label" for="boardConfigGroupWorkflows">
<input class="form-check-input" type="checkbox" id="boardConfigGroupWorkflows" name="groupWorkflows" [(ngModel)]="config.groupWorkflows">
group workflow jobs
</label>
</div>
<small id="boardConfigRefreshIntervalHelp" class="form-text text-muted">
Groups build jobs which belong to the same workflow in one table row.<br>
It’s possible ot inject the token value via GET URL parameter. For Example: <code>?groupWorkflows=<yes></code>.
</small>
</div>
</fieldset>
<fieldset>
<legend>CircleCi</legend>
<div class="form-group">
<label for="boardConfigApiToken">
CircleCi API-Key
</label>
<input
type="text"
name="apiToken"
class="form-control"
id="boardConfigApiToken"
aria-describedby="boardConfigApiTokenHelp"
placeholder="enter the api key"
[ngClass]="{
'form-control': true,
'is-invalid': apiToken.invalid,
'is-valid': apiToken.valid
}"
pattern="[A-Fa-f0-9]{40}"
[(ngModel)]="config.apiToken"
#apiToken="ngModel"
>
<small id="boardConfigApiTokenHelp" class="form-text text-muted">
Optain a application specific api token in your <a href="https://circleci.com/account/api" target="_blank" rel="external">CircleCi Account Settings</a>.<br>
It’s possible ot inject the token value via GET URL parameter: <code>?apiToken=<value></code>.
</small>
</div>
</fieldset>
<fieldset class="form-group">
<legend>
GitLab
<button
class="btn btn-sm btn-outline-primary"
title="add another gitlab project configuration block"
(click)="addEmptyGitlabProject()">
<i class="fa fa-plus"></i>
</button>
</legend>
<p class="alert alert-info">
Setting the gitlab projects via GET variable is a bit more complicated as each project needs at least
the project’s name and an access token defined. Therefore the GET variable works like a csv list of
projects.<br>
<br>
Also note that there’s a request made for each project and that there’s a undocumented rate limit on gitlab’s side.
Please increase the refresh interval (above) when you encounter http error messages.<br>
<br>
Make sure you encode all entities like line breaks (<code>%0A</code>) and slashes (<code>%2F</code>) properly.<br>
For example: <code>?gitlab=my-organization%2Fcool-project-name,token,baseUrl%0Aorg%2Fproject,token,baseUrl</code>
</p>
<!-- one card for the settings of each project -->
<div class="card"
*ngFor="let gitlabProject of config.gitlabProjects; let i = index;"
[class.border-warning]="!(gitlabProject.name && gitlabProject.token)"
>
<div class="card-header" [class.text-warning]="!(gitlabProject.name && gitlabProject.token)">
Project
<ul class="pull-right nav nav-pills card-header-pills">
<li class="nav-item">
<button class="btn btn-sm btn-outline-primary" (click)="removeGitLabProject(i)" title="remove the project "{{ gitlabProject.name }}"">
<i class="fa fa-minus"></i>
</button>
</li>
</ul>
</div>
<div class="card-body">
<div class="row">
<div class="col">
<div class="form-group">
<label>
Project Name
</label>
<input class="form-control" placeholder="project name" type="text"
name="gitlabProjectName{{i}}" [(ngModel)]="config.gitlabProjects[i].name" />
<small class="form-text text-muted">project name f.e. <code>group/frontend-app</code> including organization and repo name</small>
</div>
</div>
<div class="col">
<div class="form-group">
<label>Access-Token</label>
<input class="form-control" placeholder="project" type="text"
name="gitlabProjectToken{{i}}" [(ngModel)]="config.gitlabProjects[i].token" />
<small class="form-text text-muted">
personal access token with the "api" permission generated in <a href="https://gitlab.com/profile/personal_access_tokens">gitlab profile settings</a>
</small>
</div>
</div>
<div class="col">
<div class="form-group">
<label>Base-URL</label>
<input class="form-control" placeholder="gitlab baseurl" type="text"
name="gitlabProjectBaseUrl{{i}}" [(ngModel)]="config.gitlabProjects[i].baseUrl" />
<small class="form-text text-muted">base url to the gitlab server, including schema, trailing slashes will be removed (defaults to: <code>https://gitlab.com</code>)</small>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<button type="submit" class="btn btn-primary" [disabled]="!configForm.form.valid">
Save
</button>
</fieldset>
</form>
</section>
</div>