Commit Graph

132 Commits

Author SHA1 Message Date
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
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
e6e6fcdf2d
Adjust UI layout styles and fix empty state on "Hosts" page (#542)
- Remove `$nav-width` and `$nav-tablet-width` because the navigation is now on the top of the layout.
- Add styles to `CoreLayout` to make the main content (everything except the top nav) fill the window height.
2021-03-25 17:22:37 -07:00
Gabe Hernandez
5e80bd5711
change smtp warning banner (#443)
* change colours for warning

* update the warning banner to display whatever is passed in.
2021-03-12 11:45:17 +00:00
Gabe Hernandez
a0ebc2bdf3
Add sticky side nav to org settings (#433)
* 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
2021-03-10 17:28:58 +00:00
noahtalerman
ba131153b7
Style changes for UI layout changes (#415)
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
2021-03-09 07:48:35 -08:00
noahtalerman
54c2b0b8df
Edit live query results table width for UI layout (#416)
- Fixes #413. Reintroduce a max-width for the.has-sidebar selector. This prevents the query results table from horizontally overflowing the screen's width.
- Adjust the positioning of the expanded live query results table to fit the new layout
2021-03-09 07:33:39 -08:00
Gabe Hernandez
70b76d9aef
change to horizontal nav (#379)
* start with making nav horizontal and updating nav and main content areas

* remove unneded subnav styling and JS code

* remove unused isSmallNav and --small styles

* remove isSmallNav in reducer and fix tests

* change 'admin' to 'settings'

* remove unnneded username to logo

* change account page urls

* Add user avatar dropdown to nav

* remove unused background colour on company logo

* get tabbing to work correctly

* implement styling of tab and page descriptions

* change default settings nav to organisation settings

* remove more unneeded subnav code

* fix some broken tests after changes

* pull out getdefaultTabIndex in settingsWrapper

* sticky sub nav for settings pages

* tweak zindex for setting subnav

* updated yarn.lock

* update icons

* fix collapsing nav items

* tweak avatar dropdown styles

* remove sidebar on osquery page
2021-03-08 16:48:29 +00:00
noahtalerman
9d8e93ee1c
Reveal live query error information in Fleet UI (#224)
This PR adds an "Errors" table to the live query UI.

Summary of changes:
- Errors table includes the columns `hostname`, `osquery_version`, and `error`
- The errors table is only rendered when at least one host fails
- Hosts with an osquery version less than 4.4.0 always display the error "upgrade osquery on this host to 4.4.0+ for error details"
2021-01-25 17:08:28 -08:00
noahtalerman
9750a81f0e
Add image import for all icon png assets. Fix link to home from 404 and 500 pages. (#196)
- Explicitly import all icon png assets in the component files they're referenced. Instead of creating a relative path to the icon image asset in the `<Icon />` component. This allows icon assets to be independent of any custom url prefix and fixes #193. In addition, eslint now catches all unresolved paths to image assets.
- Remove the `<Icon />` component
- Remove `icon_name.js`
- Add `<Link />` component and PATHS to 404 and 500 pages. These pages now work with a custom URL prefix specified.
- Remove all icons from the Hosts side panel. These changes are part of the Hosts UI #162.
2021-01-15 08:57:27 -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
510c7c0f45
Fix query editor rendering strangely in Safari. Edit query side panel styles. (#140)
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 />
2020-12-18 09:04:43 -08:00
noahtalerman
1b23b7b74f
Add style fixes caught during QA. Add favicon. (#119)
Changes include style fixes that were caught during a QA pass.
2020-12-10 13:09:05 -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
cc0d578b75
Update manage users styles. Implement table (list) view. (#104)
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.
2020-12-08 11:58:19 -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
noahtalerman
d029ab18f9
Update add new host modal. (#94)
- 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.
2020-12-04 15:19:08 -05:00
noahtalerman
7d9906e5ea
Update Fleet setup styles (#78)
This PR is part of the UI Refresh #38.

The goal of this PR is to update the styles of the Fleet setup (onboarding) flow.
2020-12-02 09:59:44 -05:00
noahtalerman
3953afb0b0
New styles and layout for hosts page. Remove grid view. (#73)
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.
2020-11-30 13:23:58 -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
8df16949f5
Add fleet assets including logos, 404 image, and 500 image. (#61)
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.
2020-11-23 11:22:42 -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
adf87140a7
Add ability to prefix Fleet URLs (#2112)
- 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
2019-10-16 16:40:45 -07:00
Zachary Wasserman
759a69b5b7
Upgrade Bourbon to 5.1.0 and fix deprecation warnings (#1973)
- 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
2019-01-03 12:46:55 -08:00
Caleb Coy
847cb193fc Flatten visual styles (#1908) 2018-09-18 14:14:13 -07:00
Caleb Coy
e4b076acc6 Update color scheme to match Kolide branding (#1879) 2018-07-30 06:01:27 -07:00
Mike Arpaia
de6dbd0f13
Remove decorators and osquery config from the UI (#1769) 2018-05-08 11:03:32 -06:00
John Murphy
151ce35e8c Front end support for decorator crud ops (#1509)
This PR closes #1448, providing front end CRUD operations for decorators.* Front end support for decorator crud ops.
2017-05-30 13:36:29 -05:00
Kyle Knight
facab79954 Update UI styles for Host Details card (#1317) 2017-03-06 10:37:06 -05:00
Kyle Knight
b7fb83ce4b Full Screen Query Results (#1238) 2017-02-24 18:01:43 -05:00
Kyle Knight
1bb1c959ae Update Desktop media query (#1286) 2017-02-24 10:04:09 -05:00
Kyle Knight
58e4b43a1f Fix sidebar responsive gap (#1092) 2017-01-25 09:35:59 -05:00
Kyle Knight
197b729b61 Add New Host Modal (#1052) 2017-01-20 12:52:57 -05:00
Kyle Knight
b1a3ee8927 Add "No Hosts" message for All Hosts label (#1045) 2017-01-19 18:12:37 -05:00
Kyle Knight
2381dbd8ae Adding in woff2 and updating to latest icon set (#1034) 2017-01-19 14:41:58 -05:00
Kyle Knight
c688798b5c Fix User Settings page responsive issues (#992) 2017-01-18 09:30:36 -05:00
Kyle Knight
f169b68bdf Style osquery config page (#968) 2017-01-17 11:38:56 -05:00
Kyle Knight
204417b361 Fixed position Flash Message (#859) 2017-01-10 13:10:15 -06:00
Kyle Knight
73035877b3 Fixing spacing of manage packs header (#848)
* Fixing spacing of header

* Make h1 headers consistent
2017-01-10 10:27:10 -06:00
Kyle Knight
2bbad2f05a Getting New Query back in order (#830) 2017-01-09 17:13:52 -06:00
Kyle Knight
eaf0105c6c Some additional stylings to make New Packs a little more bester (#679) 2017-01-06 09:36:51 -06:00
Kyle Knight
8f07fe2ed2 Fixing bug in Query Table sidebar dropdown (#691) 2016-12-22 13:26:18 -06:00
Kyle Knight
8baffbc97e Refactor A Few Rendering Issues (#656) 2016-12-21 12:39:40 -06:00
Kyle Knight
0bc73b421f User Settings Styles (#655) 2016-12-21 12:22:18 -06:00
Mike Stone
f099b2ae22 Create packs (#516)
* 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
2016-12-21 12:25:54 -05:00
Kyle Knight
8ad731e8fb Refactor form fields (#636) 2016-12-16 09:54:49 -06:00
Kyle Knight
0b70f58614 Styling Manage Hosts [Grid View] (#602) 2016-12-15 08:44:45 -06:00
Kyle Knight
d2c020e8c4 Cleanup styles for fields with icons (#605) 2016-12-09 11:14:16 -05:00
Kyle Knight
21ec1ed1b1 Resolve lots of absolute and fixed positioning issues (#571) 2016-12-06 11:55:48 -05:00
Kyle Knight
4c742886c9 Update style and html on nav (#539) 2016-12-01 17:14:39 -05:00
Kyle Knight
9e6a8eae56 Styling User Registration (#529) 2016-12-01 13:57:19 -05:00
Kyle Knight
6a1a9c6ce9 Finish styling on Manage Hosts sidebar (#532) 2016-11-29 17:29:14 -05:00
Kyle Knight
46dee08ab3 Query Select Target Dropdown (#499) 2016-11-23 15:10:32 -06:00
Kyle Knight
d6c653b8ea Adding in new Rocker Switch (#498) 2016-11-18 09:41:52 -06:00
Kyle Knight
cb6c840776 Removing hardcoded icons and replacing with icon font (#506) 2016-11-17 12:16:09 -06:00
Kyle Knight
29ef9e3ce8 Rearranging Files & Killing Off colors.js (#482) 2016-11-15 12:52:17 -06:00
Kyle Knight
8296e46ef4 Updating icons to Fort Awesome (#474) 2016-11-14 09:29:44 -06:00
Kyle Knight
67024ceace Update styles on Dropdown component (#462) 2016-11-10 10:33:04 -06:00
Kyle Knight
cd68b27715 Renaming button classes to be modifiers instead of elements (#449) 2016-11-08 08:20:35 -06:00
Kyle Knight
ca33d238d8 Converting JS/Radium styles to SCSS (#360) 2016-11-03 14:40:54 -05:00
Kyle Knight
4c6c0a2b05 Adding scss-lint and cleaning up styles (#354) 2016-10-28 16:25:57 -05:00
Mike Stone
e2a5502e21 Select targets (#340)
* 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
2016-10-27 12:14:30 -04:00
Mike Stone
ee3d96eb53 Update eslint (#337)
* 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
2016-10-21 19:13:41 -04:00
Mike Arpaia
c07702330d Cleaning JavaScript imports and if statements (#327)
* Moving entityGetter to utility folder

* Import whitespace and if statement braces

* newlines between multi-line if's
2016-10-19 16:22:18 -04:00
Mike Stone
1acd011ca9 Show hosts page (#311)
* 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
2016-10-17 14:55:03 -04:00
Jason Meller
e38dd40699 Update kolidecons to the latest version (#321) 2016-10-17 12:06:32 -04:00
Mike Stone
58c3733524 Add hosts (#294)
* 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
2016-10-11 12:10:41 -04:00
Mike Stone
23ffa5be62 Query side panel (#269)
* 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
2016-10-11 11:32:39 -04:00
Mike Stone
10dd855a77 styles the dropdown component (#271)
* styles the dropdown component

* Updates Dropdown component to behave like other form fields
2016-10-04 18:24:39 -04:00
Mike Stone
facee9bd89 Target input select (#272)
* Adds react-select package

* Implement react-select for selecting query targets

* log all form data when a query is run
2016-10-04 18:11:52 -04:00
Mike Arpaia
a0a911d9b2 Moving stylesheets to styles directory (#267)
close #265
2016-10-03 15:49:32 -04:00
Mike Stone
6ebc460b66 Admin user management (#233)
Admin user management page
2016-10-03 13:54:22 -04:00
Mike Stone
32f291a064 New query page (#254)
* 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
2016-09-30 14:55:15 -04:00
Mike Stone
f8337eeaac Only shows bg image for login/logout routes (#234) 2016-09-23 17:20:02 -04:00
Jason Meller
665aac54cb Various css tweaks (#224)
* Ensure login background remains centered

* Update Kolidecons to the latest version
2016-09-21 12:48:07 -04:00
Mike Stone
bba69412b9 Side panel (#216)
* admin layout component

* Admin Dashboard page

* styleguide

* AdminSidePanel component

* Use Kolide logo

* Renames AdminSidePanel to SidePanel

* Avatar component to render user's gravatar image

* Adds CoreLayout with rendered SidePanel
2016-09-20 20:07:32 -07:00
Mike Stone
482d025d05 Reset password page (#181)
* 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
2016-09-16 17:19:37 -04:00
Mike Stone
5ea9115a95 Forgot password submit (#168)
* 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
2016-09-16 09:55:46 -04:00
Mike Stone
40af0d29ef Forgot password (#162)
* 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
2016-09-14 16:31:54 -04:00
Mike Stone
b638ae186d 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
2016-09-13 22:43:26 -07:00
Mike Stone
ac9a38c207 Login page scaffolding (#142)
* LoginPage component and route

* animated SVG background image utility

* Kolide text, User, Lock, & Kolide logo SVG icons

* styleguide

* Adds global footer

* Adds InputFieldWithIcon component

* Adds LoginForm component

* Render LoginForm from the LoginPage
2016-09-12 11:14:07 -04:00
Mike Stone
906bf79526 Changes CSS styles to JS using Radium (#129) 2016-09-07 16:07:45 -04:00