UI policy imports

ui/index.html

@@ -16,10 +16,10 @@
     <title>Eclipse Ditto™ explorer</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.3/font/bootstrap-icons.min.css"
-        rel="stylesheet"
-        integrity="sha512-YzwGgFdO1NQw1CZkPoGyRkEnUTxPSbGWXvGiXrWk8IeSqdyci0dEDYdLLjMxq1zCoU0QBa4kHAFiRhUL3z2bow=="
-        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css"
+        integrity="sha512-oAvZuuYVzkcTc2dH5z1ZJup5OmSQ000qlfRvuoTTiyTBjwX1faoyearj8KdMq0LgsBTHMrRuMek7s+CxF8yE+w=="
+        crossorigin="anonymous"
+        referrerpolicy="no-referrer" />
     <link rel="icon" type="image/png"
         href="https://raw.githubusercontent.com/eclipse/ditto/master/documentation/src/main/resources/images/favicon-16x16.png"
         sizes="16x16">

ui/main.scss

@@ -28,6 +28,15 @@
     --bs-table-hover-color: white;
 }
 
+.table-active .bi {
+    color: white;
+}
+
+.table-action-column {
+    text-align: center;
+    width: 27.5px;
+}
+
 td {
     text-overflow: ellipsis;
     overflow: hidden;

ui/main.ts

@@ -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';
@@ -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();

ui/modules/api.ts

@@ -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 {

ui/modules/connections/connectionsMonitor.ts

@@ -93,8 +93,8 @@ function retrieveConnectionMetrics() {
         if (response.connectionMetrics[direction]) {
           Object.keys(response.connectionMetrics[direction]).forEach((type) => {
             let entry = response.connectionMetrics[direction][type];
-            Utils.addTableRow(dom.tbodyConnectionMetrics, direction, false, false, type, 'success', entry.success.PT1M, entry.success.PT1H, entry.success.PT24H);
-            Utils.addTableRow(dom.tbodyConnectionMetrics, direction, false, false, type, 'failure', entry.failure.PT1M, entry.failure.PT1H, entry.failure.PT24H);
+            Utils.addTableRow(dom.tbodyConnectionMetrics, direction, false, null, type, 'success', entry.success.PT1M, entry.success.PT1H, entry.success.PT24H);
+            Utils.addTableRow(dom.tbodyConnectionMetrics, direction, false, null, type, 'failure', entry.failure.PT1M, entry.failure.PT1H, entry.failure.PT24H);
           });
         };
       });
@@ -130,7 +130,7 @@ function fillConnectionLogsTable(entries) {
 
   let filter = connectionLogsFilter ? connectionLogsFilter.match : (a => true);
   entries.filter(filter).forEach((entry) => {
-    Utils.addTableRow(dom.tbodyConnectionLogs, Utils.formatDate(entry.timestamp, true), false, false, entry.type, entry.level);
+    Utils.addTableRow(dom.tbodyConnectionLogs, Utils.formatDate(entry.timestamp, true), false, null, entry.type, entry.level);
   });
   dom.tbodyConnectionLogs.scrollTop = dom.tbodyConnectionLogs.scrollHeight - dom.tbodyConnectionLogs.clientHeight;
 }

ui/modules/environments/environments.html

@@ -25,10 +25,10 @@
     <div class="col-md-8 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="#tabEnvDetails">CRUD Environment</a>
+                <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabEnvDetails">Manage</a>
             </li>
             <li class="nav-item">
-                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabEnvJson">Environment JSON</a>
+                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabEnvJson">JSON</a>
             </li>
         </ul>
         <div class="tab-content" style="flex-grow: 1; overflow: hidden;">
@@ -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>