Commit Graph
18 Commits
Author SHA1 Message Date
RachelElysia 0cdad44c2c Fleet UI: Updates to manage host page for pending MDM (#41810) 2026-03-25 20:59:45 -04:00
Scott Gress cd18ced3e9 Rename teams and queries to fleets and reports in UI (#39572) 2026-02-17 15:19:33 -06:00
jacobshandlingandJacob Shandling 06c48216f7 UI: Add Tooltip show delay across app (#33091)
## For #31869

- Add fine grain controls for tooltip show and hide delay behavior
- Default to 250ms show delay across app
- Update ~30 unit tests to expect new delay
- See
[note](https://github.com/fleetdm/fleet/issues/31869#issuecomment-3300660487)


https://github.com/user-attachments/assets/5969e0f7-c137-491f-8430-6f21d01b9350

- [x] Changes file added for user-visible changes in `changes/`
- [x] QA'd all new/changed functionality manually

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2025-09-18 09:42:30 -07:00
jacobshandlingandJacob Shandling bb4e3c632e UI - Fix another (less) flakey frontend test (#24110)
- [x] Added/updated tests

test-js (ubuntu-latest) SuccessCount / RunCount:
3/3

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-11-25 10:28:58 -08:00
a00559e732 feat: enable multiple ABM and VPP tokens (#21693)
> Related issue: #9956 

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

<!-- Note that API documentation changes are now addressed by the
product design team. -->

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files)
for more information.
- [x] Input data is properly validated, `SELECT *` is avoided, SQL
injection is prevented (using placeholders for values in statements)
- [x] Added/updated tests
- [x] If paths of existing endpoints are modified without backwards
compatibility, checked the frontend/CLI for any necessary changes
- [x] If database migrations are included, checked table schema to
confirm autoupdate
- For database migrations:
- [x] Checked schema for all modified table for columns that will
auto-update timestamps during migration.
- [x] Confirmed that updating the timestamps is acceptable, and will not
cause unwanted side effects.
- [x] Ensured the correct collation is explicitly set for character
columns (`COLLATE utf8mb4_unicode_ci`).
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Martin Angers <martin.n.angers@gmail.com>
Co-authored-by: Gabriel Hernandez <ghernandez345@gmail.com>
Co-authored-by: Roberto Dip <rroperzh@gmail.com>
Co-authored-by: Sarah Gillespie <73313222+gillespi314@users.noreply.github.com>
Co-authored-by: Dante Catalfamo <43040593+dantecatalfamo@users.noreply.github.com>
Co-authored-by: Roberto Dip <dip.jesusr@gmail.com>
2024-08-29 18:51:46 -04:00
RachelElysia 837e15308b Fleet UI: Fix status indicator capitalizations (#19988) 2024-06-26 09:17:43 -04:00
Jacob ShandlingandJacob Shandling 15965a0bfd UI – Replace ReactTooltip with TooltipWrapper in 2 places (#19743)
Addresses #19300 


- [x] Changes file added for user-visible changes in `changes/`, 
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-06-17 10:47:24 -07:00
67c45d5417 UI – refactor forms and form fields (#16159)
## Addresses #15325 

- Define shared global styles for forms (`form` and `.form`s) and
`.form-field`s
- Sweep through the app, updating each form from being locally styled to
first prioritizing the global styles and only defining local styles
where needed for custom behavior
- Remove lots of unnecessary nesting of elements
- Other small bug fixes and improvements

### Samples, before (L) | after (R):
**Save query modal**
![Screenshot 2024-01-17 at 11 49
14 AM](https://github.com/fleetdm/fleet/assets/61553566/14f209fb-31db-41ef-8e63-e0d8994698c1)

**Edit query form**
![Screenshot 2024-01-17 at 11 50
35 AM](https://github.com/fleetdm/fleet/assets/61553566/b07e70ea-3095-4e4f-be73-95a3c499839b)

**Add hosts modal**
![Screenshot 2024-01-17 at 11 51
48 AM](https://github.com/fleetdm/fleet/assets/61553566/4ef1f410-a823-41d1-b2f6-ea8eb5231f93)


## QA Plan:
@xpkoala here's the same list from the issue, freshly de-checked for you
to use if it's helpful:
* Please check error states of each field

#### Specified by issue:
##### In "Save query" modal:
- [ ] Reduce space between checkboxes and their help text to 8px/0.5rem
for the following fields:
   - [ ] Observers can run
   - [ ] Discard data 
- [ ] Update the following checkbox labels to have normal font weight
(not bold):
   - [ ]  Discard data

##### On "Edit query" page:
- [ ] Update the following checkbox labels to have normal font weight
(not bold):
   - [ ] Observers can run
   - [ ] Discard data

##### In "Add hosts" modal, for copy text fields: 
- [ ]  match typical form form field styles
- [ ] Adjust the positioning of the copy icon to keep it from being too
far down

##### Further locations to check
- [ ] ChangeEmailForm.jsx 
- [ ] ChangePasswordForm.jsx 
- [ ] ConfirmInviteForm.jsx 
- [ ] ConfirmSSOInviteForm.jsx
- [ ] EnrollSecretModal.tsx
- [ ] ForgotPasswordForm.jsx
- [ ] LoginForm.tsx
- [ ] EditPackForm.tsx
- [ ] (New)PackForm.tsx
- [ ] AdminDetails.jsx
- [ ] ConfirmationPage.tsx
- [ ] FleetDetails.jsx
- [ ] OrgDetails.jsx
- [ ] ResetPasswordForm.tsx
- [ ] UserSettingsForm.jsx
- [ ] EditTeamModal.tsx
- [ ] IdpSection.tsx 
- [ ] DeleteIntegrationModal.tsx
- [ ] IntegrationForm.tsx 
- [ ] EndUserMigrationSection.tsx
- [ ] RequestCSRModal.tsx
- [ ] Advanced.tsx 
- [ ] Agents.tsx 
- [ ] FleetDesktop.tsx
- [ ] HostStatusWebhook.tsx front
- [ ] Info.tsx 
- [ ] Smtp.tsx 
- [ ] Sso.tsx 
- [ ] Statistics.tsx
- [ ] WebAddress.tsx
- [ ] CreateTeamModal.tsx
- [ ] DeleteTeamModal.tsx
- [ ] EditTeamModal.tsx
- [ ] AgentOptionsPage.tsx
- updated the layout of this page to align with the rest of the forms in
the UI – can easily revert if it's not what we want
- [ ] AddMemberModal.tsx
- [ ] RemoveMemberModal.tsx
- [ ] UserForm.tsx 
  - Used by both `EditUserModal` and `CreateUserModal`
  - A few different conditions that cause different rendering behavior 
- [ ] DeleteHostModal.tsx
- [ ] TransferHostModal.tsx
- [ ] LabelForm.tsx
- [ ] MacOSTargetForm.tsx
- [ ] WindowsTargetForm.tsx 
- [ ] BootstrapPackageListltem.ts
- [ ] EndUserAuthForm.tsx
- [ ] PackQueryEditorModal.tsx
- [ ] PolicyForm.tsx 
- [ ] SaveNewPolicyModal.tsx
- [ ] ConfirmSaveChangesModal.tsx
- [ ] Query automations modal
- [ ] Policy automations modal - addresses #16010 
- [ ] SoftwareAutomationsModal

## Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
Co-authored-by: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
2024-01-18 10:48:44 -05:00
Jacob Shandling 1524510e89 UI – capitalize and align status icon in Automations column (#14095) 2023-09-22 16:27:45 -05:00
RachelElysia 858092f137 Fleet UI: [tiny bug fixes] Table text cell vertical alignment [released], fix first letter capitalization [unreleased] (#14086) 2023-09-22 10:48:21 -04:00
RachelElysia 03bce9d369 Fleet UI: [second fix] Sentence case fixes (#13913) 2023-09-13 15:28:34 -04:00
Jacob ShandlingandJacob Shandling 53f57c44db UI - Queries page updates, pt.1 (#12784)
## Addresses #12636 – follow-up work for PR #12713

- Update Platforms column to render the user-selected platforms for a
query if any, otherwise those that are compatible
<img width="686" alt="Screenshot 2023-07-14 at 6 03 06 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/abd1f079-bdfe-45be-b1dd-58eb903672ef">

  - Clean up typing and names around this column 
- Encapsulate logic for query automations column cells into new
QueryAutomationsStatusIndicator component
  - Increase modularity and decrease coupling of StatusIndicator
- Cleanly handle overflowing queries table due to very long query name
<img width="512" alt="Screenshot 2023-07-14 at 6 07 20 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/6e970038-0aac-4f71-b21d-ececfa66b94f">

- Small copy and layout fixes

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-07-17 14:09:12 -07:00
Jacob ShandlingandJacob Shandling 7ff4b77fb9 UI: Merge scheduling functionality into queries page (#12713)
## Addresses #12636 

### See issue for list work done
![Screenshot 2023-07-12 at 6 47 04
PM](https://github.com/fleetdm/fleet/assets/61553566/47e3e5b2-0195-4f54-a377-8e5c03313acf)


![Frame-12-07-2023-06-43-32](https://github.com/fleetdm/fleet/assets/61553566/f72f2d41-609f-4409-8595-5f3e4f06d9bb)


### Notes for review:
- Because other work is based on this branch, TODOs / fixes are noted
here until the team comes to a strategy for merging all of the work:
- Add missing space in the Performance impact column "Undetermined"
tooltip text
- I'm having trouble confirming that the inherited queries table is
working right with the mock hard-coded data, though I did see it working
correctly previously. There's an issue with the page reverting to "All
teams" when trying to show the inherited table, though it does show the
table before re-rendering.

- This work is organized clearly by commit, so that might be a
manageable way to go through this code.
- Since the updated API for this work is not yet complete, this work can
be manually tested by either:
    - Using mock API infrastructure, or
- in `ManageQueriesPage.tsx`, comment out the two `useQuery` calls and
add appropriate mock data. You can then modify any fields of interest to
test their related UI functionality. For example, lines 119 -242 might
read:
```
// const {
  //   data: curTeamEnhancedQueries,
  //   error: curTeamQueriesError,
  //   isFetching: isFetchingCurTeamQueries,
  //   refetch: refetchCurTeamQueries,
  // } = useQuery<IListQueriesResponse, Error, IEnhancedQuery[]>(
  //   [{ scope: "queries", teamId: teamIdForApi }],
  //   () => queriesAPI.loadAll(teamIdForApi),
  //   {
  //     refetchOnWindowFocus: false,
  //     enabled: isRouteOk,
  //     select: (data) => data.queries.map(enhanceQuery),
  //   }
  // );

  // // If a team is selected, fetch inherited global queries as well
  // const {
  //   data: globalEnhancedQueries,
  //   error: globalQueriesError,
  //   isFetching: isFetchingGlobalQueries,
  //   refetch: refetchGlobalQueries,
  // } = useQuery<IListQueriesResponse, Error, IEnhancedQuery[]>(
  //   [{ scope: "queries", teamId: -1 }],
  //   () => queriesAPI.loadAll(),
  //   {
  //     refetchOnWindowFocus: false,
  //     enabled: isRouteOk && isAnyTeamSelected,
  //     select: (data) => data.queries.map(enhanceQuery),
  //   }
  // );

  const [
    curTeamEnhancedQueries,
    curTeamQueriesError,
    isFetchingCurTeamQueries,
    refetchCurTeamQueries,
  ] = useMemo(() => {
    return [
      [
        {
          created_at: "2023-06-08T15:31:35Z",
          updated_at: "2023-06-08T15:31:35Z",
          id: 2,
          name: "test",
          description: "",
          query: "SELECT * FROM osquery_info;",
          team_id: 43,
          platform: "darwin",
          min_osquery_version: "",
          automations_enabled: true,
          logging: "snapshot",
          saved: true,
          // interval: 300,
          interval: 0,
          observer_can_run: false,
          author_id: 1,
          author_name: "Jacob",
          author_email: "jacob@fleetdm.com",
          packs: [],
          stats: {
            // system_time_p50: 1,
            // system_time_p95: null,
            // user_time_p50: 1,
            // user_time_p95: null,
            // total_executions: 1,
          },
          performance: "Undetermined",
          platforms: ["darwin"],
        },
      ] as IEnhancedQuery[],
      undefined,
      false,
      () => {
        console.log("got the new queries");
      },
    ];
  }, []);

  const [
    globalEnhancedQueries,
    globalQueriesError,
    isFetchingGlobalQueries,
    refetchGlobalQueries,
  ] = useMemo(() => {
    return [
      [
        {
          created_at: "2023-06-08T15:31:35Z",
          updated_at: "2023-06-08T15:31:35Z",
          id: 200,
          name: "test",
          description: "",
          query: "SELECT * FROM osquery_info;",
          team_id: null,
          platform: "darwin",
          min_osquery_version: "",
          automations_enabled: true,
          logging: "snapshot",
          saved: true,
          // interval: 300,
          interval: 0,
          observer_can_run: false,
          author_id: 1,
          author_name: "Jacob",
          author_email: "jacob@fleetdm.com",
          packs: [],
          stats: {
            // system_time_p50: 1,
            // system_time_p95: null,
            // user_time_p50: 1,
            // user_time_p95: null,
            // total_executions: 1,
          },
          performance: "Undetermined",
          platforms: ["darwin"],
        },
      ] as IEnhancedQuery[],
      undefined,
      false,
      () => {
        console.log("got the new inherited queries");
      },
    ];
  }, []);
```

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-07-13 12:11:11 -07:00
RachelElysia 9ecf9dc09a Fleet UI: Update icons (6 icons only) (#11907) 2023-06-02 09:48:17 -04:00
Gabriel Hernandez 3b86ed0156 add components to storybook (#11500) 2023-05-03 17:51:33 +01:00
Jacob ShandlingandJacob Shandling a578e20930 UI: Add macOS settings (profiles) indicator and modal with data table (#9809)
# Addresses #9413

# Implements
https://www.loom.com/share/d1b66a3076b94bf2add4fcf8666649a4

- macOS settings indicator on host details and device user pages. Only
displayed if (1) the host is enrolled in a Fleet MDM server and (2) the
host has at least one setting (profile) enforced.
- macOS settings modal, toggled by clicking on above indicator. Contains
a data table with the name, status, and error messages, if any, of each
enforced macOS setting on the host.

# Notes
- To aid in reviewing, you'll probably want to focus on:
-
[DeviceUserPage.tsx](https://github.com/fleetdm/fleet/pull/9809/files#diff-be9f14d3cee9f345058212985c26b3452688c6d75853a5e9dcb968a69dfcbbd7)
and
[HostDetailsPage.tsx](https://github.com/fleetdm/fleet/pull/9809/files#diff-72f7403682d211fc8a84a411fc39c4a33c3eb6a33549a33f1179dd7da6a893cc)
-
[HostSummary.tsx](https://github.com/fleetdm/fleet/pull/9809/files#diff-435e720f1ad82e892bec00fbc9c14e01e9488b776ae293f9158500c66d85bd0d)
-
[MacSettingsIndicator.tsx](https://github.com/fleetdm/fleet/pull/9809/files#diff-e23079f72b13bd34eb978eded467265dad4f366a6fece60cd52c887f355f92d1)
-
[MacSettingsModal.tsx](https://github.com/fleetdm/fleet/pull/9809/files#diff-75a08aa5b66cc2b63fc616d8ba012e552376f23d3c3df01d875586857f326f53)
-
[MacSettingsTable.tsx](https://github.com/fleetdm/fleet/pull/9809/files#diff-5dc441b06f770f112bb32bb618e2140e9bbccb7ebf80d86ee57c2754e067a421)
and its associated
[MacSettingsTableConfig.tsx](https://github.com/fleetdm/fleet/pull/9809/files#diff-0ab0cb34e249e2a41bf51508d38bea018dc5e683b705308250241c42549ab093)
   
- Currently using mock data. Once #9599 is completed, #9888 will change
these components to use the real data
- 2/21 - removed mock data. Until the API returns the host.mdm.profiles
data, settings indicator and modal will not render
# Checklist

- [x] Changes file added
- [x] Manual QA
- [x] Updated testing inventory

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-02-22 08:13:12 -08:00
RachelElysia 7f6a42e4ac Fleet UI: Undetermined public ip tooltip (#9907) 2023-02-21 09:16:38 -05:00
Jacob ShandlingandJacob Shandling 665ed443b9 Refactor StatusCell to StatusIndicator (#8854)
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2022-12-13 10:04:07 -08:00