-
- );
+ const emptyState = () => {
+ const emptyIntegrations: IEmptyTableProps = {
+ iconName: "empty-integrations",
+ header: "Set up integrations",
+ info:
+ "Create tickets automatically when Fleet detects new software vulnerabilities or hosts failing policies.",
+ additionalInfo: (
+ <>
+ Want to learn more?
+
-
-
-
- Set up integrations
-- Create tickets automatically when Fleet detects new - vulnerabilities. -
-
- Want to learn more?
-
Ticket Destinations
++ Add or edit integrations to create tickets when Fleet detects new + vulnerabilities. +
{loadingIntegrationsError ? (
-
- );
- }, [searchString, toggleAddUserModal]);
+ const emptyState = () => {
+ const emptyMembers: IEmptyTableProps = {
+ iconName: "empty-members",
+ header: "This team doesn't have any members yet.",
+ info:
+ "Expecting to see new team members listed here? Try again in a few seconds as the system catches up.",
+ };
+ if (searchString !== "") {
+ delete emptyMembers.iconName;
+ emptyMembers.header = "We couldn’t find any members.";
+ emptyMembers.info =
+ "Expecting to see members? Try again in a few seconds as the system catches up.";
+ } else if (isGlobalAdmin) {
+ emptyMembers.primaryButton = (
+
+ );
+ } else if (isTeamAdmin) {
+ emptyMembers.primaryButton = (
+
+ );
+ }
+ return emptyMembers;
+ };
const tableHeaders = generateTableHeaders(onActionSelection);
@@ -417,7 +410,14 @@ const MembersPage = ({
hideActionButton={memberIds.length === 0 && searchString === ""}
onQueryChange={({ searchQuery }) => setSearchString(searchQuery)}
inputPlaceHolder={"Search"}
- emptyComponent={NoMembersComponent}
+ emptyComponent={() =>
+ EmptyTable({
+ iconName: emptyState().iconName,
+ header: emptyState().header,
+ info: emptyState().info,
+ primaryButton: emptyState().primaryButton,
+ })
+ }
showMarkAllPages={false}
isAllPagesSelected={false}
searchable={memberIds.length > 0 || searchString !== ""}
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss
index 3316cc31c9..96e77ae4f7 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/_styles.scss
@@ -24,7 +24,7 @@
@media (min-width: $break-1400) {
.role__header {
- border-right: 1px solid $ui-fleet-blue-15;
+ border-right: 1px solid $ui-fleet-black-10;
}
}
}
@@ -45,75 +45,3 @@
}
}
}
-
-.no-members {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: $pad-xxxlarge;
-
- h1 {
- font-size: $large;
- font-weight: $regular;
- line-height: normal;
- letter-spacing: normal;
- color: $core-fleet-black;
- }
-
- h2 {
- font-size: $small;
- font-weight: $bold;
- margin: 0 0 $pad-large;
- line-height: 20px;
- color: $core-fleet-black;
- }
-
- ul {
- margin: 0;
- padding: 0;
- color: $core-fleet-black;
- list-style: none;
-
- li {
- &::before {
- content: "•";
- color: $core-vibrant-blue;
- margin-right: $pad-medium;
- }
- }
- }
-
- &__inner {
- display: flex;
- flex-direction: row;
-
- h1 {
- font-size: $small;
- font-weight: $bold;
- margin-bottom: $pad-medium;
- }
-
- img {
- width: 176px;
- margin-right: $pad-xlarge;
- }
-
- p {
- color: $core-fleet-black;
- font-weight: $regular;
- font-size: $x-small;
- margin: 0;
- margin-bottom: $pad-large;
- }
-
- .no-filter-results {
- display: flex;
- flex-direction: column;
- width: 350px;
- }
- }
-
- &__inner-text {
- width: 350px;
- }
-}
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/_styles.scss b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/_styles.scss
index 0592741577..762a32ab2e 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/_styles.scss
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AutocompleteDropdown/_styles.scss
@@ -1,6 +1,6 @@
.autocomplete-dropdown {
.Select {
- border: solid 1px $ui-fleet-blue-15;
+ border: solid 1px $ui-fleet-black-10;
border-radius: 4px;
&:hover,
diff --git a/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx b/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx
index bfc6eba35b..90da0f2cad 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx
+++ b/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx
@@ -1,4 +1,5 @@
import React, { useState, useCallback, useContext } from "react";
+import { IconNames } from "components/icons";
import { useQuery } from "react-query";
import { useErrorHandler } from "react-error-boundary";
@@ -6,6 +7,7 @@ import { NotificationContext } from "context/notification";
import { AppContext } from "context/app";
import { ITeam } from "interfaces/team";
import { IApiError } from "interfaces/errors";
+import { IEmptyTableProps } from "interfaces/empty_table";
import teamsAPI, {
ILoadTeamsResponse,
ITeamFormData,
@@ -14,6 +16,7 @@ import teamsAPI, {
import Button from "components/buttons/Button";
import TableContainer from "components/TableContainer";
import TableDataError from "components/DataError";
+import EmptyTable from "components/EmptyTable";
import CustomLink from "components/CustomLink";
import CreateTeamModal from "./components/CreateTeamModal";
@@ -197,35 +200,35 @@ const TeamManagementPage = (): JSX.Element => {
}
};
- const NoTeamsComponent = () => {
- return (
-
-
-
- {searchString === "" ? (
- <>
-
- This team doesn't have any members yet.
-- Expecting to see new team members listed here? Try again in a - few seconds as the system catches up. -
- {isGlobalAdmin && ( - - )} - {isTeamAdmin && ( - - )} - - ) : ( - <> -We couldn’t find any members.
-- Expecting to see members? Try again in a few seconds as the - system catches up. -
- - )} -
-
- );
+ const emptyState = () => {
+ const emptyTeams: IEmptyTableProps = {
+ iconName: "empty-teams",
+ header: "Set up team permissions",
+ info:
+ "Keep your organization organized and efficient by ensuring every user has the correct access to the right hosts.",
+ additionalInfo: (
+ <>
+ {" "}
+ Want to learn more?
+
-
-
-
- Set up team permissions
-- Keep your organization organized and efficient by ensuring every - user has the correct access to the right hosts. -
-
- Want to learn more?
-
-
- );
-};
-
-export default EmptyUsers;
diff --git a/frontend/pages/admin/UserManagementPage/components/EmptyUsers/_styles.scss b/frontend/pages/admin/UserManagementPage/components/EmptyUsers/_styles.scss
deleted file mode 100644
index abf7cc4a31..0000000000
--- a/frontend/pages/admin/UserManagementPage/components/EmptyUsers/_styles.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.empty-users {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: $pad-xxxlarge;
-
- &__inner {
- display: flex;
- flex-direction: row;
-
- h1 {
- font-size: $small;
- font-weight: $bold;
- margin-bottom: $pad-medium;
- }
-
- img {
- width: 176px;
- margin-right: $pad-xlarge;
- }
-
- p {
- color: $core-fleet-black;
- font-weight: $regular;
- font-size: $x-small;
- margin: 0;
- }
- }
-
- &__empty-filter-results {
- display: flex;
- flex-direction: column;
- width: 350px;
- }
-}
diff --git a/frontend/pages/admin/UserManagementPage/components/EmptyUsers/index.ts b/frontend/pages/admin/UserManagementPage/components/EmptyUsers/index.ts
deleted file mode 100644
index 28df7b7cca..0000000000
--- a/frontend/pages/admin/UserManagementPage/components/EmptyUsers/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./EmptyUsers";
diff --git a/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss b/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
index 9c99fe8ecf..0ce4d44c04 100644
--- a/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
+++ b/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
@@ -1,5 +1,5 @@
.selected-teams-form {
- border: 1px solid $ui-fleet-blue-15;
+ border: 1px solid $ui-fleet-black-10;
border-radius: $border-radius;
background-color: $ui-off-white;
padding: $pad-medium;
diff --git a/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx b/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx
index c294b0fc4a..374931eee6 100644
--- a/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx
+++ b/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx
@@ -16,11 +16,11 @@ import teamsAPI, { ILoadTeamsResponse } from "services/entities/teams";
import usersAPI from "services/entities/users";
import invitesAPI from "services/entities/invites";
+import { DEFAULT_CREATE_USER_ERRORS } from "utilities/constants";
import TableContainer, { ITableQueryData } from "components/TableContainer";
import TableDataError from "components/DataError";
import Modal from "components/Modal";
-import { DEFAULT_CREATE_USER_ERRORS } from "utilities/constants";
-import EmptyUsers from "../EmptyUsers";
+import EmptyTable from "components/EmptyTable";
import { generateTableHeaders, combineDataSets } from "./UsersTableConfig";
import DeleteUserModal from "../DeleteUserModal";
import ResetPasswordModal from "../ResetPasswordModal";
@@ -520,6 +520,12 @@ const UsersTable = ({ router }: IUsersTableProps): JSX.Element => {
tableData = combineUsersAndInvites(users, invites, currentUser?.id);
}
+ const emptyState = {
+ header: "No users match the current criteria.",
+ info:
+ "Expecting to see users? Try again in a few seconds as the system catches up.",
+ };
+
return (
<>
{/* TODO: find a way to move these controls into the table component */}
@@ -537,7 +543,7 @@ const UsersTable = ({ router }: IUsersTableProps): JSX.Element => {
onActionButtonClick={toggleCreateUserModal}
onQueryChange={onTableQueryChange}
resultsTitle={"users"}
- emptyComponent={EmptyUsers}
+ emptyComponent={() => EmptyTable(emptyState)}
searchable
showMarkAllPages={false}
isAllPagesSelected={false}
diff --git a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
index 5f41c73180..5dd007e54f 100644
--- a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
@@ -14,11 +14,11 @@ import LinkCell from "components/TableContainer/DataTable/LinkCell/LinkCell";
import StatusIndicator from "components/StatusIndicator";
import TextCell from "components/TableContainer/DataTable/TextCell/TextCell";
import TooltipWrapper from "components/TooltipWrapper";
+import HumanTimeDiffWithDateTip from "components/HumanTimeDiffWithDateTip";
import {
humanHostMemory,
humanHostLastRestart,
humanHostLastSeen,
- humanHostDetailUpdated,
hostTeamName,
} from "utilities/helpers";
import { IConfig } from "interfaces/config";
@@ -361,8 +361,8 @@ const allHostTableHeaders: IDataColumn[] = [
accessor: "detail_updated_at",
Cell: (cellProps: ICellProps) => (
-
-
-
- No users match the current criteria.
-- Expecting to see users? Try again in a few seconds as the system - catches up. -
-
-
- );
-};
-
-export default EmptyHosts;
diff --git a/frontend/pages/hosts/ManageHostsPage/components/EmptyHosts/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/EmptyHosts/_styles.scss
deleted file mode 100644
index a533a1b8f9..0000000000
--- a/frontend/pages/hosts/ManageHostsPage/components/EmptyHosts/_styles.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.empty-hosts {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: $pad-xxxlarge;
-
- &__inner {
- display: flex;
- flex-direction: row;
-
- h1 {
- font-size: $small;
- font-weight: $bold;
- margin-bottom: $pad-medium;
- }
-
- img {
- width: 176px;
- margin-right: $pad-xlarge;
- }
-
- p {
- color: $core-fleet-black;
- font-weight: $regular;
- font-size: $x-small;
- margin: 0;
- }
- }
-
- &__empty-filter-results {
- display: flex;
- flex-direction: column;
- width: 350px;
- }
-}
diff --git a/frontend/pages/hosts/ManageHostsPage/components/EmptyHosts/index.ts b/frontend/pages/hosts/ManageHostsPage/components/EmptyHosts/index.ts
deleted file mode 100644
index 5bbf093b04..0000000000
--- a/frontend/pages/hosts/ManageHostsPage/components/EmptyHosts/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./EmptyHosts";
diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
index 5c64c67658..16d3de610f 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
@@ -11,7 +11,7 @@
}
.label-filter-select__control {
- border: 1px solid $ui-fleet-blue-15;
+ border: 1px solid $ui-fleet-black-10;
background-color: $ui-light-grey;
border-radius: $border-radius;
height: 40px;
@@ -67,6 +67,7 @@
width: 300px;
margin-top: 0;
z-index: 2;
+ animation: fade-in 150ms ease-out;
}
.label-filter-select__menu-list {
diff --git a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/NoHosts.tsx b/frontend/pages/hosts/ManageHostsPage/components/NoHosts/NoHosts.tsx
deleted file mode 100644
index 690f7fc457..0000000000
--- a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/NoHosts.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Component when there is no hosts set up in fleet
- */
-import React from "react";
-import Button from "components/buttons/Button";
-
-import RoboDogImage from "../../../../../../assets/images/robo-dog-176x144@2x.png";
-
-interface INoHostsProps {
- toggleAddHostsModal: () => void;
- canEnrollHosts?: boolean;
- includesNameCardFilter?: boolean;
-}
-
-const baseClass = "no-hosts";
-
-const NoHosts = ({
- toggleAddHostsModal,
- canEnrollHosts,
- includesNameCardFilter,
-}: INoHostsProps): JSX.Element => {
- const renderContent = () => {
- if (includesNameCardFilter) {
- return (
-
-
-
-
- - {pageIndex !== 0 - ? "No more hosts to display" - : "No hosts match the current criteria"} -
-- Expecting to see {pageIndex !== 0 ? "more" : "new"} hosts? Try again - in a few seconds as the system catches up -
-
-
- );
- }
-
- if (canEnrollHosts) {
- return (
- No hosts match the current criteria
-- Expecting to see new hosts? Try again in a few seconds as the system - catches up. -
-
-
- );
- }
-
- return (
- Add your devices to Fleet
-Generate an installer to add your own devices.
-
-
-
-
-
- );
- };
-
- return (
- Devices will show up here once they’re added to Fleet.
-- Expecting to see devices? Try again in a few seconds as the system - catches up. -
-
-
- );
-};
-
-export default NoHosts;
diff --git a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/NoHosts/_styles.scss
deleted file mode 100644
index 332f763b91..0000000000
--- a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/_styles.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.no-hosts {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: $pad-xxxlarge;
-
- h1 {
- font-size: $large;
- font-weight: $regular;
- line-height: normal;
- letter-spacing: normal;
- color: $core-fleet-black;
- }
-
- h2 {
- font-size: $x-small;
- font-weight: $bold;
- margin: 0 0 $pad-large;
- line-height: 20px;
- color: $core-fleet-black;
- }
-
- ul {
- margin: 0;
- padding: 0;
- color: $core-fleet-black;
- list-style: none;
-
- li {
- &::before {
- content: "•";
- color: $core-vibrant-blue;
- margin-right: $pad-medium;
- }
- }
- }
-
- p {
- color: $core-fleet-black;
- font-weight: $regular;
- font-size: $x-small;
- margin: 0;
- }
-
- &__inner {
- display: flex;
- flex-direction: row;
-
- h1 {
- font-size: $small;
- font-weight: $bold;
- margin-bottom: $pad-medium;
- }
-
- img {
- width: 176px;
- margin-right: $pad-xlarge;
- }
-
- .no-filter-results {
- display: flex;
- flex-direction: column;
- width: 350px;
- }
- }
-
- .host-pagination__pager-wrap {
- margin-top: $pad-medium;
- }
-
- &__no-hosts-contact {
- text-align: left;
- margin-top: $pad-large;
- }
-
- &__no-hosts-button {
- margin-top: $pad-large;
- }
-}
diff --git a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/index.ts b/frontend/pages/hosts/ManageHostsPage/components/NoHosts/index.ts
deleted file mode 100644
index a02c59638c..0000000000
--- a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./NoHosts";
diff --git a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
index db025dc4e9..9a6c524f49 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
+++ b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
@@ -30,7 +30,7 @@
flex-direction: column;
background-color: $core-white;
border-radius: 16px;
- border: 1px solid $ui-fleet-blue-15;
+ border: 1px solid $ui-fleet-black-10;
padding: $pad-xxlarge;
box-shadow: 0px 3px 0px rgba(226, 228, 234, 0.4);
@@ -335,7 +335,7 @@
}
&__wrapper {
- border: solid 1px $ui-fleet-blue-15;
+ border: solid 1px $ui-fleet-black-10;
border-radius: 6px;
margin-top: $pad-small;
overflow: scroll;
diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
index b9932e3086..ddf55c0d61 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
@@ -682,9 +682,7 @@ const HostDetailsPage = ({
- {!includesNameCardFilter && 
}
- {renderContent()}
-
- About
@@ -151,16 +150,20 @@ const About = ({
Added to Fleet
- {wrapFleetHelper(humanHostEnrolled, aboutData.last_enrolled_at)}
+
Last restarted
- {humanHostLastRestart(
- aboutData.detail_updated_at,
- aboutData.uptime
- )}
+
diff --git a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
index 3e93a8ca5e..dd07c0623a 100644
--- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
+++ b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
@@ -5,11 +5,8 @@ import TooltipWrapper from "components/TooltipWrapper";
import Button from "components/buttons/Button";
import DiskSpaceGraph from "components/DiskSpaceGraph";
-import {
- humanHostMemory,
- humanHostDetailUpdated,
- wrapFleetHelper,
-} from "utilities/helpers";
+import HumanTimeDiffWithDateTip from "components/HumanTimeDiffWithDateTip";
+import { humanHostMemory, wrapFleetHelper } from "utilities/helpers";
import getHostStatusTooltipText from "pages/hosts/helpers";
import StatusIndicator from "components/StatusIndicator";
import IssueIcon from "../../../../../../assets/images/icon-issue-fleet-black-50-16x16@2x.png";
@@ -203,6 +200,12 @@ const HostSummary = ({
);
};
+ const lastFetched = titleData.detail_updated_at ? (
+
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/AddPolicyModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/AddPolicyModal.tsx
index 26fbf64047..c283f3e1be 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/AddPolicyModal.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/AddPolicyModal.tsx
@@ -76,11 +76,13 @@ const AddPolicyModal = ({
return (
@@ -211,10 +214,9 @@ const HostSummary = ({
)}
{deviceUser ? "My device" : titleData.display_name || "---"}
+- {`Last fetched ${humanHostDetailUpdated( - titleData.detail_updated_at - )}`} + {"Last fetched"} {lastFetched}
{renderRefetch()} diff --git a/frontend/pages/hosts/details/cards/Software/Software.tsx b/frontend/pages/hosts/details/cards/Software/Software.tsx index 6cfcba05e5..1e5a3dc390 100644 --- a/frontend/pages/hosts/details/cards/Software/Software.tsx +++ b/frontend/pages/hosts/details/cards/Software/Software.tsx @@ -31,7 +31,7 @@ interface ISoftwareTableProps { software: ISoftware[]; deviceUser?: boolean; deviceType?: string; - softwareInventoryEnabled?: boolean; + isSoftwareEnabled?: boolean; router?: InjectedRouter; } @@ -39,6 +39,7 @@ interface IRowProps extends Row { original: { id?: number; }; + isSoftwareEnabled?: boolean; } const SoftwareTable = ({ @@ -46,7 +47,7 @@ const SoftwareTable = ({ software, deviceUser, deviceType, - softwareInventoryEnabled, + isSoftwareEnabled, router, }: ISoftwareTableProps): JSX.Element => { const [searchString, setSearchString] = useState(""); @@ -109,15 +110,6 @@ const SoftwareTable = ({
-
- );
- }
-
return (
Software
-Software
diff --git a/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx b/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx index 2510700094..f56d93f973 100644 --- a/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx +++ b/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTable.tsx @@ -1,14 +1,15 @@ import React, { useCallback, useEffect, useState } from "react"; import { IPack } from "interfaces/pack"; +import { IEmptyTableProps } from "interfaces/empty_table"; import Button from "components/buttons/Button"; import TableContainer from "components/TableContainer"; +import EmptyTable from "components/EmptyTable"; import { IActionButtonProps } from "components/TableContainer/DataTable/ActionButton"; import { generateTableHeaders, generateDataSet } from "./PacksTableConfig"; const baseClass = "packs-table"; -const noPacksClass = "no-packs"; interface IPacksTableProps { onDeletePackClick: (selectedTablePackIds: number[]) => void; @@ -54,40 +55,32 @@ const PacksTable = ({ [setSearchString] ); - const NoPacksComponent = useCallback(() => { - return ( -
-
- );
- }, [searchString]);
+ // TODO: useCallback search string
+ const emptyState = () => {
+ const emptyPacks: IEmptyTableProps = {
+ iconName: "empty-packs",
+ header: "You don't have any packs",
+ info:
+ "Query packs allow you to schedule recurring queries for your hosts.",
+ primaryButton: (
+
+ ),
+ };
+ if (searchString) {
+ delete emptyPacks.iconName;
+ emptyPacks.header = "No packs match the current search criteria.";
+ emptyPacks.info =
+ "Expecting to see packs? Try again in a few seconds as the system catches up.";
+ delete emptyPacks.primaryButton;
+ }
+ return emptyPacks;
+ };
const tableHeaders = generateTableHeaders();
@@ -127,7 +120,14 @@ const PacksTable = ({
primarySelectActionButtonIcon="delete"
primarySelectActionButtonText={"Delete"}
secondarySelectActions={secondarySelectActions}
- emptyComponent={NoPacksComponent}
+ emptyComponent={() =>
+ EmptyTable({
+ iconName: emptyState().iconName,
+ header: emptyState().header,
+ info: emptyState().info,
+ primaryButton: emptyState().primaryButton,
+ })
+ }
/>
-
-
- {searchString ? (
- <>
-
- No packs match the current search criteria.
-- Expecting to see packs? Try again in a few seconds as the - system catches up. -
- - ) : ( - <> -You don't have any packs
-- Query packs allow you to schedule recurring queries for your - hosts. -
- - - )} -
-
-
- )}
+ {canAddOrDeletePolicy &&
+ ((!!teamId && !isFetchingTeamPolicies) ||
+ !isFetchingGlobalPolicies) && (
+
+
+
+ )}
+ Choose a policy template to get started or{" "}
+
+ .
+
{policiesAvailable}
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss
index c947eccb17..983d6cd1f4 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss
+++ b/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss
@@ -1,5 +1,16 @@
.add-policy-modal {
+ height: 80%;
+ overflow: hidden;
+ .modal__content {
+ height: 100%;
+ overflow: scroll;
+ margin-top: 0;
+ }
+ &__create-policy {
+ padding-top: 1.5rem;
+ }
&__policy-selection {
padding: $pad-large 0;
+ height: 100%;
}
}
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss
index b045cc780e..a557903296 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss
+++ b/frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss
@@ -5,7 +5,7 @@
code {
background-color: $ui-off-white;
color: $core-fleet-blue;
- border: 1px solid $ui-fleet-blue-15;
+ border: 1px solid $ui-fleet-black-10;
border-radius: 4px;
padding: 7px $pad-medium;
margin: $pad-large 0 0 44px;
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx
index 5a24f19ac9..7af7573f7e 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx
@@ -1,19 +1,20 @@
import React, { useContext } from "react";
+import { IconNames } from "components/icons";
import { AppContext } from "context/app";
import { noop } from "lodash";
import paths from "router/paths";
import { IPolicyStats } from "interfaces/policy";
import { ITeamSummary } from "interfaces/team";
+import { IEmptyTableProps } from "interfaces/empty_table";
import Button from "components/buttons/Button";
import Spinner from "components/Spinner";
import TableContainer from "components/TableContainer";
+import EmptyTable from "components/EmptyTable";
import { generateTableHeaders, generateDataSet } from "./PoliciesTableConfig";
-import policyImage from "../../../../../../assets/images/no-policy-323x138@2x.png";
const baseClass = "policies-table";
-const noPoliciesClass = "no-policies";
const TAGGED_TEMPLATES = {
hostsByTeamRoute: (teamId: number | undefined | null) => {
@@ -46,62 +47,52 @@ const PoliciesTable = ({
const { config } = useContext(AppContext);
- const NoPolicies = () => {
- return (
-
-
- );
+ const emptyState = () => {
+ const emptyPolicies: IEmptyTableProps = {
+ iconName: "empty-policies",
+ header: (
+ <>
+ Ask yes or no questions about{" "}
+ all your hosts
+
+ ),
+ info: (
+ <>
+ - Verify whether or not your hosts have security features turned on.
+
- 
-
-
-
- - - {currentTeam ? ( - <> - Ask yes or no questions about hosts assigned to{" "} - - {currentTeam.name} - - . - - ) : ( - <> - Ask yes or no questions about{" "} - all your hosts. - - )} - -
-
-
- {canAddOrDeletePolicy && (
-
- - Verify whether or not your hosts have security features turned
- on.
-
- Track your efforts to keep installed software up to date
- on your hosts.
-
- Provide owners with a list of hosts that still need
- changes.
-
-
-
- )}
- - Track your efforts to keep installed software up to date on + your hosts. +
- Provide owners with a list of hosts that still need changes. + + ), + }; + + if (currentTeam) { + emptyPolicies.header = ( + <> + Ask yes or no questions about hosts assigned to{" "} + + {currentTeam.name} + + + ); + } + if (canAddOrDeletePolicy) { + emptyPolicies.primaryButton = ( + + ); + } + + return emptyPolicies; }; return ( @@ -135,7 +126,15 @@ const PoliciesTable = ({ primarySelectActionButtonVariant="text-icon" primarySelectActionButtonIcon="delete" primarySelectActionButtonText={"Delete"} - emptyComponent={NoPolicies} + emptyComponent={() => + EmptyTable({ + iconName: emptyState().iconName, + header: emptyState().header, + info: emptyState().info, + additionalInfo: emptyState().additionalInfo, + primaryButton: emptyState().primaryButton, + }) + } onQueryChange={noop} disableCount={tableType === "inheritedPolicies"} isClientSidePagination diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/_styles.scss index 911c4c78a1..927e2f5fe9 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/_styles.scss +++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/_styles.scss @@ -20,12 +20,6 @@ } } - &__empty-table { - text-align: center; - font-size: $x-small; - color: $core-fleet-black; - } - &__action-button-container { display: flex; justify-content: center; @@ -36,63 +30,6 @@ width: 20px; } -.no-policies { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - padding-top: $pad-xxxlarge; - - h1 { - font-size: $large; - font-weight: $regular; - line-height: normal; - letter-spacing: normal; - color: $core-fleet-black; - } - - h2 { - font-size: $small; - font-weight: $bold; - margin: 0 0 $pad-large; - line-height: 20px; - color: $core-fleet-black; - } - - &__inner { - display: flex; - flex-direction: column; - align-items: center; - - h1 { - font-size: $small; - font-weight: $bold; - margin-bottom: $pad-medium; - } - - img { - width: 322px; - } - - p { - color: $core-fleet-black; - font-weight: $regular; - font-size: $x-small; - margin: 0; - margin-bottom: $pad-large; - } - } - - &__inner-text { - width: 500px; - padding: $pad-xxlarge 0; - } - - &__bullet-text { - text-align: center; - } -} - .no-team-policy { border: 1px solid #e2e4ea; box-sizing: border-box; diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/_styles.scss b/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/_styles.scss index 1703f16186..4e110ad1dd 100644 --- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/_styles.scss +++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/_styles.scss @@ -2,7 +2,7 @@ border-collapse: collapse; &__wrapper { - border: 1px solid $ui-fleet-blue-15; + border: 1px solid $ui-fleet-black-10; border-radius: 4px; overflow: hidden; margin-top: $pad-medium; @@ -14,7 +14,7 @@ thead { background-color: $ui-off-white; - border-bottom: 1px solid $ui-fleet-blue-15; + border-bottom: 1px solid $ui-fleet-black-10; th { font-size: $x-small; diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/_styles.scss b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/_styles.scss index 55f3864ac7..d0d5d05d28 100644 --- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/_styles.scss +++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/_styles.scss @@ -2,7 +2,7 @@ border-collapse: collapse; &__wrapper { - border: 1px solid $ui-fleet-blue-15; + border: 1px solid $ui-fleet-black-10; border-radius: 4px; overflow: hidden; margin-top: $pad-medium; @@ -18,7 +18,7 @@ thead { background-color: $ui-off-white; - border-bottom: 1px solid $ui-fleet-blue-15; + border-bottom: 1px solid $ui-fleet-black-10; th { font-size: $x-small; diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss index 8e03ff69e6..90528ea3bf 100644 --- a/frontend/pages/queries/ManageQueriesPage/_styles.scss +++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss @@ -174,82 +174,6 @@ } } } - - &__empty-table { - text-align: center; - font-size: $x-small; - color: $core-fleet-black; - } - } - - .no-queries { - display: flex; - flex-direction: column; - align-items: center; - padding-top: $pad-xxxlarge; - - h1 { - font-size: $large; - font-weight: $regular; - line-height: normal; - letter-spacing: normal; - color: $core-fleet-black; - } - - h2 { - font-size: $small; - font-weight: $bold; - margin: 0 0 $pad-large; - line-height: 20px; - color: $core-fleet-black; - } - - ul { - margin: 0; - padding: 0; - color: $core-fleet-black; - list-style: none; - - li { - &::before { - content: "•"; - color: $core-vibrant-blue; - margin-right: $pad-medium; - } - } - } - - &__inner-text { - h1 { - font-size: $small; - font-weight: $bold; - margin-bottom: $pad-medium; - } - - p { - color: $core-fleet-black; - font-weight: $regular; - font-size: $x-small; - margin: 0; - margin-bottom: $pad-small; - - &:last-of-type { - margin-bottom: $pad-large; - } - } - - .no-filter-results { - display: flex; - flex-direction: column; - width: 350px; - } - } - - &__none-created { - display: flex; - flex-direction: column; - align-items: center; - } } } } diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx index 9af20f3c52..125d2f76b4 100644 --- a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx +++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx @@ -1,18 +1,20 @@ /* eslint-disable react/prop-types */ -import React, { useCallback, useContext, useState } from "react"; +import React, { useContext, useState } from "react"; import { AppContext } from "context/app"; import { IQuery } from "interfaces/query"; +import { IEmptyTableProps } from "interfaces/empty_table"; import { ITableQueryData } from "components/TableContainer/TableContainer"; import Button from "components/buttons/Button"; import TableContainer from "components/TableContainer"; import CustomLink from "components/CustomLink"; - +import EmptyTable from "components/EmptyTable"; +import Icon from "components/Icon"; import generateTableHeaders from "./QueriesTableConfig"; const baseClass = "queries-table"; -const noQueriesClass = "no-queries"; + interface IQueryTableData extends IQuery { performance: string; platforms: string[]; @@ -43,63 +45,47 @@ const QueriesTable = ({ setSearchString(searchQuery); }; - const NoQueriesComponent = useCallback(() => { - return ( -
-
- );
- }, [searchString, onCreateQueryClick]);
+ const emptyState = () => {
+ const emptyQueries: IEmptyTableProps = {
+ iconName: "empty-queries",
+ header: "You don't have any queries",
+ info: "A query is a specific question you can ask about your devices.",
+ };
+ if (searchString) {
+ delete emptyQueries.iconName;
+ emptyQueries.header = "No queries match the current search criteria.";
+ emptyQueries.info =
+ "Expecting to see queries? Try again in a few seconds as the system catches up.";
+ } else if (!isOnlyObserver) {
+ emptyQueries.additionalInfo = (
+ <>
+ Create a new query, or{" "}
+
-
-
- {searchString ? (
-
-
-
- ) : (
- No queries match the current search criteria.
-- Expecting to see queries? Try again in a few seconds as the - system catches up. -
-
-
- )}
- You don't have any queries.
-- A query is a specific question you can ask about your devices. -
- {!isOnlyObserver && ( - <> -
- Create a new query, or{" "}
-
-
- );
- }
+ const searchable = !(queriesList?.length === 0 && searchString === "");
+ console.log("queriesList", queriesList);
return tableHeaders && !isLoading ? (
Schedule queries for{" "} - all hosts assigned to this team. + all hosts assigned to this team
) : (Schedule queries to run at regular intervals across{" "} - all of your hosts. + all of your hosts
)}
-
- );
+ const emptyState = () => {
+ const emptySchedule: IEmptyTableProps = {
+ iconName: "empty-schedule",
+ header: (
+ <>
+ Schedule queries to run at regular intervals on{" "}
+ all your hosts
+
+ ),
+ additionalInfo: (
+ <>
+ Want to learn more?
+
- 
-
-
-
-
-
- {selectedTeamData ? (
- <>
- Schedule queries for all hosts assigned to{" "}
-
- {selectedTeamData.name}
-
-
- ) : (
- <>
- Schedule queries to run at regular intervals on{" "}
- all your hosts
-
- )}
-
- {isOnGlobalTeam ? (
- <>
- ,
-
or go to your osquery packs via the ‘Advanced’ button.{" "}
-
- ) : (
- <>
- .
-
- )}
-
-
- {isOnGlobalTeam && (
-
- )}
-
-