From 29e900d7c3ca25c0fbf2f311858aa7f256b8d56f Mon Sep 17 00:00:00 2001 From: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Date: Mon, 12 Jul 2021 10:15:47 -0700 Subject: [PATCH] Homepage Dashboard - New feature! (#1340) * Adds homepage dashboard to Fleet app * Host Summary is displayed on the dashboard --- ...icon-arrow-right-vibrant-blue-10x18@2x.png | Bin 0 -> 343 bytes assets/images/icon-linux-48x48@2x.png | Bin 0 -> 2954 bytes assets/images/icon-mac-48x48@2x.png | Bin 0 -> 2363 bytes assets/images/icon-windows-48x48@2x.png | Bin 0 -> 1900 bytes changes/issue-1319-home-page-host-summary | 2 + .../SiteNavHeader/SiteNavHeader.jsx | 31 ---- .../side_panels/SiteNavHeader/_styles.scss | 28 ---- .../side_panels/SiteNavHeader/index.js | 1 - .../SiteNavSidePanel/SiteNavSidePanel.jsx | 22 ++- .../side_panels/SiteNavSidePanel/_styles.scss | 12 ++ .../side_panels/SiteNavSidePanel/navItems.js | 9 ++ frontend/layouts/CoreLayout/CoreLayout.jsx | 7 - .../pages/Homepage/Dashboard/Dashboard.tsx | 59 +++++++ .../Dashboard/HostsSummary/HostsSummary.tsx | 79 ++++++++++ .../Dashboard/HostsSummary/_styles.scss | 42 +++++ .../Homepage/Dashboard/HostsSummary/index.tsx | 1 + .../pages/Homepage/Dashboard/_styles.scss | 144 ++++++++++++++++++ frontend/pages/Homepage/Dashboard/index.tsx | 1 + frontend/pages/Homepage/Homepage.jsx | 16 ++ frontend/pages/Homepage/index.jsx | 1 + frontend/router/index.jsx | 5 + frontend/router/paths.ts | 1 + 22 files changed, 393 insertions(+), 68 deletions(-) create mode 100644 assets/images/icon-arrow-right-vibrant-blue-10x18@2x.png create mode 100644 assets/images/icon-linux-48x48@2x.png create mode 100644 assets/images/icon-mac-48x48@2x.png create mode 100644 assets/images/icon-windows-48x48@2x.png create mode 100644 changes/issue-1319-home-page-host-summary delete mode 100644 frontend/components/side_panels/SiteNavHeader/SiteNavHeader.jsx delete mode 100644 frontend/components/side_panels/SiteNavHeader/_styles.scss delete mode 100644 frontend/components/side_panels/SiteNavHeader/index.js create mode 100644 frontend/pages/Homepage/Dashboard/Dashboard.tsx create mode 100644 frontend/pages/Homepage/Dashboard/HostsSummary/HostsSummary.tsx create mode 100644 frontend/pages/Homepage/Dashboard/HostsSummary/_styles.scss create mode 100644 frontend/pages/Homepage/Dashboard/HostsSummary/index.tsx create mode 100644 frontend/pages/Homepage/Dashboard/_styles.scss create mode 100644 frontend/pages/Homepage/Dashboard/index.tsx create mode 100644 frontend/pages/Homepage/Homepage.jsx create mode 100644 frontend/pages/Homepage/index.jsx 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 0000000000000000000000000000000000000000..2c25183618d43f8d6d7525fdc32de03c2e34967c GIT binary patch literal 343 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 literal 0 HcmV?d00001 diff --git a/assets/images/icon-windows-48x48@2x.png b/assets/images/icon-windows-48x48@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..4fc8dbcd50b794ceda47c3ab2ecb596bfda53fa2 GIT binary patch literal 1900 zcmV-y2b1`TP)J7mucbb3~mbt zZh??D3GfC26bN7e2^Ij=qZ5J#AvDxab@gZ<&^wUgL}uV^E(gbz3N|2SAjAl5@b}J& z$YkyiQIU-eW;s@0`B;fpa|9gi?O`1vCUODT=ojzd9tm1eAEpQ)qCBZ42&++w5t#s` zl4{{Zn_(NhA4-e^Al%=5h6fNLp$gE^+RFii7gN-caO=r4+=mbdO@N2%^gR%5eUv!k zODIAFF2Gf&c@g6lKa4Ocu3=vjl=V9B#jh!(8bjTq(oZ?tNDs_o?chZm~zySB}U)&aw-lWL* zOhKpy$KM?$U}6C{-d_{hHwldQekkyFXB)tnOe6sJ?MYG3g zJsnFMHGueN_gQ8nn~WuZ?q=GS?+FTAeX{Gnn>w-poOE=|xAf&wHkY42pE>q(?MOL* zyP8>%{S7PwQ4REvZRO`$-vaPWR?7PMld!;DRJPf$3w;Z~cevL0BT+a%h0S3X`N{#M z`^{A$#0#*D%&??9RDcu?F_@;IhAfu*4Ot8gK`7;xHU30!?tI+u#ep7RLytKmI%?qV zTCMl**+FkYA%-TABrrD*uy`Hd^DhAMOQ;?IuU`@T@jDnpP=*`w&ECKF6@XiR5<`!d zvGaKdg948i^$u0^6(9+%KSE=Bf{2^y-k{n!k>e@AG`9Y@8M_Y)=cjU2J-5BUQ-HX) z{wXoGC&~-dDDnUSHXbxr;?(-t*lb*W{_|>hYrTZp_)|)uRJts-dPE-yfGEbE-Ib@~04c)}rp7;a37|*th(cM%GsxIUhu6dMKpiLJZVzyrA_yb% z^qzeA702y#8M_~?WZY$K%mf>LzWxTa2x&LI2Ju^dY75{Fy2WFucp7Mhp${Iw;l~mx z7rYy&^^5AC7QqrOB6FuxfLmY*87gW4%ByK-L4I!u0?ff+9n&3wpRNlQGjVg#^f@shv4Ugf895`FsmP}UQp~RNu`C>eSj4pBHV5$SOKD< zm4xeHiG(Ww=p9%h!Oa0=Js>Jv0fh9mr`2K}EkN!pYXyi1EkLD;4YG+idz^L zp^2#T(I@?094Y|cu}L8xfn_W>^b9)W!PnZ*y}fKz`N9rZMuc{T74r7IICth;Y}skc zk*LqiiLGH5`4+&PFTlGtANWF_FXQKsA6vdY00Jvt&+tE%DA&N^jk1kj<1=Gz(BPy@ zf^5&I2R_2&sqV1&XXFsni5f2|Py2Y0DaJWJhM7nJrc`RK3QBo>X%%)xZTaoDf&n-& z^U)@$tFo?ogqPI3J4(#&#fSimJ<4!AjO~)-4>Eg>%jvjdrk$C&{)aM*f-w*1g!2ND zNZy$bDlz0u;^Kn5T92Tht9 -
- -
- - ); - } -} - -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 (