Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-24 09:28:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 32

Website: update osquery schema pages - add evented table icons to sidenav, update code highlighting (#8168)

Browse source 
* Add evented table labels, update code syntax highlighting

* update styles, lint fix

* update comment

* Update osquery-table-details.page.js
This commit is contained in:
Eric 2022-10-11 14:40:08 -05:00 committed by GitHub
parent 174f894b53
commit 831155eb9c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
website/assets/js/pages/osquery-table-details.page.js vendored
View file

@ -45,18 +45,27 @@ parasails.registerPage('osquery-table-details', {
if(this.tableToDisplay.keywordsForSyntaxHighlighting){
keywordsForThisTable = this.tableToDisplay.keywordsForSyntaxHighlighting;
}
keywordsForThisTable = keywordsForThisTable.sort((a,b)=>{// Sorting the array of keywords by length to match larger keywords first.
if(a.length > b.length){
return -1;
}
});
(()=>{
$('pre code').each((i, block) => {
window.hljs.highlightBlock(block);
});
$('.hljs').each((i, el)=>{
let keywordsInExample = _.filter(keywordsForThisTable, (word)=>{
return _.includes(_.words(el.innerText, /[^, ]+/g), word);
});
for(let keyword of keywordsInExample) {
let replacementHMTL = el.innerHTML.replaceAll(keyword, '<span class="hljs-attr">'+keyword+'</span>');
$(el).html(replacementHMTL);
let keywordsToHighlight = [];// Empty array to track the keywords that we will need to highlight
for(let keyword of keywordsForThisTable){// Going through the array of keywords for this table, if the entire word matches, we'll add it to the
for(let match of block.innerHTML.match(keyword)||[]){
keywordsToHighlight.push(match);
}
}
// Now iterate through the keywordsToHighlight, replacing all matches in the elements innerHTML.
let replacementHMTL = block.innerHTML;
for(let keywordInExample of keywordsToHighlight) {
replacementHMTL = replacementHMTL.replaceAll(keywordInExample, '<span class="hljs-attr">'+keywordInExample+'</span>');
}
$(block).html(replacementHMTL);
// After we've highlighted our keywords, we'll highlight the rest of the codeblock
window.hljs.highlightBlock(block);
});
// Adding [purpose="line-break"] to SQL keywords if they are one of: SELECT, WHERE, FROM, JOIN. (case-insensitive)
$('.hljs-keyword').each((i, el)=>{

17
website/assets/styles/pages/osquery-table-details.less vendored
View file

@ -113,6 +113,20 @@
overflow-y: scroll;
overflow-x: show;
}
[purpose='evented-table-icon'] {
margin-left: 4px;
padding: 4px 8px;
background-color: @core-vibrant-blue-15;
border-radius: 4px;
display: inline-block;
line-height: 14px;
vertical-align: middle;
img {
height: 14px;
width: 14px;
display: inline-block;
}
}
[purpose='table-container'] {
height: min-content;
}
@ -209,6 +223,9 @@
content: '\a';
}
.hljs-attr { // For table and column names
.hljs-keyword {
color: #FFF;
}
color: #FFF;
background-color: #AE6DDF;
border-radius: 4px;

4
website/views/pages/osquery-table-details.ejs vendored
View file

@ -41,7 +41,7 @@
</div>
<div class="d-flex d-lg-none pt-3" v-if="showTableNav">
<div purpose="mobile-table-of-contents">
<a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url" v-for="table in filteredTables">{{table.title}}</a>
<a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-14x14@2x.png" ></span></a>
</div>
</div>
</div>
@ -59,7 +59,7 @@
</div>
<div style="position: relative;">
<div purpose="table-of-contents">
<a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url" v-for="table in filteredTables">{{table.title}}</a>
<a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-14x14@2x.png" ></span></a>
</div>
<div purpose="overflow-shadow" class="d-none d-lg-block"></div>
</div>