diff --git a/assets/images/icon-arrow-right-vibrant-blue-10x18@2x.png b/assets/images/icon-arrow-right-vibrant-blue-10x18@2x.png new file mode 100644 index 000000000..2c2518361 Binary files /dev/null and b/assets/images/icon-arrow-right-vibrant-blue-10x18@2x.png differ diff --git a/assets/images/icon-linux-48x48@2x.png b/assets/images/icon-linux-48x48@2x.png new file mode 100644 index 000000000..dff968c2a Binary files /dev/null and b/assets/images/icon-linux-48x48@2x.png differ diff --git a/assets/images/icon-mac-48x48@2x.png b/assets/images/icon-mac-48x48@2x.png new file mode 100644 index 000000000..551ee9630 Binary files /dev/null and b/assets/images/icon-mac-48x48@2x.png differ diff --git a/assets/images/icon-windows-48x48@2x.png b/assets/images/icon-windows-48x48@2x.png new file mode 100644 index 000000000..4fc8dbcd5 Binary files /dev/null and b/assets/images/icon-windows-48x48@2x.png differ diff --git a/changes/issue-1319-home-page-host-summary b/changes/issue-1319-home-page-host-summary new file mode 100644 index 000000000..edb74e8a4 --- /dev/null +++ b/changes/issue-1319-home-page-host-summary @@ -0,0 +1,2 @@ +* Adds homepage to Fleet app +* Host Summary is displayed on Homepage \ No newline at end of file diff --git a/frontend/components/side_panels/SiteNavHeader/SiteNavHeader.jsx b/frontend/components/side_panels/SiteNavHeader/SiteNavHeader.jsx deleted file mode 100644 index cdf09790e..000000000 --- a/frontend/components/side_panels/SiteNavHeader/SiteNavHeader.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import React, { Component } from "react"; - -import configInterface from "interfaces/config"; -import OrgLogoIcon from "components/icons/OrgLogoIcon"; - -class SiteNavHeader extends Component { - static propTypes = { - config: configInterface, - }; - - render() { - const { - config: { org_logo_url: orgLogoURL }, - } = this.props; - - const headerBaseClass = "site-nav-header"; - - return ( -
-
- -
-
- ); - } -} - -export default SiteNavHeader; diff --git a/frontend/components/side_panels/SiteNavHeader/_styles.scss b/frontend/components/side_panels/SiteNavHeader/_styles.scss deleted file mode 100644 index 66196599d..000000000 --- a/frontend/components/side_panels/SiteNavHeader/_styles.scss +++ /dev/null @@ -1,28 +0,0 @@ -.site-nav-header { - position: relative; - padding: 14px 20px; - - &__inner { - display: flex; - align-items: center; - } - - &__logo { - @include size(24px); - border-radius: 20%; - } - - &__username { - @include ellipsis(110px); - margin: 0; - padding: 0; - color: $core-white; - font-size: $small; - font-weight: $bold; - position: relative; - - @include breakpoint(smalldesk) { - display: none; - } - } -} diff --git a/frontend/components/side_panels/SiteNavHeader/index.js b/frontend/components/side_panels/SiteNavHeader/index.js deleted file mode 100644 index 54ba33c53..000000000 --- a/frontend/components/side_panels/SiteNavHeader/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./SiteNavHeader"; diff --git a/frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx b/frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx index 19189b3ea..58b01c35c 100644 --- a/frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx +++ b/frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx @@ -3,7 +3,9 @@ import PropTypes from "prop-types"; import classnames from "classnames"; import userInterface from "interfaces/user"; +import configInterface from "interfaces/config"; import UserMenu from "components/side_panels/UserMenu"; +import OrgLogoIcon from "components/icons/OrgLogoIcon"; import navItems from "./navItems"; @@ -18,6 +20,7 @@ class SiteNavSidePanel extends Component { onNavItemClick: PropTypes.func, pathname: PropTypes.string, user: userInterface, + config: configInterface, }; constructor(props) { @@ -30,7 +33,11 @@ class SiteNavSidePanel extends Component { renderNavItem = (navItem) => { const { name, iconName } = navItem; - const { onNavItemClick, pathname } = this.props; + const { + onNavItemClick, + pathname, + config: { org_logo_url: orgLogoURL }, + } = this.props; const active = navItem.location.regex.test(pathname); const navItemBaseClass = "site-nav-item"; @@ -60,6 +67,18 @@ class SiteNavSidePanel extends Component { {`${iconName} ); + if (iconName === "logo") { + return ( +
  • + + + +
    • + ); + } return (
  • { const { renderNavItem, userNavItems } = this; const { onLogoutUser, user, onNavItemClick } = this.props; + return (
      diff --git a/frontend/components/side_panels/SiteNavSidePanel/_styles.scss b/frontend/components/side_panels/SiteNavSidePanel/_styles.scss index 283d61d96..77691495a 100644 --- a/frontend/components/side_panels/SiteNavSidePanel/_styles.scss +++ b/frontend/components/side_panels/SiteNavSidePanel/_styles.scss @@ -3,6 +3,7 @@ transition: color 200ms ease-in-out; cursor: pointer; border-bottom: 3px solid transparent; + max-height: 50px; &:hover { background-color: $core-fleet-black; @@ -31,6 +32,13 @@ vertical-align: sub; } + .logo { + @include size(48px); + border-radius: 20%; + padding: 0; + margin: -12px -15px 0; + } + &__name { text-decoration: none; vertical-align: middle; @@ -60,6 +68,10 @@ } } +.logo { + transform: scale(0.5); +} + .site-nav-container { flex-grow: 1; display: flex; diff --git a/frontend/components/side_panels/SiteNavSidePanel/navItems.js b/frontend/components/side_panels/SiteNavSidePanel/navItems.js index 60005614e..3f92cc70f 100644 --- a/frontend/components/side_panels/SiteNavSidePanel/navItems.js +++ b/frontend/components/side_panels/SiteNavSidePanel/navItems.js @@ -16,6 +16,15 @@ export default (currentUser) => { ]; const userNavItems = [ + { + icon: "logo", + name: "Home", + iconName: "logo", + location: { + regex: new RegExp(`^${URL_PREFIX}/home/dashboard`), + pathname: PATHS.HOMEPAGE, + }, + }, { icon: "hosts", name: "Hosts", diff --git a/frontend/layouts/CoreLayout/CoreLayout.jsx b/frontend/layouts/CoreLayout/CoreLayout.jsx index f6297fe6e..203065de9 100644 --- a/frontend/layouts/CoreLayout/CoreLayout.jsx +++ b/frontend/layouts/CoreLayout/CoreLayout.jsx @@ -7,7 +7,6 @@ import { push } from "react-router-redux"; import configInterface from "interfaces/config"; import FlashMessage from "components/flash_messages/FlashMessage"; import PersistentFlash from "components/flash_messages/PersistentFlash"; -import SiteNavHeader from "components/side_panels/SiteNavHeader"; import SiteNavSidePanel from "components/side_panels/SiteNavSidePanel"; import userInterface from "interfaces/user"; import notificationInterface from "interfaces/notification"; @@ -93,12 +92,6 @@ export class CoreLayout extends Component { return (