Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SITE] Implementation of Dashboard Page #309

Merged
merged 3 commits into from
Apr 4, 2022
Merged

[SITE] Implementation of Dashboard Page #309

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a3a4d55
implemented basic structure of dashboard page
asubedy Apr 4, 2022
61c5089
removed unnecessary comments
asubedy Apr 4, 2022
761003f
fixed toggle, used layout to display page, added style to different file
asubedy Apr 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions docs/_data/navigation.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,6 @@ nav:

- title: "Connect"
section: subscribe

- title: "Dashboard"
url: benchmark
206 changes: 206 additions & 0 deletions docs/_includes/benchmark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
<!-- Vertical navbar -->
<style>
.vertical-nav {
min-width: 13rem;
width: 13rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
padding-top: 160px;
background-color: #3C494E;
z-index: 1;
}

.page-content {
width: calc(100% - 13rem);
margin-left: 12rem;
transition: all 0.4s;
}

/* for toggle behavior */

#sidebar.active {
margin-left: -17rem;
}

#content.active {
width: 100%;
margin: 0;
}
#pagecontainer {
padding-top: 150px;
}

@media only screen and (max-width: 991px) {
#pagecontainer {
padding-top: 100px;
}
.vertical-nav{
padding-top: 70px;
}
}

@media (max-width: 768px) {
#sidebar {
margin-left: -17rem;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
margin: 0;
}
#content.active {
margin-left: 17rem;
width: calc(100% - 17rem);
}
}

/*
*
* ==========================================
* FOR DEMO PURPOSE
* ==========================================
*
*/

.page-contents {
background: #599fd9;
background: -webkit-linear-gradient(to right, #599fd9, #c2e59c);
background: linear-gradient(to right, #599fd9, #c2e59c);
min-height: 100vh;
overflow-x: hidden;
}

.separator {
margin: 3rem 0;
border-bottom: 1px dashed #fff;
}

.text-uppercase {
letter-spacing: 0.1em;
}

.text-gray {
color: #aaa;
}
.load-generators{
display: flex;
width:50%;
justify-content: space-between;
}
.test-selector{
width: 100%;
padding: 5px;

}
.drop-down{
margin-top: 2rem;
}
.toggle-button{
margin-left: -3rem;
position:fixed ;
z-index: 0;
bottom: 1.4rem;
text-align: right;
padding: 1rem;
}
.resultsContainer{
margin-top: -3rem;
}
.icon{
position: fixed;
bottom: 2rem;
z-index: 100;
}
</style>

<script src="/assets/js/toggle.js"></script>

<section id="pagecontainer">
<div class="vertical-nav" id="sidebar">

<p class="text-gray font-weight-bold text-uppercase px-1 small pb-4">Service Mesh Performance Results</p>

<ul class="nav flex-column mb-0">
<li class="nav-item">
<a href="#" class="nav-link text-light font-italic">
<i class="fa fa-th-large mr-3 text-primary fa-fw"></i>
All results
</a>
</li>
</ul>

<p class="text-gray font-weight-bold text-uppercase px-3 small py-4 mb-0">Service Mesh</p>

<ul class="nav flex-column mb-0">
<li class="nav-item">
<a href="#" class="nav-link text-light font-italic">
<i class="fa fa-area-chart mr-3 text-primary fa-fw"></i>
Istio
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-light font-italic">
<i class="fa fa-bar-chart mr-3 text-primary fa-fw"></i>
Linkered
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-light font-italic">
<i class="fa fa-pie-chart mr-3 text-primary fa-fw"></i>
Consul
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-light font-italic">
<i class="fa fa-line-chart mr-3 text-primary fa-fw"></i>
OSM
</a>
</li>
</ul>
</div>
<!-- End vertical navbar -->


<!-- Page content holder -->
<div class="page-content p-5" id="content">
<!-- Toggle button -->
<button id="sidebarCollapse" type="button" class=" toggle-button bg-white shadow-xsm "><i class="icon fa fa-angle-left mr-2"></i></button>

<!-- Demo content -->
<section class="resultsContainer">
<h5 class="display-5 text-black">Select Load Generator: </h5>

<form class="load-generators">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="fortio">
<label class="form-check-label" for="inlineCheckbox1">Fortio</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="nighthawk">
<label class="form-check-label" for="inlineCheckbox2">Nighthawk</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="wrk2">
<label class="form-check-label" for="inlineCheckbox3">wrk2</label>
</div>

</form>
<select class=" drop-down custom-select custom-select-lg mb-3" name="performance-ids" id="performance-ids" class="test-selector">
<option value="jobid1">jobid1</option>
<option value="jobid2">jobid2</option>
<option value="jobid2">jobid2</option>
<option value="jobid3">jobid3</option>
<option value="jobid4">jobid4</option>
</select>
</section>
</div>
</section>
<!-- End demo content -->


13 changes: 11 additions & 2 deletions docs/_includes/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
{% if page.layout == "dashboardPage" %}
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="dashBoardNav">
{% else %}
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
{% endif %}

<div class="container">
<a class="navbar-brand js-scroll-trigger" href="/#page-top">
{% if page.layout == "dashboardPage" %}
<img class="logoDetails dashboard-logo header_logo" src="/assets/img/logo/smp-white.svg"/>
{% else %}
<img class="logoDetails header_logo" src="/assets/img/logo/smp-white.svg"/>
{% endif %}
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
Expand All @@ -13,7 +22,7 @@
{%- for link in site.data.navigation.nav -%}
<li class="nav-item">
{%- if link.url -%}
<a class="nav-link js-scroll-trigger" href="/{{ link.url }}">{{ link.title }}</a>
<a class="nav-link" href="/{{ link.url }}">{{ link.title }}</a>
{%- else if link.section -%}
<a class="nav-link js-scroll-trigger" href="/#{{ link.section }}">{{ link.title }}</a>
{%- else -%}
Expand Down
94 changes: 94 additions & 0 deletions docs/_layouts/dashboardPage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>

<head>

{% if site.analytics.google %}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.google }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());

gtag('config', '{{ site.analytics.google }}');
</script>
<!-- End Google Analytics -->
{% endif %}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{{ site.description }}">
<meta name="author" content="{{ site.author }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">

<title>{% if page.title %}{{ page.title | append: " | " | append: site.title }}{% else %}{{ site.title }}{% endif %}
</title>

<!-- Bootstrap core CSS -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">

<meta name="twitter:card" content="summary" />
<meta name="image" property="og:image" content="https://smp-spec.io/assets/img/logo/smp.png" />
<meta name="title" property="og:title" content="Service Mesh Performance" />
<meta property="og:description"
content="Service Mesh Performance (SMP): Measure your service mesh performance using SMP. SMP provides a universal performance index to gauge your mesh’s efficiency against deployments in other organizations’ environments." />


<!-- Custom fonts for this template -->
<link href="/assets/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet'
type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">

<!-- Custom styles for this theme -->
<!--<link href="assets/css/agency.min.css" rel="stylesheet">-->
<link href="/assets/css/agency.css" rel="stylesheet">
<link rel="stylesheet" href="../assets/css/responsive.css">


<!-- Page container change top padding when nav shrinks -->
{% if page.layout == "page" %}
<style>
#pagecontainer {
padding-top: 150px;
}

@media only screen and (max-width: 991px) {
#pagecontainer {
padding-top: 100px;
}
}
</style>

{% endif %}
</head>


<body id="dashboard-page-top">

{% include nav.html %}
{% include benchmark.html %}


<!-- Bootstrap core JavaScript -->
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/bootstrap.bundle.min.js"></script>

<!-- Plugin JavaScript -->
<script src="/assets/js/jquery.easing.min.js"></script>

<!-- Contact form JavaScript -->
<script src="/assets/js/jqBootstrapValidation.js"></script>
<script src="/assets/js/contact_me.js"></script>

<!-- Custom scripts for this template -->
<script src="/assets/js/agency.min.js"></script>


</body>

</html>
44 changes: 42 additions & 2 deletions docs/_sass/components/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Styling for the navbar
#mainNav {
#mainNav,#dashBoardNav {
background-color: $background-color;
.navbar-toggler {
font-size: .85rem;
Expand Down Expand Up @@ -74,12 +74,52 @@
}
}
}
#dashBoardNav {
padding-top:0;
padding-bottom: 0;
-webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
-moz-transition: padding-top 0.3s, padding-bottom 0.3s;
transition: padding-top 0.3s, padding-bottom 0.3s;
border: none;
background-color: $background-color;
.navbar-brand {
font-size: 1.50em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-nav {
.nav-item {
.nav-link {
font-size: 1.2em;
padding: 0.80em 0.80em !important;
}
}
}
&.navbar-shrink {
padding-top: 0;
padding-bottom: 0;
background-color: $background-color;
.header_logo {
height: 60px;
transition: all 600ms;
}
.navbar-brand {
font-size: 1.50em;
padding: 12px 0;
}
}
}
}

.logoDetails {
float:left;
height:100px;
margin-left:3vw;

}

.dashboard-logo{
margin-left:-10rem;
}

@media(max-width:992px) {
Expand Down