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.
* 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
* create skeleton of team management page and hook it up with routing
* added reducers and kolide api teams code, hooked up empty state
* request for get all teams and remove unused loading bar
* fix sending teams response to store
* added create team functionality|gs
* added edit and delete fuctionality to teams management
* fixed up some edge cases for deleting and editing teams
* remove unused UserRow
* get list of teams for user to add new users to, fix up Userform
* 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
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.
- 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.
Label flow
- Create a new label and make sure it shows up on the hosts page
- Edit the label name
- Delete the label
Query flow
- Create a new saved query
- Edit the query
- Delete the query
Pack flow
- Create a pack
- Edit the pack name
- Schedule a query
- Remove a query from the pack
- Delete the pack
Closes#597
* hook up user and invite data together for data table
* added client derived data to user table
* hooked up action dropdown to table
* hooked up edit modal and password reset
* started adding editing user functiaonlity
* add query params to /invite call
* clean up editing teams
* update select team from to handle existing users with teams
* update closes modal now
* reuse getUser to clean up code in userManagementpage
* pass form data to updating user that is not the current User
* add dynamic userform submit text and fix tests
* fix lint error in table component
* added empty state for user table
* clean up unused data table props
* added delete modal
* add delete user functionality
* add delete option for invite
* Add styles for rows in user table and action dropdown cell
* hook up user and invite data together for data table
* added client derived data to user table
* hooked up action dropdown to table
* hooked up edit modal and password reset
* started adding editing user functiaonlity
* add query params to /invite call
* clean up editing teams
* update select team from to handle existing users with teams
* update closes modal now
* reuse getUser to clean up code in userManagementpage
* pass form data to updating user that is not the current User
* add dynamic userform submit text and fix tests
* fix lint error in table component
* added empty state for user table
* clean up unused data table props
* added delete modal
* add delete user functionality
* add delete option for invite
* Merge in generateClassTag
* Refactor table styles
* Add newline to DropdownCell style sheet
Co-authored-by: Gabriel Hernandez <ghernandez345@gmail.com>
* update checking for admin through global_role in nav
* added defaultGloablRole for creat user modal
* remove unused comment
* fix broken tests
* reenabled search for users tests
Co-authored-by: noahtalerman <47070608+noahtalerman@users.noreply.github.com>
* e2e test for manage user page, and updating styles for ui components
* make checkbox more accessible and create e2e test around creating user
* add react testing library and use it for radio testing
* clean up comments
* update docs and clean up
* 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
- Update layout on _Login_ page by moving "Log in with SSO" button into the card.
- Update layout on _Confirm SSO invite_ page and remove Confirm SSO invite styles. This page now uses the same style sheet as the standard _Confirm invite_ page.
* add stick side nav to org settings and fixes to sticky nav on other settings pages
* remove unused html
* remove unused href attr
* remove unneeded react fragment
This PR includes additional style changes included in the UI layout changes project #360
Changes include:
- Moving the <FlashMessage /> component below the new horizontal nav
- Editing the "Save options" button on the Osquery options page
- Adding a pseudo-element to <SettingsWrapper /> to prevent bold text from shifting the layout
- Add sentence case for tabs in <SettingsWrapper />
- Adding $horizontal-gradient to colors.scss
* 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
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)
- Conduct complete visual QA for recent icon changes merged in #128
- Edit styles to vertically align the "copy" and "reveal" icons in EnrollSecretTable
- Clean up unused <KolideIcon /> properties in <SelectTargetsDropdown />
- Add min-height to left side navigation. At window heights under 500px, the user can now vertically scroll to reveal the remainder of the nav options.
- Edit 500 page styles by moving the "Show error" button above the link to "File an issue"
- Add back <KolideIcon /> to SelectTargetsDropdown. <KolideIcon /> was prematurely replaced.
- Edit styles to allow SelectTargetsDropdown to vertically scroll on overflow.
Fixes#168
- Add help text within dropdown in smaller font size underneath "Require password reset" saying "This will revoke all active Fleet API tokens for this user."
- Update API docs to use "API token" parlance instead of "Auth token"
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.
Fixes#65 by bringing in new regular and bold Source Code Pro monospaced fonts.
- Remove old Source Code Pro font files
- Add new platform icons to <QuerySidePanel />
- Edit styles in <EditPackForm />
- 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.
- 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.
The goal of this PR is to implement the new global styling (colors, buttons, and fonts) to the "App settings" and "Osquery options" pages. These pages are only visible to users granted an admin role.
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).
The goal of this PR is to change the layout of the manage users to a table (list view).
Move the user actions into the table view.
Move EditUserForm into a Modal
Update styles for InviteUserForm
Edit copy for the configuring SMTP warning.
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).
- 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.
The goal of these changes is to update the main content (center column) of the /hosts page.
What is included in these changes:
- Removing the grid view for hosts. This required removing the actions, reducers, and props using to toggle the display between grid and table view. The toggle buttons in the UI are also removed.
- Adding host_cpu, memory, and uptime columns to the table. This increases the table's width which is now horizontally scrollable.
- Removing the HostDetails component used in the grid view. Moving the helpers.js file to HostTable. Adjusting JS tests to account for these changes.
- Updating pagination styles.
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.
- Output easy to parse stack traces during run of tests
- Fix some spurious warnings and errors in tests
- Add --exit flag to Mocha invocation to fix hang due to timers in ACE editor
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.
Created 3 new components: <OsqueryOptionsPage /> , <OsqueryOptionsForm />, and <YamlAce />
The <OsqueryOptionsPage /> component is rendered at the new route /admin/osquery. The user navigates to this route by selecting the "Osquery Options" sub-navigation in the admin dropdown menu.
On the Osquery Options page, the user is presented with a ACE editor filled with the current osquery options. The current osquery options are retrieved from the serve when the page component mounts. These current osquery options are stored in the osquery slice of state.
Clicking "UPDATE OPTIONS" will trigger a form submit and hit the v1/kolide/spec/osquery_options endpoint if the yaml is valid. If the yaml is not valid, an error message is presented to the user with details on what the error is and where it occurred. If the yaml is valid, the osquery options will be updated even if the options haven't change.
- Using componentDidUpdate() to check for currentPage change in setup registration form. Initially tried adding `autofocus` prop to the first `<InputFieldWithIcon />` on each page. As seen in AdminDetails page. Didn't work. I believe React only pays attention to `autofocus` when the <input> is re-rendered.
- Calling focus() on page's first input when currentPage changes and is true. Using refs callback
- Delaying focus by 300ms using setTimeout because the `.user-registration__field-wrapper` has a transition duration of 300ms. Setting the inputs focus immediately creates a snapping movement and ruins the smooth transition.
Fixes#936
- Debounce frontend to reduce number of target searches in live query.
- More efficiently calculate label counts in live query and hosts
dashboard. Instead of using the (slow) CountHostsInTargets function,
retrieve the host counts while looking up the labels.
- Optimize targets search query. Removing the nested query retrieves the
same logical result set, but substantially optimizes MySQL CPU usage.
Testing indicates about a 50% reduction in MySQL CPU usage for the
frontend targets search API call after applying this change.
"Manual" labels can be specified by hostname, allowing users to specify
the membership of a label without having to use a dynamic query. See the
included documentation.
Fleet used significant resources storing the full network interface
information for each host. This data was unused, except to get the
IP and MAC of the primary interface. With these changes, only those
pieces of data are stored.
- Calculate and store primary IP and MAC
- Remove transaction for storing full interfaces
- Update targets search to use new IP and MAC columns
- Update frontend to use new new columns
- Add toggle to disable live queries in advanced settings
- Add new live query status endpoint (checks for disabled via config and Redis health)
- Update QueryPage UI to use new live query status endpoint
Implements #2140
Doing so has long resulted in an error when submitting the form. This
disables the input field when editing the logged in users details in the
admin panel.
The logged in user can still change their own email using the "Account
Settings" page accessed in the top left of the sidebar.
Almost two years ago, we began referring to the project as Fleet, but there are
many occurences of the term "Kolide" throughout the UI and documentation. This
PR attempts to clear up those uses where it is easily achievable.
The term "Kolide" is used throughout the code as well, but modifying this would
be more likely to introduce bugs.
This PR adds support for the SMTP LOGIN authentication method. Office 365 Exchange removed support for PLAIN authentication some time ago, and only supports LOGIN and an OAuth2 authentication method. This patch has been tested with a licensed O365 account. This method should also be usable with any other email server that advertises LOGIN in its 250-AUTH response.
Note: If using this with O365, the account used must not have MFA enabled.
Closes#1663
- Replace uses of deprecated Bourbon helpers with raw CSS
- Add autoprefixer into the build chain to prefix the now removed helpers
This process was achieved by running through each of the deprecation warnings and using the following bash function to replace it in all files:
```
function bourbon-deprecate() {
grep -rl "@include $1" ./frontend --exclude-dir=.git | xargs sed -i '' -E "s/@include $1[(](.*)[)]/$1: \1/g"
}
```
For some helpers, this did not result in valid CSS, so manual modifications were made.
Closes#1189#1274
Closes issue #1456 This PR adds a single sign on option to the login form, exposes single sign on to the end user, and allows an admin user to set single sign on configuration options.
Closes#1502. This PR adds support for SSO to the new user creation process. An admin now has the option to select SSO when creating a new user. When the confirmation form is submitted, the user is automatically authenticated with the IDP, and if successful, is redirected to the Kolide home page. Password authentication, password change and password reset are not allowed for an SSO user.
* Adds tests for the TargetDetails component
* Adds tests for Select Targets Menu
* Rename target_stub to target_mock
* Adds tests for the SelectTargetsDropdown & minor refactor
* Isolate each API entity
* Improve code structure in API client and request mocks
* Standardize on a request mock structure
* Use helper for creating request mocks
* Adds Request class to handle API requests
* API client for patching a scheduled query
* Change select to check on ScheduledQueriesLists
* Clicking a scheduled query list item selects the scheduled query
* Helpers to format scheduled queries for client/server
* Allow updating a scheduled query
* Form cancel button
* Stop rendering results when query hasn’t been run
* Adds QueryPageSelectTargets component
* Re-arranges target select input on Query Page
* Adds label to KolideAce component
* Re-arrange inputs on the Query Form component
* API client to create and get an app license
* Fixes unhandled promise rejection errors in redux config
* License Page and Form
* Adds getLicense action
* Adds License key area to App Settings Form
* Use license.token instead of license.license
* Implement API client
* Adds key icon to License Form
* Adds License Success component
* Render License Success on License Page when there is a license
* Adds persistent flash actions and reducer to redux
* Adds nag message middleware
* Moves FlashMessage component to flash_message directory
* Adds Persistent Flash component
* Renders Persistent Flash component from Core Layout
* Adds Kyle's styles
* Change license validation message
* Finishing touches for app config form license area
* Handle revoked licenses
* License Page hits setup endpoint
* Display server errors on license form
* Changes 0 allowed hosts to unlimited
* Trims JWT token before sending to the server
* GET setup page after submitting license
* Catches errors when polling for data on Manage Hosts Page
* Sends platform parameter to server on label create
* Remove unnecessary condition to format platform param
* Clean up scheduled query formData
* Update admin API client
* updateAdmin redux action
* Changes UserManagementPage actions for update admin
* Enable user API client
* Enable user redux actions
* Change UserManagementPage to dispatch enable user actions
* Connect change password to API
* PATCH packs with updated attributes only
* PATCH queries with updated attributes only
* PATCH user updates with updated attributes only
* Prevent setting state on unmounted component
* Load all packs on the manage packs page
* Do not send target info to server if unchanged
* Moves SmtpWarning to the components directory
* Renders base errors on invite user form
* Prevents add user and displays warning if smtp not configured
* Wait to render content until API calls finish
* Removing requirment for org avatar
* Convert /setup to multiple forms
* Getting kinks worked out of Enter key
* Fixing typescript nonesense linting issues
* Allow form field values to be an array
* Send the server host and label ids on create
* Get and display the targets in a pack
* Adds target_type to labels and hosts
* Allow updating a pack’s targets as well as name and description
* Adds select targets dropdown to edit pack page
* Adds targets to dropdown when pack is edited
* add a js validator that makes smtp server port required
* specifying that the InputField should be a number. this doesn't work, but i think that it should.
* casting the port as an int as a stop-gap fix
* email doesn't already have to be enabled to be enabled
* don't return the smtp password from the API
* show a fake placeholder password if the username is also set
* error type for @groob
* consistent error handling
* Display server errors in InviteUserForm
* Handle errors in Form component
* Refactors query form
* creates KolideAce component
* Renders QueryForm from query page and manage hosts page
* Moves ace editor and select targets dropdown to query form
* Render base errors in Form HOC
* LoginPage and ForgotPasswordPage server errors
* Ensure unique key for user blocks
* Adds base error to login form and forgot password form
* Adds base error to query form
* Adds base error to Pack Form
* Adds errors to confirm invite form
* Adds clearErrors action
* clear errors when confirm invite page unmounts
* Handle errors in the App Setting page
* Handle server errors in the User Settings Page
* Handle server errors in the User Management Page
* Display packs page at /packs/manage
* Adds NumberPill component
* Filter packs list
* Render the pack info side panel when no packs are selected
* Adds packs list
* Moves state management to page component
* Display selected pack count
* Render bulk action buttons
* API client - update pack
* API client - destroy pack
* Adds update/destroy functions to packs redux config
* Bulk actions (enable, disable, delete)
* Selecting a pack updates state
* PackDetailsSidePanel updates pack status
* Link to edit pack on side panel
* sets selected pack in URL
* Sets color for unsettled buttons
* Loads scheduled queries for selected pack in All Packs Page
* PackDetailsSidePanel component
* PackDetailsSidePanel styles
* styles PacksList component
* Stop rendering flash when pack status is updated
* Makes full row clickable
* highlight selected pack
* AppSettingsPage at /admin/settings
* Adds App Settings to site nav items
* SMTP not configured warning
* Creates AppConfigForm
* Avatar preview
* API client to update app config
* Creates OrgLogoIcon component
* Hide username/password when no auth type
* Creates new PackComposerPage at /packs/new
* Creates PackForm component
* Adds PackForm to PackComposerPage
* Creates QueriesListItem
* Creates QueriesList
* Creates QueriesListWrapper
* Get all queries when the Packs Composer Page loads
* Form HOC handles updates to formData prop
* Creates form to configure scheduled queries
* QueriesListWrapper renders ConfigurePackQueryForm
* search queries input filters queries list
* Empty state text
* create pack when user submits the new pack form
* Adds Edit pack page to /packs/:pack_id/edit
* API client - get scheduled queries for a pack
* API client - create scheduled query
* Redux config for scheduled queries
* Remove scheduled queries from packs
* Add labels to pack on create
* Add disabled state to the select targets dropdown
* Adds edit route and pushes to new route on edit click
* Adds cancel button to edit pack form
* Adds Checkbox that selects all scheduled queries in table
* Adds campaigns to redux state
* Update campaign with web socket data
* Destroy the current campaign when creating a new one
* close the socket when leaving the page or creating a new campaign
* Allow stopping a running query
* Update campaign with query results
* Adds QueryResultsTable
* Display flash message if campaign can't be created
* Allow filtering query results
* Adds filter icon
* Prevent query text updates when the query is running
* Host side panel
* Query form handles labels
* QueryComposer handles labels
* ManageHostsPage add label transitions
* Stop preventing default on click outside of ellipsis menu
* get labels from API
* use real label data in hosts side panel
* create label on label form submit
* adds platform dropdown
* Validate query text
* Label header
* validate presence of query text
* Stop sending click event to click handler prop
* Delineates between hosts & labels in dropdown options
* Render target details when a moreInfoTarget is present
* Remove moreInfoTarget when the select is closed
* Remove modal
* refactor formatting targets API response
* Adds + icon to dropdown options
* Restructures dropdown rendering
* API call to create queries
* Add queries to redux
* create query when query form is submitted
* Redirect to ShowQueryPage after creating query
* Removes theme dropdown and NewQuery component header
* Extract NewQueryPage component state to redux state
* Pass logic down to NewQuery component as props
* Changes NewQuery component name to QueryComposer
* Render NewQueryPage for /queries/:id route
* Update ReduxConfig for loading a single resource
* QueryPage tests
* Get query when the query page loads
* catch errors when query is invalid
* Renames UpdateQueryForm to QueryForm to re-usability
* Changes InputField to a controlled component
* Always render the Query Form on Query Pages
* Removes SaveQuerySection
* Updates to NewQuery & SaveQueryForm
* SaveQueryFormModal
* Load the SaveQueryFormModal on "Save Query" click
* Run query button
* hide modal form after submit
* Disable run query btn without selected targets
* Api client get targets
* Allow entities to parse full api response
* responsive nav style fixes
* Add disabled prop to button
* Add targets from API to target select input
* customize target rendering in input field
* call API on select target input change
* display # hosts selected
* Adds new icons to icon font
* Customize select targets input options
* Update directory structure
* restructure select targets input
* Adds hosts to labels
* Host modal styles
* ShadowBoxInput component
* TargetInfoModal for labels
* consistent entity response in api client stubs
* Fix bug removing multiple hosts in target select input
* change Button component to use css classes
* Updates eslint packages
* Expected parentheses around arrow function argument having a body with curly braces
* Prop type `object` is forbidden
* Visible, non-interactive elements should not have mouse or keyboard event listeners
* Prop type is defined but not used
* Unexpected use of file extension "jsx"
* Expected 'this' to be used by class method
* HTML entities must be escaped
* Prevent default behavior on more options button click
* validate query text
* Update structure of submitted SaveQueryForm data
* form calls correct prop function when invalid query text
* Lowercase directory names
* Adds loadAll action to redux entity config
* API Client get invites
* Add invites to the user management page
* Updates user block styles on user management page
* Submit modal form on enter
* Modify details form styles
* Enter submits edit user form
* Removes unused admin dashboard page
* API Client - revoke invites
* Delete invite entities in redux
* Revoke invites from admin manage users page
* Show success flash message after user invite is revoked
* QuerySidePanel component
* Adds all osquery table names to ace editor mode
* kolide theme for strings
* Detect OS from browser
* Show utility and specs availability as 'All Platforms'
* Show column description as alt text
* Only send changed user attributes to the server
* Improve flash message styles
* Do not allow admins to demote or disable their own account
* Disable admin actions against self
