Commit Graph

101 Commits

Author SHA1 Message Date
RachelElysia
a594f89e8a
Unstyled focus button is not transparent (#5090) 2022-04-12 17:31:20 -05:00
RachelElysia
46e323cd9c
Host Details Page: Policy table truncates policy name (#5087) 2022-04-12 15:31:07 -05:00
gillespi314
1a2123a358
Improve UI responsiveness for tables at narrower screen sizes (#4926) 2022-04-07 14:12:38 -05:00
RachelElysia
118ae6499b
UI Accessibility: Ability to tab through app (#4699) 2022-03-28 17:31:36 -04:00
Tharun Rajendran
70a44dc262
chore(test): rewritten dropdown button component test using rtl (#4714) 2022-03-28 13:32:35 -05:00
gillespi314
deeaf9d036
Add ability to detect compatibility and update which hosts are checked for a policy (#4703)
Add new usePlatformSelector custom hook
Add new usePlatformCompatibility custom hook
Add new PlatformSelector global component
Refactor PlatformCompatibility as global component
Refactor sql_tools to TypeScript
Improve type definitions for context/policy
Align PolicyPage and QueryPage with platform compatibility changes
2022-03-21 11:51:00 -05:00
RachelElysia
4abd85b5b0
Global RevealButton: Refactor dropdown buttons (#4447) 2022-03-09 13:00:37 -05:00
Luke Heath
890ff7b3f7
Fix lint error (#4175) 2022-02-11 14:35:23 -06:00
eashaw
9af92b23aa
Update links to documentation (#4163)
* update links to documentation

* revert .sailsrc change

* fix broken link
2022-02-10 19:26:18 -06:00
Martavis Parker
bcfac603f0
Added components to Storybook library (#2768)
* added storybook

* added avatar component

* added button story

* added dropdown button story

* removed unused ellipsis component

* cleaned up modal path

* reorganized enroll secrets table file

* added flash story; removed unused persistent flash

* added fleet ace story

* added checkbox story

* added dropdown story

* added input story

* fixed storybook build

* fixed avatar

* added input with icon story

* added radio button story

* added select targets dropdown story

* added slider story

* added tooltip story

* added info banner story

* removed unused loaders; added spinner story

* added modal story

* removed unused NumberPill

* added pagination story

* lint fixes

* added documentation to run

* modified documentation

* fixed corelayout test

* fixed format for date-fns

* fixed date format that breaks tests

* wait for page
2021-11-06 23:41:09 -07:00
RachelElysia
ea3f0f127f
Manage Host Page: Spiffier icons for filter status/policy button/dropdowns (#2379) 2021-10-06 10:54:15 -04:00
Martavis Parker
5d647025f9
1497 improved query experience (#1998)
* Step 1 for improving query experience (#1591)

* fake change to create draft PR

* temp routes to work and not modify old query page

* created new API abstraction for query

* refactored App.jsx to prepare react-query

* fixed flow of redirects after page refresh; functional component added

* setup for getting data on edit

* implementing functions for query page

* Old form showing on new setup

* improving and breaking up query form

* no need for the helpers anymore; clean up

* added type for button component variant

* step toward new save modal; have to switch gears to #1619

* creating new query works

* clean up

* linting cleanup

* added default value for new query

* will address dynamic save disabled in edit step

* Step 2 for improving query experience (select targets) (#1732)

* fake change to create draft PR

* temp routes to work and not modify old query page

* created new API abstraction for query

* refactored App.jsx to prepare react-query

* fixed flow of redirects after page refresh; functional component added

* setup for getting data on edit

* implementing functions for query page

* Old form showing on new setup

* improving and breaking up query form

* no need for the helpers anymore; clean up

* added type for button component variant

* step toward new save modal; have to switch gears to #1619

* creating new query works

* clean up

* linting cleanup

* added default value for new query

* split steps into separate files for readability

* components laid out

* new targets picker

* function clean up

* styling tables

* fixing logic

* fixed logic to keep getting related hosts

* formatting targets for API

* fixed default query

* clean up

* styled target selectors; fixed target input styles

* began total count

* forgot to remove debugging code

* lint fixes

* added target count from API

* clean up

* able to remove selected host targets from table

* lint fixes

* Improving query experience - Step 3 (query results) (#1766)

* fake change to create draft PR

* temp routes to work and not modify old query page

* created new API abstraction for query

* refactored App.jsx to prepare react-query

* fixed flow of redirects after page refresh; functional component added

* setup for getting data on edit

* implementing functions for query page

* Old form showing on new setup

* improving and breaking up query form

* no need for the helpers anymore; clean up

* added type for button component variant

* step toward new save modal; have to switch gears to #1619

* creating new query works

* clean up

* linting cleanup

* added default value for new query

* split steps into separate files for readability

* components laid out

* new targets picker

* function clean up

* styling tables

* fixing logic

* fixed logic to keep getting related hosts

* formatting targets for API

* fixed default query

* clean up

* styled target selectors; fixed target input styles

* began total count

* forgot to remove debugging code

* lint fixes

* added target count from API

* clean up

* able to remove selected host targets from table

* lint fixes

* connected run query with modern React/JS; clean up

* linting fixes

* fixed logic to retrieve results from live query

* linting fixes

* created new, simpler query progress

* populating results and errors tables as expected

* syntax fixes

* fixing styles for query results

* more styling for query results

* manual merge from main

* Rename core->free and basic->premium

* Fix lint js

* Comment out portion of test that seems to timeout

* Rename tier  to premium if basic is still loaded

* go sum

* Query Experience Cleanup Tasks (#1807)

* fixes to get merged main branch to build and work

* moved screens for query pages; clean up

* updated and typed react ace for query form; clean up

* using console error instead

* added real types instead of `any` except for errors

* query side panel ts and functional. prep for close task.

* ability to hide, show query table sidebar

* improved live query status warning

* added loading and error state for targets search

* error screen for targets; improved loading display

* now using API-created label for all linux

* missed some files on previous commit

* able to edit query

* clean up

* lint fixes

* query results showing as they come

* remove unused code

* removed old query page. major file cleanup.

* removed selectedTargets redux implementation

* removed unused redux actions and reducers

* removed unused keys in initial state

* selectedOsqueryTable is now using context API

* removed all querypages redux code

* set up context for app and user

* fixed auth with temp fix for wrapper

* completed redux removal from query page

* fixed var names coming from main branch

* fixed var name changes coming from issue 1501

* fixed save popup bug; clean up

* added permissions

* fixed login redirect

* removed unused props

* linting fix

* clean up

* removed unused component, refactor, and clean up

* fixed styles for step 1 as admin

* fixed styles for step 1 as observer

* fixed percentage of online hosts

* added loading progress to query stop button

* reset query status on run again

* added download icon to export button text

* fixed error reset on name input; fixed styles

* fixed bug where query value wasn't saving

* fixed query value when blank

* fixed bug - default query was running every time

* auto adding host from url to targets

* fixed flows for repeating run and save steps

* fleet ace is now TS and functional

* fixed a couple of tests

* fixed issues with query value text inconsistencies

* fixed query side panel not showing

* hiding error count if not > 0

* fixed showing editor for different roles

* using integer for targets

* go sum

* fixed targets param

* catching all errors while running query

* fixed hover state for title and description

* ignore unit test for now; lint fixes

* locking react-ace version

* ignoring tests breaking in github actions

* brought tests back

* fixing file name

* fixing file name again

* fixed e2e test

* have to ignore tests for now

* ignore certain premium tests for now

* one last test to revamp

* another test

* fixed teamflow test

* fixed observer query 403

* lint fixes

* fixed maintainer test

* added changes file

Co-authored-by: Tomas Touceda <chiiph@gmail.com>
2021-09-10 12:06:37 -07:00
noahtalerman
20792e7356
Add new loading spinner, edit text-icon buttons (spiffier) and rename SiteNavSidePanel (#1684)
- Update icon for "Edit columns" button on **Hosts** page
- Update `text-icon` button variant
- Add new loading spinner
- Rename `SiteNavSidePanel` to `SiteTopNav`
- Use `text-icon` button variant where appropriate
- Disable pagination on the **Schedule** page
2021-08-16 14:47:04 -04:00
RachelElysia
e8aae0dd25
Spiffier UI: Label pills (#1660) 2021-08-13 17:34:04 -04:00
RachelElysia
8e6f04d7c5
Spiffier buttons in UI (#1583) 2021-08-09 12:38:13 -04:00
RachelElysia
edc132ff18
Manage schedules page: Spiffier styling (#1503) 2021-07-29 15:47:04 -04:00
Martavis Parker
ec23d4ee8e
Select all matching hosts (#1226)
* #940 passing matching props to table; typescript

* #940 fixed use of results title

* #940 logic to swap states of selected and not

* #940 optimized rendering selected text

* #940 began styling to match flexbox spacing

* #940 added logic to API

* #940 clean up

* #940 fixed action

* #940 fixed conflict and coment

* #940 hide select matching if under 100 hosts

* #940 fixed issue with status filter
2021-07-10 10:29:27 -07:00
RachelElysia
ed08190420
Update table row height and button font size (#1299) 2021-07-05 15:26:38 -04:00
Martavis Parker
7af97579fe
Frontend of usage statistics (#1177)
* #454 added usage stats disclaimer to setup confirmation

* #454 added new section to settings for usage stats

* #454 fixed vulnerability for hrefs

* removed jsx file

* #454 added logic to checkbox

* #454 created modal to preview usage stats; cleanup

* fixed tests and linting
2021-06-23 15:19:01 -07:00
Martavis Parker
3af64748ab
Pressing Enter on setup's Confirmation page (#1141)
* #917 fixed enter key for last page; TS overhaul

* #917 clean up

* Update frontend/components/forms/FormField/FormField.tsx

Co-authored-by: Zach Wasserman <zach@fleetdm.com>

* #917 fixed tests and linted

Co-authored-by: Zach Wasserman <zach@fleetdm.com>
2021-06-18 13:33:45 -07:00
RachelElysia
1b131bd9db
Packs page: action icons (#935)
* Render packs page new icons: Enable, disable, delete, search
2021-06-03 16:50:13 -04:00
RachelElysia
c42f150fac
Query Edit/Run Page: Observer view (#820)
* Query Edit/Run page renders based on user role
* Original UI for global admin/ global maintainer
* New UI for global observer / team maintainer / team observer
* New create new query UI for team maintainer
* Styling matches Figma
* Tests modified accordingly

Styling Closes #859

Co-authored by: Sarah Gillespie @gillespi314
Tests co-authored by: @ghernandez345
2021-05-27 12:06:24 -04:00
Noah Talerman
72882e8f9f Merge branch 'master' into teams 2021-05-19 13:16:54 -04:00
noahtalerman
f2755ec93e
Add icon button styles and edit TableContainer to support styles (#713)
- Add `text-link-icon` button variant
- Add `actionButtonVariant` and `actionButtonIcon` props to `<TableContainer />`.
- Add 3 new icon assets (pencil, trash, and edit columns)
2021-05-18 12:30:57 -04:00
RachelElysia
58445ede82
Replace icons (#747)
* Replaces dropdown icon, close icon, carat icon, collapse icon, add icon

Co-authored-by: Sarah Gillespie <sarahgillespi314@gmail.com>
2021-05-10 16:00:34 -04:00
Noah Talerman
81bc137195 Merge style variables from master into teams 2021-04-30 18:12:49 -04:00
noahtalerman
0f48eb8525
Bring new style variables from teams into master (#707)
This PR brings the style changes made in the "Align Fleet UI colors with Figma components"
#615 and "Align Fleet UI with Figma (spacing and fonts)" #628 PRs into the master branch.
2021-04-30 17:32:50 -04:00
Zach Wasserman
a17556b2db Merge branch 'master' into teams 2021-04-30 09:40:10 -07:00
Gabe Hernandez
a85476c23b
implement member page for team details (#685)
* added reducers and kolide api teams code, hooked up empty state

* request for get all teams and remove unused loading bar

* added create team functionality|gs

* update link cell to be more generic

* create teams detail page and hook it up

* added tabbing and styling to top nav team details

* added edit and delete modal functionality

* add in table and modals for members for teams

* created reusable edit user modal and use it in manage teams page

* creating add member autocomplete

* hook up adding members to teams

* hook up real members from api into table, and empty state for table

* fix proptype warning

* hooked up table querying for member page

* added remove member modal

* added tems to edit useres on member page

* finish remove member from team

* fixed up editing on members page

* fix the role value in member table

* fix prettier errors

* fixes from PR comments round 1

* add missing error handler on add member

* add dynamic team name to member page and user dynamic user and team names to succuess and errors

* add test for userManagementHelper module

* fix lint errors

* fix tests

* add member test to row results on member page
2021-04-29 14:47:33 +01:00
RachelElysia
a8ce68f56a
Query modal on Hosts Details Page (#660)
* Query modal with error, no saved queries, and saved queries
* Ability to search saved queries
* Renders saved queries
* Queries page link uniquely from selected query/host
* Update hostDetailsPage test and refactored component onto own jsx

Pair programming, reviews, and suggestions: Noah Talerman <noahtal@umich.edu>
Reviews and suggestions: Zach Wasserman <zach@fleetdm.com>
2021-04-28 11:08:00 -04:00
Gabriel Hernandez
04712c0426 Merge master into teams 2021-04-14 17:52:15 +01:00
Gabe Hernandez
efb35b537a
add prettier and have it format all fleet application code (#625)
* add prettier and have it format all js code except website:
:

* trying running prettier check in CI

* fix runs on in CI

* change CI job name

* fix prettier erros and fix CI
2021-04-12 14:32:25 +01:00
noahtalerman
cdf43a79bd
Align Fleet UI with Figma (spacing and fonts) (#628)
This if the 2nd PR as part of the of the Align components in Fleet UI with design system in Figma #539

These changes **refactor the spacing and font sizes** used by the frontend. 

- Change the scss variables in `padding.scss` and `fonts.scss`. 
- Replace custom styles with the new variables throughout all stylesheets.
2021-04-09 17:30:42 -07:00
noahtalerman
c2700ee5c6
Align Fleet UI colors with Figma components (#615)
- This if the 1st PR as part of the of the Align components in Fleet UI with design system in Figma #539
- These changes replace all the color variables in /styles/var/colors.scss with new colors and naming convention used in Figma.
2021-04-09 12:04:11 -07:00
Gabe Hernandez
d0ded91d0b partial implementation of user table with generic table and new create user form (#500)
* use new data table in user manage page'

* remove default empty array hiddenColumns props, was causing render performance problems

* remove unused tooltip in hostcontainer

* add search to user manage table

* add query params to user GET requests

* move createUserForm closer to user management page

* starting to implement create user modal

* starting to add team checking functionality to create user

* styling of select team form

* changing logic for selectedTeamsForm, simplifying

* updated SelectedTeamsForm to handle own state and pass back relevant state to parent

* created reusable infobanner component and use it in osquery options page

* use infobanner in createuserform

* create new Radio component and use in createuserform

* create new Radio component and use in createuserform

* added new radio buttons to createUserForm

* finish custom radio button styling

* finish styling of radio in createUserForm

* fix and add entities/users#loadAll tests

* remove unneeded tests and updated broken ones on UserManagementPage

* remove unused modules
2021-03-31 11:58:29 -07:00
Gabe Hernandez
0b9d20329b
add ts to data table components (#364)
* chnage webpack to resolve typescript modules. convert TextCell to TS

* change headercell and statuscell to ts

* ignore casesensitve error, seems a bit buggy

* ignore camelcase error, we already use snakecase many places

* updated LinkCell and modules it depends on to typescript

* fix up some warnings from changes

* fix more types in textcell and hosttableconfig

* use alias imports

* add require button state interfcae
2021-03-03 16:51:39 +00:00
Gabe Hernandez
3546b7d41a
adding typescript and updating linting to work with it (#356)
* updated typescript version and tsconfig in project

* updated eslint version

* change from experimental export to supported export

* removed accidentally added script

* turn off buggy jsx-a11y eslint rules

* remove unused tslint.json

* fix wrong jsx-a11y depedency

* use correct eslint-plugin-jsx-a11y version

* fix rest of linting errors

* move back js-yaml version to 3 major
2021-03-01 07:48:51 +00:00
noahtalerman
4e8c5e7f86
Add Host details page (#238)
This PR adds a new Host details page as part of the Hosts UI project #162

Summary of changes:
- New component <HostDetailsPage />
- Move "Query" and "Delete" buttons from the hosts list to the Host details page
- Add new button variants label and text-link
- Add react-tooltip package to the project (v4.2.13)
2021-01-28 12:44:48 -08:00
noahtalerman
573097c2a3
Close UI Refresh. Update button styles. Edit status labels for hosts list and users list. (#139)
The final PR for the UI Refresh #38.

- Complete UI issues caught during the Dec. 09 QA pass.
- Update button and color styles, including hover and active states, to align with the mockups.
- Update status labels in the hosts list and users list. The status label now includes a colored circle along with a text description.
- Fixes #138.
2020-12-18 17:36:39 -08:00
noahtalerman
49e71e4ed6
Add new icons for Hosts page. Fix hosts list width on wide screens. (#128)
- Add new PNG files for the new icons in the left side navigation and the right side labels on the Hosts page.
- Rename the old `<Icon />` component to `<KolideIcon />` and create a new `<Icon />` component. The ultimate goal is to get rid of the `<KolideIcon />` and `<PlatformIcon />` components and use the encompassing `<Icon />` component for all icons. The full transition will be made when we have icon assets to replace all the kolide icons and platform icons. Currently, we don't.
- Rename the `icon_name_for_label.js` utility to `icon_name.js` because the utility now includes `iconNameForLabel()` and `iconNameForPlatform()` functions.
- Fixes issue #127.
2020-12-14 18:24:16 -08:00
noahtalerman
98799fdff8
New styles for 404, 500, Login, User settings, and Confirm invite pages. (#108)
- Kolide404 and Kolide500 components renamed to Fleet404 and Fleet500
- Styling for Login and Confirm invite pages are consistent with the recent changes to the Setup page.
- Add "*" character to the 404 <Route />'s path property. Now the 404 page renders when there is no exact path match.
2020-12-08 17:45:08 -08:00
noahtalerman
5dd9b75e9c
Update query page (edit, new, manage) and packs page (edit, new, manage) styles. (#106)
The goal of this PR is to update the style across the query and packs pages so they are consistent with the latest global styles (colors, buttons, and fonts).
2020-12-08 12:07:54 -08:00
noahtalerman
028b968ff5
New styles for label creation form. (#101)
The goal of this PR is to update the styles of the LabelForm component.
Also include global style changes for form components (FormField, LabelForm, and others).
2020-12-07 15:08:59 -08:00
Zach Wasserman
0670db66c4
Migrate JS tests to Jest and update libraries (#74)
- Move from Mocha to Jest for JS testing (Jest seems to have better support for
 'watching' tests and a more active community these days).
- Codemod existing tests to Jest syntax (using https://github.com/skovhus/jest-codemods)
- Fix some errors in tests that were previously hidden.
- Update Babel.
2020-12-01 10:15:12 -08:00
noahtalerman
57950a9645
Update host side panel. New styles for labels. (#72)
The goal of this PR is to implement the new styles in the mockups and update the right-side panel on the hosts
page. This right-side panel includes built-in labels, custom labels, and filtering for custom labels.
2020-11-30 12:17:55 -05:00
noahtalerman
05b8e432e5
Update nav layout and styles. Cleanup unused css. (#71)
The goal of this PR is to update the main navigation's layout and styles in accordance with the mockups created by @edamamedesign. The orgLogoUrl still needs to be tweaked so uploaded photos display nicely. For now, only the `username` is displayed at the top of the navigation and not the `orgName`.
2020-11-30 12:07:44 -05:00
noahtalerman
51cfb07f64
Implement global colors. Add italic font. (#64)
The goal of this PR was to insert new colors, remove legacy colors, and update only the styles accordingly. The Nunito Sans Italic font was also added.

Later PRs will include layout, copy, and style change to individual components. These later changes will more exactly resemble the current mockups.
2020-11-24 08:59:03 -08:00
noahtalerman
23ce98ec51
Add Nunito Sans font and update global styles. (#59)
This is the first PR as a part of the Fleet UI Refresh #38.

Changes include:

- Add Nunito Sans font files and modify global styles to reflect the font change.
- Modify global font variables to reflect new sizing and weight naming conventions.
-- New sizing and naming conventions:
--- SIZE: xx-small: 12px, x-small: 14px, small: 16px, medium: 20px, large: 24px, x-large: 28px
--- WEIGHT: regular: 400, bold: 700
- Remove the old Oxygen font files.

Changes to other style sheets reflect the changes to the new font sizing and weight naming conventions for global variables. The changes don't necessarily use the correct size (as illustrated by mockups). Those "up to spec" sizing changes are to come.
2020-11-19 16:51:22 -08:00
Zachary Wasserman
ccc8581229
Upgrade eslint and dependencies (#2255)
Updates configuration and fixes issues introduced
2020-07-06 19:31:48 -07:00
Zachary Wasserman
6767369d48
Upgrade React to version 16 (#1983)
- Update all associated dependencies
- Very minimal changes to components
- Extensive refactoring for broken tests

Closes #1978
2019-01-14 13:45:28 -08:00