Skip to content
This repository has been archived by the owner on Jan 23, 2025. It is now read-only.

MG-212 - Update Entity Count Cards to Fetch Data from the Back-End #253

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
+202 −42
Draft

MG-212 - Update Entity Count Cards to Fetch Data from the Back-End #253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
918cc6c
update entity count modal
Musilah Mar 19, 2024
fa223bd
add script
Musilah Mar 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions ui/web/static/js/charts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -607,6 +607,7 @@ class EntityCount extends Chart {
height: "220px",
};
this.Content = this.#generateContent();
this.Script = this.#generateScript();
}

#generateContent() {
Expand All @@ -626,6 +627,35 @@ class EntityCount extends Chart {
</div>
`;
}

#generateScript() {
return`
(function() {
var entityCount = document.getElementById("${this.ID}");

async function getData(entityCount, chartData) {
try{
const response = await fetch(
"${pathPrefix}/entities?item=" + chartData.entityType +
"&limit=100"
);
if (response.ok) {
const data = await response.json();
entityCount.querySelector(".value").textContent = data.total;
} else {
console.error("HTTP request failed with status:", response.status);
}
} catch (error) {
console.error("Failed to fetch card data: ", error);
}
}
getData(entityCount, ${this.chartData});
setInterval(function() {
getData(entityCount, ${this.chartData});
}, 20000);
})();
`
}
}

class GaugeChart extends Echart {
Expand Down
214 changes: 172 additions & 42 deletions ui/web/templates/charts/entitycountmodal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,53 +22,183 @@ <h5 class="modal-title" id="entityCountModalLabel">Entity Count Card</h5>
aria-label="Close"
></button>
</div>
<form id="create-entityCount-form">
<div class="modal-body">
<div class="mb-3">
<label for="channel-id" class="form-label">Channel ID</label>
<input
type="text"
pattern="{{ .UUIDPattern }}"
class="form-control mb-3"
name="channel"
id="channel-id"
placeholder="Enter the channel ID"
required
/>
<div class="invalid-feedback">Please enter a valid uuid</div>
<div class="modal-body">
<!-- Tab Navs -->
<ul class="nav nav-tabs mb-3" id="chartTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="data-tab"
data-bs-toggle="tab"
data-bs-target="#entityCountData"
type="button"
role="tab"
aria-controls="data"
aria-selected="true"
>
Data
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="appearance-tab"
data-bs-toggle="tab"
data-bs-target="#entityCountAppearance"
type="button"
role="tab"
aria-controls="appearance"
aria-selected="false"
>
Appearance
</button>
</li>
</ul>
<form id="create-entityCount-form">
<div class="tab-content" id="myTabContent">
<!-- Data Tab -->
<div
class="tab-pane fade show active"
id="entityCountData"
role="tabpanel"
aria-labelledby="data-tab"
>
<div class="mb-3">
<label for="entity-type" class="form-label">Select Entity</label>
<select
class="form-select mb-3"
name="entityType"
id="entity-type"
onchange="handleEntityTypeChange(this)"
>
<option value="things">Things</option>
<option value="groups">Groups</option>
<option value="channels">Channels</option>
<option value="thing-channels">Thing-Channels</option>
<option value="channel-things">Channel-Things</option>
<option value="group-things">Group-Things</option>
<option value="channel-groups">Channel-Groups</option>
</select>
</div>
<div id="thing-channels-input" style="display: none;">
<label for="thing-channels-id" class="form-label">Thing ID</label>
<input
type="text"
class="form-control mb-3"
name="thingChannelsId"
id="thing-channels-id"
placeholder="Enter the Thing ID"
/>
</div>
<div id="channel-things-input" style="display: none;">
<label for="channel-things-id" class="form-label">Channel ID</label>
<input
type="text"
class="form-control mb-3"
name="channelThingsId"
id="channel-things-id"
placeholder="Enter the Channel ID"
/>
</div>
<div id="group-things-input" style="display: none;">
<label for="group-things-id" class="form-label">Group ID</label>
<input
type="text"
class="form-control mb-3"
name="groupThingsId"
id="group-things-id"
placeholder="Enter the Group ID"
/>
</div>
<div id="channel-groups-input" style="display: none;">
<label for="channel-groups-id" class="form-label">Channel ID</label>
<input
type="text"
class="form-control mb-3"
name="channelGroupsId"
id="channel-groups-id"
placeholder="Enter the Channel ID"
/>
</div>
</div>
<!-- Appearance Tab -->
<div
class="tab-pane fade"
id="entityCountAppearance"
role="tabpanel"
aria-labelledby="appearance-tab"
>
<div class="mb-3">
<label for="channel-name" class="form-label">Channel Name</label>
<input
type="text"
class="form-control mb-3"
name="channelName"
id="channel-name"
placeholder="Enter the channel name"
/>
</div>
<div class="mb-3">
<label for="domain-name" class="form-label">Domain Name</label>
<input
type="text"
class="form-control mb-3"
name="domainName"
id="domain-name"
placeholder="Enter the domain name"
/>
</div>
</div>
</div>
<div class="mb-3">
<label for="domain-id" class="form-label">Domain ID</label>
<input
type="text"
pattern="{{ .UUIDPattern }}"
class="form-control mb-3"
name="domain"
id="domain-id"
placeholder="Enter the domain ID"
required
/>
<div class="invalid-feedback">Please enter a valid uuid</div>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
id="close-entityCount-button"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button" class="btn body-button" id="create-entityCount-button">
Create Chart
</button>
</div>
</form>
</form>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
id="close-entityCount-button"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button" class="btn body-button" id="create-entityCount-button">
Create Chart
</button>
</div>
</div>
</div>
</div>
<script>
// add entity-entities blocks
function handleEntityTypeChange(selectElement) {
var thingChannelsInput = document.getElementById("thing-channels-input");
var channelThingsInput = document.getElementById("channel-things-input");
var groupThingsInput = document.getElementById("group-things-input");
var channelGroupsInput = document.getElementById("channel-groups-input");

// Hide all inputs by default
thingChannelsInput.style.display = "none";
channelThingsInput.style.display = "none";
groupThingsInput.style.display = "none";
channelGroupsInput.style.display = "none";

// Show the appropriate input based on the selected option
switch (selectElement.value) {
case "thing-channels":
thingChannelsInput.style.display = "block";
break;
case "channel-things":
channelThingsInput.style.display = "block";
break;
case "group-things":
groupThingsInput.style.display = "block";
break;
case "channel-groups":
channelGroupsInput.style.display = "block";
break;
}
}

// entity count form
document.getElementById("create-entityCount-button").addEventListener("click", function () {
let form = document.getElementById("create-entityCount-form");
Expand Down
Loading