Skip to content

Commit

Permalink
UI - Support for policy imports
Browse files Browse the repository at this point in the history 
Signed-off-by: thfries <thomas.fries0@gmail.com>
  • Loading branch information
@thfries
thfries committed Nov 18, 2023
1 parent 2d49083 commit 3c4912e
Show file tree
Hide file tree
Showing 19 changed files with 1,127 additions and 387 deletions.
10 changes: 10 additions & 0 deletions ui/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ import * as Operations from './modules/operations/servicesLogging.js';
import * as Piggyback from './modules/operations/piggyback.js';
import * as Templates from './modules/operations/templates.js';
import * as Policies from './modules/policies/policies.js';
import * as PoliciesJSON from './modules/policies/policiesJSON.js';
import * as PoliciesEntries from './modules/policies/policiesEntries.js';
import * as PoliciesImports from './modules/policies/policiesImports.js';
import * as PoliciesSubjects from './modules/policies/policiesSubjects';
import * as PoliciesResources from './modules/policies/policiesResources';
import * as Attributes from './modules/things/attributes.js';
import * as FeatureMessages from './modules/things/featureMessages.js';
import * as Features from './modules/things/features.js';
Expand Down Expand Up @@ -56,6 +61,11 @@ document.addEventListener('DOMContentLoaded', async function() {
Features.ready();
await FeatureMessages.ready();
Policies.ready();
PoliciesJSON.ready();
PoliciesImports.ready();
PoliciesEntries.ready();
PoliciesSubjects.ready();
PoliciesResources.ready();
Connections.ready();
ConnectionsCRUD.ready();
ConnectionsMonitor.ready();
Expand Down
2 changes: 1 addition & 1 deletion ui/modules/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,7 @@ export function setAuthHeader(forDevOps) {
* @return {Object} result as json object
*/
export async function callDittoREST(method, path, body = null,
additionalHeaders = null, returnHeaders = false, devOps = false) {
additionalHeaders = null, returnHeaders = false, devOps = false): Promise<any> {
let response;
const contentType = method === 'PATCH' ? 'application/merge-patch+json' : 'application/json';
try {
Expand Down
2 changes: 1 addition & 1 deletion ui/modules/environments/environments.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
<div class="input-group input-group-sm mt-1 mb-3">
<label class="input-group-text">Ditto Version</label>
<select class="form-select form-select-sm" id="selectDittoVersion" disabled>
<option selecte value="3">3</option>
<option selected value="3">3</option>
<option value="2">2</option>
</select>
</div>
Expand Down
233 changes: 132 additions & 101 deletions ui/modules/policies/policies.html
View file
Original file line number Diff line number Diff line change
@@ -1,123 +1,154 @@
<div>
<div class="row resizable_pane" style="height: 30vh;">
<div class="col-md-6 resizable_flex_column">
<h5>Policies</h5>
<hr />
<div class="row">
<div class="col-md-4">
<h6>Load a policy</h6>
<div class="input-group input-group-sm mb-1 mt-1 has-validation" role="group">
<label class="input-group-text">PolicyId</label>
<input type="text" class="form-control form-control-sm" id="inputPolicyId"></input>
<button id="buttonLoadPolicy" class="btn btn-outline-secondary btn-sm"
<button id="buttonLoadPolicy" class="btn btn-outline-primary btn-sm"
title="Load policy with the given ID">
load
Load
</button>
<div class="invalid-feedback"></div>
</div>
</div>
<div class="col-md-6 resizable_flex_column">
<h6>Who am I</h6>
<div class="table-wrap">
<h6>Recent policies</h6>
<div class="table-wrap" style="height: 35vh;">
<table class="table table-striped table-hover table-sm">
<tbody id="tbodyWhoami"></tbody>
<tbody id="tbodyRecentPolicies"></tbody>
</table>
</div>
</div>
</div>
<h5>Policy Entries</h5>
<hr />
<div class="row resizable_pane" style="height: 50vh;">
<div class="col-md-4 resizable_flex_column">
<div class="input-group input-group-sm mb-1 mt-1 has-validation">
<label class="input-group-text">Entry</label>
<input type="text" class="form-control form-control-sm" id="inputPolicyEntry"></input>
<button id="buttonCreatePolicyEntry" class="btn btn-outline-secondary btn-sm"
title="Create a policy entry with the given name">
<i class="bi bi-plus-circle"></i>
</button>
<button id="buttonDeletePolicyEntry" class="btn btn-outline-secondary btn-sm"
title="Delete the selected policy entry">
<i class="bi bi-trash3"></i>
</button>
<div class="invalid-feedback"></div>
</div>
<div class="input-group has-validation">
<input class="form-control" id="tableValidationEntries" hidden="true"></input>
<div class="invalid-feedback"></div>
</div>
<div class="table-wrap">
<h6>Who am I</h6>
<div class="table-wrap" style="height: 35vh;">
<table class="table table-striped table-hover table-sm">
<tbody id="tbodyPolicyEntries"></tbody>
<tbody id="tbodyWhoami"></tbody>
</table>
</div>
</div>
<div class="col-md-8 resizable_flex_column">
<h6>Subjects</h6>
<div class="row flex_column_part">
<div class="col-md-6 resizable_flex_column">
<div class="input-group has-validation">
<input class="form-control" id="tableValidationSubjects" hidden="true"></input>
<div class="invalid-feedback"></div>
</div>
<div class="table-wrap">
<table class="table table-striped table-hover table-sm">
<tbody id="tbodyPolicySubjects"></tbody>
</table>
</div>
</div>
<div class="col-md-6 resizable_flex_column">
<div class="input-group input-group-sm mb-1 has-validation">
<label class="input-group-text">Subject</label>
<input type="text" class="form-control form-control-sm" id="inputSubjectId"></input>
<button class="btn btn-outline-secondary btn-sm" id="buttonCreatePolicySubject">
<i class="bi bi-plus-circle"></i>
</button>
<button class="btn btn-outline-secondary btn-sm" id="buttonSavePolicySubject">
<i class="bi bi-save"></i>
</button>
<button class="btn btn-outline-secondary btn-sm" id="buttonDeletePolicySubject">
<i class="bi bi-trash"></i>
</button>
<div class="invalid-feedback"></div>
</div>
<div class="ace_container" style="flex-grow: 1;">
<div class="script_editor" id="subjectEditor"></div>
</div>
</div>
</div>
<h6>Resources</h6>
<div class="row flex_column_part">
<div class="col-md-6 resizable_flex_column">
<div class="input-group has-validation">
<input class="form-control" id="tableValidationResources" hidden="true"></input>
<div class="invalid-feedback"></div>
</div>
<div class="table-wrap">
<table class="table table-striped table-hover table-sm">
<tbody id="tbodyPolicyResources"></tbody>
</table>
<div class="col-md-8">
<div class="resizable_flex_column">
<ul class="nav nav-tabs nav-fill">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabPolicyCRUD">CRUD Policy</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPolicyJson">Policy JSON</a>
</li>
</ul>
<div class="tab-content" style="flex-grow: 1; overflow: hidden;">
<div class="tab-pane container active no-margin" id="tabPolicyCRUD">
<h5>PolicyImports</h5>
<hr />
<div class="row resizable_pane" style="height: 15vh;">
<div class="col-md-6 resizable_flex_column">
<div class="table-wrap">
<table class="table table-striped table-hover table-sm">
<tbody id="tbodyPolicyImports"></tbody>
</table>
</div>
</div>
<div class="col-md-6 resizable_flex_column">
<crud-toolbar label="ImportPolicyId" id="crudImport" style="flex-grow: 1;">
<div class="table-wrap">
<table class="table table-striped table-hover table-sm">
<tbody id="tbodyPolicyImportEntries"></tbody>
</table>
</div>
</crud-toolbar>
</div>
</div>
<h5>Policy Entries</h5>
<hr />
<div class="row resizable_pane" style="height: 15vh;">
<div class="col-md-6 resizable_flex_column">
<div class="input-group has-validation">
<input class="form-control" id="tableValidationEntries" hidden="true"></input>
<div class="invalid-feedback"></div>
</div>
<div class="table-wrap">
<table class="table table-striped table-hover table-sm">
<tbody id="tbodyPolicyEntries"></tbody>
</table>
</div>
</div>
<div class="col-md-6 resizable_flex_column">
<crud-toolbar label="Entry" id="crudEntry">
<div class="input-group input-group-sm mb-1">
<label class="input-group-text">Importable</label>
<select class="form-select form-select-sm" id="selectImportable" disabled>
<option selected value="implicit">implicit</option>
<option value="explicit">explicit</option>
<option value="never">never</option>
</select>
</div>
</crud-toolbar>
</div>
</div>
<h6>Subjects</h6>
<div class="row resizable_pane" style="height: 20vh;">
<div class="col-md-6 resizable_flex_column">
<div class="input-group has-validation">
<input class="form-control" id="tableValidationSubjects" hidden="true"></input>
<div class="invalid-feedback"></div>
</div>
<div class="table-wrap">
<table class="table table-striped table-hover table-sm">
<tbody id="tbodyPolicySubjects"></tbody>
</table>
</div>
</div>
<div class="col-md-6 resizable_flex_column">
<crud-toolbar label="Subject" id="crudSubject" style="flex-grow: 1;">
<div class="ace_container" style="flex-grow: 1;">
<div class="script_editor" id="subjectEditor"></div>
</div>
</crud-toolbar>
</div>
<!-- <div class="row flex_column_part">
</div> -->
</div>
<h6>Resources</h6>
<div class="row resizable_pane" style="height: 20vh;">
<div class="col-md-6 resizable_flex_column">
<div class="input-group has-validation">
<input class="form-control" id="tableValidationResources" hidden="true"></input>
<div class="invalid-feedback"></div>
</div>
<div class="table-wrap">
<table class="table table-striped table-hover table-sm">
<tbody id="tbodyPolicyResources"></tbody>
</table>
</div>
</div>
<div class="col-md-6 resizable_flex_column">
<crud-toolbar label="Resource" id="crudResource" style="flex-grow: 1;">
<div class="input-group input-group-sm mb-1">
<label class="input-group-text">Template</label>
<select class="form-select form-select-sm" id="selectResourceTemplates" disabled></select>
</div>
<div class="ace_container" style="flex-grow: 1;">
<div class="script_editor" id="resourceEditor"></div>
</div>
</crud-toolbar>
</div>
</div>
</div>
</div>
<div class="col-md-6 resizable_flex_column">
<div class="input-group input-group-sm mb-1 has-validation">
<label class="input-group-text">Resource</label>
<div class="btn-group dropend">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle"
data-bs-toggle="dropdown"></button>
<ul id="ulResourceTemplates" class="dropdown-menu" style="position: fixed; top: auto;"></ul>
</div>
<input type="text" class="form-control form-control-sm" id="inputResourceId"></input>
<button class="btn btn-outline-secondary btn-sm" id="buttonCreatePolicyResource">
<i class="bi bi-plus-circle"></i>
</button>
<button class="btn btn-outline-secondary btn-sm" id="buttonSavePolicyResource">
<i class="bi bi-save"></i>
</button>
<button class="btn btn-outline-secondary btn-sm" id="buttonDeletePolicyResource">
<i class="bi bi-trash"></i>
</button>
<div class="invalid-feedback"></div>
<div class="tab-content" style="flex-grow: 1; overflow: hidden; height: 80vh;">
<div class="tab-pane container no-margin" id="tabPolicyJson">
<crud-toolbar label="PolicyId" id="crudPolicyJson">
<div class="input-group input-group-sm mb-1">
<label class="input-group-text">Template</label>
<select class="form-select form-select-sm" id="selectPolicyJSONTemplate" disabled></select>
</div>
<div class="ace_container" style="flex-grow: 1;">
<div>
<div class="script_editor" id="policyEditor"></div>
</div>
</div>
</crud-toolbar>
</div>
<div class="ace_container" style="flex-grow: 1;">
<div class="script_editor" id="resourceEditor"></div>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 3c4912e

Please sign in to comment.