- void;
+ onClickRow?: (value: any) => void;
onResultsCountChange?: (value: number) => void;
renderFooter?: () => JSX.Element | null;
renderPagination?: () => JSX.Element | null;
@@ -96,6 +97,7 @@ const DataTable = ({
searchQueryColumn,
selectedDropdownFilter,
onSelectSingleRow,
+ onClickRow,
onResultsCountChange,
renderFooter,
renderPagination,
@@ -313,7 +315,7 @@ const DataTable = ({
toggleAllPagesSelected(false);
}, [toggleAllPagesSelected, toggleAllRowsSelected]);
- const onSingleRowClick = useCallback(
+ const onSelectRowClick = useCallback(
(row) => {
if (disableMultiRowSelect) {
row.toggleRowSelected();
@@ -524,9 +526,10 @@ const DataTable = ({
{...row.getRowProps({
// @ts-ignore // TS complains about prop not existing
onClick: () => {
- onSingleRowClick &&
+ (onSelectRowClick &&
disableMultiRowSelect &&
- onSingleRowClick(row);
+ onSelectRowClick(row)) ||
+ (onClickRow && onClickRow(row));
},
})}
>
diff --git a/frontend/components/TableContainer/DataTable/DefaultColumnFilter/_styles.scss b/frontend/components/TableContainer/DataTable/DefaultColumnFilter/_styles.scss
index 8e5dc98895..da8bd59501 100644
--- a/frontend/components/TableContainer/DataTable/DefaultColumnFilter/_styles.scss
+++ b/frontend/components/TableContainer/DataTable/DefaultColumnFilter/_styles.scss
@@ -1,4 +1,8 @@
.filter-cell {
+ .input-icon-field__input-wrapper {
+ margin-top: $pad-xsmall;
+ }
+
input {
height: 40px;
width: 100%;
@@ -8,7 +12,6 @@
border-radius: 4px;
padding: 4px;
padding-left: 32px;
- margin-top: $pad-xsmall;
}
.search-field__input-wrapper {
@@ -18,9 +21,6 @@
}
.icon {
- left: 10px;
- top: 17px;
-
path {
fill: $ui-fleet-black-33; // Override input icon color
}
diff --git a/frontend/components/TableContainer/DataTable/HostMdmStatusCell/HostMdmStatusCell.tsx b/frontend/components/TableContainer/DataTable/HostMdmStatusCell/HostMdmStatusCell.tsx
new file mode 100644
index 0000000000..36917063a2
--- /dev/null
+++ b/frontend/components/TableContainer/DataTable/HostMdmStatusCell/HostMdmStatusCell.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import ReactTooltip from "react-tooltip";
+import { COLORS } from "styles/var/colors";
+import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
+import Icon from "components/Icon";
+import NotSupported from "components/NotSupported";
+import { IHost } from "interfaces/host";
+
+const baseClass = "host-mdm-status-cell";
+
+const HostMdmStatusCell = ({
+ row: {
+ original: { id, mdm, platform },
+ },
+ cell: { value },
+}: {
+ row: { original: IHost };
+ cell: { value: string };
+}): JSX.Element => {
+ if (platform === "chrome") {
+ return NotSupported;
+ }
+
+ if (!value) {
+ return {DEFAULT_EMPTY_CELL_VALUE};
+ }
+
+ return (
+
+ {value}
+ {mdm?.dep_profile_error && (
+ <>
+
+
+
+ Fleet hit Appleās API rate limit when preparing the macOS Setup
+ Assistant for this host. Fleet will try again every hour.
+
+
+
+ )}
+
+ );
+};
+
+export default HostMdmStatusCell;
diff --git a/frontend/components/TableContainer/DataTable/HostMdmStatusCell/_styles.scss b/frontend/components/TableContainer/DataTable/HostMdmStatusCell/_styles.scss
new file mode 100644
index 0000000000..fdb976ae47
--- /dev/null
+++ b/frontend/components/TableContainer/DataTable/HostMdmStatusCell/_styles.scss
@@ -0,0 +1,10 @@
+.host-mdm-status-cell {
+ display: inline-flex;
+ flex-direction: row;
+ text-wrap: nowrap;
+ gap: $pad-small;
+
+ .tooltip__tooltip-text {
+ text-wrap: wrap;
+ }
+}
diff --git a/frontend/components/TableContainer/DataTable/HostMdmStatusCell/index.ts b/frontend/components/TableContainer/DataTable/HostMdmStatusCell/index.ts
new file mode 100644
index 0000000000..c5943e3fa4
--- /dev/null
+++ b/frontend/components/TableContainer/DataTable/HostMdmStatusCell/index.ts
@@ -0,0 +1 @@
+export { default } from "./HostMdmStatusCell";
diff --git a/frontend/components/TableContainer/DataTable/InternalLinkCell/InternalLinkCell.tsx b/frontend/components/TableContainer/DataTable/InternalLinkCell/InternalLinkCell.tsx
new file mode 100644
index 0000000000..f4c3601742
--- /dev/null
+++ b/frontend/components/TableContainer/DataTable/InternalLinkCell/InternalLinkCell.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import classnames from "classnames";
+import { noop } from "lodash";
+
+import Icon from "components/Icon";
+
+const baseClass = "internal-link-cell";
+
+interface IInternalLinkCellProps {
+ value: string;
+ onClick?: () => void;
+ className?: string;
+}
+
+/** This cell is used when you want a clickable cell value that does not link
+ * to an url. This can be used when you'd like to trigger an action when the
+ * cell is clicked such as opening a modal.
+ *
+ * TODO: can we find a way to combine this with LinkCell. Would we want to do that?
+ * Also we can improve naming of this component.
+ */
+const InternalLinkCell = ({
+ value,
+ onClick = noop,
+ className,
+}: IInternalLinkCellProps) => {
+ const classNames = classnames(baseClass, className);
+
+ return (
+ {
columnConfigs: any; // TODO: Figure out type
data: any; // TODO: Figure out type
isLoading: boolean;
@@ -87,7 +87,13 @@ interface ITableContainerProps {
customControl?: () => JSX.Element;
stackControls?: boolean;
onSelectSingleRow?: (value: Row | IRowProps) => void;
- /** Use for clientside filtering: Use key global for filtering on any column, or use column id as key */
+ /** This is called when you click on a row. This was added as `onSelectSingleRow`
+ * only work if `disableMultiRowSelect` is also set to `true`. TODO: figure out
+ * if we want to keep this
+ */
+ onClickRow?: (row: T) => void;
+ /** Use for clientside filtering: Use key global for filtering on any column, or use column id as
+ * key */
filters?: Record;
renderCount?: () => JSX.Element | null;
renderFooter?: () => JSX.Element | null;
@@ -101,7 +107,7 @@ const baseClass = "table-container";
const DEFAULT_PAGE_SIZE = 20;
const DEFAULT_PAGE_INDEX = 0;
-const TableContainer = ({
+const TableContainer = ({
columnConfigs,
data,
filters,
@@ -144,12 +150,13 @@ const TableContainer = ({
customControl,
stackControls,
onSelectSingleRow,
+ onClickRow,
renderCount,
renderFooter,
setExportRows,
resetPageIndex,
disableTableHeader,
-}: ITableContainerProps): JSX.Element => {
+}: ITableContainerProps) => {
const [searchQuery, setSearchQuery] = useState(defaultSearchQuery);
const [sortHeader, setSortHeader] = useState(defaultSortHeader || "");
const [sortDirection, setSortDirection] = useState(
@@ -437,6 +444,7 @@ const TableContainer = ({
primarySelectAction={primarySelectAction}
secondarySelectActions={secondarySelectActions}
onSelectSingleRow={onSelectSingleRow}
+ onClickRow={onClickRow}
onResultsCountChange={onResultsCountChange}
isClientSidePagination={isClientSidePagination}
onClientSidePaginationChange={onClientSidePaginationChange}
diff --git a/frontend/components/forms/fields/AutoSizeInputField/AutoSizeInputField.stories.tsx b/frontend/components/forms/fields/AutoSizeInputField/AutoSizeInputField.stories.tsx
index 71f696e5f0..cea0e18abf 100644
--- a/frontend/components/forms/fields/AutoSizeInputField/AutoSizeInputField.stories.tsx
+++ b/frontend/components/forms/fields/AutoSizeInputField/AutoSizeInputField.stories.tsx
@@ -11,7 +11,7 @@ interface IAutoSizeInputFieldProps {
placeholder: string;
value: string;
inputClassName?: string;
- maxLength: string;
+ maxLength: number;
hasError?: boolean;
isDisabled?: boolean;
isFocused?: boolean;
@@ -36,7 +36,7 @@ export default {
placeholder: "Type here...",
type: "",
value: "",
- maxLength: "250",
+ maxLength: 250,
onFocus: noop,
onChange: noop,
onKeyPress: noop,
diff --git a/frontend/components/forms/fields/AutoSizeInputField/AutoSizeInputField.tsx b/frontend/components/forms/fields/AutoSizeInputField/AutoSizeInputField.tsx
index 484e02bac4..30c97c68d5 100644
--- a/frontend/components/forms/fields/AutoSizeInputField/AutoSizeInputField.tsx
+++ b/frontend/components/forms/fields/AutoSizeInputField/AutoSizeInputField.tsx
@@ -12,12 +12,12 @@ interface IAutoSizeInputFieldProps {
placeholder: string;
value: string;
inputClassName?: string;
- maxLength: string;
+ maxLength: number;
hasError?: boolean;
isDisabled?: boolean;
isFocused?: boolean;
- onFocus: () => void;
- onBlur: () => void;
+ onFocus?: () => void;
+ onBlur?: () => void;
onChange: (newSelectedValue: string) => void;
onKeyPress: (event: KeyboardEvent) => void;
}
@@ -33,8 +33,8 @@ const AutoSizeInputField = ({
hasError,
isDisabled,
isFocused,
- onFocus,
- onBlur,
+ onFocus = () => null,
+ onBlur = () => null,
onChange,
onKeyPress,
}: IAutoSizeInputFieldProps): JSX.Element => {
@@ -44,6 +44,7 @@ const AutoSizeInputField = ({
[`${baseClass}--disabled`]: isDisabled,
[`${baseClass}--error`]: hasError,
[`${baseClass}__textarea`]: true,
+ "no-value": !inputValue,
});
const inputElement = useRef(null);
@@ -87,11 +88,10 @@ const AutoSizeInputField = ({
onChange={onInputChange}
placeholder={placeholder}
value={inputValue}
- maxLength={parseInt(maxLength, 10)}
+ maxLength={maxLength}
className={inputClasses}
cols={value ? value.length : placeholder.length - 2}
rows={1}
- tabIndex={0}
onFocus={onInputFocus}
onBlur={onInputBlur}
onKeyPress={onInputKeyPress}
diff --git a/frontend/components/forms/fields/AutoSizeInputField/_styles.scss b/frontend/components/forms/fields/AutoSizeInputField/_styles.scss
index b12b9ffe16..f3a89f82da 100644
--- a/frontend/components/forms/fields/AutoSizeInputField/_styles.scss
+++ b/frontend/components/forms/fields/AutoSizeInputField/_styles.scss
@@ -3,7 +3,7 @@
color: $core-fleet-black;
&::placeholder {
- color: $ui-fleet-black-50;
+ @include placeholder;
}
&:focus {
@@ -20,7 +20,9 @@
&::after,
input,
textarea {
+ white-space: pre-wrap;
width: auto;
+ max-width: 100%;
grid-area: 1 / 2;
resize: none;
background: none;
diff --git a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
index 446ede2123..0b68a19764 100644
--- a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
+++ b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
@@ -114,25 +114,27 @@ class InputFieldWithIcon extends InputField {
return (
& {
+ type: IHostPastActivityType;
+};
+
export interface IActivityDetails {
pack_id?: number;
pack_name?: string;
diff --git a/frontend/interfaces/host.ts b/frontend/interfaces/host.ts
index 8df2467664..4465dd3ad1 100644
--- a/frontend/interfaces/host.ts
+++ b/frontend/interfaces/host.ts
@@ -157,12 +157,13 @@ interface IMdmMacOsSetup {
bootstrap_package_name: string;
}
-export type HostMdmDeviceStatus = "unlocked" | "locked";
-export type HostMdmPendingAction = "unlock" | "lock" | "";
+export type HostMdmDeviceStatus = "unlocked" | "locked" | "wiped";
+export type HostMdmPendingAction = "unlock" | "lock" | "wipe" | "";
export interface IHostMdmData {
encryption_key_available: boolean;
enrollment_status: MdmEnrollmentStatus | null;
+ dep_profile_error?: boolean;
name?: string;
id?: number;
server_url: string | null;
diff --git a/frontend/interfaces/team.ts b/frontend/interfaces/team.ts
index cda3a18d46..435075902a 100644
--- a/frontend/interfaces/team.ts
+++ b/frontend/interfaces/team.ts
@@ -74,7 +74,7 @@ export interface ITeam extends ITeamSummary {
*/
export type ITeamWebhookSettings = Pick<
IWebhookSettings,
- "vulnerabilities_webhook" | "failing_policies_webhook"
+ "vulnerabilities_webhook" | "failing_policies_webhook" | "host_status_webhook"
>;
/**
diff --git a/frontend/pages/DashboardPage/DashboardPage.tsx b/frontend/pages/DashboardPage/DashboardPage.tsx
index 8aa61bedbc..6053fcc0b4 100644
--- a/frontend/pages/DashboardPage/DashboardPage.tsx
+++ b/frontend/pages/DashboardPage/DashboardPage.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useContext, useState, useEffect, useRef } from "react";
import { InjectedRouter } from "react-router";
import { useQuery } from "react-query";
@@ -61,6 +61,7 @@ import Mdm from "./cards/MDM";
import Munki from "./cards/Munki";
import OperatingSystems from "./cards/OperatingSystems";
import AddHostsModal from "../../components/AddHostsModal";
+import MdmSolutionModal from "./components/MdmSolutionModal";
const baseClass = "dashboard-page";
@@ -132,11 +133,14 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
const [showMdmCard, setShowMdmCard] = useState(true);
const [showSoftwareCard, setShowSoftwareCard] = useState(false);
const [showAddHostsModal, setShowAddHostsModal] = useState(false);
+ const [showMdmSolutionModal, setShowMdmSolutionModal] = useState(false);
const [showOperatingSystemsUI, setShowOperatingSystemsUI] = useState(false);
const [showHostsUI, setShowHostsUI] = useState(false); // Hides UI on first load only
const [mdmStatusData, setMdmStatusData] = useState([]);
const [mdmSolutions, setMdmSolutions] = useState([]);
+ const selectedMdmSolution = useRef(null);
+
const [munkiIssuesData, setMunkiIssuesData] = useState<
IMunkiIssuesAggregate[]
>([]);
@@ -614,6 +618,10 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
mdmSolutions={mdmSolutions}
selectedPlatformLabelId={selectedPlatformLabelId}
selectedTeamId={currentTeamId}
+ onClickMdmSolution={(mdmSolution) => {
+ selectedMdmSolution.current = mdmSolution.name;
+ setShowMdmSolutionModal(true);
+ }}
/>
),
})}
@@ -713,6 +721,28 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
);
};
+ const renderMdmSolutionModal = () => {
+ if (!mdmSolutions) {
+ return null;
+ }
+
+ const selectedMdmSolutions = mdmSolutions?.filter(
+ (solution) => solution.name === selectedMdmSolution.current
+ );
+
+ return (
+ {
+ setShowMdmSolutionModal(false);
+ selectedMdmSolution.current = null;
+ }}
+ />
+ );
+ };
+
const renderDashboardHeader = () => {
if (isPremiumTier) {
if (userTeams) {
@@ -785,6 +815,7 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
{renderCards()}
{showAddHostsModal && renderAddHostsModal()}
+ {showMdmSolutionModal && renderMdmSolutionModal()}
+ {/* The content div is to ensure that the clickable area is contained to
+ the text and icon. This is to prevent the entire cell from being
+ clickable. TODO: Figure out if this is product wants to hand this.
+ */}
+
+ );
+};
+
+export default InternalLinkCell;
diff --git a/frontend/components/TableContainer/DataTable/InternalLinkCell/_styles.scss b/frontend/components/TableContainer/DataTable/InternalLinkCell/_styles.scss
new file mode 100644
index 0000000000..c9dc9c6d90
--- /dev/null
+++ b/frontend/components/TableContainer/DataTable/InternalLinkCell/_styles.scss
@@ -0,0 +1,14 @@
+.internal-link-cell {
+
+ &__content {
+ font: $x-small;
+ color: $core-vibrant-blue;
+ font-weight: $bold;
+ display: inline-flex;
+
+ &:hover {
+ cursor: pointer;
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/frontend/components/TableContainer/DataTable/InternalLinkCell/index.ts b/frontend/components/TableContainer/DataTable/InternalLinkCell/index.ts
new file mode 100644
index 0000000000..66785a5a20
--- /dev/null
+++ b/frontend/components/TableContainer/DataTable/InternalLinkCell/index.ts
@@ -0,0 +1 @@
+export { default } from "./InternalLinkCell";
diff --git a/frontend/components/TableContainer/TableContainer.tsx b/frontend/components/TableContainer/TableContainer.tsx
index f96f15cd29..8a99bb46de 100644
--- a/frontend/components/TableContainer/TableContainer.tsx
+++ b/frontend/components/TableContainer/TableContainer.tsx
@@ -1,6 +1,6 @@
import React, { useState, useCallback, useRef, useEffect } from "react";
import classnames from "classnames";
-import { Row } from "react-table";
+import { Row, UseExpandedRowProps } from "react-table";
import ReactTooltip from "react-tooltip";
import useDeepEffect from "hooks/useDeepEffect";
@@ -34,7 +34,7 @@ interface IRowProps extends Row {
};
}
-interface ITableContainerProps {
+interface ITableContainerProps
+ {value}
+
+
{this.props.label && this.renderHeading()}
- {
- this.input = r;
- }}
- tabIndex={tabIndex}
- type={type}
- value={value}
- disabled={disabled}
- {...inputOptions}
- data-1p-ignore={ignore1Password}
- />
- {iconSvg &&
);
diff --git a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
index fed3ee5e7a..13ff7bbb2a 100644
--- a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
+++ b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
@@ -18,6 +18,14 @@
}
}
+ // Relative input wrapper with absolute icon corrects icon alignment on all browsers
+ &__input-wrapper {
+ position: relative;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ }
+
// Refactor to include svg icons
&--icon-start {
margin-top: 0;
@@ -25,10 +33,11 @@
.input-icon-field__icon {
position: absolute;
left: 12px;
- top: 13px;
+ top: 0;
+ height: 40px;
width: 16px;
- font-size: $x-small;
- color: $core-fleet-blue;
+ flex-wrap: wrap;
+ align-content: center;
z-index: 1;
}
}
@@ -51,20 +60,6 @@
color: $core-fleet-blue;
}
- &:hover,
- &:focus {
- border: 1px solid $core-vibrant-blue;
-
- // Icon color matches border color on focus and on hover
- + .input-icon-field__icon {
- svg {
- path {
- fill: $core-vibrant-blue;
- }
- }
- }
- }
-
&:focus {
outline: none;
}
@@ -82,6 +77,33 @@
}
}
+ &__input-wrapper:hover {
+ .input-icon-field__input {
+ border: 1px solid $core-vibrant-blue;
+ }
+
+ // Icon color matches border color on focus and on hover
+ .input-icon-field__icon {
+ svg {
+ path {
+ fill: $core-vibrant-blue;
+ }
+ }
+ }
+ }
+
+ .input-icon-field__input:focus {
+ border: 1px solid $core-vibrant-blue;
+
+ // Icon color matches border color on focus and on hover
+ + .input-icon-field__icon {
+ svg {
+ path {
+ fill: $core-vibrant-blue;
+ }
+ }
+ }
+ }
&__label {
display: block;
font-size: $x-small;
diff --git a/frontend/context/app.tsx b/frontend/context/app.tsx
index 5784534c4e..4dc0d2137f 100644
--- a/frontend/context/app.tsx
+++ b/frontend/context/app.tsx
@@ -106,7 +106,8 @@ type InitialStateType = {
isSandboxMode?: boolean;
isFreeTier?: boolean;
isPremiumTier?: boolean;
- isMdmEnabledAndConfigured?: boolean;
+ isMacMdmEnabledAndConfigured?: boolean;
+ isWindowsMdmEnabledAndConfigured?: boolean;
isGlobalAdmin?: boolean;
isGlobalMaintainer?: boolean;
isGlobalObserver?: boolean;
@@ -156,7 +157,8 @@ export const initialState = {
isSandboxMode: false,
isFreeTier: undefined,
isPremiumTier: undefined,
- isMdmEnabledAndConfigured: undefined,
+ isMacMdmEnabledAndConfigured: undefined,
+ isWindowsMdmEnabledAndConfigured: undefined,
isGlobalAdmin: undefined,
isGlobalMaintainer: undefined,
isGlobalObserver: undefined,
@@ -212,7 +214,12 @@ const setPermissions = (
isSandboxMode: permissions.isSandboxMode(config),
isFreeTier: permissions.isFreeTier(config),
isPremiumTier: permissions.isPremiumTier(config),
- isMdmEnabledAndConfigured: permissions.isMdmEnabledAndConfigured(config),
+ isMacMdmEnabledAndConfigured: permissions.isMacMdmEnabledAndConfigured(
+ config
+ ),
+ isWindowsMdmEnabledAndConfigured: permissions.isWindowsMdmEnabledAndConfigured(
+ config
+ ),
isGlobalAdmin: permissions.isGlobalAdmin(user),
isGlobalMaintainer: permissions.isGlobalMaintainer(user),
isGlobalObserver: permissions.isGlobalObserver(user),
@@ -365,7 +372,8 @@ const AppProvider = ({ children }: Props): JSX.Element => {
isSandboxMode: state.isSandboxMode,
isFreeTier: state.isFreeTier,
isPremiumTier: state.isPremiumTier,
- isMdmEnabledAndConfigured: state.isMdmEnabledAndConfigured,
+ isMacMdmEnabledAndConfigured: state.isMacMdmEnabledAndConfigured,
+ isWindowsMdmEnabledAndConfigured: state.isWindowsMdmEnabledAndConfigured,
isGlobalAdmin: state.isGlobalAdmin,
isGlobalMaintainer: state.isGlobalMaintainer,
isGlobalObserver: state.isGlobalObserver,
diff --git a/frontend/interfaces/activity.ts b/frontend/interfaces/activity.ts
index ed047aa777..143efeaf0a 100644
--- a/frontend/interfaces/activity.ts
+++ b/frontend/interfaces/activity.ts
@@ -66,7 +66,15 @@ export enum ActivityType {
EditedWindowsUpdates = "edited_windows_updates",
LockedHost = "locked_host",
UnlockedHost = "unlocked_host",
+ WipedHost = "wiped_host",
}
+
+// This is a subset of ActivityType that are shown only for the host past activities
+export type IHostPastActivityType =
+ | ActivityType.RanScript
+ | ActivityType.LockedHost
+ | ActivityType.UnlockedHost;
+
export interface IActivity {
created_at: string;
id: number;
@@ -77,6 +85,11 @@ export interface IActivity {
type: ActivityType;
details?: IActivityDetails;
}
+
+export type IPastActivity = Omit
+ {
+ this.input = r;
+ }}
+ tabIndex={tabIndex}
+ type={type}
+ value={value}
+ disabled={disabled}
+ {...inputOptions}
+ data-1p-ignore={ignore1Password}
+ />
+ {iconSvg &&
{renderHelpText()}
{isFetching && (
@@ -111,7 +149,8 @@ const Mdm = ({
{error ? (
+ className={`${baseClass}__mdm-solutions-table`}
columnConfigs={solutionsTableHeaders}
data={solutionsDataSet}
isLoading={isFetching}
@@ -121,9 +160,9 @@ const Mdm = ({
emptyComponent={EmptyMdmSolutions}
showMarkAllPages={false}
isAllPagesSelected={false}
- isClientSidePagination
disableCount
- pageSize={PAGE_SIZE}
+ disablePagination
+ onClickRow={handleSolutionRowClick}
/>
)}
@@ -132,6 +171,7 @@ const Mdm = ({
JSX.Element) | string;
@@ -46,79 +38,36 @@ interface IDataColumn {
disableSortBy?: boolean;
}
-export const generateSolutionsTableHeaders = (
- teamId?: number
-): IDataColumn[] => [
+export const generateSolutionsTableHeaders = (): IDataColumn[] => [
{
title: "Name",
Header: "Name",
disableSortBy: true,
- accessor: "name",
+ accessor: "displayName",
Cell: (cellProps: ICellProps) => (
-
+ <>
+
+ );
+};
+
+export default MdmSolutionsModal;
diff --git a/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModalTableConfig.tsx b/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModalTableConfig.tsx
new file mode 100644
index 0000000000..085df2eec0
--- /dev/null
+++ b/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModalTableConfig.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+
+import { IMdmSolution } from "interfaces/mdm";
+
+import TextCell from "components/TableContainer/DataTable/TextCell";
+import ViewAllHostsLink from "components/ViewAllHostsLink";
+import TooltipWrapper from "components/TooltipWrapper";
+import HeaderCell from "components/TableContainer/DataTable/HeaderCell";
+
+// NOTE: cellProps come from react-table
+// more info here https://react-table.tanstack.com/docs/api/useTable#cell-properties
+
+interface IMDMSolutionWithPlatformId extends IMdmSolution {
+ selectedPlatformLabelId?: number;
+}
+
+interface ICellProps {
+ cell: {
+ value: string;
+ };
+ row: {
+ original: IMDMSolutionWithPlatformId;
+ };
+}
+
+interface IHeaderProps {
+ column: {
+ title: string;
+ isSortedDesc: boolean;
+ };
+}
+
+interface IDataColumn {
+ title: string;
+ Header: ((props: IHeaderProps) => JSX.Element) | string;
+ accessor: string;
+ Cell: (props: ICellProps) => JSX.Element;
+ disableGlobalFilter?: boolean;
+ disableHidden?: boolean;
+ disableSortBy?: boolean;
+}
+
+export const generateSolutionsTableHeaders = (
+ teamId?: number
+): IDataColumn[] => [
+ {
+ title: "Server URL",
+ Header: (): JSX.Element => {
+ const titleWithToolTip = (
+
+ The MDM server URL is used to connect hosts with the MDM service.
+ For cross-platform MDM solutions, each operating system has a
+ different URL.
+
+ }
+ className="server-url-header"
+ >
+ Status
+
+ );
+ return
- <>
-
- );
- };
-
return (
+ null} // if this modal is shown, this table should never be empty
+ columnConfigs={solutionsTableHeaders}
+ data={solutionsDataSet}
+ defaultSortHeader={SOLUTIONS_DEFAULT_SORT_HEADER}
+ defaultSortDirection={DEFAULT_SORT_DIRECTION}
+ resultsTitle="MDM"
+ showMarkAllPages={false}
+ isAllPagesSelected={false}
+ disableCount
+ disablePagination
+ disableTableHeader
+ />
+
+
+
+
+
+
+
+ ),
+ },
+];
+
+export const generateSolutionsDataSet = (
+ solutions: IMdmSolution[] | null,
+ selectedPlatformLabelId?: number
+): IMdmSolution[] => {
+ if (!solutions) {
+ return [];
+ }
+
+ return solutions.map((solution) => {
+ return {
+ ...solution,
+ selectedPlatformLabelId,
+ };
+ });
+};
diff --git a/frontend/pages/DashboardPage/components/MdmSolutionModal/_styles.scss b/frontend/pages/DashboardPage/components/MdmSolutionModal/_styles.scss
new file mode 100644
index 0000000000..edce7e88f5
--- /dev/null
+++ b/frontend/pages/DashboardPage/components/MdmSolutionModal/_styles.scss
@@ -0,0 +1,7 @@
+.mdm-solution-modal {
+ .host-count-cell {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+}
diff --git a/frontend/pages/DashboardPage/components/MdmSolutionModal/index.ts b/frontend/pages/DashboardPage/components/MdmSolutionModal/index.ts
new file mode 100644
index 0000000000..92175e4ae7
--- /dev/null
+++ b/frontend/pages/DashboardPage/components/MdmSolutionModal/index.ts
@@ -0,0 +1 @@
+export { default } from "./MdmSolutionModal";
diff --git a/frontend/pages/admin/IntegrationsPage/IntegrationPage.tests.tsx b/frontend/pages/admin/IntegrationsPage/IntegrationPage.tests.tsx
index 94a09ee034..a567506653 100644
--- a/frontend/pages/admin/IntegrationsPage/IntegrationPage.tests.tsx
+++ b/frontend/pages/admin/IntegrationsPage/IntegrationPage.tests.tsx
@@ -22,7 +22,7 @@ describe("Integrations Page", () => {
const render = createCustomRenderer({
withBackendMock: true,
context: {
- app: { isMdmEnabledAndConfigured: true },
+ app: { isMacMdmEnabledAndConfigured: true },
},
});
diff --git a/frontend/pages/admin/OrgSettingsPage/_styles.scss b/frontend/pages/admin/OrgSettingsPage/_styles.scss
index 55b5e283d8..cfbfb51a9e 100644
--- a/frontend/pages/admin/OrgSettingsPage/_styles.scss
+++ b/frontend/pages/admin/OrgSettingsPage/_styles.scss
@@ -71,6 +71,10 @@
}
}
}
+ .button--inverse {
+ // compensate for button's padding
+ margin-left: -$pad-small;
+ }
}
&__section-description {
@@ -94,14 +98,6 @@
margin-bottom: $pad-medium;
}
- &__host-status-webhook-preview-modal {
- .flex-end {
- margin-top: 20px;
- display: flex;
- justify-content: flex-end;
- }
- }
-
&__disabled-usage-statistics-checkbox {
@include disabled;
}
diff --git a/frontend/pages/admin/OrgSettingsPage/cards/HostStatusWebhook/HostStatusWebhook.tsx b/frontend/pages/admin/OrgSettingsPage/cards/HostStatusWebhook/HostStatusWebhook.tsx
index 28219e8773..650a5b9721 100644
--- a/frontend/pages/admin/OrgSettingsPage/cards/HostStatusWebhook/HostStatusWebhook.tsx
+++ b/frontend/pages/admin/OrgSettingsPage/cards/HostStatusWebhook/HostStatusWebhook.tsx
@@ -1,5 +1,6 @@
import React, { useState, useEffect } from "react";
-import { syntaxHighlight } from "utilities/helpers";
+
+import HostStatusWebhookPreviewModal from "pages/admin/components/HostStatusWebhookPreviewModal";
import Button from "components/buttons/Button";
import Checkbox from "components/forms/fields/Checkbox";
@@ -10,14 +11,12 @@ import InputField from "components/forms/fields/InputField";
import validUrl from "components/forms/validators/valid_url";
import SectionHeader from "components/SectionHeader";
-import Modal from "components/Modal";
import {
IAppConfigFormProps,
IFormField,
IAppConfigFormErrors,
percentageOfHosts,
numberOfDays,
- hostStatusPreview,
} from "../constants";
const baseClass = "app-config-form";
@@ -107,38 +106,6 @@ const HostStatusWebhook = ({
handleSubmit(formDataToSubmit);
};
- const renderHostStatusWebhookPreviewModal = () => {
- if (!showHostStatusWebhookPreviewModal) {
- return null;
- }
-
- return (
- - An example request sent to your configured Destination URL. -
-
-
-
-
-
-
-
-
@@ -192,6 +159,7 @@ const HostStatusWebhook = ({
name="hostStatusWebhookHostPercentage"
value={hostStatusWebhookHostPercentage}
parseTarget
+ searchable={false}
onBlur={validateForm}
tooltip={
- {showHostStatusWebhookPreviewModal &&
- renderHostStatusWebhookPreviewModal()}
+ {showHostStatusWebhookPreviewModal && (
+ @@ -210,6 +178,7 @@ const HostStatusWebhook = ({ name="hostStatusWebhookDaysCount" value={hostStatusWebhookDaysCount} parseTarget + searchable={false} onBlur={validateForm} tooltip={
@@ -234,8 +203,11 @@ const HostStatusWebhook = ({
Company
- About
- Blog
+ About
+ Blog
Jobs
Logos/artwork
Why open source?
@@ -339,7 +339,7 @@
SOC2 Type 2 certified
SOC2 Type 2 certified
- Ā© <%= (new Date()).getFullYear() %> Fleet Device Management Inc.
+ Ā© <%= (new Date()).getFullYear() %> <%= corporationDisplayName %>
Privacy
@@ -378,7 +378,7 @@
SOC2 Type 2 certified
SOC2 Type 2 certified
- Ā© <%= (new Date()).getFullYear() %> Fleet Device Management Inc.
+ Ā© <%= (new Date()).getFullYear() %> <%= corporationDisplayName %>
Privacy
diff --git a/website/views/pages/device-management.ejs b/website/views/pages/device-management.ejs
index e0d39961f6..87774b8d5c 100644
--- a/website/views/pages/device-management.ejs
+++ b/website/views/pages/device-management.ejs
@@ -157,11 +157,12 @@
-
Absolute certainty
-Reduce time wasted hunting down whether a change happened. Actually verify that settings are applied using real data pulled from your users' devices.
+Shorten the feedback loop
+Spend less time debugging whether changes actually happened. Auto-verify using real data pulled from your users' devices.
Use a git repo as the source of truth to reduce errors (submitting the wrong patch, configuration setting etc)
Every change to a policy or security control is tracked and auditable in Fleetās history, or via the repo commit log
+Instantly reveal failed patches and broken settings with osquery to shorten the feedback loop and uncover problems sooner.
diff --git a/website/views/pages/endpoint-ops.ejs b/website/views/pages/endpoint-ops.ejs
index 6d94ef7d9b..033fbf225b 100644
--- a/website/views/pages/endpoint-ops.ejs
+++ b/website/views/pages/endpoint-ops.ejs
@@ -4,19 +4,19 @@
<%/* End of page gradient */%>
@@ -174,16 +183,16 @@
Endpoint operations
-A consistent interface
+A consistent interface
- 
+ 
+
- Simplify security tooling
-
- Consolidate your security tooling on top of open data standards like YAML, SQL, and JSON.
- Ship data to any platform -Export anything. Ship data to any platform like Splunk, Snowflake, or any streaming infrastructure like AWS Kinesis and Apache Kafka.
Pulse check anything -Simplify security audits, build definitive reports, and discover and verify ongoing compliance for every endpoint, from workstations to data centers.
+Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.
+ Ship data to any platform +Ship logs to any platform like Splunk, Snowflake, or any streaming infrastructure like AWS Kinesis and Apache Kafka.
+ Osquery on easy mode +You donāt need to be an osquery expert to get the answers you need from your devices, Fleet does some of that for you.
Show me
See real data
@@ -49,7 +49,87 @@
-
+
+ Simplify security tooling
+Pulse check anything
+Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.
+
+
+
+
+
+
+
+ 
+
+
+
+ Live connection
+Talk to online devices in real time with Fleetās live query API. Implement custom workflows like conditional access based on device posture, Identity, and more.
+
+ 
+
+
+
+ Software and asset inventory
+Get visibility into all endpoints across any operating system*, including support for servers and containers in every cloud infrastructure.
+
+ 
+
+
+
+
+ See logins for every endpoint
+Identify who logs in to any system, including login history and current sessions. Look up any computer by the email address of the person using it.
+
+
+
+
+ 
+
+
+
+ CIS benchmarks
+Keep all your endpoints* compliant with customizable baselines, or use common benchmarks like CIS.
+
+ 
+
+
+
+ Get in front of the IdP
+Gate access with common device trust policies from industry peers, or roll out your own device health checks using system data and events.
+
+ 
+
+
+ Verify updates and settings
+Track progress towards deadlines for security posture remediation projects, and enforce due dates through automations.
+*Currently limited to: macOS, Linux, Windows, Chromebooks, OT, data centers, Amazon Web Services (AWS), Google Cloud (GCP), and the Microsoft Cloud (Azure).
+
+
+
+
+
+ Ship data to any platform
+Export anything. Ship data to any platform like Splunk, Snowflake, or any streaming infrastructure like AWS Kinesis and Apache Kafka.
+
+
+ Extract data and correlate it with your log aggregator, SIEM, or data lake.
+Ease your logging burden, pull the data you need.
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+ Osquery on easy mode
+Accelerate deployment and get more out of osquery. You donāt need to be an osquery expert to get the answers you need from your devices, Fleet takes care of some of that for you.
+
+
+ Remotely disable/enable agent features, choose plugins, and keep osquery up to date.
+Import community queries from other security teams at top brands like Palantir and Fastly.
+Implement the Center for Internet Security (CIS) benchmarks (one click, 400+ queries, supported by Fleet). Or customize exactly the queries you need.
+
+
@@ -96,77 +176,6 @@
Open security tooling
Consolidate your security tooling on top of open data standards like YAML, SQL, and JSON.
*Companies like Fastly and Gusto use Fleet in production with hundreds of thousands of endpoints, including containers, OT, and laptops.
-
-
-
-
- Ship data to any platform
-Export anything. Ship data to any platform like Splunk, Snowflake, or any streaming infrastructure like AWS Kinesis and Apache Kafka.
-
-
- Extract data and correlate it with your log aggregator, SIEM, or data lake.
-Ease your logging burden, pull the data you need.
-
-
-
-
-
-
-
- Pulse check anything
-Simplify security audits, build definitive reports, and discover and verify ongoing compliance for every endpoint, from workstations to data centers.
-
-
-
-
-
-
-
-
-
-
-
-
- Software and asset inventory
-Get visibility into all endpoints across any operating system*, including support for servers and containers in every cloud infrastructure.
-
- 
-
-
-
- EDR health checks
-Verify that your EDR tools are installed and working so you can identify and address configuration issues quickly.
-
-
-
-
- Automatic posture assessment
-Keep all your endpoints* compliant with customizable baselines, or use common benchmarks like CIS.
-
-
-
-
-
-
-
- See logins for every endpoint
-Identify who logs in to any system, including login history and current sessions.Ā Look up any computer by the email address of the person using it.
-
-
-
-
- Verify updates and settings
-Enforce secure configurations and safe, up-to-date software through automations.
-*Currently limited to: macOS, Linux, Windows, Chromebooks, OT, data centers, Amazon Web Services (AWS), Google Cloud (GCP), and the Microsoft Cloud (Azure).
-
-
-
-
-
-
-
- Osquery on easy mode
-Accelerate deployment and get more out of osquery. You donāt need to be an osquery expert to get the answers you need from your devices, Fleet takes care of some of that for you.
-
-
- Remotely disable/enable agent features, choose plugins, and keep osquery up to date.
-Import community queries from other security teams at top brands like Palantir and Fastly.
-Implement the Center for Internet Security (CIS) benchmarks (one click, 400+ queries, supported by Fleet). Or customize exactly the queries you need.
-Who else uses Fleet?
-Empowering security and IT teams, globally
+Empowering IT teams
+
-
Open-source endpoint ops
-Focus on data, not vendors
+Endpoint operations
+A consistent interface
Show me
See real data
diff --git a/website/views/pages/fleetctl-preview.ejs b/website/views/pages/fleetctl-preview.ejs
index b389c76ea5..80825c5129 100644
--- a/website/views/pages/fleetctl-preview.ejs
+++ b/website/views/pages/fleetctl-preview.ejs
@@ -27,7 +27,7 @@
+
+
@@ -312,7 +312,7 @@
Install the fleetctl command line tool:
curl -SsLO https://fleetdm.com/resources/install-fleet.sh -o install_fleet.sh && shasum -a 256 install_fleet.sh
curl -sSL https://fleetdm.com/resources/install-fleetctl.sh | bash
Run a local demo of the Fleet server:
@@ -45,7 +45,7 @@Install the fleetctl command line tool:
curl -SsLO https://fleetdm.com/resources/install-fleet.sh -o install_fleet.sh && shasum -a 256 install_fleet.sh
curl -sSL https://fleetdm.com/resources/install-fleetctl.sh | bash
Run a local demo of the Fleet server:
diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs index 695cc744cc..611cfd952d 100644 --- a/website/views/pages/homepage.ejs +++ b/website/views/pages/homepage.ejs @@ -7,7 +7,7 @@ <%/* Hero text */%>For teams with lots of different endpoints
-Focus on data, not vendors
+<%- partial('../partials/primary-tagline.partial.ejs') %>
Replace the sprawl with open-source code that works the way you want.
Show me
@@ -97,7 +97,7 @@
- 
+
+
For teams with lots of different endpoints
-Focus on data, not vendors
+<%- partial('../partials/primary-tagline.partial.ejs') %>
Show me
Try it out
diff --git a/website/views/pages/vulnerability-management.ejs b/website/views/pages/vulnerability-management.ejs
index 50b542445f..2d525f3cc2 100644
--- a/website/views/pages/vulnerability-management.ejs
+++ b/website/views/pages/vulnerability-management.ejs
@@ -81,11 +81,11 @@
- 
+
+
-
Consolidate your security stack
-Consolidate your point vulnerability solution with your cybersecurity asset management and log capture tools.
+Untangle your security stack
+Use open data and APIs to connect your point vulnerability solution with your cybersecurity asset management and log capture tools.
Prevent duplicated, inaccurate CMDBs to reduce tool sprawl and wasted budget
Normalize asset management data and software inventories from multiple tools and operating systems
diff --git a/website/views/partials/primary-tagline.partial.ejs b/website/views/partials/primary-tagline.partial.ejs new file mode 100644 index 0000000000..debe33a902 --- /dev/null +++ b/website/views/partials/primary-tagline.partial.ejs @@ -0,0 +1 @@ +<%= primaryBuyingSituation === 'mdm' ? 'Your last MDM migration' : 'Focus on data, not vendors' %>