empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 17:05:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add hosts count to Team details page (#1090)

Browse Source 
- Display number of hosts assigned to a team on the Team details page
- Add back button styles to "Back to teams" link
This commit is contained in:
noahtalerman 2021-06-15 13:04:32 -04:00 committed by GitHub
parent 4bfeddda79
commit fb12ed10ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx
View File

@ -17,6 +17,7 @@ import EditTeamModal from "../components/EditTeamModal";
import { IEditTeamFormData } from "../components/EditTeamModal/EditTeamModal";
import AddHostsRedirectModal from "./components/AddHostsModal/AddHostsRedirectModal";
import BackChevron from "../../../../../assets/images/icon-chevron-down-9x6@2x.png";
import PencilIcon from "../../../../../assets/images/icon-pencil-14x14@2x.png";
import TrashIcon from "../../../../../assets/images/icon-trash-14x14@2x.png";
@ -159,17 +160,22 @@ const TeamDetailsWrapper = (props: ITeamDetailsPageProps): JSX.Element => {
</div>
);
}
const hostsCount = team.host_count;
const hostsTotalDisplay = hostsCount === 1 ? "1 host" : `${hostsCount} hosts`;
return (
<div className={baseClass}>
<div className={`${baseClass}__nav-header`}>
<Link className={`${baseClass}__back-link`} to={PATHS.ADMIN_TEAMS}>
Back to teams
<Link to={PATHS.ADMIN_TEAMS} className={`${baseClass}__back-link`}>
<img src={BackChevron} alt="back chevron" id="back-chevron" />
<span>Back to teams</span>
</Link>
<div className={`${baseClass}__team-header`}>
<div className={`${baseClass}__team-details`}>
<h1>{team.name}</h1>
<span className={`${baseClass}__host-count`}>0 hosts</span>
<span className={`${baseClass}__host-count`}>
{hostsTotalDisplay}
</span>
</div>
<div className={`${baseClass}__team-actions`}>
<Button onClick={toggleAddHostsRedirectModal}>Add hosts</Button>

10
frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/_styles.scss
View File

@ -8,12 +8,20 @@
}
&__back-link {
color: $core-vibrant-blue;
display: flex;
align-items: center;
height: 16px;
font-size: $x-small;
color: $core-vibrant-blue;
font-weight: $bold;
text-decoration: none;
}
#back-chevron {
width: 16px;
margin-right: $pad-small;
}
&__nav-header {
padding-top: 15px;
position: sticky;