You are viewing a plain text version of this content. The canonical link for it is here.
Posted to reviews@yunikorn.apache.org by yu...@apache.org on 2022/01/23 21:46:02 UTC
[incubator-yunikorn-site] branch master updated: [YUNIKORN-1036] Fix why yunikorn doc format on the home page. (#110)
This is an automated email from the ASF dual-hosted git repository.
yuchaoran pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-yunikorn-site.git
The following commit(s) were added to refs/heads/master by this push:
new 4dc78ba [YUNIKORN-1036] Fix why yunikorn doc format on the home page. (#110)
4dc78ba is described below
commit 4dc78ba3c7459f2838ef48715ea652c9dc9e368b
Author: Weiwei Yang <ww...@apache.org>
AuthorDate: Sun Jan 23 13:45:54 2022 -0800
[YUNIKORN-1036] Fix why yunikorn doc format on the home page. (#110)
---
src/pages/index.js | 75 ++++++++++++++++++++++++++++-------
src/pages/styles.module.css | 41 +++++++++++++++++++
static/img/why-app.svg | 1 +
static/img/why-console.svg | 1 +
static/img/why-hierarchical-queue.svg | 1 +
static/img/why-save-cost.svg | 1 +
6 files changed, 105 insertions(+), 15 deletions(-)
diff --git a/src/pages/index.js b/src/pages/index.js
index ab7c38f..c605f60 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -19,14 +19,6 @@ import clsx from 'clsx';
import Layout from '@theme/Layout';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './styles.module.css';
-import useThemeContext from '@theme/hooks/useThemeContext';
-
-const ImageSwitcher = ({lightImageSrc, darkImageSrc}) => {
- const { isDarkTheme } = useThemeContext();
- return (
- <img src={isDarkTheme ? darkImageSrc : lightImageSrc} alt="why" className={styles.timelineImage} />
- )
-}
const features = [
{
@@ -62,6 +54,53 @@ const features = [
},
];
+const why = [
+ {
+ title: <>Hierarchical Resource Queues</>,
+ imageUrl: '/img/why-hierarchical-queue.svg',
+ description: (
+ <>
+ Gives the fine-grained control over the resources quota for different tenants,
+ easily map to your organization structure. The queue min/max capacity offers the
+ over-commitment and ensures the guaranteed resources at the same time.
+ </>
+ ),
+ },
+ {
+ title: <>Application-aware Scheduling</>,
+ imageUrl: '/img/why-app.svg',
+ description: (
+ <>
+ Recognize users, apps, queues. Apps are queued and scheduled with certain order.
+ Apply the ordering based on resource fairness, submission time, and the priority.
+ You get the more predictable scheduling results.
+ </>
+ ),
+ },
+ {
+ title: <>Efficiency and Cost Saving</>,
+ imageUrl: '/img/why-save-cost.svg',
+ description: (
+ <>
+ Optimized for Cloud, and accommodate the elasticity as much as possible.
+ Gang Scheduling reduces the resource fragmentation, and triggers proactively up-scaling.
+ Bin-packing turns the usage curve and lower your cost while running on Cloud.
+ </>
+ ),
+ },
+ {
+ title: <>Central Management Console</>,
+ imageUrl: '/img/why-console.svg',
+ description: (
+ <>
+ No more lost tracking the resource usage of the tenants!
+ YuniKorn provides a central management UI and a one-stop-dashboard to track the resource
+ utilization of the cluster, queues, and apps. Start to plan and monitor the capacity for your teams!
+ </>
+ ),
+ },
+];
+
function Home() {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
@@ -95,7 +134,7 @@ function Home() {
<div className="container">
<div className="row">
{features.map(({imageUrl, title, description}, idx) => (
- <div key={idx} className={clsx('col col--4', styles.feature)}>
+ <div key={idx} className={clsx('col col--4')}>
{imageUrl && (
<div className="text--center">
<img className={styles.featureImage} src={imageUrl} alt={title}/>
@@ -110,13 +149,19 @@ function Home() {
</section>
)}
- <section className="features_src-pages-">
- <div className="container">
- <h1 className="text--center">☺ WHY YUNIKORN?</h1>
- {/*<img src="img/why-dark.png" className={styles.timelineImage}/>*/}
- <ImageSwitcher darkImageSrc={"img/why-dark.png"} lightImageSrc={"img/why.png"} />
+
+ <h1 className={styles.whyText}>☺ WHY YUNIKORN?</h1>
+ {why.map(({imageUrl, title, description}, idx) => (
+ <div className={styles.postContainer}>
+ <div className={styles.postThumb}><img src={imageUrl}/></div>
+ <div className={styles.postContent}>
+ <h4>{title}</h4>
+ <p>{description}</p>
</div>
- </section>
+ </div>
+ ))}
+
+ <h3 className={styles.learnMoreURL}><a href="https://yunikorn.apache.org/docs/get_started/core_features">Learn more >>></a></h3>
</main>
</Layout>
);
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index 581e46d..14903f0 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -59,3 +59,44 @@
margin-right: auto;
}
+.postContainer {
+ margin: 0 30%;
+ overflow: auto;
+}
+
+.postThumb {
+ height: 120px;
+ width: 120px;
+ float: left;
+ padding: 0 10px 10px 0
+}
+
+.postThumb img {
+ height: 120px;
+ width: 120px;
+ display: block
+}
+
+.postContent {
+ margin-left: 150px
+}
+
+.postTitle {
+ font-weight: bold;
+ font-size: 200%
+}
+
+.whyText {
+ text-align:center;
+ color: cadetblue;
+ margin-top: 50px;
+ margin-bottom: 50px
+}
+
+.learnMoreURL {
+ text-align:center;
+ color: cadetblue;
+ margin-bottom: 30px
+}
+
+
diff --git a/static/img/why-app.svg b/static/img/why-app.svg
new file mode 100644
index 0000000..854aa74
--- /dev/null
+++ b/static/img/why-app.svg
@@ -0,0 +1 @@
+<svg height="32px" version="1.1" viewBox="0 0 32 32" width="32px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title></title><desc></desc><defs></defs><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#157EFB" id="icon-68-document-file-app"><path d="M21,26 L21,28.0025781 C21,29.1090746 20.1057238,30 19.0025781,30 L3.99742191,30 C2.89092539,30 2,29.1012878 2,27.9926701 L2,5.00732994 C2,3.89833832 2.8992496,3 4.0085302, [...]
\ No newline at end of file
diff --git a/static/img/why-console.svg b/static/img/why-console.svg
new file mode 100644
index 0000000..98e7538
--- /dev/null
+++ b/static/img/why-console.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 100 100" height="100px" id="Layer_1" version="1.1" viewBox="0 0 100 100" width="100px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><rect clip-rule="evenodd" fill="#F2F2F2" fill-rule="evenodd" height="57.394" width="75.907" x="7.982" y="17.685"></rect></g><g><path d="M85.248,76.437H6.624v-60.11H63.87v2.717H9.342V73.72h73.189V19.043h-8.735v-2.717h11.452V76.437z M70.742,19.043h-3.371 v-2.717h3.37 [...]
\ No newline at end of file
diff --git a/static/img/why-hierarchical-queue.svg b/static/img/why-hierarchical-queue.svg
new file mode 100644
index 0000000..52d38fe
--- /dev/null
+++ b/static/img/why-hierarchical-queue.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 91 91" height="91px" id="Layer_1" version="1.1" viewBox="0 0 91 91" width="91px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><g><path d="M77.613,59.769c-1.388,0-2.513-1.125-2.513-2.513V43.544H15.964v13.712c0,1.388-1.125,2.513-2.513,2.513 s-2.513-1.125-2.513-2.513V41.031c0-1.388,1.125-2.513,2.513-2.513h64.162c1.388,0,2.513,1.125,2.513,2.513v16.225 C80.126,58.644,79.001,59.769,77.613,59.769 [...]
\ No newline at end of file
diff --git a/static/img/why-save-cost.svg b/static/img/why-save-cost.svg
new file mode 100644
index 0000000..10b6c92
--- /dev/null
+++ b/static/img/why-save-cost.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 64 64" id="Layer_1" version="1.1" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M22.6,19.3c-1.3,0.2-2.5,0.7-3.7,1.3c-5.4-1.3-11.9,0.4-12.6,2c-0.6,1.3,2.2,4,4.1,5.6 c-0.9,1.7-1.5,3.5-1.8,5.5c-1.9,0.2-4.5,0.8-4.9,2.4c-0.7,2.7,0,9,3.5,9.7c1.5,0.3,3.2,0.3,4.6,0.3c1.3,1.6,2.9,2.8,4.7,4L14.9,57 h10.3l1.4-3.7c0.8,0.1,1.6,0.2,2.4,0.2c1.3,0,2.7-0.3,4-0.5L32,57h9.8c0,0,7.7-10.1,8.8-1 [...]
\ No newline at end of file