Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Let user know which tags are missing per run (#967) #1

Merged
merged 1 commit into from
Feb 13, 2018
Merged

Let user know which tags are missing per run (#967) #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
115 changes: 85 additions & 30 deletions .../plugins/custom_scalar/tf_custom_scalar_dashboard/tf-custom-scalar-margin-chart-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,31 +99,47 @@ <h1>[[_titleDisplayString]]</h1>
</template>
</div>

<template is="dom-if" if="[[_tagsWithNoData]]">
<div id="error-content">
<iron-icon class="error-icon" icon="icons:error"></iron-icon>
No data found for these tags:
<ul>
<template is="dom-repeat" items="[[_tagsWithNoData]]">
<li>[[item]]</li>
</template>
</ul>
<br>
Tags for the value, lower, and upper bounds of margin charts in the Layout
proto must match tags in the SCALARS dashboard.
<!-- here -->
<template is="dom-if" if="[[_missingTags.length]]">
<div class="collapsible-list-title">
<paper-icon-button
icon="[[_getToggleCollapsibleIcon(_missingTagsCollapsibleOpened)]]"
on-click="_toggleMissingTagsCollapsibleOpen"
class="toggle-collapsible-button">
</paper-icon-button>
<span class="collapsible-title-text">
<iron-icon icon="icons:error"></iron-icon> Missing Tags
</span>
</div>
<iron-collapse opened="[[_missingTagsCollapsibleOpened]]">
<div class="error-content">
<iron-icon class="error-icon" icon="icons:error"></iron-icon>
<template is="dom-repeat"
items="[[_missingTags]]"
as="missingEntry">
<div class="missing-tags-for-run-container">
Run "[[missingEntry.run]]" lacks data for tags
<ul>
<template is="dom-repeat" items="[[missingEntry.tags]]" as="tag">
<li>[[tag]]</li>
</template>
</ul>
</div>
</template>
</div>
</iron-collapse>
</template>

<template is="dom-if" if="[[_tagFilterInvalid]]">
<div id="error-content">
<div class="error-content">
<iron-icon class="error-icon" icon="icons:error"></iron-icon>
This regular expresion is invalid:<br>
<span class="invalid-regex">[[_tagFilter]]</span>
</div>
</template>

<template is="dom-if" if="[[_stepsMismatch]]">
<div id="error-content">
<div class="error-content">
<iron-icon class="error-icon" icon="icons:error"></iron-icon>
The steps for value, lower, and upper tags do not match:
<ul>
Expand All @@ -144,16 +160,16 @@ <h1>[[_titleDisplayString]]</h1>
</template>

<div id="matches-container">
<div id="matches-list-title">
<div class="collapsible-list-title">
<template is="dom-if" if="[[_dataSeriesStrings.length]]">
<paper-icon-button
icon="[[_getToggleMatchesIcon(_matchesListOpened)]]"
icon="[[_getToggleCollapsibleIcon(_matchesListOpened)]]"
on-click="_toggleMatchesOpen"
class="toggle-matches-button">
</paper-icon-button>
</template>

<span class="matches-text">
<span class="collapsible-title-text">
Matches ([[_dataSeriesStrings.length]])
</span>
</div>
Expand All @@ -179,7 +195,7 @@ <h1>[[_titleDisplayString]]</h1>
</div>
<style include="tf-custom-scalar-card-style"></style>
<style>
#error-content {
.error-content {
background: #f00;
border-radius: 5px;
color: #fff;
Expand All @@ -197,7 +213,7 @@ <h1>[[_titleDisplayString]]</h1>
font-weight: bold;
}

#error-content ul {
.error-content ul {
margin: 1px 0 0 0;
padding: 0 0 0 19px;
}
Expand All @@ -206,10 +222,14 @@ <h1>[[_titleDisplayString]]</h1>
font-weight: bold;
}

#matches-list-title {
.collapsible-list-title {
margin: 10px 0 5px 0;
}

.collapsible-title-text {
vertical-align: middle;
}

#matches-list {
font-size: 0.8em;
max-height: 200px;
Expand All @@ -226,8 +246,8 @@ <h1>[[_titleDisplayString]]</h1>
width: 10px;
}

.matches-text {
vertical-align: middle;
.missing-tags-for-run-container {
margin: 8px 0 0 0;
}
</style>
</template>
Expand Down Expand Up @@ -381,7 +401,22 @@ <h1>[[_titleDisplayString]]</h1>
];
}
},
_tagsWithNoData: String,
/**
* A list of objects encapsulating missing tags. Each object within this
* list has the following properties:
* run: A string denoting the relevant run.
* tags: A non-empty list of tags (strings) missing for that run.
* A run only has an entry in this list if some (but not all) of its 3
* tags (value, lower, upper) are missing.
*/
_missingTags: {
type: Array,
value: [],
},
_missingTagsCollapsibleOpened: {
type: Boolean,
value: false,
},
/**
* This field is only set if data retrieved from the server exhibits a
* step mismatch: if the lists of values, lower bounds, and upper bounds
Expand Down Expand Up @@ -517,13 +552,28 @@ <h1>[[_titleDisplayString]]</h1>
run, tagsObject.value, seriesName, dataPoints);
}
});
this.set('_nameToDataSeries', newMapping);

if (tagsNotFound.length) {
// At least 1 tag could not be found. Show an error message.
this.set('_tagsWithNoData', tagsNotFound);
const entryIndex = _.findIndex(this._missingTags, (entry) => {
return entry.run === run;
});
if (tagsNotFound.length && tagsNotFound.length != 3) {
// Some but not all tags were found. Show a warning message.
const entry = {
run: run,
tags: tagsNotFound,
};
if (entryIndex >= 0) {
// Remove the previous entry. Insert the new one.
this.splice('_missingTags', entryIndex, 1, entry);
} else {
// Insert a new entry.
this.push('_missingTags', entry);
}
} else if (entryIndex >= 0) {
// Remove the previous entry if it exists.
this.splice('_missingTags', entryIndex, 1);
}

this.set('_nameToDataSeries', newMapping);
});
},
_findStepMismatch(tagsObject, valueSteps, lowerSteps, upperSteps) {
Expand Down Expand Up @@ -606,8 +656,8 @@ <h1>[[_titleDisplayString]]</h1>
_escapeRegexCharacters(stringValue) {
return stringValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
},
_getToggleMatchesIcon(matchesListOpened) {
return matchesListOpened ? 'expand-less' : 'expand-more';
_getToggleCollapsibleIcon(listOpened) {
return listOpened ? 'expand-less' : 'expand-more';
},
_toggleMatchesOpen() {
this.set('_matchesListOpened', !this._matchesListOpened);
Expand All @@ -620,6 +670,11 @@ <h1>[[_titleDisplayString]]</h1>
_separateWithCommas(numbers) {
return numbers.join(', ');
},
_toggleMissingTagsCollapsibleOpen() {
this.set(
'_missingTagsCollapsibleOpened',
!this._missingTagsCollapsibleOpened);
},
});
</script>
</dom-module>