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).
- The goal of this PR is to update the styles of the "Add new host" modal.
- Move the "Add new host" button from the hosts sidebar to the center column.
- Add max-width to the hosts list container and the hosts header.
- 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 second PR as part of the Fleet UI Refresh #38.
The goal of this PR was to insert all updated Fleet assets and remove all old assets. More style changes, including the exact sizing and placement of the new images, will occur in a future PR.
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.
Updated the 500 page component to render a "SHOW ERROR" button.
This button is only rendered if the errors slice of the state contains an error and the base property exists. Otherwise, the 500 page will not render this button because there is no error message to show the user.
Created a errors500 reducer and actions to update the state tree when a 500 error occurs. When 500 error occurs, the errors slice of state is updated with the error object. When the 500 page component unmounts the error object is removed from state.
Demo: https://www.loom.com/share/b87c4aee42274e7bb553e703d3f950c6
"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.
This commit takes advantage of the existing pagination APIs in the Fleet
server, and provides additional APIs to support pagination in the web
UI. Doing this dramatically reduces the response sizes for requests from
the UI, and limits the performance impact of UI clients on the Fleet and
MySQL servers.
- 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
Previously this was disabled (perhaps unintentionally due to the
duplicate settings in the .eslintrc.js). Enable the lint rule and fix
the violations.
May fix JS build issues on case-sensitive filesystems.
- Add the server_url_prefix flag for configuring this functionality
- Add prefix handling to the server routes
- Refactor JS to use appropriate paths from modules
- Use JS template to get URL prefix into JS environment
- Update webpack config to support prefixing
Thanks to securityonion.net for sponsoring the development of this feature.
Closes#1661
- Fix padding in query editor autocomplete box
- Hide cursor in read-only query editor
- Remove styling of active line in query editor (which does not update
properly and is therefore distracting)
- Fix padding and reorder buttons in delete label modal
- Prevent a second (unnecessary) retrieval of all hosts when page loaded.
- Disable automatic reloading of hosts when over 100 hosts are present.
This is a stopgap solution to reduce the performance impact of
repeatedly loading many hosts. The final solution will be to implement
proper pagination.
This PR corrects the query editor behavior to run the correct query in
all (tested) circumstances.
Fixes the original issue in #2028 and #2054 (introduced by the fix in #2030)
Closes#2054
Fixes a bug in which the default query would run rather than the query
displayed in the editor unless that query was manually edited after the
page loaded.
Fixes#2028
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.
- 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
Useful for SAML login users who cannot log in with `fleetctl login`. Instead
they can pull their session token from the UI and configure the fleetctl client
to use it.
Closes#1865
Normally a Kolide user will always have at least two built in decorators that they can't delete through the UI so a situation with zero decorators should never happen; however, in the event we change this behavior in the future, or a user manually deletes decorators from the database the UI should handle an empty decorator set.
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.
Closes issue #1388. The problem here is that previously, the reset button loaded a hard coded list of default options into the component state, instead of the proper behavior which is to reset the options to default values on the back end, and then load them back into the redux store. This PR adds a ResetOptions endpoint on the server, and wires up the UI so that it triggers the endpoint, then loads the default options from the backend server.
* 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
Use the [SockJS Protocol](https://github.com/sockjs/sockjs-protocol) to handle
bidirectional communication instead of plain websockets. This allows
distributed queries to function in situations in which they previously failed
(Load balancers not supporting websockets, issues with Safari and self-signed
certs, etc.).
Also includes fixes to the JS message handling logic where slightly different
message delivery semantics (when using XHR) were exposing bugs.
Fixes#1241, #1327.
* 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
* Adds hosts_count attribute to campaign with success/fail/total
* Displays error % in Progress Bar component
* Indicate failed hosts on Query Results table
* Changes ProgressBar background to silver
* 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
* Add spinner for running query
* fixing lint
* Adding in check for this.socket
* Full height results area with centered spinner
* Don't hide table if query is stopped
* Remove results container if no results yet
* No more console.log
* 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
Permissions errors were preventing users from completing this flow
- Add separate endpoint for performing required password reset
- Rewrite frontend reset to use this endpoint
Fixes#792
- Remove require password reset from ModifyUser and
RequestPasswordReset methods, and UserPayload struct
- Add new RequirePasswordReset method
- Refactor JS for new separate method
* renders ManageQueriesPage at /queries/manage
* Renames QueriesList components to ScheduledQueriesList components
* creates QueriesList component
* Adds side panel component to display query details
* Adds KolideAce editor to Query Details side panel
* Handle Edit Query button click
* Change text of the Delete Query button
* Show confirmation modal before deleting queries
* 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
* initial scaffolding
* pack info sidebar
* fixing the merge of the routes
* Remove radium from pack info sidepanel
* lint
* cards!
* redux entity config
* pack interface
* wiring up redux with fake dev data
* Add description attribute to packs
* move redux to top level page component to isolate data fetching
* initial scaffolding of all packs table
* adding redux entities back
* minimal
* alpha order in packs.js
* no newlines in HTML
* onclick handler to function on component class
* alpha order in router
* alpha order in paths.js
* no newline in side panel
* removing input field
* lint fixes
* 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 client getTargets
* change label to display_text
* filters options
* send selected targets to server
* get targets when selected targets are added or removed
* show 0 unique hosts when no targets have been selected
* 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
* 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 manage hosts page and improves side bar functionality
* API client get hosts
* Adds hosts to redux state
* Adds host details component
* Manage hosts page renders host details
* ElipsisMenu component
* Add ElipsisMenu to HostDetails
* Adds HOC to detect clicks outside component
* clicks outside ElipsisMenu close the tooltip
* Adds icons to host details component
* 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
* New hosts route
* Adds source code pro font
* New Host Page
* make Icons clickable
* Adds clipboard icon
* highlight icon & show helper text when text copied
* Method 2 text
* Fixes Firefox bug
* Fix spelling error
* 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
* Sidebar/Layout improvements
* New Query route and page
* Display text editor
* Gradient style longhand
* Slider button component
* Move new query section to component
* Kolide Ace theme
* Styles slider on page
* run query on CMD + Enter
* clicking hosts sends user to homepage
* SaveQueryForm component
* Splits NewQuery component JSX into multiple dumb components
* InputField component
* save query form
* new query
* styleguide
* moves all new query form logic to the new query form
* Kolide theme for osquery tables
* Add awesome card stacking animations on login
* Fix linter error
* Fix proptypes warning and clean up if/then logic
* True up vh units
* Make logout pixel perfect with login form
* Add SCSS pipeline and fix login style issues
* Fix nav styles and make tests pass
* Fix nav header styles and animations
* Change font-size to 13px on nav
* Fix duplicate specificity of styles
* moves login page styles to reusable component
* Redirects successful login to homepage after 3s
* Adds logout form
* Adds logout page
* Adds logout link to homepage
* Adds gravatarURL to logged in user
* Configure API Client to hit /me endpoint
* Fetch user when the app loads
* Configured API Client to make logout requests
* Handle logout flow in redux
* Logout form styles
* Logout user when the logout form is submitted
* Extracts stacked boxes UI to a re-usable component
* Presence validator
* Equality validator
* Adds ResetPasswordFrom
* PasswordResetPage component and route
* Ex icon on forgot pw page goes to login
* Smooth out the fonts so they match the mocks
* Remove dynamic background and refactor colors
* Authentication middleware
* API client refactor
* Configure API client to make forgot_password requests
* Successfully submit forgot password form
* Display server errors for unknown email address
* GradientButton components
* Style guide updates
* Display errors and override styles for InputFieldWithIcon
* Envelope Icon
* Login page form submission (#157)
* API client utility
* moves test helpers to the test directory
* Utility to namespace local storage keys
* LoginSuccessfulPage component
* Check icon
* adds auth to redux state
* successful form submission
* Allow tests to load dummy SVG static images & test fixes
* ForgotPassword Page, Form & route
* Email validator
* API client utility
* moves test helpers to the test directory
* Utility to namespace local storage keys
* LoginSuccessfulPage component
* Check icon
* adds auth to redux state
* successful form submission
* Allow tests to load dummy SVG static images & test fixes
