Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Host custom query button modification (#758)

Browse Source 
* Improve UX custom query option
* Edge case custom query button persists
This commit is contained in:
RachelElysia
2021-05-13 19:29:31 -04:00
committed by GitHub
parent 86745ba2dc
commit 381956b528
2 changed files with 66 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pages/hosts/HostDetailsPage/SelectQueryModal/SelectQueryModal.jsx
+54 -37
View File
@@ -57,6 +57,18 @@ const SelectQueryModal = (props) => {
});
};
const customQueryButton = () => {
return (
<Button
onClick={() => onQueryHostCustom(host, dispatch)}
variant="brand"
className={`${baseClass}__custom-query-button`}
>
Create custom query
</Button>
);
};
const onFilterQueries = (event) => {
setQueriesFilter(event);
return false;
@@ -86,6 +98,20 @@ const SelectQueryModal = (props) => {
<img src={OpenNewTabIcon} alt="open new tab" id="new-tab-icon" />
</a>
</span>
<div>{customQueryButton()}</div>
</div>
);
}
if (!queriesFilter && queriesCount === 0) {
return (
<div className={`${baseClass}__no-query-results`}>
<span className="info__header">You have no saved queries.</span>
<span className="info__data">
Expecting to see queries? Try again in a few seconds as the system
catches up.
</span>
<div>{customQueryButton()}</div>
</div>
);
}
@@ -106,43 +132,43 @@ const SelectQueryModal = (props) => {
});
return (
<div>
<div className={`${baseClass}__filter-queries`}>
<InputField
name="query-filter"
onChange={onFilterQueries}
placeholder="Filter queries"
value={queriesFilter}
/>
<KolideIcon name="search" />
<div className={`${baseClass}__query-modal`}>
<div className={`${baseClass}__filter-queries`}>
<InputField
name="query-filter"
onChange={onFilterQueries}
placeholder="Filter queries"
value={queriesFilter}
/>
<KolideIcon name="search" />
</div>
<div className={`${baseClass}__create-query`}>
<span>OR</span>
{customQueryButton()}
</div>
</div>
<div>{queryList}</div>
</div>
);
}
if (!queriesFilter && queriesCount === 0) {
return (
<div className={`${baseClass}__no-query-results`}>
<span className="info__header">You have no saved queries.</span>
<span className="info__data">
Expecting to see queries? Try again in a few seconds as the system
catches up.
</span>
</div>
);
}
if (queriesFilter && queriesCount === 0) {
return (
<div>
<div className={`${baseClass}__filter-queries`}>
<InputField
name="query-filter"
onChange={onFilterQueries}
placeholder="Filter queries"
value={queriesFilter}
/>
<KolideIcon name="search" />
<div className={`${baseClass}__query-modal`}>
<div className={`${baseClass}__filter-queries`}>
<InputField
name="query-filter"
onChange={onFilterQueries}
placeholder="Filter queries"
value={queriesFilter}
/>
<KolideIcon name="search" />
</div>
<div className={`${baseClass}__create-query`}>
<span>OR</span>
{customQueryButton()}
</div>
</div>
<div className={`${baseClass}__no-query-results`}>
<span className="info__header">
@@ -165,15 +191,6 @@ const SelectQueryModal = (props) => {
className={`${baseClass}__modal`}
>
{results()}
<p>
<Button
onClick={() => onQueryHostCustom(host, dispatch)}
variant="unstyled"
className={`${baseClass}__custom-query-button`}
>
Create custom query
</Button>
</p>
</Modal>
);
};
frontend/pages/hosts/HostDetailsPage/SelectQueryModal/_styles.scss
+12 -3
View File
@@ -46,8 +46,12 @@
}
}
&__query-modal {
display: flex;
}
&__filter-queries {
flex-grow: 1;
flex-grow: 3;
position: relative;
.input-field {
@@ -63,9 +67,14 @@
}
}
&__create-query {
span {
margin: 15px;
font-weight: bold;
}
}
&__custom-query-button {
font-size: $x-small;
color: $core-vibrant-blue;
font-weight: $bold;
}
}