-
- );
- }
-}
-
-export default SoftwareVulnerabilities;
diff --git a/frontend/pages/hosts/HostDetailsPage/_styles.scss b/frontend/pages/hosts/HostDetailsPage/_styles.scss
index d60dfa3c83..7092ce441d 100644
--- a/frontend/pages/hosts/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/HostDetailsPage/_styles.scss
@@ -380,11 +380,10 @@
width: 16px;
padding-right: 0px;
}
- // TODO: Enable for link to filtered hosts page after manage hosts page has been updated to filter hosts by software id
- // &:last-child {
- // width: 90px;
- // padding: 0px;
- // }
+ &:last-child {
+ width: 90px;
+ padding: 0px;
+ }
}
tr {
td {
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
index 0f1fd97d82..9a8f047da4 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
@@ -1,9 +1,10 @@
-import React, { useState, useContext, useEffect } from "react";
+import React, { useState, useContext } from "react";
import { useDispatch } from "react-redux";
import { useQuery } from "react-query";
import { InjectedRouter, Params } from "react-router/lib/Router";
import { RouteProps } from "react-router/lib/Route";
-import { find, isEmpty, isEqual, memoize, omit } from "lodash";
+import { find, isEmpty, isEqual, omit } from "lodash";
+import ReactTooltip from "react-tooltip";
import labelsAPI from "services/entities/labels";
import statusLabelsAPI from "services/entities/statusLabels";
@@ -26,6 +27,7 @@ import { IStatusLabels } from "interfaces/status_labels";
import { ITeam } from "interfaces/team";
import { IHost } from "interfaces/host";
import { IPolicy } from "interfaces/policy";
+import { ISoftware } from "interfaces/software";
import { useDeepEffect } from "utilities/hooks"; // @ts-ignore
import deepDifference from "utilities/deep_difference";
import {
@@ -69,6 +71,7 @@ import PoliciesFilter from "./components/PoliciesFilter"; // @ts-ignore
import EditColumnsModal from "./components/EditColumnsModal/EditColumnsModal";
import TransferHostModal from "./components/TransferHostModal";
import DeleteHostModal from "./components/DeleteHostModal";
+import SoftwareVulnerabilities from "./components/SoftwareVulnerabilities";
import GenerateInstallerModal from "./components/GenerateInstallerModal";
import EditColumnsIcon from "../../../../assets/images/icon-edit-columns-16x16@2x.png";
import PencilIcon from "../../../../assets/images/icon-pencil-14x14@2x.png";
@@ -187,6 +190,9 @@ const ManageHostsPage = ({
const [hasHostCountErrors, setHasHostCountErrors] = useState
-
-
- {renderVulsCount(vulsList)}
-
-
-
- - {vulsList.map((vul, index) => renderVul(vul, index))}
+
+
+ );
+ }
+ return null;
+ };
+
const renderEditColumnsModal = () => {
if (!showEditColumnsModal || !config || !currentUser) {
return null;
@@ -1012,33 +1094,39 @@ const ManageHostsPage = ({
);
};
- const renderHeaderLabelBlock = ({
- description,
- display_text: displayText,
- label_type: labelType,
- }: ILabel) => {
- displayText = PLATFORM_LABEL_DISPLAY_NAMES[displayText] || displayText;
+ const renderHeaderLabelBlock = () => {
+ if (selectedLabel) {
+ const {
+ description,
+ display_text: displayText,
+ label_type: labelType,
+ } = selectedLabel;
- return (
-
-
- {renderLabelOrPolicyBlock()}
+ {renderActiveFilterBlock()}
+ {renderSoftwareVulnerabilities()}
{config && (!isPremiumTier || teams) && renderTable(selectedTeam)}
)}
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index 64981c1093..8dd1f683f9 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@@ -241,7 +241,7 @@
}
}
- &__labels-policies-wrap {
+ &__labels-active-filter-wrap {
margin-bottom: $pad-medium;
}
@@ -260,4 +260,19 @@
padding: $pad-small;
margin-right: $pad-small;
}
+
+ &__software-filter-block {
+ .button--small-text-icon {
+ margin-left: 0;
+ padding-left: 12px;
+ }
+ .software-filter-button {
+ display: inline-flex;
+ align-items: center;
+ }
+ .software-filter-tooltip {
+ display: inline-flex;
+ align-items: center;
+ }
+ }
}
diff --git a/frontend/pages/hosts/ManageHostsPage/components/SoftwareVulnerabilities/SoftwareVulnerabilities.tsx b/frontend/pages/hosts/ManageHostsPage/components/SoftwareVulnerabilities/SoftwareVulnerabilities.tsx
new file mode 100644
index 0000000000..e5bd805bc7
--- /dev/null
+++ b/frontend/pages/hosts/ManageHostsPage/components/SoftwareVulnerabilities/SoftwareVulnerabilities.tsx
@@ -0,0 +1,70 @@
+/* eslint-disable react/prop-types */
+import React, { useState } from "react";
+
+import { ISoftware } from "interfaces/software";
+
+import CloseIcon from "../../../../../../assets/images/icon-close-fleet-black-16x16@2x.png";
+import ExternalLinkIcon from "../../../../../../assets/images/open-new-tab-12x12@2x.png";
+import IssueIcon from "../../../../../../assets/images/icon-issue-fleet-black-50-16x16@2x.png";
+
+interface ISoftwareVulnerabilitiesProps {
+ software: ISoftware;
+}
+
+const baseClass = "software-vulnerabilities";
+
+const SoftwareVulnerabilities = ({
+ software,
+}: ISoftwareVulnerabilitiesProps): JSX.Element | null => {
+ const { name, version, vulnerabilities } = software;
+ const count = vulnerabilities?.length;
+
+ const [showVulnerabilities, setShowVulnerablities] = useState
- {displayText}
- {labelType !== "builtin" && !isOnlyObserver && (
- <>
-
-
-
- )}
+ return (
+
- );
+ );
+ }
+
+ return null;
};
const renderHeader = () => {
@@ -1051,24 +1139,36 @@ const ManageHostsPage = ({
);
};
- const renderLabelOrPolicyBlock = () => {
- const type = selectedLabel?.type;
-
- if (policyId || selectedLabel) {
+ const renderActiveFilterBlock = () => {
+ const showSelectedLabel =
+ selectedLabel &&
+ selectedLabel.type !== "all" &&
+ selectedLabel.type !== "status";
+ if (policyId || softwareId || showSelectedLabel) {
return (
-
+
-
+
+ {PLATFORM_LABEL_DISPLAY_NAMES[displayText] || displayText}
+
+ {labelType !== "builtin" && !isOnlyObserver && (
+ <>
+
+
+
+ )}
+
+
+ {description}
+
- {description}
-
-
- {policyId && renderPoliciesFilterBlock()}
- {!policyId &&
- type !== "all" &&
- type !== "status" &&
- selectedLabel &&
- renderHeaderLabelBlock(selectedLabel)}
+
+ {showSelectedLabel && renderHeaderLabelBlock()}
+ {!!policyId &&
+ !softwareId &&
+ !showSelectedLabel &&
+ renderPoliciesFilterBlock()}
+ {!!softwareId &&
+ !policyId &&
+ !showSelectedLabel &&
+ renderSoftwareFilterBlock()}
);
}
return null;
};
+ const renderSoftwareVulnerabilities = () => {
+ if (softwareDetails) {
+ return
+
+ );
+ }
+
+ return null;
+};
+export default SoftwareVulnerabilities;
diff --git a/frontend/pages/hosts/ManageHostsPage/components/SoftwareVulnerabilities/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/SoftwareVulnerabilities/_styles.scss
new file mode 100644
index 0000000000..e36d4ffb69
--- /dev/null
+++ b/frontend/pages/hosts/ManageHostsPage/components/SoftwareVulnerabilities/_styles.scss
@@ -0,0 +1,82 @@
+.software-vulnerabilities {
+ font-size: $x-small;
+ background-color: $ui-off-white;
+ border: solid 1px $ui-fleet-black-50;
+ box-sizing: border-box;
+ border-radius: 10px;
+ overflow: auto;
+ margin-bottom: $pad-large;
+ padding: $pad-large;
+ padding-bottom: $pad-small;
+
+ p {
+ padding-left: $pad-large;
+ }
+
+ a {
+ color: $core-vibrant-blue;
+ font-weight: $bold;
+ text-decoration: none;
+ }
+
+ img {
+ height: 16px;
+ width: auto;
+ padding-right: 10px;
+ }
+
+ &__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ img {
+ display: inline-flex;
+ }
+ }
+
+ &__count {
+ display: flex;
+ align-content: center;
+ align-items: center;
+ font-size: $small;
+ font-weight: $bold;
+ }
+
+ &__ex {
+ text-decoration: none;
+
+ button {
+ display: inline-flex;
+ align-items: center;
+ }
+
+ img {
+ padding-right: 0;
+ }
+ }
+
+ &__list {
+ b {
+ color: $core-vibrant-blue;
+ }
+ img {
+ height: 12px;
+ width: auto;
+ padding-left: $pad-small;
+ }
+ ul {
+ margin-top: 16px;
+ margin-bottom: 16px;
+ }
+ li {
+ margin-bottom: $pad-small;
+ }
+ }
+
+ a {
+ img {
+ height: 12px;
+ width: auto;
+ }
+ }
+}
diff --git a/frontend/pages/hosts/HostDetailsPage/SoftwareVulnerabilities/index.js b/frontend/pages/hosts/ManageHostsPage/components/SoftwareVulnerabilities/index.ts
similarity index 100%
rename from frontend/pages/hosts/HostDetailsPage/SoftwareVulnerabilities/index.js
rename to frontend/pages/hosts/ManageHostsPage/components/SoftwareVulnerabilities/index.ts
diff --git a/frontend/services/entities/host_count.ts b/frontend/services/entities/host_count.ts
index ab80a8e333..78217c9a46 100644
--- a/frontend/services/entities/host_count.ts
+++ b/frontend/services/entities/host_count.ts
@@ -16,6 +16,7 @@ export interface IHostCountLoadOptions {
teamId?: number;
policyId?: number;
policyResponse?: string;
+ softwareId?: number;
}
export default {
@@ -27,6 +28,7 @@ export default {
const policyId = options?.policyId || null;
const policyResponse = options?.policyResponse || null;
const selectedLabels = options?.selectedLabels || [];
+ const softwareId = options?.softwareId || null;
const labelPrefix = "labels/";
@@ -65,6 +67,11 @@ export default {
queryString += `&policy_response=${policyResponse || "passing"}`; // TODO confirm whether there should be a default if there is an id but no response specified
}
+ // TODO: consider how to check for mutually exclusive scenarios with label, policy and software
+ if (!label && !policyId && softwareId) {
+ queryString += `&software_id=${softwareId}`;
+ }
+
// Append query string to endpoint route after slicing off the leading ampersand
const path = `${HOSTS_COUNT}${queryString && `?${queryString.slice(1)}`}`;
diff --git a/frontend/services/entities/hosts.ts b/frontend/services/entities/hosts.ts
index 11edaca9c4..cc6919a218 100644
--- a/frontend/services/entities/hosts.ts
+++ b/frontend/services/entities/hosts.ts
@@ -17,6 +17,7 @@ export interface IHostLoadOptions {
teamId?: number;
policyId?: number;
policyResponse?: string;
+ softwareId?: number;
}
export default {
@@ -69,6 +70,7 @@ export default {
const teamId = options?.teamId || null;
const policyId = options?.policyId || null;
const policyResponse = options?.policyResponse || null;
+ const softwareId = options?.softwareId || null;
// TODO: add this query param logic to client class
const pagination = `page=${page}&per_page=${perPage}`;
@@ -120,7 +122,11 @@ export default {
if (!label && policyId) {
path += `&policy_id=${policyId}`;
- path += `&policy_response=${policyResponse || "passing"}`; // TODO confirm whether there should be a default if there is an id but no response sepcified
+ path += `&policy_response=${policyResponse || "passing"}`; // TODO: confirm whether there should be a default if there is an id but no response sepcified
+ }
+ // TODO: consider how to check for mutually exclusive scenarios with label, policy and software
+ if (!label && !policyId && softwareId) {
+ path += `&software_id=${softwareId}`;
}
return sendRequest("GET", path);
+
+
+ 
+ {`${
+ count === 1 ? "1 vulnerability" : `${count} vulnerabilities`
+ } detected ${name && version ? `for ${name}, ${version}` : ""}`}
+
+
+
+
+
+
+ -
+ {vulnerabilities?.map((v) => {
+ return (
+
-
+ Read more about {v.cve} vulnerability
+
+
+ +
+ );
+ })}
+