Skip to content

Commit

Permalink
enhance "Incoming Thing Updates" in UI to provide more information at…
Browse files Browse the repository at this point in the history 
… a glance

* added 2 columns "Action" (e.g. showing "merged" or "modified") and "Path" (showing on which level) to the table
* prioritized "_context" over "features" and "attributes" to extract "Field(s)" from - only done for actions on path "/"
* added a selection to the "Thing Update Detail" view which information to display from the selected event

Signed-off-by: Thomas Jäckle <thomas.jaeckle@beyonnex.io>
  • Loading branch information
@thjaeckle
thjaeckle committed Nov 22, 2023
1 parent 2d6d55b commit afed1ad
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 10 deletions.
15 changes: 13 additions & 2 deletions ui/modules/things/messagesIncoming.html
View file
Expand Up @@ -15,7 +15,7 @@ <h5 data-bs-toggle="collapse" data-bs-target="#collapseMessages">
<hr />
<div class="collapse" id="collapseMessages">
<div class="row resizable_pane" style="height: 45vh;">
<div class="col-md-6 resizable_flex_column">
<div class="col-md-7 resizable_flex_column">
<div class="input-group input-group-sm mb-1">
<button class="btn btn-outline-secondary btn-sm button_round_right" id="buttonResetMessagesIncoming"
data-bs-toggle="tooltip" title="Reset connection logs for the selected connection">
Expand All @@ -28,6 +28,8 @@ <h5 data-bs-toggle="collapse" data-bs-target="#collapseMessages">
<thead>
<tr>
<th>Revision</th>
<th>Action</th>
<th>Path</th>
<th>Field(s)</th>
<th>Modified</th>
</tr>
Expand All @@ -36,8 +38,17 @@ <h5 data-bs-toggle="collapse" data-bs-target="#collapseMessages">
</table>
</div>
</div>
<div class="col-md-6 resizable_flex_column">
<div class="col-md-5 resizable_flex_column">
<h6>Thing Update Detail</h6>
<div class="input-group input-group-sm mb-1 mt-1">
<label class="input-group-text" for="selectThingUpdateMessageContent">Show</label>
<select class="form-select form-select-sm" id="selectThingUpdateMessageContent">
<option value="FULL_THING_WITH_CONTEXT" selected>Full Thing JSON with context and metadata</option>
<option value="FULL_THING">Only full Thing JSON</option>
<option value="ONLY_CONTEXT_WITH_METADATA">Only context with metadata</option>
<option value="ONLY_CONTEXT">Only context</option>
</select>
</div>
<div class="ace_container" style="flex-grow: 1;">
<div class="script_editor" id="messageIncomingDetail"></div>
</div>
Expand Down
68 changes: 60 additions & 8 deletions ui/modules/things/messagesIncoming.ts
View file
Expand Up @@ -20,19 +20,28 @@ import * as ThingsSSE from './thingsSSE.js';
/* eslint-disable no-invalid-this */
/* eslint-disable require-jsdoc */

enum ThingUpdateMessageContent {
FULL_THING_WITH_CONTEXT="FULL_THING_WITH_CONTEXT",
FULL_THING="FULL_THING",
ONLY_CONTEXT_WITH_METADATA="ONLY_CONTEXT_WITH_METADATA",
ONLY_CONTEXT="ONLY_CONTEXT"
}

let dom = {
badgeMessageIncomingCount: null,
buttonResetMessagesIncoming: null,
selectThingUpdateMessageContent: null,
tbodyMessagesIncoming: null,
};

let messages = [];
let selectedRow;
let messageDetail;
let currentThingId;
let thingUpdateMessageContent = ThingUpdateMessageContent.FULL_THING_WITH_CONTEXT;

document.getElementById('messagesIncomingHTML').innerHTML = messagesIncomingHTML;


export function ready() {
ThingsSSE.addChangeListener(onMessage);
Things.addChangeListener(onThingChanged);
Expand All @@ -42,42 +51,85 @@ export function ready() {
messageDetail = Utils.createAceEditor('messageIncomingDetail', 'ace/mode/json', true);

dom.buttonResetMessagesIncoming.onclick = onResetMessagesClick;
dom.selectThingUpdateMessageContent.onchange = onSelectThingUpdateMessageContentSelect;
dom.tbodyMessagesIncoming.addEventListener('click', onMessageTableClick);
}

function onMessageTableClick(event) {
messageDetail.setValue(Utils.stringifyPretty(messages[event.target.parentNode.rowIndex - 1]), -1);
selectedRow = event.target.parentNode.rowIndex - 1;
updateThingUpdateDetail();
messageDetail.session.getUndoManager().reset();
}

function updateThingUpdateDetail() {
switch (thingUpdateMessageContent) {
case ThingUpdateMessageContent.FULL_THING_WITH_CONTEXT: {
messageDetail.setValue(Utils.stringifyPretty(messages[selectedRow]), -1);
break;
}
case ThingUpdateMessageContent.FULL_THING: {
let messageParts = Object.entries(messages[selectedRow]);
let filtered = messageParts.filter(([key, value]) => !key.startsWith("_"));
const justRegularFields = Object.fromEntries(filtered);
messageDetail.setValue(Utils.stringifyPretty(justRegularFields), -1);
break;
}
case ThingUpdateMessageContent.ONLY_CONTEXT_WITH_METADATA: {
let messageParts = Object.entries(messages[selectedRow]);
let filtered = messageParts.filter(([key, value]) => key.startsWith("_"));
const justSpecialFields = Object.fromEntries(filtered);
messageDetail.setValue(Utils.stringifyPretty(justSpecialFields), -1);
break;
}
case ThingUpdateMessageContent.ONLY_CONTEXT: {
let messageParts = Object.entries(messages[selectedRow]);
let filtered = messageParts
.filter(([key, value]) => key.startsWith("_"))
.filter(([key, value]) => key !== "_metadata");
const justSpecialFields = Object.fromEntries(filtered);
messageDetail.setValue(Utils.stringifyPretty(justSpecialFields), -1);
break;
}
default:
messageDetail.setValue(Utils.stringifyPretty(messages[selectedRow]), -1);
}
}

function onResetMessagesClick() {
messages = [];
dom.badgeMessageIncomingCount.textContent = '';
dom.tbodyMessagesIncoming.innerHTML = '';
messageDetail.setValue('');
}

function onSelectThingUpdateMessageContentSelect() {
thingUpdateMessageContent = dom.selectThingUpdateMessageContent.value as ThingUpdateMessageContent;
updateThingUpdateDetail();
}

function onMessage(messageData) {
messages.push(messageData);
dom.badgeMessageIncomingCount.textContent = messages.length;

function getColumnValues(): string[] {
if (messageData['features']) {
return [
...messageData['features'] ? Object.keys(messageData.features) : [],
...messageData['attributes'] ? Object.keys(messageData.attributes) : [],
];
} else {
if (messageData['_context'] && messageData['_context'].value) {
return [
...messageData['_context'].value.features ? Object.keys(messageData['_context'].value.features) : [],
...messageData['_context'].value.attributes ? Object.keys(messageData['_context'].value.attributes) : [],
]
} else {
return [
...messageData['features'] ? Object.keys(messageData.features) : [],
...messageData['attributes'] ? Object.keys(messageData.attributes) : [],
];
}
}

Utils.addTableRow(
dom.tbodyMessagesIncoming,
messageData._revision, false, null,
messageData['_context'].topic.substring(messageData['_context'].topic.lastIndexOf('/') + 1),
messageData['_context'].path,
getColumnValues().join('\n'),
Utils.formatDate(messageData._modified, true)
);
Expand Down

0 comments on commit afed1ad

Please sign in to comment.