|
|
|
@ -3,101 +3,205 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
|
|
|
import Translate from "@docusaurus/Translate";
|
|
|
|
|
const Introduction = () => {
|
|
|
|
|
return (
|
|
|
|
|
<section className=" border-b mb-28">
|
|
|
|
|
<div className="container px-20 lg:px-20 md:px-10 ">
|
|
|
|
|
<h2 className="w-full my-2 text-5xl dark:text-white font-medium leading-tight text-gray-800">
|
|
|
|
|
{/* Hippo4j能做什么 */}
|
|
|
|
|
<Translate
|
|
|
|
|
id="homepage.secondTitle"
|
|
|
|
|
description="a title for introduciton part"
|
|
|
|
|
>
|
|
|
|
|
What can Hippo4j do?
|
|
|
|
|
</Translate>
|
|
|
|
|
</h2>
|
|
|
|
|
<div className="w-1/2 mb-6">
|
|
|
|
|
<div className=" h-1 w-64 my-0 py-0 rounded-t bg-gradient-to-r from-orange-400 to-blue-500 mb-4"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="third-part-desc grid md:grid-cols-2 grid-cols-1 gap-4">
|
|
|
|
|
<div className="p-4 md:p-6 bg-gray-100 dark:bg-[#252525] rounded-lg">
|
|
|
|
|
<h3 className="text-3xl text-gray-800 dark:text-white font-medium leading-none mb-3">
|
|
|
|
|
{/* 动态变更 */}
|
|
|
|
|
<Translate
|
|
|
|
|
id="homepage.introduction.fristPartTitle"
|
|
|
|
|
description="the title for the first introduction part"
|
|
|
|
|
>
|
|
|
|
|
Dynamic Change
|
|
|
|
|
</Translate>
|
|
|
|
|
</h3>
|
|
|
|
|
<p className="text-gray-600 text-xl dark:text-white ">
|
|
|
|
|
{/* 应用运行时动态变更线程池参数,包括不限于核心、最大线程、阻塞队列大小和拒绝策略等,支持应用集群下不同节点线程池配置差异化 */}
|
|
|
|
|
<Translate
|
|
|
|
|
id="homepage.introduction.fristPartDesc"
|
|
|
|
|
description="the desc for the first introduction part"
|
|
|
|
|
>
|
|
|
|
|
Application runtime dynamically changes thread pool parameters,
|
|
|
|
|
including but not limited to core size, maximum threads,
|
|
|
|
|
blocking queue size, and rejection policy. It supports
|
|
|
|
|
differentiated thread pool configurations for different nodes in
|
|
|
|
|
the application cluster.
|
|
|
|
|
</Translate>
|
|
|
|
|
<br />
|
|
|
|
|
<br />
|
|
|
|
|
</p>
|
|
|
|
|
<section className=" border-b mt-4 mb-28 dark:text-white">
|
|
|
|
|
<div className=" ">
|
|
|
|
|
<div className="title-container w-full bg-gray-100 p-4 mb-4 flex flex-wrap dark:bg-gray-700">
|
|
|
|
|
<div className="left-image-container w-full md:w-1/2 sm:w-1/3">
|
|
|
|
|
<img
|
|
|
|
|
className="w-full h-64 object-cover md:shadow-sm lg:h-80 md:h-96 dark:rounded-lg dark:shadow-lg dark:filter-brightness-75"
|
|
|
|
|
alt="Hippo4j System"
|
|
|
|
|
src={useBaseUrl("/img/introduction/title-image.svg")}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="p-4 md:p-6 bg-gray-100 dark:bg-[#252525] rounded-lg">
|
|
|
|
|
<h3 className="text-3xl text-gray-800 dark:text-white font-medium leading-none mb-3">
|
|
|
|
|
{/* 自定义报警 */}
|
|
|
|
|
<div className="right-title-container py-4 px-16 md:px-4 md:pt-8 w-full md:w-1/2 sm:w-2/3 sm:px-8">
|
|
|
|
|
<h2 className="w-full my-2 text-3xl font-large leading-tight text-transparent bg-gradient-to-r from-orange-400 via-orange-500 to-orange-600 bg-clip-text">
|
|
|
|
|
<Translate
|
|
|
|
|
id="homepage.introduction.secondPartTitle"
|
|
|
|
|
description="the title for the second introduction part"
|
|
|
|
|
id="homepage.secondTitle"
|
|
|
|
|
description="The title for the introduction part"
|
|
|
|
|
>
|
|
|
|
|
Custom Alarm
|
|
|
|
|
What can Hippo4j do?
|
|
|
|
|
</Translate>
|
|
|
|
|
</h3>
|
|
|
|
|
<p className="text-gray-600 text-xl dark:text-white">
|
|
|
|
|
{/* 应用线程池运行时埋点,提供四种报警维度,线程池过载、阻塞队列容量、运行超长以及拒绝策略报警,并支持自定义时间内不重复报警 */}
|
|
|
|
|
</h2>
|
|
|
|
|
<p className=" my-4 leading-relaxed dark:text-white text-xl font-medium text-gray-800 md:pr-20 ">
|
|
|
|
|
<Translate
|
|
|
|
|
id="homepage.introduction.secondPartDesc"
|
|
|
|
|
description="the desc for the second introduction part"
|
|
|
|
|
id="homepage.secondTitleDesc1"
|
|
|
|
|
description="The p1 for the secondTitle part"
|
|
|
|
|
>
|
|
|
|
|
Application thread pool runtime point, providing four alarm
|
|
|
|
|
dimensions: thread pool overload, blocking queue capacity,
|
|
|
|
|
running for too long, and rejection strategy alarm. It also
|
|
|
|
|
supports non-repetitive alarms within a custom time period.
|
|
|
|
|
Hippo4j is a Java thread pool framework.
|
|
|
|
|
</Translate>
|
|
|
|
|
<br />
|
|
|
|
|
<br />
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="p-4 md:p-6 bg-gray-100 dark:bg-[#252525] rounded-lg">
|
|
|
|
|
<h3 className="text-3xl text-gray-800 dark:text-white font-medium leading-none mb-3">
|
|
|
|
|
{/* 运行监控 */}
|
|
|
|
|
<p className="leading-normal max-w-xl md:pr-10 text-gray-600 dark:text-gray-100 mb-2">
|
|
|
|
|
<Translate
|
|
|
|
|
id="homepage.introduction.thirdPartTitle"
|
|
|
|
|
description="the title for the third introduction part"
|
|
|
|
|
id="homepage.secondTitleDesc2"
|
|
|
|
|
description="The p2 for the secondTitle part"
|
|
|
|
|
>
|
|
|
|
|
Operation Monitoring
|
|
|
|
|
Provided functions such as dynamic adjustment of thread pool,
|
|
|
|
|
custom alerts, and operation monitoring to help improve the
|
|
|
|
|
operational support capabilities of business systems.
|
|
|
|
|
</Translate>
|
|
|
|
|
</h3>
|
|
|
|
|
<p className="text-gray-600 text-xl dark:text-white">
|
|
|
|
|
{/* 支持自定义时长线程池运行数据采集存储,同时也支持
|
|
|
|
|
Prometheus、InfluxDB 等采集监控,通过 Grafana
|
|
|
|
|
或内置监控页面提供可视化大屏监控运行指标 */}
|
|
|
|
|
<Translate
|
|
|
|
|
id="homepage.introduction.thirdPartDesc"
|
|
|
|
|
description="the desc for the third introduction part"
|
|
|
|
|
>
|
|
|
|
|
Supports custom duration thread pool for data collection and
|
|
|
|
|
storage, while also supporting Prometheus, InfluxDB, and other
|
|
|
|
|
monitoring systems. Provides visualized dashboard monitoring
|
|
|
|
|
metrics through Grafana or built-in monitoring pages.
|
|
|
|
|
</Translate>
|
|
|
|
|
<br />
|
|
|
|
|
<br />
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="container px-20 lg:px-20 md:px-10 three-part-container">
|
|
|
|
|
<div class="flex flex-wrap pt-6">
|
|
|
|
|
<div class="w-full pr-4 sm:w-2/3 md:w-1/2 ">
|
|
|
|
|
<h3 class="text-2xl md:pb-6 text-gray-800 dark:text-white font-medium leading-none mb-3">
|
|
|
|
|
<Translate
|
|
|
|
|
id="homepage.introduction.fristPartTitle"
|
|
|
|
|
description="the title for the first introduction part"
|
|
|
|
|
>
|
|
|
|
|
Dynamic Change
|
|
|
|
|
</Translate>
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="dark:text-white text-gray-600 mb-8">
|
|
|
|
|
<p>
|
|
|
|
|
<Translate
|
|
|
|
|
className="cursor-pointer"
|
|
|
|
|
id="homepage.introduction.fristPartDesc1"
|
|
|
|
|
description="The first desc for fristPart "
|
|
|
|
|
>
|
|
|
|
|
Application runtime dynamically changes thread pool
|
|
|
|
|
parameters.
|
|
|
|
|
</Translate>{" "}
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<Translate
|
|
|
|
|
className="cursor-pointer"
|
|
|
|
|
id="homepage.introduction.fristPartDesc2"
|
|
|
|
|
description="The second desc for fristPart "
|
|
|
|
|
>
|
|
|
|
|
Including but not limited to core size, maximum threads,
|
|
|
|
|
blocking queue size, and rejection policy.
|
|
|
|
|
</Translate>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<Translate
|
|
|
|
|
className="cursor-pointer"
|
|
|
|
|
id="homepage.introduction.fristPartDesc3"
|
|
|
|
|
description="The third desc for fristPart "
|
|
|
|
|
>
|
|
|
|
|
It supports differentiated thread pool configurations for
|
|
|
|
|
different nodes in the application cluster.
|
|
|
|
|
</Translate>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-full sm:w-1/3 md:w-1/2 ">
|
|
|
|
|
{/* <img class="mx-auto w-4/5 z-50" src="f1.png" /> */}
|
|
|
|
|
<img
|
|
|
|
|
className="w-full h-auto sm:h-64 object-cover md:shadow-sm lg:h-80 md:h-72 dark:rounded-lg dark:shadow-lg dark:filter-brightness-75"
|
|
|
|
|
src={useBaseUrl("/img/introduction/p1.svg")}
|
|
|
|
|
alt="Hippo4j System"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex flex-wrap pt-6 flex-col-reverse sm:flex-row">
|
|
|
|
|
<div class="w-full sm:w-1/3 md:w-1/2 mt-6">
|
|
|
|
|
<img
|
|
|
|
|
className="w-full h-auto sm:h-64 object-cover md:shadow-sm lg:h-80 md:h-96 dark:rounded-lg dark:shadow-lg dark:filter-brightness-75"
|
|
|
|
|
src={useBaseUrl("/img/introduction/p2.svg")}
|
|
|
|
|
alt="Hippo4j System"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-full sm:w-2/3 md:w-1/2 md:pl-8 sm:pl-8 mt-6">
|
|
|
|
|
<div class="align-middle">
|
|
|
|
|
<h3 class="text-2xl md:pb-6 text-gray-800 dark:text-white font-medium leading-none mb-3">
|
|
|
|
|
<Translate
|
|
|
|
|
id="homepage.introduction.secondPartTitle"
|
|
|
|
|
description="the title for the second introduction part"
|
|
|
|
|
>
|
|
|
|
|
Custom Alarm
|
|
|
|
|
</Translate>
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="dark:text-white text-gray-600 mb-8">
|
|
|
|
|
<p>
|
|
|
|
|
<Translate
|
|
|
|
|
className="cursor-pointer"
|
|
|
|
|
id="homepage.introduction.secondPartDesc1"
|
|
|
|
|
description="The first desc for secondPart "
|
|
|
|
|
>
|
|
|
|
|
Application thread pool runtime point, providing four
|
|
|
|
|
alarm dimensions.
|
|
|
|
|
</Translate>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<Translate
|
|
|
|
|
className="cursor-pointer"
|
|
|
|
|
id="homepage.introduction.secondPartDesc2"
|
|
|
|
|
description="The second desc for secondPart "
|
|
|
|
|
>
|
|
|
|
|
Thread pool overload, blocking queue capacity, running for
|
|
|
|
|
too long, and rejection strategy alarm.
|
|
|
|
|
</Translate>{" "}
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<Translate
|
|
|
|
|
className="cursor-pointer"
|
|
|
|
|
id="homepage.introduction.secondPartDesc3"
|
|
|
|
|
description="The third desc for secondPart "
|
|
|
|
|
>
|
|
|
|
|
It also supports non-repetitive alarms within a custom
|
|
|
|
|
time period.
|
|
|
|
|
</Translate>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex flex-wrap pt-6">
|
|
|
|
|
<div class="w-5/6 sm:w-2/3 md:w-1/2 sm:pr-8 md:pr-4">
|
|
|
|
|
<h3 class="text-2xl md:py-6 text-gray-800 dark:text-white font-medium leading-none mb-3">
|
|
|
|
|
<Translate
|
|
|
|
|
id="homepage.introduction.thirdPartTitle"
|
|
|
|
|
description="the title for the third introduction part"
|
|
|
|
|
>
|
|
|
|
|
Operation Monitoring
|
|
|
|
|
</Translate>
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="dark:text-white text-gray-600 mb-8 md:pr-6">
|
|
|
|
|
<p>
|
|
|
|
|
<Translate
|
|
|
|
|
className="cursor-pointer"
|
|
|
|
|
id="homepage.introduction.thirdPartDesc1"
|
|
|
|
|
description="The first desc for thirdPart "
|
|
|
|
|
>
|
|
|
|
|
Supports custom duration thread pool for data collection and
|
|
|
|
|
storage.
|
|
|
|
|
</Translate>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<Translate
|
|
|
|
|
className="cursor-pointer"
|
|
|
|
|
id="homepage.introduction.thirdPartDesc2"
|
|
|
|
|
description="The second desc for thirdPart "
|
|
|
|
|
>
|
|
|
|
|
while also supporting Prometheus, InfluxDB, and other
|
|
|
|
|
monitoring systems.
|
|
|
|
|
</Translate>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<Translate
|
|
|
|
|
className="cursor-pointer"
|
|
|
|
|
id="homepage.introduction.thirdPartDesc3"
|
|
|
|
|
description="The third desc for thirdPart "
|
|
|
|
|
>
|
|
|
|
|
Provides visualized dashboard monitoring metrics through
|
|
|
|
|
Grafana or built-in monitoring pages.
|
|
|
|
|
</Translate>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-full sm:w-1/3 md:w-1/2 ">
|
|
|
|
|
{/* <img class="mx-auto w-4/5 z-50" src="f3_r.png" /> */}
|
|
|
|
|
<img
|
|
|
|
|
className="w-full h-auto sm:h-64 object-cover md:shadow-sm lg:h-80 md:h-96 dark:rounded-lg dark:shadow-lg dark:filter-brightness-75"
|
|
|
|
|
src={useBaseUrl("/img/introduction/p3.svg")}
|
|
|
|
|
alt="Hippo4j System"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
);
|
|
|
|
|