BE+FE: change log

docs/DEVICE_CHANGE_LOG.md

@@ -0,0 +1,73 @@
+# Change log
+
+The **_Change log_** provides a historical record of changes made to your devices. It allows you to see **what changed, when it changed, and what caused the change**, making it easier to troubleshoot unexpected updates, audit configuration changes, and understand how device information evolves over time.
+
+![Device Change log](./img/DEVICE_MANAGEMENT/device_change_log.png)
+
+## What is recorded?
+
+Whenever a tracked device property changes, NetAlertX records:
+
+* **Time** the change occurred
+* **Source** that made the change
+* **Device** that was updated
+* **Field** that changed
+* **Previous value**
+* **New value**
+
+Related changes that occur at the same time are grouped together into a single event, making it easy to see all updates from one scan or user action.
+
+## Understanding the Source column
+
+The **Source** column identifies what caused the change.
+
+Depending on the field, the source may be:
+
+* A discovery plugin such as **ARPSCAN**, **NSLOOKUP**, **UNIFIAPI**, or another plugin that supplied the information.
+* **user:api** for changes made manually through the NetAlertX interface or API.
+* **system** for values calculated or maintained internally by NetAlertX.
+
+This helps distinguish between information discovered automatically and changes made by users.
+
+## Filtering the history
+
+The _Change log_ includes filters to help locate specific events.
+
+You can filter by:
+
+* **Source** to view changes made by a specific plugin or user.
+* **Changed Field** to display changes to a particular device property, such as IP address or hostname.
+
+You can also use the search box to quickly find matching devices by GUID, values, or fields.
+
+## Viewing grouped changes
+
+A single action often updates multiple properties on a device.
+
+Instead of showing each field as a separate record, the _Change log_ groups related updates together. For example, a network scan might update both a device's IP address and hostname at the same time. These changes appear together in one entry with each modified field listed underneath.
+
+## Retention
+
+The amount of history retained is controlled by the **Device History Days (`DEV_HIST_DAYS`)** setting.
+
+Older history entries are automatically removed once they exceed the configured retention period. this is maintained by the `DBCLNP` plugin.
+
+Setting this value to **0** disables _Change log_ recording entirely.
+
+## Choosing what to track
+
+Not every device property needs to be recorded.
+
+The **Tracked Device History Fields (`DEV_HIST_TRACKED`)** setting lets you choose exactly which device fields should be monitored. Tracking only the fields that are important for your environment can significantly reduce database growth while keeping the most useful audit information.
+
+## Performance considerations
+
+Recording history introduces additional database writes whenever tracked fields change. For most installations the overhead is minimal, but on larger networks it can generate a substantial amount of historical data.
+
+If you want to reduce storage usage or improve performance, consider:
+
+* Tracking only the device fields that matter to you.
+* Reducing the history retention period.
+* Disabling the _Change log_ entirely by setting **`DEV_HIST_DAYS`** to **0**.
+
+These settings allow you to balance historical visibility with database size and performance. For more tips on how to optimize system resource use check the [performance guide](./PERFORMANCE.md).

docs/DEVICE_PRESENCE.md

@@ -0,0 +1,45 @@
+## Presence View
+
+![Device presence](./img/DEVICE_MANAGEMENT/device_presence.png)
+
+The **Presence View** provides a visual timeline of when each device was detected on your network, making it easy to understand activity over time instead of relying only on the current status.
+
+Use this view to answer questions such as:
+
+* When was this device first discovered?
+* When was it last seen online?
+* How often does this device connect to the network?
+* Has the device been continuously online or only appearing intermittently?
+* When did the device disappear or return?
+
+The timeline makes it easy to identify recurring activity patterns, unexpected outages, or devices that only appear at certain times of the day or week.
+
+### Timeline Views
+
+The timeline can be displayed at different time scales depending on the level of detail you need:
+
+* **Week** – View recent activity with the highest level of detail.
+* **Month** – Review activity across the past month.
+* **Year** – Get a long-term overview of device presence and seasonal patterns.
+
+Switch between these views using the **Week**, **Month**, and **Year** buttons above the timeline.
+
+### Timeline Legend
+
+The timeline uses color coding to indicate device presence:
+
+* <div class="presenceOnlineNow presenceKeyBoxes" style="display:inline-block;vertical-align:middle;"></div> **Now online** – The device was detected during the most recent scan and is currently online.
+* <div class="presenceOnlinePast presenceKeyBoxes" style="display:inline-block;vertical-align:middle;"></div> **Past online** – The device was online previously but is currently offline.
+* <div class="presenceOnlinePastMiss presenceKeyBoxes" style="display:inline-block;vertical-align:middle;"></div> **Past online (mismatch)** – Historical activity was detected, but the beginning of the session could not be determined or conflicting data was encountered.
+
+### Typical Uses
+
+The Presence View is especially useful for:
+
+* Troubleshooting intermittent connectivity issues.
+* Identifying devices that frequently disconnect and reconnect.
+* Understanding occupancy or usage patterns for phones, laptops, IoT devices, and other network equipment.
+* Verifying when visitors' devices or temporary equipment were present on the network.
+* Reviewing historical presence without searching through individual events or logs.
+
+Unlike the Device Details page, which shows the current state of a device, the Presence View focuses on **when** devices were active, providing valuable historical context at a glance. To investigate exactly **what** changed during a device's lifetime, see the [Change Log](./DEVICE_CHANGE_LOG.md).

docs/WHERE_NETALERTX_FITS.md

@@ -122,13 +122,43 @@ NetAlertX supports [device relationships](./NETWORK_TREE.md) to better represent
 
 Many monitoring systems focus only on the current state.
 
-NetAlertX also records historical information so you can answer questions like:
+NetAlertX also records historical information, helping you understand how devices behave over time.
+
+You can answer questions like:
 
 * When was this device first discovered?
 * When was it last online?
-* Which ports have changed over time?
+* How does its network presence change over time?
+* Which configuration attributes have changed?
+
+Historical data provides operational context without requiring a separate logging platform.
+
+Two key views help explore this history:
+
+* **Presence View** – when a device was active on the network
+* **Change log** – what changed in the device’s configuration over time
+
+---
+
+## Change log
+
+![Device change log](./img/DEVICE_MANAGEMENT/device_change_log.png)
+
+The **Change log** records all tracked changes to device attributes, showing what changed and when it happened.
+
+Each entry includes:
+
+* Timestamp of the change
+* Previous and new values
+* Source of the change (plugin, workflow, or user action)
+
+You can filter, search, and sort changes to quickly investigate events such as IP changes, hostname updates, VLAN changes, or device classification updates.
+
+| View              | Answers             |
+| ----------------- | ------------------- |
+| **Presence View** | When was it active? |
+| **Change log**    | What changed?       |
 
-Historical information provides valuable operational context without requiring a separate logging platform.
 
 ---
 

docs/stylesheets/custom.css

@@ -14,6 +14,19 @@
  * limitations under the License.
  */
 
+ :root {
+  --color-white: #fff;
+  --color-aqua: #00c0ef;
+  --color-lightblue: #3c8dbc;
+  --color-blue: #0060df;
+  --color-green: #00a65a;
+  --color-yellow: #f39c12;
+  --color-red: #dd4b39;
+  --color-gray: #8c8c8c;
+  --color-darkgray: #3f3e3e;
+  --color-lightgray: #bec5cb;
+  --color-black: #000;
+}
 
 /* --- HERO SECTION --- */
 .hero-wrapper {
@@ -143,3 +156,25 @@ p.hero-description {
 .learn-more-btn:hover {
   opacity: 0.8;
 }
+
+/* key presence styles */
+.presenceOnlineNow{
+  background-color: var(--color-green);
+}
+
+.presenceOnlinePast{
+  background-color: var(--color-blue);
+}
+
+.presenceOnlinePastMiss{
+  background-color: var(--color-yellow);
+}
+
+.presenceKeyBoxes
+{
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  /* background: #fff; */
+  opacity: .75;
+}