tsiclient
Version:
--- [//]: <> (This content is similar to https://github.com/MicrosoftDocs/azure-docs/edit/main/includes/tsi-retirement.md)
745 lines (743 loc) • 95.2 kB
JavaScript
import { a as __extends, b as __awaiter, c as __generator, d as __spreadArray, _ as __assign } from './tslib.es6-f952ba6f.js';
import { I as InstancesSort, H as HierarchiesExpand, e as HierarchiesSort, U as Utils, K as KeyCodes } from './Utils-38a0872e.js';
import { create, select, selectAll, pointer } from 'd3';
import { S as ServerClient } from './ServerClient-8d9a15d8.js';
import { C as Component } from './Component-5173b5ea.js';
import { M as ModelAutocomplete } from './ModelAutocomplete-31909926.js';
var HierarchyNavigation = /** @class */ (function (_super) {
__extends(HierarchyNavigation, _super);
function HierarchyNavigation(renderTarget) {
var _this = _super.call(this, renderTarget) || this;
_this.usedInstanceSearchContinuationTokens = {};
_this.envHierarchies = {};
_this.envTypes = {};
_this.selectedHierarchyName = HierarchySelectionValues.All;
_this.viewType = ViewType.Hierarchy;
_this.mode = State.Navigate;
_this.searchString = "";
_this.path = [];
_this.originalPathBeforeReverseLookup = [];
_this.renderHierarchySelection = function () {
var hierarchyList = __spreadArray(__spreadArray([HierarchySelectionValues.All], Object.keys(_this.envHierarchies)), [HierarchySelectionValues.Unparented]);
_this.hierarchyListElem.text('');
var self = _this;
hierarchyList.forEach(function (h) {
var title = h === HierarchySelectionValues.All ? _this.getString("All hierarchies") :
h === HierarchySelectionValues.Unparented ? _this.getString("Unassigned Time Series Instances") : h;
_this.hierarchyListElem.append('li').classed('selected', h === _this.selectedHierarchyName)
.attr("hName", h)
.attr('tabindex', 0)
.attr('role', 'option')
.attr('aria-selected', h === _this.selectedHierarchyName)
.attr('title', title)
.text(title).on('click keydown', function (event) {
if (event && event.type && event.type === 'keydown') {
event.preventDefault();
var key = event.which || event.keyCode;
if (key === KeyCodes.Down) {
if (this.nextElementSibling)
this.nextElementSibling.focus();
else {
self.hierarchyListElem.selectAll("li").nodes()[0].focus();
}
}
else if (key === KeyCodes.Up) {
if (this.previousElementSibling)
this.previousElementSibling.focus();
else {
self.hierarchyListElem.selectAll("li").nodes()[self.hierarchyListElem.selectAll("li").nodes().length - 1].focus();
}
}
else if (key === KeyCodes.Enter) {
self.selectHierarchy(h);
self.searchGloballyElem.node().style.display = 'none';
self.hierarchySelectorElem.node().focus();
}
else if (key === KeyCodes.Esc) {
self.isHierarchySelectionActive = false;
self.hierarchyListWrapperElem.style('display', 'none');
self.hierarchySelectorElem.node().focus();
}
return;
}
self.selectHierarchy(h);
self.hierarchySelectorElem.node().focus();
if (h === HierarchySelectionValues.All) {
self.searchGloballyElem.node().style.display = 'none';
}
});
});
_this.hierarchyListWrapperElem.style('display', 'inline-flex');
_this.hierarchyListElem.select("li.selected").node().focus();
};
//to switch between list view and hierarchy view when search string exists, i.e. in Search mode
_this.switchToSearchView = function (view, applySearch) {
if (applySearch === void 0) { applySearch = true; }
return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
this.closeContextMenu();
this.viewType = view;
this.viewTypesElem.selectAll('.tsi-view-type').classed('selected', false).attr('aria-selected', false);
if (!(this.viewType === ViewType.Hierarchy)) return [3 /*break*/, 3];
select(this.viewTypesElem.selectAll('.tsi-view-type').nodes()[0]).classed('selected', true).attr('aria-selected', true);
if (this.searchString) {
this.setModeAndRequestParamsForFilter();
}
else {
this.setModeAndRequestParamsForNavigate();
}
if (!(selectAll('.tsi-hierarchy ul').size() === 0 && applySearch)) return [3 /*break*/, 2];
this.hierarchyElem.text('');
return [4 /*yield*/, this.pathSearchAndRenderResult({ search: { payload: this.requestPayload() }, render: { target: this.hierarchyElem } })];
case 1:
_a.sent();
_a.label = 2;
case 2:
this.hierarchyElem.node().style.display = 'block';
this.instanceListWrapperElem.node().style.display = 'none';
return [3 /*break*/, 6];
case 3:
select(this.viewTypesElem.selectAll('.tsi-view-type').nodes()[1]).classed('selected', true).attr('aria-selected', true);
this.setModeAndRequestParamsForSearch();
if (this.selectedHierarchyName === HierarchySelectionValues.Unparented) {
this.chartOptions.hierarchyOptions.isInstancesRecursive = false;
}
if (!(selectAll('.tsi-modelResultWrapper').size() === 0 && applySearch)) return [3 /*break*/, 5];
this.instanceListElem.text('');
this.lastInstanceContinuationToken = null;
this.usedInstanceSearchContinuationTokens = {};
return [4 /*yield*/, this.pathSearchAndRenderResult({ search: { payload: this.requestPayload() }, render: { target: this.instanceListElem } })];
case 4:
_a.sent();
_a.label = 5;
case 5:
this.hierarchyElem.node().style.display = 'none';
this.instanceListWrapperElem.node().style.display = 'block';
_a.label = 6;
case 6: return [2 /*return*/];
}
});
});
};
_this.showNoResultsForSearch = function () {
_this.viewTypesElem.node().style.display = 'none';
if (_this.mode === State.Search && ((_this.selectedHierarchyName !== HierarchySelectionValues.All) || _this.filterPathElem.classed('visible'))) {
_this.searchGloballyElem.style('display', 'inline');
_this.noResultsElem.select(".tsi-clear").style('display', 'inline-block');
}
else {
_this.searchGloballyElem.style('display', 'none');
_this.noResultsElem.select(".tsi-clear").style('display', 'none');
}
_this.noResultsElem.classed('border-top', _this.filterPathElem.classed('visible'));
_this.noResultsElem.select(".tsi-not-found-message").node().childNodes[0].textContent = _this.mode === State.Search ? _this.getString("No search result") : _this.getString("No instances");
_this.noResultsElem.style('display', 'flex');
};
// do exact search with tsid to retrieve all possible paths until that instance to traverse for expansion
_this.doExactSearchWithPossiblePaths = function (tsid, hNames) {
_this.setModeAndRequestParamsForFilter();
var escapedTsidString = Utils.escapedTsidForExactSearch(tsid === null || tsid === void 0 ? void 0 : tsid.join(" "));
_this.searchString = "\"" + escapedTsidString + "\""; //TODO: null vs string null check for exact search and escape for character : fix from backend will come here!!
return Promise.all(hNames.map(function (hName) {
var payload = hName ? _this.requestPayload([hName]) : _this.requestPayload(null);
return _this.getToken().then(function (token) {
return _this.server.getTimeseriesInstancesPathSearch(token, _this.environmentFqdn, payload, null, null)
.catch(function (err) { throw err; });
})
.catch(function (err) { throw err; });
})).catch(function (err) { return _this.chartOptions.onError("Error in hierarchy navigation", "Failed to complete search", err instanceof XMLHttpRequest ? err : null); });
};
// clear dom and reset some variables for fresh navigation experience
_this.prepareComponentForLookup = function (timeSeriesID) {
_this.hierarchyElem.style('display', 'none');
_this.noResultsElem.style('display', 'none');
_this.notFoundElem.style('display', 'none');
_this.instanceLookupLoadingElem.select('.tsi-lookup-instance').text(_this.getString("Looking for") + " " + timeSeriesID.join(" "));
_this.instanceLookupLoadingElem.style('display', 'flex');
_this.viewTypesElem.style("display", "none");
_this.searchWrapperElem.select("input").node().value = "";
_this.searchGloballyElem.style("display", "none");
_this.originalPathBeforeReverseLookup = _this.path;
_this.path = _this.selectedHierarchyName !== HierarchySelectionValues.All && _this.selectedHierarchyName !== HierarchySelectionValues.Unparented ? [_this.selectedHierarchyName] : [];
};
// pull instance to get its name to search in the tree if exist
_this.getInstance = function (timeSeriesID) {
return _this.getToken()
.then(function (token) {
return _this.server.getTimeseriesInstances(token, _this.environmentFqdn, 1, [timeSeriesID]).catch(function (err) { return _this.chartOptions.onError("Error in hierarchy navigation", "Failed to get instance details", err instanceof XMLHttpRequest ? err : null); });
})
.catch(function (err) { return _this.chartOptions.onError("Error in hierarchy navigation", "Failed to get token", err instanceof XMLHttpRequest ? err : null); });
};
// simulate expand operation for each hierarchy node in a full path until the instance and then locate the instance
_this.simulateExpand = function (path, hierarchyNamesFromParam, instance) { return __awaiter(_this, void 0, void 0, function () {
var instanceIdentifier, isHierarchySelected, lastHierarchyNodeParent, ulToLook, nameSpan, _loop_1, this_1, idx, instanceNode, li, newListContentElem, instanceCount, hitElem;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
instanceIdentifier = this.instanceNodeIdentifier(instance);
isHierarchySelected = this.selectedHierarchyName !== HierarchySelectionValues.All && this.selectedHierarchyName !== HierarchySelectionValues.Unparented;
lastHierarchyNodeParent = document.getElementsByClassName("tsi-hierarchy")[0];
_loop_1 = function (idx) {
var p, hierarchyNodeToExpand, pathNodeName, hierarchyNode_1, li, newListContentElem, hitCount, onClickFunc;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
p = path[idx];
if (isHierarchySelected && idx === 0) {
return [2 /*return*/, "continue"];
}
hierarchyNodeToExpand = void 0;
pathNodeName = this_1.hierarchyNodeIdentifier(p);
ulToLook = lastHierarchyNodeParent.getElementsByTagName("ul")[0];
nameSpan = Array.from(ulToLook.getElementsByClassName("tsi-name")).find(function (e) { return e.innerText === pathNodeName; });
if (!nameSpan) { // if the hierarchy node we are looking is not there, add it manually to prevent possible show more calls and dom insertions
hierarchyNode_1 = new HierarchyNode(pathNodeName, path.slice(0, idx), isHierarchySelected || hierarchyNamesFromParam ? idx - 1 : idx, '');
hierarchyNode_1.expand = function () {
return _this.pathSearchAndRenderResult({ search: { payload: _this.requestPayload(hierarchyNode_1.path), bubbleUpReject: true }, render: { target: hierarchyNode_1.node } })
.then(function (r) { return __awaiter(_this, void 0, void 0, function () {
var payload;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
payload = this.requestPayload(hierarchyNode_1.path);
payload["instances"].recursive = true;
return [4 /*yield*/, this.pathSearch(payload, null, null) // make a second call to retrieve the cumulative instance count for manually added hierarchy node
.then(function (r) {
hierarchyNode_1.node.select(".tsi-instanceCount").text(r.instances.hitCount);
})
.catch(function (err) { })];
case 1:
_a.sent();
hierarchyNode_1.isExpanded = true;
hierarchyNode_1.node.classed('tsi-expanded', true);
return [2 /*return*/];
}
});
}); })
.catch(function (err) { });
};
li = create("li").attr("role", "none");
ulToLook.insertBefore(li.node(), ulToLook.firstChild); // put it to the top of the list
newListContentElem = this_1.createHierarchyItemElem(hierarchyNode_1, this_1.hierarchyNodeIdentifier(hierarchyNode_1.name));
li.node().appendChild(newListContentElem.node());
hierarchyNode_1.node = li;
nameSpan = newListContentElem.select('.tsi-name').node();
hitCount = parseInt(lastHierarchyNodeParent.getElementsByClassName("tsi-hitCount")[0].innerText);
if (ulToLook.getElementsByClassName("tsi-hierarchyItem").length === hitCount + 1) {
ulToLook.removeChild(ulToLook.lastChild); // remove show more to prevent duplication
}
}
hierarchyNodeToExpand = nameSpan.parentNode;
lastHierarchyNodeParent = hierarchyNodeToExpand.parentNode;
onClickFunc = select(hierarchyNodeToExpand).on("click");
return [4 /*yield*/, onClickFunc.apply(hierarchyNodeToExpand)];
case 1:
_b.sent();
return [2 /*return*/];
}
});
};
this_1 = this;
idx = 0;
_a.label = 1;
case 1:
if (!(idx < path.length)) return [3 /*break*/, 4];
return [5 /*yield**/, _loop_1(idx)];
case 2:
_a.sent();
_a.label = 3;
case 3:
idx++;
return [3 /*break*/, 1];
case 4:
// locate the instance
ulToLook = lastHierarchyNodeParent.getElementsByTagName("ul")[0];
nameSpan = Array.from(ulToLook.getElementsByClassName("tsi-name")).find(function (e) { return e.innerText === _this.instanceNodeString(instance); });
if (!nameSpan) { //if the instance node we are looking is not there after expansion, add it manually to prevent possible show more calls and dom insertions
instanceNode = new InstanceNode(instance.timeSeriesId, instance.name, this.envTypes[instance.typeId], instance.hierarchyIds, instance.highlights, isHierarchySelected || hierarchyNamesFromParam ? path.length - 1 : path.length);
li = create("li").classed('tsi-leaf', true).attr("role", "none");
newListContentElem = this.createHierarchyItemElem(instanceNode, instanceIdentifier);
li.node().appendChild(newListContentElem.node());
ulToLook.insertBefore(li.node(), ulToLook.getElementsByClassName('tsi-leaf')[0]); // put it to the top of the instance list after hierarchy nodes
instanceNode.node = li;
instanceCount = parseInt(lastHierarchyNodeParent.getElementsByClassName("tsi-instanceCount")[0].innerText);
if (ulToLook.getElementsByClassName("tsi-hierarchyItem").length === instanceCount + 1) {
ulToLook.removeChild(ulToLook.lastChild); // remove show more to prevent duplication
}
nameSpan = newListContentElem.select('.tsi-name').node();
}
else {
ulToLook.insertBefore(nameSpan.parentNode.parentNode, ulToLook.getElementsByClassName('tsi-leaf')[0]); // move it to the top of the instance list after hierarchy nodes
}
hitElem = document.createElement('hit');
Utils.appendFormattedElementsFromString(select(hitElem), nameSpan.innerText);
nameSpan.innerText = '';
nameSpan.appendChild(hitElem);
return [2 /*return*/];
}
});
}); };
_this.prepareComponentForAfterLookup = function () {
_this.searchString = "";
_this.setModeAndRequestParamsForNavigate();
_this.viewType = ViewType.Hierarchy;
};
_this.removeCurrentHitsOfLastLookup = function () {
var hitNodes = _this.hierarchyElem.selectAll('hit').nodes();
if (hitNodes) {
hitNodes.forEach(function (hitNode) {
var spanElem = hitNode.parentNode;
spanElem.innerText = '';
Utils.appendFormattedElementsFromString(select(spanElem), _this.instanceNodeStringToDisplay(_this.lastLookedupInstance));
});
}
};
_this.showNotFoundForReverseLookup = function () {
_this.prepareComponentForAfterLookup();
_this.instanceLookupLoadingElem.style('display', 'none');
if (_this.selectedHierarchyName !== HierarchySelectionValues.All || _this.filterPathElem.classed('visible')) {
_this.lookupGloballyElem.style('display', 'inline');
}
else {
_this.lookupGloballyElem.style('display', 'none');
if (_this.hierarchyElem.text() === '') {
_this.clearAndGetResults();
}
}
_this.notFoundElem.classed('border-top', _this.filterPathElem.classed('visible'));
_this.notFoundElem.style('display', 'flex');
_this.hierarchyElem.style('display', 'block');
_this.path = _this.originalPathBeforeReverseLookup;
};
// renders instances data in flat list view, only in 'Search' mode
_this.renderInstances = function (data, target) {
var self = _this;
if (Object.keys(data).length === 0) {
_this.showNoResultsForSearch();
return;
}
else {
_this.noResultsElem.style('display', 'none');
_this.viewTypesElem.node().style.display = 'inline-flex';
}
target.select('.tsi-show-more.tsi-show-more-instance').remove();
Object.keys(data).forEach(function (i) {
var div;
if (data[i].name === _this.getString("Show More Instances")) {
div = target.append('div').classed('tsi-show-more tsi-show-more-instance', true);
div.append('span').classed('tsi-markedName', true).attr('tabindex', 0).text(i).on('click keydown', function (event) {
if (Utils.isKeyDownAndNotEnter(event)) {
return;
}
data[i].onClick();
});
}
else {
div = target.append('div').classed('tsi-modelResultWrapper', true).attr('tabindex', 0);
var instanceElem = _this.createInstanceElem(data[i]);
div.node().appendChild(instanceElem.node());
div.on('click keydown', function (event) {
var clickInstance = function () {
event.stopPropagation();
self.closeContextMenu();
var target = self.instanceListElem.select(function () { return this.parentNode.parentNode; });
var mouseWrapper = pointer(event, target.node());
var mouseElt = pointer(event);
self.prepareForContextMenu(data[i], target, mouseWrapper[1], mouseElt[1]);
self.chartOptions.onInstanceClick(data[i]);
};
if (event && event.type && event.type === 'keydown') {
var key = event.which || event.keyCode;
if (key === 40) { // pressed down
if (this.nextElementSibling)
this.nextElementSibling.focus();
}
else if (key === 38) { //pressed up
if (this.previousElementSibling)
this.previousElementSibling.focus();
}
else if (key === 13) {
clickInstance();
}
return;
}
clickInstance();
});
}
data[i].node = div;
});
};
_this.pathSearchAndRenderResult = function (_a) {
var _b = _a.search, payload = _b.payload, _c = _b.instancesContinuationToken, instancesContinuationToken = _c === void 0 ? null : _c, _d = _b.hierarchiesContinuationToken, hierarchiesContinuationToken = _d === void 0 ? null : _d, _e = _b.bubbleUpReject, bubbleUpReject = _e === void 0 ? false : _e, _f = _a.render, target = _f.target, _g = _f.locInTarget, locInTarget = _g === void 0 ? null : _g, _h = _f.skipLevels, skipLevels = _h === void 0 ? null : _h;
return _this.pathSearch(payload, instancesContinuationToken, hierarchiesContinuationToken).then(function (r) {
try {
if (r.error) {
throw r.error;
}
else {
_this.renderSearchResult(r, payload, target, locInTarget, skipLevels);
}
}
catch (err) {
throw err;
}
}).catch(function (err) {
_this.chartOptions.onError("Error in hierarchy navigation", "Failed to complete search", err instanceof XMLHttpRequest ? err : null);
if (bubbleUpReject) {
throw err;
}
});
};
_this.pathSearch = function (payload, instancesContinuationToken, hierarchiesContinuationToken) {
if (instancesContinuationToken === void 0) { instancesContinuationToken = null; }
if (hierarchiesContinuationToken === void 0) { hierarchiesContinuationToken = null; }
return _this.getToken().then(function (token) {
return _this.server.getTimeseriesInstancesPathSearch(token, _this.environmentFqdn, payload, instancesContinuationToken, hierarchiesContinuationToken);
}).catch(function (err) { throw err; });
};
_this.renderSearchResult = function (r, payload, target, locInTarget, skipLevels) {
var _a, _b, _c, _d, _e;
if (locInTarget === void 0) { locInTarget = null; }
if (skipLevels === void 0) { skipLevels = null; }
var self = _this;
var hierarchyData = {};
var instancesData = {};
if ((_b = (_a = r.hierarchyNodes) === null || _a === void 0 ? void 0 : _a.hits) === null || _b === void 0 ? void 0 : _b.length) {
var hitCountElem = target.select(".tsi-hitCount");
if (hitCountElem.size() == 0) {
hitCountElem = target.append('span').classed('tsi-hitCount', true).text('');
}
hitCountElem.text(r.hierarchyNodes.hitCount);
hierarchyData = self.fillDataRecursively(r.hierarchyNodes, _this.getToken, _this.environmentFqdn, payload, payload);
}
if ((_d = (_c = r.instances) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 : _d.length) {
r.instances.hits.forEach(function (i) {
instancesData[_this.instanceNodeIdentifier(i)] = new InstanceNode(i.timeSeriesId, i.name, self.envTypes[i.typeId], i.hierarchyIds, i.highlights, payload.path.length - self.path.length);
});
}
if (((_e = r.instances) === null || _e === void 0 ? void 0 : _e.continuationToken) && r.instances.continuationToken !== 'END') {
var showMoreInstances_1 = new InstanceNode(null, _this.getString("Show More Instances"), null, null, null, payload.path.length - self.path.length);
showMoreInstances_1.onClick = function () { return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_a) {
this.pathSearchAndRenderResult({
search: { payload: payload, hierarchiesContinuationToken: null, instancesContinuationToken: r.instances['continuationToken'] },
render: { target: showMoreInstances_1.node.select(function () { return this.parentNode; }), locInTarget: '.tsi-show-more.tsi-show-more-instance' }
});
return [2 /*return*/];
});
}); };
instancesData[showMoreInstances_1.name] = showMoreInstances_1;
if (!self.usedInstanceSearchContinuationTokens[r.instances.continuationToken]) {
self.lastInstanceContinuationToken = r.instances.continuationToken;
}
}
else {
self.lastInstanceContinuationToken = "END";
}
if (self.mode === State.Navigate) {
if (self.selectedHierarchyName !== HierarchySelectionValues.Unparented) {
self.renderTree(__assign(__assign({}, hierarchyData), instancesData), target, locInTarget);
}
else {
self.renderTree(instancesData, target, locInTarget);
}
}
else if (self.mode === State.Filter) {
self.renderTree(__assign(__assign({}, hierarchyData), instancesData), target, locInTarget, skipLevels);
}
else {
self.renderInstances(instancesData, target);
}
};
_this.closeContextMenu = function () {
if (_this.clickedInstance && _this.contextMenu) {
_this.contextMenu.remove();
selectAll('li.tsi-selected').classed('tsi-selected', false);
}
selectAll('.tsi-modelResultWrapper').classed('tsi-selected', false);
_this.clickedInstance = null;
};
_this.prepareForContextMenu = function (instanceObj, target, wrapperMousePos, eltMousePos) {
var contextMenuProps = {};
contextMenuProps['target'] = target;
contextMenuProps['wrapperMousePos'] = wrapperMousePos;
contextMenuProps['eltMousePos'] = eltMousePos;
_this.contextMenuProps = contextMenuProps;
_this.clickedInstance = instanceObj;
instanceObj.node.classed('tsi-selected', true);
};
_this.drawContextMenu = function (contextMenuItems, contextMenuOptions) {
var itemList = [];
var contextMenuList;
var searchString = "";
_this.contextMenu = _this.contextMenuProps['target'].append('div').classed('tsi-hierarchyNavigationContextMenu', true).attr('style', function () { return "top: " + (_this.contextMenuProps['wrapperMousePos'] - _this.contextMenuProps['eltMousePos']) + "px"; });
var renderList = function (contextMenuItems) {
if (_this.contextMenu.select("ul").empty()) {
contextMenuList = _this.contextMenu.append('ul');
}
else {
_this.contextMenu.select("ul").text('');
}
contextMenuItems.forEach(function (item) {
var option = item.name;
var li = contextMenuList.append('li');
if (!contextMenuOptions.isSelectionEnabled) {
li.attr('tabindex', 0)
.attr('arialabel', option)
.attr('title', option)
.on('click keydown', function (event) {
if (Utils.isKeyDownAndNotEnter(event)) {
return;
}
item.action();
_this.closeContextMenu();
});
var itemWrapperElem = li.append('div').classed('tsi-selectionItemWrapper', true);
Utils.appendFormattedElementsFromString(itemWrapperElem, Utils.mark(searchString, option), { splitByTag: 'mark' });
}
else {
li.attr('tabindex', 0)
.on('click keydown', function (event) {
if (Utils.isKeyDownAndNotEnter(event)) {
return;
}
var elem = select(event.currentTarget).select(".tsi-hierarchyCheckbox");
if (elem.classed("tsi-notSelected")) {
itemList.push(item);
elem.classed("tsi-notSelected", false);
elem.attr("aria-checked", true);
}
else {
var index = itemList.map(function (elem) { return elem.name; }).indexOf(item.name);
itemList.splice(index, 1);
elem.classed("tsi-notSelected", true);
elem.attr("aria-checked", false);
}
itemList.length === 0 ?
_this.contextMenu.select("button").classed("disabled", true)
: _this.contextMenu.select("button").classed("disabled", false);
});
var itemWrapperElem = li.append('div').classed('tsi-selectionItemWrapper', true);
itemWrapperElem.append('span').classed('tsi-hierarchyCheckbox tsi-notSelected', true)
.attr("role", "checkbox").attr("aria-checked", false);
var itemElem = itemWrapperElem.append('span').classed('tsi-selectionItem', true).attr('title', option);
Utils.appendFormattedElementsFromString(itemElem, Utils.mark(searchString, option), { splitByTag: 'mark' });
itemWrapperElem.append('span').classed('tsi-selectionItemKind', true).classed(item.kind, true).attr('title', item.kind.charAt(0).toUpperCase() + item.kind.slice(1));
}
});
};
// draw filter box if enabled
if (contextMenuOptions.isFilterEnabled) {
var searchBox = _this.contextMenu.append('div').classed('tsi-search', true);
searchBox.append('i').classed('tsi-search-icon', true);
searchBox.append('input').classed('tsi-searchInput', true).attr('placeholder', _this.getString('Search'))
.on('input', function (event) {
var regex = new RegExp(event.currentTarget.value, 'gi');
searchString = event.currentTarget.value;
renderList(contextMenuItems.filter(function (varObj) { return varObj.name.match(regex); }));
itemList = [];
_this.contextMenu.select("button").classed("disabled", true);
});
}
//draw variable list with checkbox if selection enabled
renderList(contextMenuItems);
//add button
if (contextMenuOptions.isSelectionEnabled) {
_this.contextMenu.append('button').classed("tsi-primaryButton", true).classed("disabled", true).text(_this.getString("Add")).on('click', function () {
itemList.forEach(function (item) { return item.action(); });
_this.closeContextMenu();
});
}
// move context menu above if necessary for tag selection visibility around the bottom of the page
var leftSpaceAtBottom = _this.contextMenuProps['target'].node().getBoundingClientRect().height - parseFloat(_this.contextMenu.node().style.top);
var overflowAtBottom = _this.contextMenu.node().getBoundingClientRect().height - leftSpaceAtBottom;
if (overflowAtBottom > 0)
_this.contextMenu.style('top', (parseFloat(_this.contextMenu.node().style.top) - overflowAtBottom) + 'px');
var contextMenuFirstElt = select('.tsi-hierarchyNavigationContextMenu li').node();
if (contextMenuFirstElt) {
contextMenuFirstElt.focus();
}
};
_this.hasHits = function (str) {
return str && (str.indexOf("<hit>") !== -1);
};
_this.hierarchyNodeIdentifier = function (hName) {
return hName ? hName : '(' + _this.getString("Empty") + ')';
};
_this.instanceNodeIdentifier = function (instance) {
return "instance-" + Utils.getInstanceKey(instance);
};
_this.instanceNodeStringToDisplay = function (instance) {
var _a;
return ((_a = instance.highlights) === null || _a === void 0 ? void 0 : _a.name) || Utils.getHighlightedTimeSeriesIdToDisplay(instance)
|| instance.name || Utils.getTimeSeriesIdToDisplay(instance, _this.getString('Empty'));
};
_this.instanceNodeString = function (instance) {
return instance.name || Utils.getTimeSeriesIdString(instance);
};
_this.clearAndHideFilterPath = function () {
select('.tsi-path-list').text('');
select('.tsi-filter-clear').style('display', 'none');
_this.filterPathElem.classed('visible', false);
};
// when an hierarchy is selected from the flyout selection menu
_this.selectHierarchy = function (pathName, applySearch) {
if (applySearch === void 0) { applySearch = true; }
_this.path = pathName === HierarchySelectionValues.All || pathName === HierarchySelectionValues.Unparented ? [] : [pathName];
_this.selectedHierarchyName = pathName;
var selectedhierarchyId = pathName === HierarchySelectionValues.All || pathName === HierarchySelectionValues.Unparented ? pathName : _this.envHierarchies[_this.selectedHierarchyName].id;
_this.chartOptions.onSelect(selectedhierarchyId);
var pathText = pathName === HierarchySelectionValues.All ? _this.getString("All hierarchies") : pathName === HierarchySelectionValues.Unparented ? _this.getString("Unassigned Time Series Instances") : pathName;
select('.tsi-hierarchy-name').text(pathText).attr('title', pathText);
_this.clearAndGetResults(applySearch);
_this.clearAndHideFilterPath();
_this.isHierarchySelectionActive = false;
_this.hierarchyListWrapperElem.style('display', 'none');
_this.notFoundElem.style('display', 'none');
};
_this.resettingVariablesForEnvChange = function () {
_this.path = [];
_this.selectedHierarchyName = HierarchySelectionValues.All;
_this.searchString = '';
_this.lastInstanceContinuationToken = null;
_this.usedInstanceSearchContinuationTokens = {};
_this.envHierarchies = {};
_this.envTypes = {};
_this.setModeAndRequestParamsForNavigate();
_this.viewType = ViewType.Hierarchy;
_this.clickedInstance = null;
_this.isHierarchySelectionActive = false;
};
_this.server = new ServerClient();
function isTarget(event) {
return event.target === this || this.contains(event.target);
}
select("html").on("click. keydown." + Utils.guid(), function (event) {
if (_this.clickedInstance && _this.contextMenu) {
if (event.type && event.type === 'keydown') {
if (!_this.contextMenu.filter(isTarget).empty()) {
var key = event.which || event.keyCode;
if (key === KeyCodes.Esc) { // close context menu when pressed esc on it
_this.closeContextMenu();
}
return;
}
}
else {
if (_this.contextMenu.filter(isTarget).empty()) { // close context menu when clicked any other target outside of it
_this.closeContextMenu();
}
}
}
if (_this.isHierarchySelectionActive) {
if (event && event.type && event.type === 'keydown') {
if (!select(_this.hierarchyListWrapperElem.node().parentNode).filter(isTarget).empty()) {
var key = event.which || event.keyCode;
if (key === KeyCodes.Esc) { // close hierarchy selection dropdown when pressed esc on it
_this.isHierarchySelectionActive = false;
_this.hierarchyListWrapperElem.style('display', 'none');
}
return;
}
}
else {
if (select(_this.hierarchyListWrapperElem.node().parentNode).filter(isTarget).empty()) { // close hierarchy selection dropdown when clicked any other target outside of it
_this.isHierarchySelectionActive = false;
_this.hierarchyListWrapperElem.style('display', 'none');
}
}
}
});
return _this;
}
HierarchyNavigation.prototype.HierarchyNavigation = function () {
};
HierarchyNavigation.prototype.render = function (environmentFqdn, getToken, hierarchyNavOptions) {
if (hierarchyNavOptions === void 0) { hierarchyNavOptions = {}; }
return __awaiter(this, void 0, void 0, function () {
var self, targetElement, hierarchyNavWrapper, selectedHierarchyId, hierarchy, autocompleteOnInput, handleKeydown;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
self = this;
this.chartOptions.setOptions(hierarchyNavOptions);
this.getToken = getToken;
this.environmentFqdn = environmentFqdn;
this.resettingVariablesForEnvChange();
targetElement = select(this.renderTarget);
targetElement.text('');
hierarchyNavWrapper = targetElement.append('div').attr('class', 'tsi-hierarchy-nav-wrapper');
_super.prototype.themify.call(this, hierarchyNavWrapper, this.chartOptions.theme);
//get the most recent types to show in the context menu on instance click
return [4 /*yield*/, getToken().then(function (token) {
return _this.server.getTimeseriesTypes(token, environmentFqdn).then(function (r) {
try {
if (r.error) {
throw r.error;
}
else {
r.types.forEach(function (t) {
_this.envTypes[t.id] = t;
});
}
}
catch (err) {
throw err;
}
}).catch(function (err) { return _this.chartOptions.onError("Error in hierarchy navigation", "Failed to load types for navigation", err instanceof XMLHttpRequest ? err : null); });
}).catch(function (err) { return _this.chartOptions.onError("Error in hierarchy navigation", "Failed to get token", err instanceof XMLHttpRequest ? err : null); })];
case 1:
//get the most recent types to show in the context menu on instance click
_a.sent();
//get the most recent hierarchies for reverse lookup
return [4 /*yield*/, getToken().then(function (token) {
return _this.server.getTimeseriesHierarchies(token, environmentFqdn).then(function (r) {
try {
if (r.error) {
throw r.error;
}
else {
r.hierarchies.forEach(function (h) {
_this.envHierarchies[h.name] = h;
});
}
}
catch (err) {
throw err;
}
}).catch(function (err) { return _this.chartOptions.onError("Error in hierarchy navigation", "Failed to load hierarchies for navigation", err instanceof XMLHttpRequest ? err : null); });
}).catch(function (err) { return _this.chartOptions.onError("Error in hierarchy navigation", "Failed to get token", err instanceof XMLHttpRequest ? err : null); })];
case 2:
//get the most recent hierarchies for reverse lookup
_a.sent();
selectedHierarchyId = hierarchyNavOptions.selectedHierarchyId;
if (selectedHierarchyId) {
if (selectedHierarchyId === HierarchySelectionValues.All || selectedHierarchyId === HierarchySelectionValues.Unparented) {
this.selectedHierarchyName = selectedHierarchyId; //Using enum values of All and Unparented as both name and id
this.path = [];
}
else {
hierarchy = Object.values(this.envHierarchies).find(function (h) { return h["id"] === selectedHierarchyId; });
if (hierarchy) {
this.selectedHierarchyName = hierarchy["name"];
this.path = [this.selectedHierarchyName];
}
}
}
getToken().then(function (token) {
self.server.getTimeseriesInstancesPathSearch(token, environmentFqdn, { searchString: '', path: _this.path, hierarchies: { sort: { by: HierarchiesSort.CumulativeInstanceCount }, expand: { kind: HierarchiesExpand.OneLevel }, pageSize: 100 } }).then(function (r) {
try {
if (r.error) {
throw r.error;
}
else {
// hierarchy selection button
var hierarchySelectionWrapper = hierarchyNavWrapper.append('div').classed('tsi-hierarchy-selection-wrapper', true);
_this.hierarchySelectorElem = hierarchySelectionWrapper.append('button').classed('tsi-hierarchy-select', true)
.attr("aria-haspopup", "listbox")
.on('click keydown', function (event) {
if (Utils.isKeyDownAndNotEnter(event)) {