luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

On bar chart selection replace search component with HTML (#12964) 

* Sync selected namespace between bar chart and search component

- When user selects the namespace from chart, update the selected
  value in search select component
- Clear out the namespace selection when new date is queried

* On bar chart selection, replace search select with custom html
This commit is contained in:
Arnav Palnitkar 2021-10-29 14:07:00 -07:00 committed by GitHub
parent ab1fd3255b
commit 4d7e946aa6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/app/components/clients/history.js
View File

@ -8,6 +8,8 @@ export default class HistoryComponent extends Component {
@tracked selectedNamespace = null; @tracked selectedNamespace = null;
@tracked barChartSelection = false;
// Determine if we have client count data based on the current tab, // Determine if we have client count data based on the current tab,
// since model is slightly different for current month vs history api // since model is slightly different for current month vs history api
get hasClientData() { get hasClientData() {
@ -106,11 +108,17 @@ export default class HistoryComponent extends Component {
// In case of search select component, value returned is an array // In case of search select component, value returned is an array
if (Array.isArray(value)) { if (Array.isArray(value)) {
this.selectedNamespace = this.getNamespace(value[0]); this.selectedNamespace = this.getNamespace(value[0]);
this.barChartSelection = false;
} else if (typeof value === 'object') { } else if (typeof value === 'object') {
// While D3 bar selection returns an object // While D3 bar selection returns an object
this.selectedNamespace = this.getNamespace(value.label); this.selectedNamespace = this.getNamespace(value.label);
} else { this.barChartSelection = true;
this.selectedNamespace = null;
} }
} }
@action
resetData() {
this.barChartSelection = false;
this.selectedNamespace = null;
}
} }

52
ui/app/templates/components/clients/history.hbs
View File

@ -132,7 +132,7 @@
</div> </div>
</div> </div>
{{#if this.showGraphs}} {{#if this.showGraphs}}
<div class="columns has-bottom-margin-m"> <div class="columns has-bottom-margin-m" {{did-update this.resetData}} {{did-insert this.resetData}}>
<div class="column is-two-thirds" data-test-client-count-graph> <div class="column is-two-thirds" data-test-client-count-graph>
<BarChart <BarChart
@title="Top 10 Namespaces" @title="Top 10 Namespaces"
@ -151,7 +151,22 @@
<div class="column"> <div class="column">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<SearchSelect {{#if (and this.barChartSelection this.selectedNamespace)}}
<label class="title is-5 has-bottom-margin-m">Single namespace</label>
<ul class="has-bottom-margin-l search-select-list">
<li class="search-select-list-item">
<div>
{{or this.selectedNamespace.namespace_path 'root'}}
</div>
<div class="control">
<button type="button" class="button is-ghost" {{action "resetData"}}>
<Icon @glyph="trash" class="has-text-grey" />
</button>
</div>
</li>
</ul>
{{else}}
<SearchSelect
@id="namespaces" @id="namespaces"
@labelClass="title is-5" @labelClass="title is-5"
@disallowNewItems={{true}} @disallowNewItems={{true}}
@ -161,24 +176,25 @@
@searchField="namespace_path" @searchField="namespace_path"
@selectLimit={{1}} @selectLimit={{1}}
/> />
{{#if this.selectedNamespace}} {{/if}}
<div class="columns"> {{#if this.selectedNamespace}}
<div class="column"> <div class="columns">
<StatText @label="Active clients" @value={{this.selectedNamespace.counts.clients}} @size="l" /> <div class="column">
</div> <StatText @label="Active clients" @value={{this.selectedNamespace.counts.clients}} @size="l" />
</div> </div>
<div class="columns"> </div>
<div class="column"> <div class="columns">
<StatText @label="Unique entities" @value={{this.selectedNamespace.counts.distinct_entities}} @size="m" /> <div class="column">
</div> <StatText @label="Unique entities" @value={{this.selectedNamespace.counts.distinct_entities}} @size="m" />
<div class="column">
<StatText @label="Non-entity tokens" @value={{this.selectedNamespace.counts.non_entity_tokens}} @size="m" />
</div>
</div> </div>
{{else}} <div class="column">
<EmptyState @title="No namespace selected" <StatText @label="Non-entity tokens" @value={{this.selectedNamespace.counts.non_entity_tokens}} @size="m" />
@message="Click on a namespace in the Top 10 chart or type its name in the box to view it's individual client counts." /> </div>
{{/if}} </div>
{{else}}
<EmptyState @title="No namespace selected"
@message="Click on a namespace in the Top 10 chart or type its name in the box to view it's individual client counts." />
{{/if}}
</div> </div>
</div> </div>
</div> </div>

1
ui/lib/core/addon/components/search-select.js
View File

@ -71,7 +71,6 @@ export default Component.extend({
return option.id; return option.id;
}); });
this.set('allOptions', allOptions); // used by filter-wildcard helper this.set('allOptions', allOptions); // used by filter-wildcard helper
let formattedOptions = this.selectedOptions.map(option => { let formattedOptions = this.selectedOptions.map(option => {
let matchingOption = options.findBy('id', option); let matchingOption = options.findBy('id', option);
options.removeObject(matchingOption); options.removeObject(matchingOption);