Fix tooltip jank and hosts text on query target selection (#7909)

This commit is contained in:
Luke Heath 2022-09-23 17:28:43 -05:00 committed by GitHub
parent 1b59b05862
commit 51aaa7755a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 33 additions and 25 deletions

View File

@ -4,10 +4,11 @@
"experimentalSessionSupport": true,
"testFiles": "{all,free}/**/*.spec.ts",
"retries": {
"runMode": 1,
"runMode": 2,
"openMode": 0
},
"video": false,
"videoUploadOnPasses": false,
"projectId": "oteb8z"
"projectId": "oteb8z",
"defaultCommandTimeout": 8000
}

View File

@ -4,10 +4,11 @@
"experimentalSessionSupport": true,
"testFiles": "{all,premium}/**/*.spec.ts",
"retries": {
"runMode": 1,
"runMode": 2,
"openMode": 0
},
"video": false,
"videoUploadOnPasses": false,
"projectId": "oteb8z"
"projectId": "oteb8z",
"defaultCommandTimeout": 8000
}

View File

@ -58,7 +58,7 @@ describe("Query flow (seeded)", () => {
cy.getAttached(".name__cell .button--text-link").first().click();
cy.findByText(/run query/i).click();
cy.findByText(/all hosts/i).click();
cy.findByText(/hosts targeted/i).should("exist");
cy.findByText(/host targeted/i).should("exist");
cy.findByText(/run/i).click();
// Ensures live query runs
cy.wait(10000); // eslint-disable-line cypress/no-unnecessary-waiting

View File

@ -248,7 +248,7 @@ describe(
cy.findByText(/run query/i).click({ force: true });
cy.findByText(/select targets/i).should("exist");
cy.findByText(/all hosts/i).click();
cy.findByText(/hosts targeted/i).should("exist"); // target count
cy.findByText(/host targeted/i).should("exist"); // target count
cy.findByText(/run/i).click();
cy.findByText(/querying selected hosts/i).should("exist"); // target count
});

View File

@ -240,7 +240,7 @@ describe(
cy.findByText(/run query/i).click({ force: true });
cy.findByText(/select targets/i).should("exist");
cy.findByText(/all hosts/i).click();
cy.findByText(/hosts targeted/i).should("exist"); // target count
cy.findByText(/host targeted/i).should("exist"); // target count
cy.findByText(/run/i).click();
cy.findByText(/querying selected hosts/i).should("exist"); // target count
});

View File

@ -348,7 +348,8 @@ const SelectTargets = ({
return (
<>
<span>{total}</span>&nbsp;hosts targeted&nbsp; ({onlinePercentage}
<span>{total}</span>&nbsp;host{total > 1 ? `s` : ``} targeted&nbsp; (
{onlinePercentage}
%&nbsp;
<TooltipWrapper
tipContent={`Hosts are online if they<br /> have recently checked <br />into Fleet.`}

View File

@ -12,6 +12,7 @@
&__element {
position: static;
display: inline; // treat like a span but allow other tags as children
white-space: nowrap;
}
&__underline {
position: absolute;

View File

@ -32,10 +32,6 @@ interface IQueryResultsProps {
const baseClass = "query-results";
const CSV_TITLE = "New Policy";
const PAGE_TITLES = {
RUNNING: "Querying selected hosts",
FINISHED: "Query finished",
};
const NAV_TITLES = {
RESULTS: "Results",
ERRORS: "Errors",
@ -56,6 +52,11 @@ const QueryResults = ({
const totalRowsCount = get(campaign, ["hosts_count", "successful"], 0);
const PAGE_TITLES = {
RUNNING: `Querying selected host${targetsTotalCount > 1 ? "s" : ""}`,
FINISHED: "Query finished",
};
const [pageTitle, setPageTitle] = useState(PAGE_TITLES.RUNNING);
const [navTabIndex, setNavTabIndex] = useState(0);
const [
@ -144,9 +145,9 @@ const QueryResults = ({
<p className="no-results-message">
Your live query returned no results.
<span>
Expecting to see results? Check to see if the hosts you targeted
reported &ldquo;Online&rdquo; or check out the &ldquo;Errors&rdquo;
table.
Expecting to see results? Check to see if the host
{`${targetsTotalCount > 1 ? "s" : ""}`} you targeted reported
&ldquo;Online&rdquo; or check out the &ldquo;Errors&rdquo; table.
</span>
</p>
);
@ -155,7 +156,7 @@ const QueryResults = ({
return (
<div className={`${baseClass}__results-table-container`}>
<InfoBanner>
Host that responded with results are marked <strong>Yes</strong>.
Hosts that responded with results are marked <strong>Yes</strong>.
Hosts that responded with no results are marked <strong>No</strong>.
</InfoBanner>
<div className={`${baseClass}__results-table-header`}>
@ -253,7 +254,8 @@ const QueryResults = ({
<div className={`${baseClass}__wrapper`}>
<h1>{pageTitle}</h1>
<div className={`${baseClass}__text-wrapper`}>
<span>{targetsTotalCount}</span>&nbsp;hosts targeted&nbsp; (
<span>{targetsTotalCount}</span>&nbsp;host
{`${targetsTotalCount > 1 ? "s" : ""}`} targeted&nbsp; (
{targetsRespondedPercent}%&nbsp;
<TooltipWrapper
tipContent={`

View File

@ -32,10 +32,6 @@ interface IQueryResultsProps {
const baseClass = "query-results";
const CSV_QUERY_TITLE = "Query Results";
const PAGE_TITLES = {
RUNNING: "Querying selected hosts",
FINISHED: "Query finished",
};
const NAV_TITLES = {
RESULTS: "Results",
ERRORS: "Errors",
@ -83,6 +79,11 @@ const QueryResults = ({
? Math.round((hostsCount.total / targetsTotalCount) * 100)
: 0;
const PAGE_TITLES = {
RUNNING: `Querying selected host${targetsTotalCount > 1 ? "s" : ""}`,
FINISHED: "Query finished",
};
const [pageTitle, setPageTitle] = useState(PAGE_TITLES.RUNNING);
const [navTabIndex, setNavTabIndex] = useState(0);
const [showQueryModal, setShowQueryModal] = useState(false);
@ -133,9 +134,9 @@ const QueryResults = ({
<p className="no-results-message">
Your live query returned no results.
<span>
Expecting to see results? Check to see if the hosts you targeted
reported &ldquo;Online&rdquo; or check out the &ldquo;Errors&rdquo;
table.
Expecting to see results? Check to see if the host
{`${targetsTotalCount > 1 ? "s" : ""}`} you targeted reported
&ldquo;Online&rdquo; or check out the &ldquo;Errors&rdquo; table.
</span>
</p>
);
@ -255,7 +256,8 @@ const QueryResults = ({
<div className={`${baseClass}__wrapper`}>
<h1>{pageTitle}</h1>
<div className={`${baseClass}__text-wrapper`}>
<span>{targetsTotalCount}</span>&nbsp;hosts targeted&nbsp; (
<span>{targetsTotalCount}</span>&nbsp;host
{`${targetsTotalCount > 1 ? "s" : ""}`} targeted&nbsp; (
{percentResponded}%&nbsp;
<TooltipWrapper
tipContent={`