Packs pages: Edit page empty state rendering, Manage page update UI (#885)
* Packs: Update empty state, tables, select targets pills, platform pills, icons, phrasing
This commit is contained in:
RachelElysia
@@ -13,7 +13,7 @@ describe("Pack flow", () => {
|
||||
.click()
|
||||
.type("Errors and crashes");
|
||||
|
||||
cy.findByLabelText(/query pack description/i)
|
||||
cy.findByLabelText(/description/i)
|
||||
.click()
|
||||
.type("See all user errors and window crashes.");
|
||||
|
||||
@@ -29,7 +29,7 @@ describe("Pack flow", () => {
|
||||
.click()
|
||||
.type("{selectall}{backspace}Server errors");
|
||||
|
||||
cy.findByLabelText(/query pack description/i)
|
||||
cy.findByLabelText(/description/i)
|
||||
.click()
|
||||
.type("{selectall}{backspace}See all server errors.");
|
||||
|
||||
|
||||
@@ -137,14 +137,14 @@ export class ConfigurePackQueryForm extends Component {
|
||||
|
||||
return (
|
||||
<form className={baseClass} onSubmit={handleSubmit}>
|
||||
<h2 className={`${baseClass}__title`}>configuration</h2>
|
||||
<h2 className={`${baseClass}__title`}>Configuration</h2>
|
||||
<div className={`${baseClass}__fields`}>
|
||||
<InputField
|
||||
{...fields.interval}
|
||||
inputWrapperClass={`${baseClass}__form-field ${baseClass}__form-field--interval`}
|
||||
inputWrapperClass={`${baseClass}__form-field ${baseClass}__form-field--frequency`}
|
||||
placeholder="- - -"
|
||||
label="Interval"
|
||||
hint="Seconds"
|
||||
label="Frequency (seconds)"
|
||||
// hint="Seconds"
|
||||
type="number"
|
||||
/>
|
||||
<Dropdown
|
||||
@@ -160,11 +160,7 @@ export class ConfigurePackQueryForm extends Component {
|
||||
{...fields.version}
|
||||
options={minOsqueryVersionOptions}
|
||||
placeholder="- - -"
|
||||
label={[
|
||||
"minimum ",
|
||||
<KolideIcon name="osquery" key="min-osquery-vers" />,
|
||||
" version",
|
||||
]}
|
||||
label="Minimum osquery version"
|
||||
wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--osquer-vers`}
|
||||
/>
|
||||
<Dropdown
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.configure-pack-query-form {
|
||||
&__form-field {
|
||||
&--interval {
|
||||
&--frequency {
|
||||
position: relative;
|
||||
|
||||
.input-field {
|
||||
@@ -19,11 +19,10 @@
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $small;
|
||||
font-size: $x-small;
|
||||
font-weight: $bold;
|
||||
letter-spacing: -0.5px;
|
||||
color: $core-fleet-black;
|
||||
border-bottom: 1px solid #eaeefb;
|
||||
padding: 0 0 9px;
|
||||
margin: 0 0 9px;
|
||||
}
|
||||
|
||||
@@ -46,6 +46,13 @@
|
||||
background-color: $ui-light-grey;
|
||||
border-radius: $border-radius;
|
||||
height: 40px;
|
||||
|
||||
.Select-value {
|
||||
font-size: $x-small;
|
||||
border-radius: 4px;
|
||||
background-color: $ui-off-white;
|
||||
border: solid 1px $core-dark-blue-grey;
|
||||
}
|
||||
}
|
||||
|
||||
.Select-value {
|
||||
@@ -90,6 +97,8 @@
|
||||
> .Select-control {
|
||||
.Select-value {
|
||||
line-height: 38px;
|
||||
margin-top: 4px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -98,7 +107,7 @@
|
||||
content: url("../assets/images/icon-chevron-black-16x16@2x.png");
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-top: 6px;
|
||||
margin-top: 8px;
|
||||
margin-left: -4px;
|
||||
border: none;
|
||||
|
||||
@@ -112,7 +121,7 @@
|
||||
content: url("../assets/images/icon-collapse-black-16x16@2x.png");
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-top: 6px;
|
||||
margin-top: 14px;
|
||||
margin-left: -3px;
|
||||
border: none;
|
||||
|
||||
@@ -200,7 +209,8 @@
|
||||
color: $ui-gray;
|
||||
}
|
||||
|
||||
.Select-placeholder {
|
||||
.Select-placeholder,
|
||||
.Select-input {
|
||||
color: $core-fleet-blue;
|
||||
font-size: $small;
|
||||
line-height: 40px;
|
||||
@@ -218,6 +228,7 @@
|
||||
|
||||
.Select-multi-value-wrapper {
|
||||
flex-grow: 1;
|
||||
padding: $pad-xsmall;
|
||||
}
|
||||
|
||||
.Select-arrow-zone {
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
}
|
||||
|
||||
.Select-placeholder {
|
||||
line-height: 46px;
|
||||
line-height: 50px;
|
||||
font-size: $small;
|
||||
padding: 0 $pad-medium;
|
||||
}
|
||||
@@ -108,7 +108,7 @@
|
||||
|
||||
.Select-value {
|
||||
line-height: 34px;
|
||||
border: 1px solid $core-fleet-black;
|
||||
border: 1px solid $core-dark-blue-grey;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -164,8 +164,7 @@
|
||||
content: url("../assets/images/icon-close-fleet-blue-16x16@2x.png");
|
||||
transform: scale(0.5);
|
||||
border-radius: 0px;
|
||||
margin-top: -15px;
|
||||
margin-left: -15px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -178,8 +177,8 @@
|
||||
|
||||
.Select-value-label {
|
||||
font-size: $small;
|
||||
font-weight: $regular;
|
||||
color: $core-fleet-black;
|
||||
color: $core-dark-blue-grey;
|
||||
font-size: $x-small;
|
||||
padding: 0 0 0 $pad-medium;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
@@ -39,14 +39,14 @@ class EditPackForm extends Component {
|
||||
<h1>Edit pack</h1>
|
||||
<InputField
|
||||
{...fields.name}
|
||||
placeholder="Query Pack Title"
|
||||
label="Query Pack Title"
|
||||
placeholder="Query pack title"
|
||||
label="Query pack title"
|
||||
inputWrapperClass={`${baseClass}__pack-title`}
|
||||
/>
|
||||
<InputField
|
||||
{...fields.description}
|
||||
inputWrapperClass={`${baseClass}__pack-description`}
|
||||
label="Query Pack Description"
|
||||
label="Description"
|
||||
placeholder="Add a description of your pack"
|
||||
type="textarea"
|
||||
/>
|
||||
|
||||
@@ -51,8 +51,8 @@ class PackForm extends Component {
|
||||
<InputField
|
||||
{...fields.description}
|
||||
inputWrapperClass={`${baseClass}__pack-description`}
|
||||
label="Query pack description"
|
||||
placeholder="Add a description of your query"
|
||||
label="Description"
|
||||
placeholder="Add a description of your pack"
|
||||
type="textarea"
|
||||
/>
|
||||
<div className={`${baseClass}__pack-targets`}>
|
||||
|
||||
@@ -53,7 +53,7 @@ class Row extends Component {
|
||||
if (disabled) {
|
||||
return (
|
||||
<td className={`${baseClass}__td`}>
|
||||
<KolideIcon className={iconClassName} name="offline" />
|
||||
<span className={`${baseClass}__disabled-icon`} />
|
||||
<span className={`${baseClass}__status-text`}>Disabled</span>
|
||||
</td>
|
||||
);
|
||||
@@ -61,7 +61,7 @@ class Row extends Component {
|
||||
|
||||
return (
|
||||
<td className={`${baseClass}__td`}>
|
||||
<KolideIcon className={iconClassName} name="success-check" />
|
||||
<span className={`${baseClass}__enabled-icon`} />
|
||||
<span className={`${baseClass}__status-text`}>Enabled</span>
|
||||
</td>
|
||||
);
|
||||
|
||||
@@ -22,17 +22,13 @@
|
||||
color: $core-fleet-black;
|
||||
font-weight: $regular;
|
||||
font-size: $x-small;
|
||||
padding: 7px 0;
|
||||
text-align: center;
|
||||
padding: 0 $pad-large;
|
||||
margin: 0;
|
||||
line-height: 2.71;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 25px;
|
||||
text-align: right;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -46,6 +42,24 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__disabled-icon {
|
||||
margin-bottom: 1px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background-color: $ui-fleet-black-25;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&__enabled-icon {
|
||||
margin-bottom: 1px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background-color: $ui-success;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&__status-icon {
|
||||
&--enabled {
|
||||
color: $ui-success;
|
||||
|
||||
@@ -12,20 +12,41 @@
|
||||
thead {
|
||||
background-color: $ui-off-white;
|
||||
border-bottom: 1px solid $ui-fleet-blue-15;
|
||||
}
|
||||
|
||||
&__th {
|
||||
font-size: $x-small;
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
th + th {
|
||||
border-left: 1px solid $ui-fleet-blue-15;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 25px;
|
||||
text-align: right;
|
||||
th {
|
||||
font-size: $x-small;
|
||||
font-weight: $bold;
|
||||
text-align: left;
|
||||
padding: $pad-medium $pad-large;
|
||||
|
||||
&:nth-child(1) {
|
||||
border-top-left-radius: 3px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
width: calc(49% - 20px);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
width: 17%;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
width: 17%;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
width: 17%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -85,45 +85,43 @@ class ScheduledQueriesList extends Component {
|
||||
<tr>
|
||||
<td colSpan={6}>
|
||||
<div className={`${baseClass}__first-query`}>
|
||||
<h1>
|
||||
First let's <span>add a query</span>.
|
||||
</h1>
|
||||
<h2>Then we'll set the following:</h2>
|
||||
<h1>Your pack is empty.</h1>
|
||||
<span className={`${baseClass}__first-query-cta`}>
|
||||
Use the sidebar on the right to add queries to this pack.
|
||||
</span>
|
||||
<h1>Configure your queries.</h1>
|
||||
<p>
|
||||
<strong>interval:</strong> the amount of time, in seconds, the
|
||||
<strong>Frequency:</strong> the amount of time, in seconds, the
|
||||
query waits before running
|
||||
</p>
|
||||
<p>
|
||||
<strong>platform:</strong> the computer platform where this query
|
||||
<strong>Platform:</strong> the computer platform where this query
|
||||
will run (other platforms ignored)
|
||||
</p>
|
||||
<p>
|
||||
<strong>
|
||||
minimum <KolideIcon name="osquery" /> version:
|
||||
</strong>{" "}
|
||||
the minimum required <strong>osqueryd</strong> version installed
|
||||
on a host
|
||||
<strong>Minimum osquery version:</strong> the minimum required{" "}
|
||||
<strong>osqueryd</strong> version installed on a host
|
||||
</p>
|
||||
<p>
|
||||
<strong>logging type:</strong>
|
||||
<strong>Logging:</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>
|
||||
<KolideIcon name="plus-minus" /> differential:
|
||||
<KolideIcon name="plus-minus" /> Differential:
|
||||
</strong>{" "}
|
||||
show only what’s added from last run
|
||||
</li>
|
||||
<li>
|
||||
<strong>
|
||||
<KolideIcon name="bold-plus" /> differential (ignore
|
||||
<KolideIcon name="bold-plus" /> Differential (ignore
|
||||
removals):
|
||||
</strong>{" "}
|
||||
show only what’s been added since the last run
|
||||
</li>
|
||||
<li>
|
||||
<strong>
|
||||
<KolideIcon name="camera" /> snapshot:
|
||||
<KolideIcon name="camera" /> Snapshot:
|
||||
</strong>{" "}
|
||||
show everything in its current state
|
||||
</li>
|
||||
@@ -139,6 +137,7 @@ class ScheduledQueriesList extends Component {
|
||||
onCheckQuery,
|
||||
scheduledQueries,
|
||||
checkedScheduledQueryIDs,
|
||||
isScheduledQueriesAvailable,
|
||||
} = this.props;
|
||||
const { allQueriesSelected, selectedQueryRowId } = this.state;
|
||||
const {
|
||||
@@ -157,21 +156,25 @@ class ScheduledQueriesList extends Component {
|
||||
<table className={wrapperClassName}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Checkbox
|
||||
name="select-all-scheduled-queries"
|
||||
onChange={handleSelectAllQueries}
|
||||
value={allQueriesSelected}
|
||||
/>
|
||||
</th>
|
||||
<th>Query name</th>
|
||||
<th>Interval(s)</th>
|
||||
<th>Platform</th>
|
||||
<th>
|
||||
<KolideIcon name="osquery" /> Ver.
|
||||
</th>
|
||||
<th>Shard</th>
|
||||
<th>Logging</th>
|
||||
{scheduledQueries.length || isScheduledQueriesAvailable ? (
|
||||
<>
|
||||
<th>
|
||||
<Checkbox
|
||||
name="select-all-scheduled-queries"
|
||||
onChange={handleSelectAllQueries}
|
||||
value={allQueriesSelected}
|
||||
/>
|
||||
</th>
|
||||
<th>Query name</th>
|
||||
<th>Frequency</th>
|
||||
<th>Platform</th>
|
||||
<th>Osquery ver.</th>
|
||||
<th>Shard</th>
|
||||
<th>Logging</th>
|
||||
</>
|
||||
) : (
|
||||
<th />
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@@ -62,6 +62,6 @@ describe("ScheduledQueriesList - component", () => {
|
||||
/>
|
||||
);
|
||||
|
||||
expect(component.text()).toContain("First let's add a query");
|
||||
expect(component.text()).toContain("Your pack is empty");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -14,11 +14,15 @@
|
||||
background-color: $ui-off-white;
|
||||
border-bottom: 1px solid $ui-fleet-blue-15;
|
||||
|
||||
th + th {
|
||||
border-left: 1px solid $ui-fleet-blue-15;
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: $x-small;
|
||||
font-weight: $bold;
|
||||
text-align: left;
|
||||
padding: 15px 10px;
|
||||
padding: $pad-medium $pad-large;
|
||||
|
||||
.form-field {
|
||||
margin: 0;
|
||||
@@ -30,20 +34,17 @@
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
width: calc(46% - 20px);
|
||||
width: calc(49% - 20px);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
width: 18%;
|
||||
&:nth-child(3),
|
||||
&:nth-child(7) {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
width: 18%;
|
||||
text-align: center;
|
||||
&:nth-child(4),
|
||||
&:nth-child(5),
|
||||
&:nth-child(6) {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@@ -54,8 +55,12 @@
|
||||
}
|
||||
|
||||
tbody {
|
||||
p {
|
||||
font-size: $x-small;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0 10px;
|
||||
padding: 0 $pad-large;
|
||||
margin: 0;
|
||||
|
||||
.form-field {
|
||||
@@ -69,7 +74,7 @@
|
||||
|
||||
&:nth-child(2) {
|
||||
font-size: $x-small;
|
||||
font-weight: $bold;
|
||||
font-weight: $regular;
|
||||
line-height: 2.71;
|
||||
letter-spacing: -0.5px;
|
||||
text-align: left;
|
||||
@@ -100,7 +105,7 @@
|
||||
font-weight: $regular;
|
||||
line-height: 2.71;
|
||||
letter-spacing: -0.5px;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
color: $core-fleet-black;
|
||||
|
||||
.kolidecon {
|
||||
@@ -122,16 +127,23 @@
|
||||
}
|
||||
|
||||
&__first-query {
|
||||
padding: $pad-xlarge 15px 100px;
|
||||
padding: 0 $pad-xxlarge 100px;
|
||||
text-align: left;
|
||||
|
||||
&-cta {
|
||||
text-align: left;
|
||||
font-size: $x-small;
|
||||
font-weight: $bold;
|
||||
color: $core-vibrant-blue;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $core-fleet-black;
|
||||
font-size: $large;
|
||||
font-weight: $regular;
|
||||
line-height: 1.96;
|
||||
letter-spacing: -0.5px;
|
||||
margin: 0;
|
||||
margin-top: $pad-xxlarge;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -144,7 +156,7 @@
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $small;
|
||||
font-size: $x-small;
|
||||
font-weight: $regular;
|
||||
line-height: 2.5;
|
||||
color: $core-fleet-black;
|
||||
@@ -159,7 +171,7 @@
|
||||
|
||||
li {
|
||||
margin-left: 15px;
|
||||
font-size: $small;
|
||||
font-size: $x-small;
|
||||
font-weight: $regular;
|
||||
line-height: 2.5;
|
||||
color: $core-fleet-black;
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
}
|
||||
|
||||
&__section-label {
|
||||
font-size: $medium;
|
||||
font-size: $x-small;
|
||||
font-weight: $bold;
|
||||
margin: $pad-large 0 $pad-medium;
|
||||
margin: $pad-large 0 $pad-small;
|
||||
}
|
||||
|
||||
&__edit-pack-link {
|
||||
@@ -25,7 +25,7 @@
|
||||
&__pack-name {
|
||||
@include ellipsis(250px);
|
||||
color: $core-fleet-black;
|
||||
font-size: $small;
|
||||
font-size: $x-small;
|
||||
font-weight: $regular;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -44,7 +44,7 @@
|
||||
|
||||
&__query-name {
|
||||
@include ellipsis(240px);
|
||||
font-size: $small;
|
||||
font-size: $x-small;
|
||||
color: $core-vibrant-blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
+3
-8
@@ -97,10 +97,8 @@ class SearchPackQuery extends Component {
|
||||
if (selectedQuery) {
|
||||
return (
|
||||
<div className={`${baseClass}__description`}>
|
||||
<h2>description</h2>
|
||||
<p>
|
||||
{selectedQuery.description || <em>No description available.</em>}
|
||||
</p>
|
||||
<h2>Description</h2>
|
||||
<p>{selectedQuery.description || <>No description available.</>}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -119,10 +117,7 @@ class SearchPackQuery extends Component {
|
||||
<Dropdown
|
||||
options={queryDropdownOptions}
|
||||
onChange={onSelectQuery}
|
||||
placeholder={[
|
||||
<KolideIcon name="search" size="lg" key="search-pack-query" />,
|
||||
" Select query",
|
||||
]}
|
||||
placeholder={"Select query"}
|
||||
/>
|
||||
{renderQuery()}
|
||||
{renderDescription()}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.search-pack-query {
|
||||
&__title {
|
||||
@include ellipsis(250px);
|
||||
font-size: 18px;
|
||||
font-size: $x-small;
|
||||
font-weight: $bold;
|
||||
letter-spacing: -0.5px;
|
||||
color: $core-fleet-black;
|
||||
@@ -21,13 +21,11 @@
|
||||
word-wrap: break-word;
|
||||
|
||||
h2 {
|
||||
font-size: $small;
|
||||
font-size: $x-small;
|
||||
font-weight: $bold;
|
||||
letter-spacing: -0.5px;
|
||||
color: $core-fleet-black;
|
||||
border-bottom: 1px solid #eaeefb;
|
||||
padding: 0 0 9px;
|
||||
margin: 0 0 9px;
|
||||
margin: 0 0 $pad-small;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
@@ -169,11 +169,13 @@ export class EditPackPage extends Component {
|
||||
.then(() => {
|
||||
this.setState({ selectedScheduledQuery: null, selectedQuery: null });
|
||||
dispatch(renderFlash("success", "Scheduled Query updated!"));
|
||||
window.scrollTo(0, 0);
|
||||
})
|
||||
.catch(() => {
|
||||
dispatch(
|
||||
renderFlash("error", "Unable to update your Scheduled Query.")
|
||||
);
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
};
|
||||
|
||||
@@ -196,6 +198,7 @@ export class EditPackPage extends Component {
|
||||
return Promise.all(promises).then(() => {
|
||||
this.setState({ selectedScheduledQuery: null, selectedQuery: null });
|
||||
dispatch(renderFlash("success", "Scheduled queries removed"));
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
};
|
||||
|
||||
@@ -210,6 +213,7 @@ export class EditPackPage extends Component {
|
||||
dispatch(create(scheduledQueryData)).catch(() => {
|
||||
dispatch(renderFlash("error", "Unable to schedule your query."));
|
||||
});
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user