From 8ea6a64782a6b4b7facd98db63ab9b87896d6fc7 Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 21 Feb 2024 17:12:03 -0600 Subject: [PATCH] Website: update /fleetctl-preview (#16949) Changes: - Updated the /fleetctl preview page to give users a way to install `fleetctl` using terminal commands without downloading node. - Added a script to install `fleetctl` on macOS and Linux --- .../images/icon-external-link-13x13@2x.png | Bin 0 -> 529 bytes .../assets/js/pages/fleetctl-preview.page.js | 2 +- website/assets/resources/install-fleet.sh | 119 ++++++++ .../assets/styles/pages/fleetctl-preview.less | 280 +++++++++++++++++- website/views/pages/fleetctl-preview.ejs | 168 +++++++---- 5 files changed, 494 insertions(+), 75 deletions(-) create mode 100644 website/assets/images/icon-external-link-13x13@2x.png create mode 100644 website/assets/resources/install-fleet.sh diff --git a/website/assets/images/icon-external-link-13x13@2x.png b/website/assets/images/icon-external-link-13x13@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..70b7d4e8204d041597fad04f003d4b806d8737c7 GIT binary patch literal 529 zcmV+s0`C2ZP)Z3!=Gm zr#b=ff)H^^!M#%=}?f@c)G1r9nut0#@>9`pQ z%jTU9-O>V}%-i(_XjIO2T;Xp`*OY(s1G8Cqo(W*a3AjLh~eCg&DnwiRs zRkhW>egKnajy%dWi?Ncq2z!x@#IOXK6^rj)$O@9vl610gD4^rVpgbXapu_MOd&5gI zI<6cSu{iUM1a#3iCfemWHr}ecGvD~}+Up)1pMD`qb810!4QQF32~;Fd(+m6pn5()3 T*f*l000000NkvXXu0mjf-stc5 literal 0 HcmV?d00001 diff --git a/website/assets/js/pages/fleetctl-preview.page.js b/website/assets/js/pages/fleetctl-preview.page.js index d8939a2983..cf7274f7b2 100644 --- a/website/assets/js/pages/fleetctl-preview.page.js +++ b/website/assets/js/pages/fleetctl-preview.page.js @@ -3,7 +3,7 @@ parasails.registerPage('fleetctl-preview', { // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣ // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ data: { - //… + selectedPlatform: 'macos' }, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ diff --git a/website/assets/resources/install-fleet.sh b/website/assets/resources/install-fleet.sh new file mode 100644 index 0000000000..0717e46dd2 --- /dev/null +++ b/website/assets/resources/install-fleet.sh @@ -0,0 +1,119 @@ +#!/bin/bash + +set -e + +FLEETCTL_INSTALL_DIR="${HOME}/.fleetctl/" +FLEETCTL_BINARY_NAME="fleetctl" + + +# Check for necessary commands +for cmd in curl tar grep sed; do + if ! command -v $cmd &> /dev/null; then + echo "Error: $cmd is not installed." >&2 + exit 1 + fi +done + +echo "Fetching the latest version of fleetctl..." + + +# Fetch the latest version number from NPM +latest_strippedVersion=$(curl -s "https://registry.npmjs.org/fleetctl/latest" | grep -o '"version": *"[^"]*"' | cut -d'"' -f4) +echo "Latest version available on NPM: $latest_strippedVersion" + +version_gt() { + test "$(printf '%s\n' "$@" | sort -V | head -n 1)" != "$1"; +} + +# Determine operating system (Linux or MacOS) +OS="$(uname -s)" + +case "${OS}" in + Linux*) OS='linux';; + Darwin*) OS='macos';; + *) echo "Unsupported operating system: ${OS}"; exit 1;; +esac + +# Download the fleetctl binary and extract it into the install directory +download_and_extract() { + echo "Downloading fleetctl ${latest_strippedVersion} for ${OS}..." + curl -sSL $DOWNLOAD_URL | tar -xz -C $FLEETCTL_INSTALL_DIR --strip-components=1 fleetctl_v${latest_strippedVersion}_${OS}/ +} + +# Check to see if the fleetctl binary exists in the script's install directory. +check_installed_version() { + # If the fleetctl binary exists, we'll check the version of it using fleetctl -v. + if [ -x "${FLEETCTL_INSTALL_DIR}/fleetctl" ]; then + installed_version=$("${FLEETCTL_INSTALL_DIR}/fleetctl" -v | awk 'NR==1{print $NF}' | sed 's/^v//') + echo "Installed version: ${installed_version}" + else + return 1 + fi +} + +# Create the install directory if it does not exist. +mkdir -p ${FLEETCTL_INSTALL_DIR} + +# Construct download URL +# ex: https://github.com/fleetdm/fleet/releases/download/fleet-v4.43.3/fleetctl_v4.43.3_macos.zip +DOWNLOAD_URL="https://github.com/fleetdm/fleet/releases/download/fleet-v${latest_strippedVersion}/fleetctl_v${latest_strippedVersion}_${OS}.tar.gz" + + +if check_installed_version; then + if version_gt $latest_strippedVersion $installed_version; then + # Prompt the user for an upgrade + read -p "A newer version of fleetctl ($latest_strippedVersion) is available. Would you like to upgrade? (y/n): " upgrade_choice + + if [[ "$upgrade_choice" =~ ^[Yy](es)?$ ]]; then + # Remove the old binary + rm -f "${FLEETCTL_INSTALL_DIR}/fleetctl" + echo "Removing an older version of fleetctl." + + # Download and install the new version + download_and_extract + echo "fleetctl installed successfully in ${FLEETCTL_INSTALL_DIR}" + echo + echo "To start the local demo:" + echo + echo "1. Start Docker Desktop" + echo "2. Run ~/.fleetctl/fleetctl preview" + else + echo "Upgrade canceled." + fi + else + read -p "You are already using the latest version of fleetctl ($latest_strippedVersion) Would you like to reinstall it? (y/n): " reinstall_choice + + if [[ "$reinstall_choice" =~ ^[Yy](es)?$ ]]; then + # Remove the old binary + rm -f "${FLEETCTL_INSTALL_DIR}/fleetctl" + echo "Removing an older version of fleetctl." + + # Download and install the new version + download_and_extract + echo "fleetctl reinstalled successfully in ${FLEETCTL_INSTALL_DIR}" + echo + echo "To start the local demo:" + echo + echo "1. Start Docker Desktop" + echo "2. Run ~/.fleetctl/fleetctl preview" + else + echo "Install canceled." + fi + fi +else + # If there is no existing fleetctl binary, download the latest version and extract it. + download_and_extract + echo "fleetctl installed successfully in ${FLEETCTL_INSTALL_DIR}" + echo + echo "To start the local demo:" + echo + echo "1. Start Docker Desktop" + echo "2. Run ~/.fleetctl/fleetctl preview" +fi + +# Verify if the binary is executable +if [[ ! -x "${FLEETCTL_INSTALL_DIR}/fleetctl" ]]; then + echo "Failed to install or upgrade fleetctl. Please check your permissions and try running this script again." + exit 1 +fi + diff --git a/website/assets/styles/pages/fleetctl-preview.less b/website/assets/styles/pages/fleetctl-preview.less index 6690005026..7d1973f9f7 100644 --- a/website/assets/styles/pages/fleetctl-preview.less +++ b/website/assets/styles/pages/fleetctl-preview.less @@ -1,42 +1,290 @@ #fleetctl-preview { + @heading-lineheight: 120%; + @text-lineheight: 150%; - a:not(.btn) { - color: @core-vibrant-blue; + h1 { + margin-bottom: 40px; + font-size: 32px; + line-height: @heading-lineheight; + font-weight: 800; + } + h2 { + padding-top: 24px; + font-size: 20px; + font-weight: 800; + margin-bottom: 24px; + line-height: @heading-lineheight; } - code { background-color: @ui-off-white; border: 1px solid @border-lt-gray; color: @core-fleet-black-75; - font-size: 13px; - padding: 4px 8px; - line-height: 16px; + font-size: 14px; + padding: 4px; + line-height: @text-lineheight; font-family: @code-font; display: inline-block; - border-radius: 6px; + border-radius: 3px; + } + a { + color: @core-vibrant-blue; + line-height: @text-lineheight; + } + p { + font-size: 16px; + line-height: @text-lineheight; } - [purpose='get-started-buttons'] { - a { - font-size: 16px; - line-height: 25px; - padding: 16px 24px; + [purpose='page-title'] { + margin-bottom: 40px; + } + + [purpose='installation-steps'] { + margin-bottom: 40px; + } + + [purpose='prerequisites'] { + margin-bottom: 40px; + p { + margin-bottom: 24px; } } + [purpose='platform-selector'] { + margin-bottom: 60px; + border-bottom: 1px solid @core-vibrant-blue-15; + [purpose='selector-tab'] { + cursor: pointer; + padding: 12px; + margin-right: 24px; + p { + margin-bottom: 0px; + } + } + [purpose='selector-tab'].selected { + border-bottom: 2px solid @core-vibrant-blue; + } + } + + + [purpose='page-container'] { + padding: 80px 64px 64px 64px; + padding-bottom: 64px; + max-width: 928px; + } + + [purpose='numbered-steps'] { + counter-reset: custom-counter; + } + [purpose='step'] { + counter-increment: custom-counter; + margin-left: 36px; + margin-bottom: 40px; + margin-top: -26px; + &::before { + position: relative; + top: 26px; + left: -36px; + content: counter(custom-counter); + background-color: #E2E4EA; + width: 24px; + font-size: 13px; + display: inline-block; + border-radius: 50%; + margin-right: 10px; + padding: 2px 4px; + text-align: center; + line-height: 20px; + text-indent: 0px; + } + } [purpose='terminal-commands'] { - padding: 24px; + padding: 16px 24px; border: 1px solid @core-fleet-black-25; border-radius: 4px; margin: 16px 0px 0px; background: @ui-off-white; + width: 100%; + overflow-x: scroll; p { - color: @core-fleet-black; + white-space: nowrap; + color: @core-fleet-black-75; font-family: @code-font; font-weight: 400; - font-size: 18px; - line-height: 32px; + font-size: 14px; + line-height: @text-lineheight; margin-bottom: 0px; + padding-right: 24px; } } + + + [purpose='docs-button'] { + margin-right: 32px; + color: #FFF; + font-size: 16px; + font-weight: 700; + line-height: 21px; + display: flex; + height: 48px; + padding: 16px 32px; + justify-content: center; + align-items: center; + } + + [purpose='view-script-link'] { + display: flex; + align-items: center; + white-space: nowrap; + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: @core-fleet-black-75; + margin-bottom: 16px; + img { + margin-left: 4px; + height: 13px; + display: inline; + } + } + [purpose='docker-button'] { + padding: 12px 20px; + width: 153px; + font-size: 14px; + font-style: normal; + font-weight: 700; + line-height: 21px; + img { + width: auto; + height: 20px; + margin-right: 8px; + } + } + [purpose='node-button'] { + padding: 12px 20px; + width: 240px; + font-size: 14px; + font-style: normal; + font-weight: 700; + line-height: 21px; + img { + width: auto; + height: 24px; + margin-right: 8px; + } + } + [purpose='animated-arrow-button-red'] { + display: flex; + padding-right: 26px; + cursor: pointer; + position: relative; + width: fit-content; + min-width: auto; + font-weight: bold; + user-select: none; + transition: 0.2s ease-in-out; + -o-transition: 0.2s ease-in-out; + -ms-transition: 0.2s ease-in-out; + -moz-transition: 0.2s ease-in-out; + -webkit-transition: 0.2s ease-in-out; + color: @core-fleet-black; + text-decoration: none; + &:after { + content: url('/images/arrow-right-red-16x16@2x.png'); + transform: scale(0.5); + position: absolute; + top: -5px; + right: -5px; // <--- here + transition: 0.2s ease-in-out; + -o-transition: 0.2s ease-in-out; + -ms-transition: 0.2s ease-in-out; + -moz-transition: 0.2s ease-in-out; + -webkit-transition: 0.2s ease-in-out; + /* opacity: 0; */ + } + &:hover:after { + right: -10px; // <--- here + transition: 0.2s ease-in-out; + -o-transition: 0.2s ease-in-out; + -ms-transition: 0.2s ease-in-out; + -moz-transition: 0.2s ease-in-out; + -webkit-transition: 0.2s ease-in-out; + /* opacity:1; */ + } + } + + [parasails-component='parallax-city'] { + background: linear-gradient(180deg, #FFF 0%, #E4F3F4 59.5%); + } + + + @media (max-width: 991px) { + [purpose='page-container'] { + padding: 80px 40px 64px 40px; + max-width: 928px; + } + + } + @media (max-width: 768px) { + [purpose='page-container'] { + padding: 80px 32px 64px 32px; + max-width: 928px; + } + + } + @media (max-width: 575px) { + [purpose='page-container'] { + padding: 64px 24px; + max-width: 928px; + } + [purpose='platform-selector'] { + margin-bottom: 60px; + border-bottom: 1px solid @core-vibrant-blue-15; + [purpose='selector-tab'] { + cursor: pointer; + padding: 12px; + margin-right: auto; + } + } + [purpose='docs-button'] { + width: 100%; + margin-bottom: 32px; + margin-right: auto; + } + [purpose='view-script-link'] { + margin-left: 4px; + } + + [purpose='docker-button'] { + width: 100%; + } + [purpose='node-button'] { + width: 100%; + } + [purpose='get-started-buttons'] { + a:first-of-type { + margin-bottom: 16px; + } + } + + } + @media (max-width: 375px) { + [purpose='page-container'] { + padding: 40px 16px 64px 16px; + max-width: 928px; + } + [purpose='platform-selector'] { + [purpose='selector-tab'] { + cursor: pointer; + padding: 6px; + margin-right: auto; + } + } + } + + + + + } + diff --git a/website/views/pages/fleetctl-preview.ejs b/website/views/pages/fleetctl-preview.ejs index 27b2730df1..b389c76ea5 100644 --- a/website/views/pages/fleetctl-preview.ejs +++ b/website/views/pages/fleetctl-preview.ejs @@ -1,64 +1,116 @@ -
-
-

Get started

-

Try out a preview of Fleet and osquery on your laptop before deploying at scale by following the guide below.

-
-

1. Install Node (optional) and Docker

-

The quickest way to install Fleet is with Node.js and Docker.

-
- - NodeJS logo - Find my Node installer - - - Docker logo - Get Docker - -
-

A small circle with an 'I' inside of itWe - use NPM to install fleetctl. It can also be installed via the release page or built from source.

+
+
+
+

Try Fleet

+

The quickest way to try Fleet is to run a local demo with Docker.

+

Follow the instructions below to test Fleet on your macOS, Windows, and Linux device.

-
-

2. Run Fleet

-

Install the fleetctl command line tool and start the Fleet preview experience:

-
-

# Install the Fleet command-line tool

-

npm install -g fleetctl

-

# Run a local demo of the Fleet server

-

fleetctl preview

+
+

Prerequisites

+

An installation of Docker is required to try Fleet locally.

+ + Docker logo + Get Docker + +
+
+

Install Fleet

+
+

macOS

+

Windows

+

Linux

+

NPM

+
+ <%/* macOS install steps */%> +
+
+
+

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

+
+
+

Run a local demo of the Fleet server:

+

~/.fleetctl/fleetctl preview

+
+
+

The Fleet UI is now available at http://localhost:1337. Use the credentials below to login:

+

Email: admin@example.com

+

Password: preview1337#

+
+
+
+ <%/* Linux install steps */%> +
+
+
+

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

+
+
+

Run a local demo of the Fleet server:

+

~/.fleetctl/fleetctl preview

+
+
+

The Fleet UI is now available at http://localhost:1337. Use the credentials below to login:

+

Email: admin@example.com

+

Password: preview1337#

+
+
+
+ <%/* Windows install steps */%> +
+
+
+

Install the fleetctl command line tool:

+

for /f "tokens=1,* delims=:" %a in ('curl -s https://api.github.com/repos/fleetdm/fleet/releases/latest ^| findstr "browser_download_url" ^| findstr "_windows.zip"') do (curl -kOL %b) && if not exist "%USERPROFILE%\.fleetctl" mkdir "%USERPROFILE%\.fleetctl" && for /f "delims=" %a in ('dir /b fleetctl_*_windows.zip') do tar -xf "%a" --strip-components=1 -C "%USERPROFILE%\.fleetctl" && del "%a"

+
+
+

Run a local demo of the Fleet server:

+

%USERPROFILE%\.fleetctl\fleetctl preview

+
+
+

The Fleet UI is now available at http://localhost:1337. Use the credentials below to login:

+

Email: admin@example.com

+

Password: preview1337#

+
+
+
+ <%/* NPM install steps */%> +
+
+
+

Install Node.js

+ + NodeJS logo + Find my Node installer + +
+
+

Install the fleetctl command line tool:

+

npm install fleetctl -g

+
+
+

Run a local demo of the Fleet server:

+

fleetctl preview

+
+
+

The Fleet UI is now available at http://localhost:1337. Use the credentials below to login:

+

Email: admin@example.com

+

Password: preview1337#

+
+
-
-

3. Log in to Fleet

-

The Fleet UI is now available at http://localhost:1337. Use the credentials below to login.

-

Email: admin@example.com

-

Password: preview1337#

+

Next steps

+
+ + Read the docs + + + Deploy to production +
- -
- +