mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 17:05:18 +00:00
2db26cd44e
Closes: #14847 Changes: - Added two new pages: - `/try-fleet/explore-data`: A page where users can select a host, and be taken to a page where they can see query results for that host. - `try-fleet/explore-data/:platformName/:tableName`: A page where users can see the contents of osquery tables on hosts. - The view-action for this page will: - Redirect unauthenticated users to the /try-fleet/login page. (With a query parameter that will tell the login/register pages to redirect users back to this page) - Get information for hosts on a specified team. - Build a filtered list of osquery tables that are compatible with the host and have queries that will run on a specified host. - Get the latest query results for a specified query/osquery table for the specified host, and reorder the results to match the order of the columns in the osquery schema. - Updated build-static-content to add information about osquery tables for the /explore-data pages to `sails.config.builtStaticContent.osqueryTables`. - Added 5 new config variables: - `sails.config.custom.fleetBaseUrlForQueryReports`: The URL of the Fleet instance used for the /explore-data pages - `sails.config.custom.fleetTokenForQueryReports`: An API token for the Fleet instance used for the /explore-data pages - `sails.config.custom.teamApidForQueryReports`: the API ID of the team that the hosts listed on the explore-data page are in. - `sails.config.custom.queryIdsByTableName`: A dictionary containing key:value pairs where each key is the name of an osquery table, and the value is the API ID of the query that gets results for this table in a Fleet instance. This is stored in the custom configuration to make it easily editable (If we ever need to add or remove queries - `sails.config.custom.hostIdsByHostPlatform`: A dictionary containing key:value pairs where each key is a type of operating system, and the value is the API ID of a Host. - Updated the `/try-fleet` redirect to go to `/try-fleet/explore-data` - Updated the "try it out" button links to go to `/try-fleet` - Updated /try-fleet/login and /try-fleet/register to send users who are redirected to the page via the /explore-data page to the page they had tried to navigate to when they log in/create an account. I'm creating this as a PR as a draft. It will be ready to merge when we: - [x] Add hosts to the "Explore data (fleetdm.com) [DO NOT DELETE]" team - [x] Create queries for every compatible osquery table for the "Explore data (fleetdm.com) [DO NOT DELETE]" team. - [ ] Add a `sails.config.custom.queryIdsByTableName` config variable with the query IDs for the queries created in the previous step - [ ] Add `sails.config.custom.hostIdsByHostPlatform` config variable with the real host IDs/platforms
341 lines
6.5 KiB
Plaintext
Vendored
341 lines
6.5 KiB
Plaintext
Vendored
/**
|
|
* This file is for overriding some default bootstrap styles.
|
|
*
|
|
* > NOTE THAT THIS FILE AFFECTS GLOBAL STYLES.
|
|
*/
|
|
|
|
// lesshint-disable
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
// lesshint-enable
|
|
|
|
body {
|
|
font-family: @main-font;
|
|
color: @core-fleet-black-75;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
}
|
|
|
|
// Get rid of weird background on <a>s with button styles
|
|
.btn, [type='button'] {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
// Override heading font styles
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: @header-font;
|
|
}
|
|
h1, h2, h3, h4, h5 {
|
|
font-weight: 800;
|
|
color: @core-fleet-black;
|
|
}
|
|
|
|
h4 {
|
|
font-weight: 800;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 36px;
|
|
line-height: 48px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 28px;
|
|
line-height: 36px;
|
|
}
|
|
|
|
p {
|
|
line-height: 28px;
|
|
}
|
|
|
|
b, strong, .font-weight-bold {
|
|
font-weight: 600;
|
|
color: @core-fleet-black;
|
|
}
|
|
|
|
footer {
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.small {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.text-danger {
|
|
color: @core-vibrant-red !important; //lesshint-disable-line importantRule
|
|
}
|
|
|
|
a.text-danger:hover, a.text-danger:focus {
|
|
color: darken(@core-vibrant-red, 20%) !important; //lesshint-disable-line importantRule
|
|
}
|
|
|
|
.btn {
|
|
font-family: @header-font;
|
|
font-weight: 700;
|
|
padding-top: 18px;
|
|
padding-bottom: 19px;
|
|
font-size: 20px;
|
|
line-height: 23px;
|
|
border-radius: 10px;
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.btn-link {
|
|
color: #ffffff;
|
|
font-weight: 400;
|
|
font-family: @navigation-font;
|
|
transition: none;
|
|
}
|
|
|
|
&.btn-sm {
|
|
padding-top: 9px;
|
|
padding-bottom: 8px;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
line-height: 25px;
|
|
}
|
|
|
|
&.btn-primary {
|
|
background-color: #ff5c83;
|
|
border-color: #ff5c83;
|
|
cursor: pointer;
|
|
color: #FFF;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
position: relative;
|
|
&:before {
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
|
opacity: 1;
|
|
content: ' ';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -5px;
|
|
width: 50%;
|
|
height: 100%;
|
|
transform: skew(-10deg);
|
|
transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
|
|
}
|
|
&:hover:before {
|
|
opacity: 0;
|
|
left: 160px;
|
|
width: 110%;
|
|
}
|
|
&.disabled, &:disabled {
|
|
color: #fff;
|
|
background-color: darken(#ff5c83, 10%);
|
|
border-color: darken(#ff5c83, 10%);
|
|
}
|
|
&:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
|
|
color: #fff;
|
|
background-color: darken(#ff5c83, 10%);
|
|
border-color: darken(#ff5c83, 10%);
|
|
}
|
|
&:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus, .show > &.dropdown-toggle:focus {
|
|
box-shadow: 0 0 0.25rem 0.2rem #ff5c83;
|
|
}
|
|
}
|
|
|
|
&.btn-info {
|
|
background-color: #6A67FE;
|
|
border-color: #6A67FE;
|
|
cursor: pointer;
|
|
color: #FFF;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
position: relative;
|
|
&:before {
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
|
opacity: 1;
|
|
content: ' ';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -5px;
|
|
width: 50%;
|
|
height: 100%;
|
|
transform: skew(-10deg);
|
|
transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
|
|
}
|
|
&:hover:before {
|
|
opacity: 0;
|
|
left: 160px;
|
|
width: 110%;
|
|
}
|
|
&:not(:disabled):not(.disabled):active {
|
|
background-color: #6A67FE;
|
|
border-color: #6A67FE;
|
|
}
|
|
&:active:focus {
|
|
background-color: #6A67FE;
|
|
border-color: #6A67FE;
|
|
}
|
|
&:not(:disabled):not(.disabled):focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.btn-outline-secondary {
|
|
color: @core-fleet-black;
|
|
border: 1px solid #C5C7D1;
|
|
&:hover {
|
|
background: #fff;
|
|
}
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
&:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
|
|
color: @core-fleet-black;
|
|
background: none;
|
|
border: 1px solid #C5C7D1;
|
|
}
|
|
&:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus, .show > &.dropdown-toggle:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card {
|
|
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.dropdown:hover > .btn {
|
|
color: #6a67fe;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
left: 16px;
|
|
min-width: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.dropdown-item {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.dropdown-item:hover {
|
|
background-color: #f1f0ff;
|
|
font-weight: @bold;
|
|
}
|
|
// Bolding text when the tab is active causes a layout shift
|
|
// so we add a hidden pseudo element with the same text string
|
|
.dropdown-item:before {
|
|
content: attr(data-text);
|
|
height: 0;
|
|
visibility: hidden;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
font-weight: @bold;
|
|
}
|
|
[purpose='page-header'] {
|
|
.collapsing {
|
|
opacity: 0;
|
|
transition: 0s;
|
|
}
|
|
.collapse.show {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
z-index: 3;
|
|
overflow-y: auto;
|
|
}
|
|
.collapse {
|
|
opacity: 0;
|
|
}
|
|
.dropdown-menu {
|
|
left: 0px;
|
|
}
|
|
.dropdown-toggle::after {
|
|
display: none;
|
|
}
|
|
.dropdown-header {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
padding-top: 16px;
|
|
color: @core-fleet-black-33;
|
|
font-size: 11px;
|
|
line-height: 20px;
|
|
font-weight: bold;
|
|
}
|
|
.dropdown-divider {
|
|
margin: 4px 16px 0px 16px;
|
|
}
|
|
.dropdown-item {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
padding: 8px 16px;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.dropdown-item:hover {
|
|
background-color: unset;
|
|
color: #6a67fe;
|
|
}
|
|
.dropdown-item:before {
|
|
content: none;
|
|
}
|
|
}
|
|
.form-control {
|
|
height: 54px;
|
|
padding: 8px 16px;
|
|
font-size: 18px;
|
|
color: #192147;
|
|
border: 1px solid #C5C7D1;
|
|
}
|
|
.form-control:focus {
|
|
border: 1px solid #6a67fe;
|
|
box-shadow: unset;
|
|
}
|
|
.form-control.is-invalid:focus {
|
|
box-shadow: unset;
|
|
}
|
|
.form-control.is-invalid::placeholder {
|
|
color: #FF5C83;
|
|
}
|
|
.form-control.is-invalid {
|
|
color: #FF5C83;
|
|
border: 1px solid #FF5C83;
|
|
}
|
|
textarea.form-control {
|
|
height: 108px;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.invalid-feedback {
|
|
color: @core-vibrant-red;
|
|
}
|
|
|
|
.tooltip {
|
|
font-weight: 400;
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
font-size: 12px;
|
|
background-color: @core-fleet-black-75;
|
|
opacity: 1.0;
|
|
.arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
.tooltip-inner {
|
|
background: none;
|
|
padding: 0;
|
|
p {
|
|
margin-bottom: 0px;
|
|
text-align: left;
|
|
line-height: 16px;
|
|
}
|
|
}
|
|
.tooltip.show {
|
|
opacity: 1;
|
|
}
|