Improved changing environments:

* Avoid old data
* Refresh views on environment change or tab activation

ui/main.js

@@ -89,6 +89,4 @@ document.addEventListener('DOMContentLoaded', async function() {
       }
     });
   });
-
-  SearchFilter.performLastSearch();
 });

ui/modules/connections/connections.js

@@ -66,7 +66,7 @@ export function ready() {
   loadConnectionTemplates();
 
   dom.buttonLoadConnections.onclick = loadConnections;
-  dom.tabConnections.onclick = loadConnections;
+  dom.tabConnections.onclick = onTabActivated;
 
   dom.buttonCreateConnection.onclick = () => {
     const newConnection = JSON.parse(JSON.stringify(
@@ -145,8 +145,10 @@ export function ready() {
     API.callConnectionsAPI('retrieveConnectionLogs', (response) => {
       connectionLogs = response.connectionLogs;
       response.connectionLogs.forEach((entry) => {
-        Utils.addTableRow(dom.tbodyConnectionLogs, entry.timestamp, false, false, entry.type, entry.level);
+        const timestampDisplay = entry.timestamp.replace('T', ' ').replace('Z', '').replace('.', ' ');
+        Utils.addTableRow(dom.tbodyConnectionLogs, timestampDisplay, false, false, entry.type, entry.level);
       });
+      dom.tbodyConnectionLogs.scrollTop = dom.tbodyConnectionLogs.scrollHeight - dom.tbodyConnectionLogs.clientHeight;
     },
     dom.inputConnectionId.value);
   };
@@ -221,12 +223,6 @@ function loadConnections() {
   });
 };
 
-function onEnvironmentChanged() {
-  if (dom.collapseConnections.classList.contains('show')) {
-    loadConnections();
-  }
-}
-
 function loadConnectionTemplates() {
   fetch('templates/connectionTemplates.json')
       .then((response) => {
@@ -239,4 +235,20 @@ function loadConnectionTemplates() {
       });
 }
 
+let viewDirty = false;
+
+function onTabActivated() {
+  if (viewDirty) {
+    loadConnections();
+    viewDirty = false;
+  }
+}
+
+function onEnvironmentChanged() {
+  if (dom.collapseConnections.classList.contains('show')) {
+    loadConnections();
+  } else {
+    viewDirty = true;
+  }
+}
 

ui/modules/environments/environments.js

@@ -51,11 +51,11 @@ export function addChangeListener(observer) {
   observers.push(observer);
 }
 
-function notifyAll() {
+function notifyAll(modifiedField) {
   // Notify Authorization first to set right auth header
-  Authorization.onEnvironmentChanged();
+  Authorization.onEnvironmentChanged(modifiedField);
   // Notify others
-  observers.forEach(observer => observer.call());
+  observers.forEach(observer => observer.call(null, modifiedField));
 }
 
 export function ready() {
@@ -115,30 +115,37 @@ export function ready() {
   environmentsJsonChanged();
 }
 
-export function environmentsJsonChanged() {
+export function environmentsJsonChanged(modifiedField) {
   localStorage.setItem('ditto-ui-env', JSON.stringify(environments));
 
   updateEnvSelector();
   updateEnvEditors();
   updateEnvTable();
 
-  notifyAll();
-}
+  notifyAll(modifiedField);
 
-function updateEnvSelector() {
-  let activeEnvironment = dom.environmentSelector.value;
-  if (!activeEnvironment || !environments[activeEnvironment]) {
-    activeEnvironment = Object.keys(environments)[0];
-  };
+  function updateEnvSelector() {
+    let activeEnvironment = dom.environmentSelector.value;
+    if (!activeEnvironment || !environments[activeEnvironment]) {
+      activeEnvironment = Object.keys(environments)[0];
+    };
 
-  dom.environmentSelector.innerHTML = '';
-  Object.keys(environments).forEach((key) => {
-    let option = document.createElement('option');
-    option.text = key;
-    dom.environmentSelector.add(option);
-  });
+    dom.environmentSelector.innerHTML = '';
+    Object.keys(environments).forEach((key) => {
+      let option = document.createElement('option');
+      option.text = key;
+      dom.environmentSelector.add(option);
+    });
 
-  dom.environmentSelector.value = activeEnvironment;
+    dom.environmentSelector.value = activeEnvironment;
+  }
+
+  function updateEnvTable() {
+    dom.tbodyEnvironments.innerHTML = '';
+    Object.keys(environments).forEach((key) => {
+      Utils.addTableRow(dom.tbodyEnvironments, key, key === dom.inputEnvironmentName.value);
+    });
+  }
 }
 
 function updateEnvEditors() {
@@ -153,9 +160,3 @@ function updateEnvEditors() {
   }
 }
 
-function updateEnvTable() {
-  dom.tbodyEnvironments.innerHTML = '';
-  Object.keys(environments).forEach((key) => {
-    Utils.addTableRow(dom.tbodyEnvironments, key, key === dom.inputEnvironmentName.value);
-  });
-}

ui/modules/things/attributes.js

@@ -69,7 +69,7 @@ function updateAttributesTable() {
   dom.attributesTable.innerHTML = '';
   let count = 0;
   let thingHasAttribute = false;
-  if (Things.theThing.attributes) {
+  if (Things.theThing && Things.theThing.attributes) {
     Object.keys(Things.theThing.attributes).forEach((path) => {
       if (path === dom.attributePath.value) {
         dom.attributeValue.value = attributeToString(Things.theThing.attributes[path]);

ui/modules/things/features.js

@@ -175,7 +175,7 @@ function onThingChanged(thing) {
   dom.featuresTable.innerHTML = '';
   let count = 0;
   let thingHasFeature = false;
-  if (thing.features) {
+  if (thing && thing.features) {
     for (const key of Object.keys(thing.features)) {
       if (key === dom.theFeatureId.value) {
         refreshFeature(thing, key);

ui/modules/things/fields.js

@@ -13,7 +13,6 @@
 
 import * as Environments from '../environments/environments.js';
 import * as Utils from '../utils.js';
-import * as SearchFilter from './searchFilter.js';
 
 let theFieldIndex = -1;
 
@@ -63,7 +62,7 @@ export async function ready() {
   });
 
   dom.fieldsModal.addEventListener('hide.bs.modal', () => {
-    SearchFilter.performLastSearch();
+    Environments.environmentsJsonChanged();
   });
 
   document.getElementById('fieldUpdate').onclick = () => {
@@ -76,7 +75,7 @@ export async function ready() {
 
     selectedField.path = dom.fieldPath.value;
     selectedField.label = dom.fieldLabel.value;
-    Environments.environmentsJsonChanged();
+    updateFieldList();
   };
 
   document.getElementById('fieldCreate').onclick = () => {
@@ -90,14 +89,14 @@ export async function ready() {
       path: dom.fieldPath.value,
       label: dom.fieldPath.value.split('/').slice(-1)[0],
     });
-    Environments.environmentsJsonChanged();
+    updateFieldList();
   };
 
   document.getElementById('fieldDelete').onclick = () => {
     Utils.assert(theFieldIndex >= 0, 'No field selected');
 
     Environments.current().fieldList.splice(theFieldIndex, 1);
-    Environments.environmentsJsonChanged();
+    updateFieldList();
     theFieldIndex = -1;
   };
 
@@ -109,7 +108,7 @@ export async function ready() {
     Environments.current().fieldList.splice(theFieldIndex, 1);
     theFieldIndex--;
     Environments.current().fieldList.splice(theFieldIndex, 0, movedItem);
-    Environments.environmentsJsonChanged();
+    updateFieldList();
   };
 
   document.getElementById('fieldDown').onclick = () => {
@@ -120,7 +119,7 @@ export async function ready() {
     Environments.current().fieldList.splice(theFieldIndex, 1);
     theFieldIndex++;
     Environments.current().fieldList.splice(theFieldIndex, 0, movedItem);
-    Environments.environmentsJsonChanged();
+    updateFieldList();
   };
 };
 
@@ -181,6 +180,6 @@ function updateFieldList() {
  */
 function toggleFieldActiveEventHandler(evt) {
   Environments.current().fieldList[evt.target.id].active = evt.target.checked;
-  Environments.environmentsJsonChanged();
+  updateFieldList();
 };
 

ui/modules/things/searchFilter.js

@@ -158,7 +158,7 @@ function toggleFilterFavourite(filter) {
   } else {
     Environments.current().filterList.push(filter);
   }
-  Environments.environmentsJsonChanged();
+  Environments.environmentsJsonChanged('filterList');
   return true;
 };