{renderForm()}
@@ -1226,30 +1240,38 @@ const ManageHostsPage = ({
className={`${baseClass}__enroll-hosts button`}
variant="inverse"
>
- Show enroll secret
-
- )}
- {canAddNewHosts && (
-
)}
+ {canAddNewHosts &&
+ !(
+ getStatusSelected() === ALL_HOSTS_LABEL &&
+ selectedLabel?.count === 0
+ ) &&
+ !(
+ getStatusSelected() === ALL_HOSTS_LABEL &&
+ filteredHostCount === 0
+ ) && (
+
+ )}
{renderLabelOrPolicyBlock()}
- {config && (!isPremiumTier || teams) && renderTable()}
+ {config && (!isPremiumTier || teams) && renderTable(selectedTeam)}
)}
{!isLabelsLoading && renderSidePanel()}
{renderEnrollSecretModal()}
- {renderAddHostModal()}
{renderEditColumnsModal()}
{renderDeleteLabelModal()}
{renderTransferHostModal()}
{renderDeleteHostModal()}
+ {renderGenerateInstallerModal()}
);
};
diff --git a/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/AddHostModal.jsx b/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/AddHostModal.jsx
deleted file mode 100644
index 87ae9e2dca..0000000000
--- a/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/AddHostModal.jsx
+++ /dev/null
@@ -1,378 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import FileSaver from "file-saver";
-
-import Fleet from "fleet";
-import Button from "components/buttons/Button";
-import configInterface from "interfaces/config";
-import teamInterface from "interfaces/team";
-import userInterface from "interfaces/user";
-import permissionUtils from "utilities/permissions";
-import EnrollSecretTable from "components/config/EnrollSecretTable";
-import FleetIcon from "components/icons/FleetIcon";
-import Dropdown from "components/forms/fields/Dropdown";
-import InputField from "components/forms/fields/InputField";
-import { stringToClipboard } from "utilities/copy_text";
-import DownloadIcon from "../../../../../../assets/images/icon-download-12x12@2x.png";
-
-const baseClass = "add-host-modal";
-
-const NO_TEAM_OPTION = {
- value: "no-team",
- label: "No team",
-};
-
-class AddHostModal extends Component {
- static propTypes = {
- teams: PropTypes.arrayOf(teamInterface),
- onReturnToApp: PropTypes.func,
- config: configInterface,
- currentUser: userInterface,
- };
-
- constructor(props) {
- super(props);
-
- this.userRole = {
- isAnyTeamMaintainer: permissionUtils.isAnyTeamMaintainer(
- this.props.currentUser
- ),
- isGlobalAdmin: permissionUtils.isGlobalAdmin(this.props.currentUser),
- isGlobalMaintainer: permissionUtils.isGlobalMaintainer(
- this.props.currentUser
- ),
- };
- this.currentUserTeams = this.userRole.isAnyTeamMaintainer
- ? Object.values(this.props.currentUser.teams).filter(
- (team) => team.role === "maintainer"
- )
- : this.props.teams;
-
- this.teamSecrets = this.props.teams
- ? Object.values(this.props.teams).map((team) => {
- return { id: team.id, name: team.name, secrets: team.secrets };
- })
- : [];
-
- this.state = {
- fetchCertificateError: undefined,
- selectedTeam: null,
- globalSecrets: [],
- selectedEnrollSecrets: [],
- copyMessage: "",
- };
- }
-
- componentDidMount() {
- const { isGlobalAdmin, isGlobalMaintainer } = this.userRole;
-
- (() => {
- if (isGlobalAdmin || isGlobalMaintainer) {
- Fleet.config
- .loadEnrollSecret()
- .then((response) => {
- this.setState({
- globalSecrets: response.spec.secrets,
- selectedTeam: { id: NO_TEAM_OPTION.value }, // Reset initial selectedTeam value to "no-team" in the case of global users
- });
- })
- .catch((err) => {
- console.log(err);
- });
- } else {
- this.setState({ selectedTeam: this.currentUserTeams[0] });
- }
- })();
-
- Fleet.config
- .loadCertificate()
- .then((certificate) => {
- this.setState({ certificate });
- })
- .catch(() => {
- this.setState({
- fetchCertificateError:
- "Failed to load certificate. Is Fleet app URL configured properly?",
- });
- });
- }
-
- onFetchCertificate = (evt) => {
- evt.preventDefault();
-
- const { certificate } = this.state;
-
- const filename = "fleet.pem";
- const file = new global.window.File([certificate], filename, {
- type: "application/x-pem-file",
- });
-
- FileSaver.saveAs(file);
-
- return false;
- };
-
- onCopyRunCommand = (evt) => {
- evt.preventDefault();
-
- stringToClipboard("osqueryd --flagfile=flagfile.txt --verbose")
- .then(() => this.setState({ copyMessage: "Copied!" }))
- .catch(() => this.setState({ copyMessage: "Copy failed" }));
-
- // Clear message after 1 second
- setTimeout(() => this.setState({ copyMessage: "" }), 1000);
-
- return false;
- };
-
- // if isGlobalAdmin or isGlobalMaintainer, we include a "No team" option and reveal globalSecrets
- // if not, we pull secrets for the user's teams from the teamsSecrets
- onChangeSelectTeam = (teamId) => {
- const { globalSecrets } = this.state;
- const { currentUserTeams, teamSecrets } = this;
- if (teamId === "no-team") {
- this.setState({ selectedTeam: { id: NO_TEAM_OPTION.value } });
- this.setState({ selectedEnrollSecrets: globalSecrets || [] });
- } else {
- const selectedTeam = currentUserTeams.find((team) => team.id === teamId);
- const selectedEnrollSecrets =
- teamSecrets.find((e) => e.id === selectedTeam.id)?.secrets || "";
- this.setState({ selectedTeam });
- this.setState({
- selectedEnrollSecrets,
- });
- }
- };
-
- getSelectedEnrollSecrets = (selectedTeam) => {
- if (selectedTeam.id === NO_TEAM_OPTION.value) {
- return this.state.globalSecrets;
- }
- return (
- this.teamSecrets.find((e) => e.id === selectedTeam.id)?.secrets || ""
- );
- };
-
- createTeamDropdownOptions = (currentUserTeams = []) => {
- const teamOptions = currentUserTeams.map((team) => {
- return {
- value: team.id,
- label: team.name,
- };
- });
- return this.userRole.isAnyTeamMaintainer
- ? teamOptions
- : [NO_TEAM_OPTION, ...teamOptions];
- };
-
- renderRunCommandLabel = () => {
- const { copyMessage } = this.state;
- const { onCopyRunCommand } = this;
-
- return (
-
-
- {copyMessage && {`${copyMessage} `}}
-
-
-
- );
- };
-
- render() {
- const { config, onReturnToApp } = this.props;
- const { fetchCertificateError, selectedTeam, globalSecrets } = this.state;
- const {
- createTeamDropdownOptions,
- currentUserTeams,
- getSelectedEnrollSecrets,
- onChangeSelectTeam,
- renderRunCommandLabel,
- } = this;
-
- const isPremiumTier = permissionUtils.isPremiumTier(config);
-
- let tlsHostname = config.server_url;
- try {
- const serverUrl = new URL(config.server_url);
- tlsHostname = serverUrl.hostname;
- if (serverUrl.port) {
- tlsHostname += `:${serverUrl.port}`;
- }
- } catch (e) {
- if (!(e instanceof TypeError)) {
- throw e;
- }
- }
-
- const flagfileContent = `# Server
---tls_hostname=${tlsHostname}
---tls_server_certs=fleet.pem
-
-# Enrollment
---host_identifier=instance
---enroll_secret_path=secret.txt
---enroll_tls_endpoint=/api/v1/osquery/enroll
-
-# Configuration
---config_plugin=tls
---config_tls_endpoint=/api/v1/osquery/config
---config_refresh=10
-
-# Live query
---disable_distributed=false
---distributed_plugin=tls
---distributed_interval=10
---distributed_tls_max_attempts=3
---distributed_tls_read_endpoint=/api/v1/osquery/distributed/read
---distributed_tls_write_endpoint=/api/v1/osquery/distributed/write
-
-# Logging
---logger_plugin=tls
---logger_tls_endpoint=/api/v1/osquery/log
---logger_tls_period=10
-
-# File carving
---disable_carver=false
---carver_start_endpoint=/api/v1/osquery/carve/begin
---carver_continue_endpoint=/api/v1/osquery/carve/block
---carver_block_size=2000000`;
-
- const onDownloadFlagfile = (evt) => {
- evt.preventDefault();
-
- const filename = "flagfile.txt";
- const file = new global.window.File([flagfileContent], filename);
-
- FileSaver.saveAs(file);
-
- return false;
- };
-
- return (
-
-
- );
- }
-}
-
-export default AddHostModal;
diff --git a/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/_styles.scss
deleted file mode 100644
index 8b9312ecf7..0000000000
--- a/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/_styles.scss
+++ /dev/null
@@ -1,171 +0,0 @@
-.add-host-modal {
- &__manual-install-header {
- position: relative;
- z-index: 2;
-
- h2 {
- font-size: 18px;
- font-weight: $bold;
- line-height: 1.33;
- letter-spacing: -0.6px;
- color: #48c586;
- margin: 0;
- }
-
- h3 {
- font-size: 15px;
- font-weight: $regular;
- line-height: 1.6;
- letter-spacing: normal;
- color: rgba(32, 37, 50, 0.48);
- margin: 0;
- }
-
- .fleeticon {
- float: left;
- font-size: 44px;
- color: #48c586;
- margin-right: 15px;
- }
- }
-
- &__manual-install-content {
- h4 {
- font-size: $small;
- font-weight: $bold;
- margin: $pad-xlarge 0 0;
-
- .fleeticon {
- margin-left: 5px;
- font-size: 18px;
- }
- }
-
- p {
- font-size: $x-small;
- font-weight: $regular;
- line-height: 20px;
- letter-spacing: normal;
- color: $core-fleet-black;
- margin: 8px 0 0 44px;
- }
-
- a {
- font-size: $x-small;
- color: $core-vibrant-blue;
- font-weight: $bold;
- text-decoration: none;
-
- img {
- width: 12px;
- height: 12px;
- margin-left: 7px;
- }
- }
- }
-
- &__documentation-link {
- h4 {
- margin: 0;
- }
- }
-
- &__install-steps {
- margin: 0;
- padding: 0;
- list-style: none;
- }
-
- &__step-number {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 24px;
- height: 24px;
- border-radius: 100px;
- border: 2px solid $core-vibrant-blue;
- color: $core-vibrant-blue;
- font-weight: $bold;
- text-align: center;
- margin-right: $pad-medium;
- }
-
- &__button-wrap {
- display: flex;
- justify-content: flex-end;
- margin: $pad-large 0 0;
- }
-
- &__download-cert {
- text-align: center;
- padding-top: 15px;
-
- span {
- display: block;
- }
- }
-
- &__reveal-secret {
- float: right;
- text-decoration: none;
- }
-
- &__secret-wrapper {
- position: relative;
- margin: $pad-medium 0 0 44px;
- }
-
- &__team-dropdown-wrapper {
- .form-field__label {
- font-weight: $bold;
- }
- }
-
- &__team-dropdown-wrapper {
- .form-field__label {
- font-weight: $bold;
- }
- }
-
- pre,
- code {
- background-color: $ui-off-white;
- color: $core-fleet-blue;
- border: 1px solid $ui-fleet-blue-15;
- border-radius: 4px;
- padding: 7px $pad-medium;
- margin: $pad-large 0 0 44px;
- }
-
- &__error {
- color: $ui-error;
- }
-
- &__run-osquery-input {
- margin-left: 44px;
- }
-
- &__run-osquery-copy-icon {
- color: $core-vibrant-blue;
- margin-left: $pad-small;
- margin-right: $pad-xxlarge;
- }
-
- .buttons {
- display: flex;
- align-items: center;
- position: absolute;
- right: 16px;
- transform: translateY(80%);
- height: 16px;
-
- span {
- font-weight: $regular;
- }
-
- img {
- width: 16px;
- height: 16px;
- }
- }
-}
diff --git a/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/index.js b/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/index.js
deleted file mode 100644
index 999c5a522d..0000000000
--- a/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./AddHostModal";
diff --git a/frontend/pages/hosts/ManageHostsPage/components/GenerateInstallerModal/GenerateInstallerModal.tsx b/frontend/pages/hosts/ManageHostsPage/components/GenerateInstallerModal/GenerateInstallerModal.tsx
new file mode 100644
index 0000000000..86bad3a6a4
--- /dev/null
+++ b/frontend/pages/hosts/ManageHostsPage/components/GenerateInstallerModal/GenerateInstallerModal.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+
+import Button from "components/buttons/Button";
+import Modal from "components/modals/Modal";
+import { ITeam } from "interfaces/team";
+import { IEnrollSecret } from "interfaces/enroll_secret";
+import PlatformWrapper from "./PlatformWrapper/PlatformWrapper";
+
+const baseClass = "generate-installer-modal";
+
+interface IGenerateInstallerModal {
+ onCancel: () => void;
+ selectedTeam: ITeam | { name: string; secrets: IEnrollSecret[] | null };
+}
+
+const GenerateInstallerModal = ({
+ onCancel,
+ selectedTeam,
+}: IGenerateInstallerModal): JSX.Element => {
+ return (
+
-
-
-
-
-
- Add Hosts Documentation
-
-
-
- Add Hosts Documentation
- -
-
-
-
- 1Enroll - secret -
-- Osquery uses an enroll secret to authenticate with the Fleet - server. -
-- {isPremiumTier && currentUserTeams ? ( --- ) : null} - {isPremiumTier && selectedTeam && ( - - )} - {!isPremiumTier && ( - - )} -
- -
-
- 2Server - certificate -
-- Provide the TLS certificate used by the Fleet server to enable - secure connections from osquery: -
-- {fetchCertificateError ? ( - - {fetchCertificateError} - - ) : ( - - Download -
-- - )} -
- -
-
- 3Flagfile -
-- If using the enroll secret and server certificate downloaded - above, use the generated flagfile. In some configurations, - modifications may need to be made: -
-- - Download -
-
- -
-
- 4Run - osquery -
-- Run osquery from the directory containing the above files (may - require sudo or Run as Administrator privileges): -
----
-
-
-
-
+ {fetchCertificateError ? (
+
+ {fetchCertificateError}
+
+ ) : (
+
+ Download
+
+
+ )}
+
+
+ );
+};
+
+export default PlatformWrapper;
diff --git a/frontend/pages/hosts/ManageHostsPage/components/GenerateInstallerModal/PlatformWrapper/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/GenerateInstallerModal/PlatformWrapper/_styles.scss
new file mode 100644
index 0000000000..6ea8e0bfeb
--- /dev/null
+++ b/frontend/pages/hosts/ManageHostsPage/components/GenerateInstallerModal/PlatformWrapper/_styles.scss
@@ -0,0 +1,153 @@
+@import "../../../../../../../node_modules/react-tabs/style/react-tabs.scss";
+
+.platform-wrapper {
+ padding: 0; // different to pad sticky subnav properly
+
+ h1 {
+ margin-bottom: $pad-small;
+ }
+
+ a {
+ font-size: $x-small;
+ color: $core-vibrant-blue;
+ font-weight: $bold;
+ text-decoration: none;
+
+ img {
+ transform: scale(0.5);
+ vertical-align: bottom;
+ }
+ }
+
+ p {
+ margin-top: 0;
+ }
+
+ .body-wrap {
+ padding: 0;
+ }
+
+ .react-tabs {
+ .react-tabs__tab-list {
+ border-bottom: 1px solid $ui-gray;
+ }
+
+ &__tab {
+ font-size: $x-small;
+ border: none;
+ padding: 0 0 $pad-medium 0;
+ margin-left: $pad-xxlarge;
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+
+ &:focus {
+ box-shadow: none;
+ outline: 0;
+ }
+
+ // Bolding text when the tab is active causes a layout shift
+ // so we add a hidden pseudo element with the same text string
+ &:before {
+ content: attr(data-text);
+ height: 0;
+ visibility: hidden;
+ overflow: hidden;
+ user-select: none;
+ pointer-events: none;
+ font-weight: $bold;
+ }
+
+ &:after {
+ background-color: transparent;
+ }
+
+ &:first-child {
+ margin-left: 0;
+ }
+ }
+
+ &__tab--selected,
+ &__tab--selected:focus {
+ font-weight: $bold;
+ border-bottom: 1px solid $core-vibrant-blue;
+ }
+ }
+
+ &__info {
+ margin-top: $pad-small;
+ }
+
+ &__cta {
+ font-weight: $bold;
+ }
+
+ .form-field {
+ margin-bottom: $pad-small;
+
+ &__label {
+ position: relative;
+ font-size: $x-small;
+ font-weight: $bold;
+ margin-top: $pad-medium;
+ }
+ }
+
+ .input-field {
+ &--disabled {
+ letter-spacing: 0;
+ }
+
+ &__textarea {
+ font-family: "SourceCodePro", $monospace;
+ font-weight: 600;
+ font-size: 13px;
+ color: $core-fleet-blue;
+ min-height: 70px;
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: $pad-medium $pad-large $pad-medium $pad-medium;
+ }
+ }
+
+ &__installer-input-deb,
+ &__installer-input-rpm {
+ .input-field__textarea {
+ min-height: 95px;
+ }
+ }
+
+ &__installer-copy-icon {
+ color: $core-vibrant-blue;
+ margin-left: $pad-small;
+ margin-right: $pad-medium;
+ }
+
+ .buttons {
+ display: flex;
+ align-items: center;
+ position: absolute;
+ right: 0;
+ top: 40px;
+
+ span {
+ font-weight: $regular;
+ }
+
+ a {
+ display: flex;
+ align-items: center;
+ }
+
+ img {
+ width: 16px;
+ height: 16px;
+ }
+ }
+
+ &__button-wrap {
+ display: flex;
+ justify-content: flex-end;
+ margin: $pad-xxlarge 0 0;
+ }
+}
diff --git a/frontend/pages/hosts/ManageHostsPage/components/GenerateInstallerModal/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/GenerateInstallerModal/_styles.scss
new file mode 100644
index 0000000000..3f597f1c64
--- /dev/null
+++ b/frontend/pages/hosts/ManageHostsPage/components/GenerateInstallerModal/_styles.scss
@@ -0,0 +1,11 @@
+.generate-installer-modal {
+ &__btn-wrap {
+ display: flex;
+ flex-direction: row-reverse;
+ margin-top: $pad-xxlarge;
+ }
+
+ &__btn {
+ margin-left: 12px;
+ }
+}
diff --git a/frontend/pages/hosts/ManageHostsPage/components/GenerateInstallerModal/index.ts b/frontend/pages/hosts/ManageHostsPage/components/GenerateInstallerModal/index.ts
new file mode 100644
index 0000000000..39535acccc
--- /dev/null
+++ b/frontend/pages/hosts/ManageHostsPage/components/GenerateInstallerModal/index.ts
@@ -0,0 +1 @@
+export { default } from "./GenerateInstallerModal";
diff --git a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/NoHosts.tsx b/frontend/pages/hosts/ManageHostsPage/components/NoHosts/NoHosts.tsx
index d002b09a84..1a125d3b92 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/NoHosts.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/NoHosts/NoHosts.tsx
@@ -2,25 +2,35 @@
* Component when there is no hosts set up in fleet
*/
import React from "react";
+import Button from "components/buttons/Button";
+import { ITeam } from "interfaces/team";
import RoboDogImage from "../../../../../../assets/images/robo-dog-176x144@2x.png";
+interface INoHostsProps {
+ toggleGenerateInstallerModal: () => void;
+}
+
const baseClass = "no-hosts";
-const NoHosts = (): JSX.Element => {
+const NoHosts = ({
+ toggleGenerateInstallerModal,
+}: INoHostsProps): JSX.Element => {
return (
+
+
+ {platformSubNav.map((navItem) => {
+ // Bolding text when the tab is active causes a layout shift
+ // so we add a hidden pseudo element with the same text string
+ return (
+
+ {navItem.name}
+
+ );
+ })}
+
+ {platformSubNav.map((navItem) => {
+ // Bolding text when the tab is active causes a layout shift
+ // so we add a hidden pseudo element with the same text string
+ return (
+
+ {renderTab(navItem.type)}
+
+ );
+ })}
+
+
+
+
+
+
-
diff --git a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/NoHosts/_styles.scss
index 70a8bf716b..23ab91fe5a 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/NoHosts/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/NoHosts/_styles.scss
@@ -86,4 +86,8 @@
text-decoration: none;
}
}
+
+ &__no-hosts-button {
+ margin-top: $pad-large;
+ }
}
It's kinda empty in here...
-Get started adding hosts to Fleet.
-Add your laptops and servers to securely monitor them.
-
-
Still having trouble?
- - File a GitHub issue - +Add your devices to Fleet
+Generate an installer to add your own devices.
+
+