Website: Add "critical" and "MDM required" badges to query details page. (#15156)

Closes: #15071

Changes:
- Added the "CRITICAL" and "MDM REQUIRED" badges to the query details
page for queries that have the "critical" or "requires mdm" tags
This commit is contained in:
Eric 2023-11-15 17:02:21 -06:00 committed by GitHub
parent 788f847431
commit 7ae2a659cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 1 deletions

View file

@ -61,6 +61,34 @@
background-color: #E2E4EA;
}
[purpose='requires-mdm-badge'] {
text-transform: uppercase;
background: #6A67FE;
border-radius: 4px;
padding: 4px;
font-weight: 700;
font-size: 10px;
line-height: 10px;
display: inline-block;
color: #FFF;
text-decoration: none;
white-space: nowrap;
}
[purpose='critical-badge'] {
text-transform: uppercase;
background: #FF5C83;
border-radius: 4px;
padding: 4px;
font-weight: 700;
font-size: 10px;
line-height: 10px;
display: inline-block;
color: #FFF;
text-decoration: none;
white-space: nowrap;
}
[purpose='remediation'] {
overflow-wrap: break-word;
word-wrap: break-word;

View file

@ -45,7 +45,9 @@
<div class="d-flex flex-md-column justify-content-between justify-content-md-start align-items-center align-items-md-start pt-md-3">
<h5 class="pb-md-2 m-0">Tags</h5>
<div :class="[query.tags.length > 2 ? 'mt-1' : '']" class="d-flex flex-wrap align-items-center justify-content-end justify-content-sm-start">
<span class="mb-1" v-if="!query.tags || !query.tags.length">--</span>
<div purpose="requires-mdm-badge" class="mr-md-1 ml-1 ml-md-0" :class="[query.tags.length > 2 ? 'mb-1' : '']" v-if="query.requiresMdm">requires mdm</div>
<div purpose="critical-badge" class="mr-md-1 ml-1 ml-md-0" :class="[query.tags.length > 2 ? 'mb-1' : '']" v-if="query.critical">critical</div>
<span class="mb-1" v-if="(!query.tags || !query.tags.length) && !query.critical && !query.requiresMdm">--</span>
<div purpose="query-tag" class="mr-md-1 ml-1 ml-md-0" :class="[query.tags.length > 2 ? 'mb-1' : '']" v-for="tag in query.tags">
{{tag}}
</div>