This is an automated email from the ASF dual-hosted git repository.
luzhijing pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new 79502ab9d4b (feat) add doris ecosystem download (#412)
79502ab9d4b is described below
commit 79502ab9d4ba0af028ebcfd87360c2234896a66a
Author: song7788q <[email protected]>
AuthorDate: Thu Mar 7 14:36:32 2024 +0800
(feat) add doris ecosystem download (#412)
---
.../download-form/download-form-all-release.tsx | 12 +-
.../download-form/download-form-tools.tsx | 151 +++++++++++++++++++++
src/constant/download.data.ts | 99 ++++++++++++++
src/pages/download/index.scss | 17 +--
src/pages/download/index.tsx | 96 ++++++++++---
static/js/custom-script.js | 19 ++-
6 files changed, 355 insertions(+), 39 deletions(-)
diff --git a/src/components/download-form/download-form-all-release.tsx
b/src/components/download-form/download-form-all-release.tsx
index 37f7148afcf..a3da4a999f9 100644
--- a/src/components/download-form/download-form-all-release.tsx
+++ b/src/components/download-form/download-form-all-release.tsx
@@ -69,7 +69,7 @@ export default function DownloadFormAllRelease(props:
DownloadFormProps) {
return (
<div className="rounded-lg border border-b-[0.375rem] border-[#444FD9]
px-8 pt-[3.125rem] pb-[2.1875rem]">
- <div className="mb-8 text-xl font-medium">Available downloads</div>
+ <div className="mb-8 text-xl font-medium text-left">Downloads</div>
<Form
form={form}
onFinish={val => {
@@ -91,7 +91,7 @@ export default function DownloadFormAllRelease(props:
DownloadFormProps) {
<Form.Item name="version" rules={[{ required: true }]}>
<FormSelect
placeholder="Version"
- label="version"
+ label="Version"
isCascader={true}
displayRender={label => {
return label.length > 0 ? label[label.length - 1]
: '';
@@ -145,7 +145,7 @@ export default function DownloadFormAllRelease(props:
DownloadFormProps) {
{Array.isArray(version) && showArch(version[1]) && (
<>
<div
- className="flex cursor-pointer text-[#444FD9]
items-center mt-7 justify-center"
+ className="flex cursor-pointer text-[#444FD9]
items-center mt-4 justify-center"
onClick={() => {
const url = getDownloadLinkByCard({
version: version,
@@ -182,9 +182,9 @@ export default function DownloadFormAllRelease(props:
DownloadFormProps) {
/>
</svg>
</div>
- <div className="flex justify-center mt-[1.5rem]">
+ <div className="flex justify-center mt-4">
<div
- className="inline-flex items-center
text-[#444FD9] cursor-pointer hover:underline"
+ className="inline-flex items-center
text-[#8592A6] cursor-pointer hover:underline hover:text-[#444FD9]"
onClick={() => {
const url = getDownloadLinkByCard({
version: version,
@@ -198,7 +198,7 @@ export default function DownloadFormAllRelease(props:
DownloadFormProps) {
ASC
</div>
<div
- className="inline-flex items-center ml-4
text-[#444FD9] cursor-pointer hover:underline"
+ className="inline-flex items-center ml-4
text-[#8592A6] hover:text-[#444FD9] cursor-pointer hover:underline"
onClick={() => {
const url = getDownloadLinkByCard({
version: version,
diff --git a/src/components/download-form/download-form-tools.tsx
b/src/components/download-form/download-form-tools.tsx
new file mode 100644
index 00000000000..86bd7d545ee
--- /dev/null
+++ b/src/components/download-form/download-form-tools.tsx
@@ -0,0 +1,151 @@
+import React, { useEffect, useMemo } from 'react';
+import { Form, message } from 'antd';
+import { Option } from '@site/src/constant/download.data';
+import FormSelect from '../form-select/form-select';
+import copy from 'copy-to-clipboard';
+import { ToolsEnum } from '@site/src/constant/download.data';
+import { useForm, useWatch } from 'antd/es/form/Form';
+import { ExternalLinkIcon } from '../Icons/external-link-icon';
+
+interface DownloadFormToolsProps {
+ data: Option[];
+}
+export default function DownloadFormTools(props: DownloadFormToolsProps) {
+ const { data } = props;
+ const [form] = useForm();
+ const tool = useWatch('tool', form);
+ const architecture = useWatch('architecture', form);
+ const version = useWatch('version', form);
+
+ const getOptions = useMemo(() => {
+ if (!tool) return [];
+ return data.find(item => tool === item.value).children;
+ }, [tool]);
+
+ const getArchitectureOptions = useMemo(() => {
+ if (!tool || !version) return [];
+ const current = data.find(item => item.value === tool).children;
+ return current.find(item => version === item.value).children;
+ }, [version]);
+
+ const getDownloadLinkByCard = (source?: boolean) => {
+ const currentTool = data.find(item => tool === item.value).children;
+ if (!architecture) {
+ return currentTool.find(item => version === item.value).gz;
+ } else {
+ if (source) {
+ return currentTool.find(item => version === item.value).source;
+ } else {
+ const currentVersion = currentTool.find(item => version ===
item.value).children;
+ return currentVersion.find(item => architecture ===
item.value).gz;
+ }
+ }
+ };
+
+ useEffect(() => {
+ if (tool) {
+ form.setFieldValue('version', getOptions[0].value);
+ }
+ }, [tool]);
+
+ useEffect(() => {
+ if (version && getArchitectureOptions?.length > 0) {
+ form.setFieldValue('architecture',
getArchitectureOptions[0].value);
+ }
+ }, [version]);
+
+ return (
+ <div className="rounded-lg border border-b-[0.375rem] border-[#444FD9]
px-8 pt-[3.125rem] pb-[2.1875rem]">
+ <div className="mb-8 text-xl font-medium text-left">Downloads</div>
+ <Form
+ form={form}
+ onFinish={val => {
+ const url = getDownloadLinkByCard();
+ window.open(url, '_blank');
+ }}
+ initialValues={{
+ tool: data[0]?.value,
+ version: '',
+ architecture: '',
+ }}
+ >
+ <Form.Item name="tool" rules={[{ required: true }]}>
+ <FormSelect placeholder="Tools" label="Tools"
isCascader={false} options={data} />
+ </Form.Item>
+ <Form.Item noStyle shouldUpdate>
+ {({ getFieldValue }) =>
+ getFieldValue('tool') === ToolsEnum.StreamLoader ? (
+ <>
+ <Form.Item name="version" rules={[{ required:
true }]}>
+ <FormSelect
+ placeholder="Version"
+ label="Version"
+ isCascader={false}
+ options={getOptions}
+ />
+ </Form.Item>
+ <Form.Item name="architecture" rules={[{
required: true }]}>
+ <FormSelect
+ placeholder="Architecture"
+ label="Architecture"
+ isCascader={false}
+ options={getArchitectureOptions}
+ />
+ </Form.Item>
+ </>
+ ) : (
+ <Form.Item name="version" rules={[{ required: true
}]}>
+ <FormSelect
+ placeholder="Version"
+ label="Version"
+ isCascader={false}
+ options={getOptions}
+ />
+ </Form.Item>
+ )
+ }
+ </Form.Item>
+ <Form.Item style={{ marginBottom: 0 }} colon={false}>
+ <button type="submit" className="button-primary w-full
text-lg">
+ Download
+ </button>
+ </Form.Item>
+ <div
+ className="flex cursor-pointer text-[#444FD9] items-center
mt-4 justify-center"
+ onClick={() => {
+ const url = getDownloadLinkByCard();
+ copy(url);
+ message.success('Copy Successfully!');
+ }}
+ >
+ <span className="mr-2">Copy link</span>
+ <svg xmlns="http://www.w3.org/2000/svg"; width="16"
height="16" viewBox="0 0 16 16" fill="none">
+ <rect x="2.5" y="5.5" width="8" height="8"
rx="0.564706" stroke="#444FD9" strokeWidth="1.2" />
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M6.0999 1.89996C5.43716 1.89996 4.8999 2.43722
4.8999 3.09996V5.49995H6.0999V3.09996L12.8999
3.09996V9.89996H10.5V11.1H12.8999C13.5626 11.1 14.0999 10.5627 14.0999
9.89996V3.09996C14.0999 2.43722 13.5626 1.89996 12.8999 1.89996H6.0999Z"
+ fill="#444FD9"
+ />
+ </svg>
+ </div>
+ {tool === ToolsEnum.StreamLoader && (
+ <div className="flex justify-center mt-4">
+ <div
+ className="inline-flex items-center text-[#8592A6]
cursor-pointer hover:underline hover:text-[#444FD9]"
+ onClick={() => {
+ const url = getDownloadLinkByCard(true);
+ window.open(url, '_blank');
+ }}
+ >
+ Source code
+ <div className="ml-1">
+ <ExternalLinkIcon />
+ </div>
+ </div>
+ </div>
+ )}
+ </Form>
+ </div>
+ );
+}
diff --git a/src/constant/download.data.ts b/src/constant/download.data.ts
index 08971f9d462..ab8fe9b69e3 100644
--- a/src/constant/download.data.ts
+++ b/src/constant/download.data.ts
@@ -21,6 +21,12 @@ export enum SuffixEnum {
SHA512 = '.tar.gz.sha512',
}
+export enum ToolsEnum {
+ Flink = 'Flink Doris Connector',
+ Spark = 'Spark Doris Connector',
+ StreamLoader = 'Doris Streamloader',
+}
+
export const ORIGIN =
'https://apache-doris-releases.oss-accelerate.aliyuncs.com/';
export enum VersionEnum {
Latest = '2.0.5',
@@ -893,6 +899,99 @@ export const OLD_VERSIONS: Option[] = [
},
];
+export const TOOL_VERSIONS = [
+ {
+ label: ToolsEnum.Flink,
+ value: ToolsEnum.Flink,
+ children: [
+ {
+ label: '1.5.2',
+ value: '1.5.2',
+ gz:
'https://github.com/apache/doris-flink-connector/archive/refs/tags/1.5.2.tar.gz',
+ },
+ {
+ label: '1.4.0',
+ value: '1.4.0',
+ gz:
'https://github.com/apache/doris-flink-connector/archive/refs/tags/1.4.0.tar.gz',
+ },
+ {
+ label: '1.3.0',
+ value: '1.3.0',
+ gz:
'https://github.com/apache/doris-flink-connector/archive/refs/tags/1.16-1.3.0.tar.gz',
+ },
+ {
+ label: '1.2.1',
+ value: '1.2.1',
+ gz:
'https://github.com/apache/doris-flink-connector/archive/refs/tags/1.15-1.2.1.tar.gz',
+ },
+ {
+ label: '1.1.1',
+ value: '1.1.1',
+ gz:
'https://github.com/apache/doris-flink-connector/archive/refs/tags/1.14_2.12-1.1.1.tar.gz',
+ },
+ {
+ label: '1.0.3',
+ value: '1.0.3',
+ gz:
'https://github.com/apache/doris-flink-connector/archive/refs/tags/1.13_2.11-1.0.3.tar.gz',
+ },
+ ],
+ },
+ {
+ label: ToolsEnum.Spark,
+ value: ToolsEnum.Spark,
+ children: [
+ {
+ label: '1.3.1',
+ value: '1.3.1',
+ gz:
'https://github.com/apache/doris-spark-connector/archive/refs/tags/1.3.1.tar.gz',
+ },
+ {
+ label: '1.2.0',
+ value: '1.2.0',
+ gz:
'https://github.com/apache/doris-spark-connector/archive/refs/tags/1.2.0.tar.gz',
+ },
+ {
+ label: '1.1.0',
+ value: '3.2_2.12-1.1.0',
+ gz:
'https://github.com/apache/doris-spark-connector/archive/refs/tags/3.2_2.12-1.1.0.tar.gz',
+ },
+ {
+ label: '1.0.1 (For Spark 3.1)',
+ value: '3.1_2.12-1.0.1',
+ gz:
'https://github.com/apache/doris-spark-connector/archive/refs/tags/3.1_2.12-1.0.1.tar.gz',
+ },
+ {
+ label: '1.0.1 (For Spark 2.x)',
+ value: '2.3_2.11-1.0.1',
+ gz:
'https://github.com/apache/doris-spark-connector/archive/refs/tags/2.3_2.11-1.0.1.tar.gz',
+ },
+ ],
+ },
+ {
+ label: ToolsEnum.StreamLoader,
+ value: ToolsEnum.StreamLoader,
+ children: [
+ {
+ label: '1.0.1',
+ value: '1.0.1',
+ children: [
+ {
+ label: CPUEnum.X64,
+ value: CPUEnum.X64,
+ gz:
'https://apache-doris-releases.oss-accelerate.aliyuncs.com/apache-doris-streamloader-1.0.1-bin-x64.tar.xz',
+ },
+ {
+ label: CPUEnum.ARM64,
+ value: CPUEnum.ARM64,
+ gz:
'https://apache-doris-releases.oss-accelerate.aliyuncs.com/apache-doris-streamloader-1.0.1-bin-arm64.tar.xz',
+ },
+ ],
+ source:
'https://github.com/apache/doris-streamloader/archive/refs/tags/1.0.1.tar.gz',
+ },
+ ],
+ },
+];
+
export const RUN_ANYWHERE = [
{
title: 'Doris on bare metal',
diff --git a/src/pages/download/index.scss b/src/pages/download/index.scss
index d0f41c0b8de..ff191d11145 100644
--- a/src/pages/download/index.scss
+++ b/src/pages/download/index.scss
@@ -1,8 +1,7 @@
.run-anywhere {
- background: #F7F9FE;
+ background: #f7f9fe;
}
.download {
-
a {
transition: all 0.3s;
@@ -30,9 +29,9 @@
&-box {
padding: 3.125rem;
- box-shadow: 10px 12px 38px rgba(33, 39, 116, 0.07);
- border-radius: 4px;
+ border-radius: 8px;
background-color: var(--global-colors-white);
+ border: #dfe5f0 solid 1px;
.download-type {
display: flex;
@@ -95,7 +94,6 @@
.inner {
margin: 0.3125rem;
- background-color: #f7faff;
width: calc(100% - 0.625rem);
color: var(--ifm-color-primary);
@@ -114,7 +112,7 @@
}
&.all-in-one {
.theme-code-block {
- font-size: 0.875rem ;
+ font-size: 0.875rem;
padding-left: 2rem;
position: relative;
&:before {
@@ -314,7 +312,7 @@
align-items: flex-start;
gap: 48px;
border-radius: 8px;
- border: 1px solid var(---N5, #DFE5F0);
+ border: 1px solid var(---N5, #dfe5f0);
.all-download-intro {
display: flex;
@@ -323,7 +321,7 @@
align-items: flex-start;
gap: 32px;
.all-download-intro-text {
- color: var(---N1, #1D1D1D);
+ color: var(---N1, #1d1d1d);
font-size: 16px;
font-style: normal;
line-height: 26px; /* 162.5% */
@@ -345,11 +343,10 @@
}
}
.all-download-note {
- color: var(---N3, #8592A6);
+ color: var(---N3, #8592a6);
font-size: 12px;
font-style: normal;
line-height: 20px;
text-align: left;
}
}
-
diff --git a/src/pages/download/index.tsx b/src/pages/download/index.tsx
index 2f6bd9c78f4..82923ffedbd 100644
--- a/src/pages/download/index.tsx
+++ b/src/pages/download/index.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState, version } from 'react';
import PageHeader from '@site/src/components/PageHeader';
import Layout from '@site/src/theme/Layout';
import DownloadFormAllRelease from
'@site/src/components/download-form/download-form-all-release';
-import DownloadFormSimple from
'@site/src/components/download-form/download-form-simple';
+import DownloadFormTools from
'@site/src/components/download-form/download-form-tools';
import {
CPUEnum,
DORIS_VERSIONS,
@@ -17,8 +17,9 @@ import './index.scss';
import LinkWithArrow from '../../components/link-arrow';
import PageColumn from '@site/src/components/PageColumn';
import clsx from 'clsx';
-import { ALL_VERSIONS, OLD_VERSIONS } from '../../constant/download.data';
+import { ALL_VERSIONS, TOOL_VERSIONS } from '../../constant/download.data';
import * as semver from 'semver';
+import { CheckedIcon } from '@site/src/components/Icons/checked-icon';
const BINARY_VERSION = [
{ label: `${VersionEnum.Latest} ( Stable )`, value: VersionEnum.Latest },
@@ -117,9 +118,6 @@ export default function Download() {
<PageHeader className="lg:pt-[5rem] g-white" title="Quick Download
& Easy Deployment" />
<section className="quick-download">
<PageColumn align="center">
- <span className="font-medium" style={{ fontSize: 40 }}>
- Quick Download
- </span>
<div className="download-box">
<div className="download-type">
<label>
@@ -234,13 +232,16 @@ export default function Download() {
</div>
</PageColumn>
</section>
- <PageColumn>
- <span
- className="font-medium"
- style={{ display: 'block', marginTop: 40, fontSize: 40,
marginBottom: 32 }}
- >
- All Releases
- </span>
+ <PageColumn
+ title={
+ <span
+ className="font-normal"
+ style={{ display: 'block', lineHeight: '64px',
marginTop: 40, fontSize: 40 }}
+ >
+ Doris All Releases
+ </span>
+ }
+ >
<div className="all-download">
<div className="all-download-intro">
<div className="all-download-intro-text">
@@ -291,6 +292,69 @@ export default function Download() {
</div>
</div>
</PageColumn>
+ <PageColumn
+ title={
+ <span
+ className="font-normal"
+ style={{ display: 'block', lineHeight: '64px',
marginTop: 40, fontSize: 40 }}
+ >
+ Doris Ecosystem
+ </span>
+ }
+ >
+ <div className="all-download">
+ <div className="all-download-intro">
+ <div className="all-download-intro-text">
+ <div>Streamline integration and data loading with
Doris tools</div>
+ </div>
+ <div className="flex">
+ <ul>
+ <li className="mt-2 flex items-center
space-x-2">
+ <CheckedIcon />
+ <div className="text-[#4C576C]
text-base">Flink Doris Connector</div>
+ </li>
+ <li className="mt-2 flex items-center
space-x-2">
+ <CheckedIcon />
+ <div className="text-[#4C576C]
text-base">Spark Doris Connector</div>
+ </li>
+ <li className="mt-2 flex items-center
space-x-2">
+ <CheckedIcon />
+ <div className="text-[#4C576C]
text-base">Doris Streamloader</div>
+ </li>
+ </ul>
+ </div>
+ <div>
+ <LinkWithArrow to="/docs/ecosystem/datax"
text="More Tools" />
+ </div>
+ <div className="all-download-note">
+ Note: For detailed upgrade precautions, please
refer to the{' '}
+ <Link
+ to="/docs/install/standard-deployment"
+ style={{
+ color: '#444FD9',
+ cursor: 'pointer',
+ }}
+ >
+ deployment
+ </Link>{' '}
+ manual and cluster{' '}
+ <Link
+ style={{
+ color: '#444FD9',
+ cursor: 'pointer',
+ }}
+
to="/docs/admin-manual/cluster-management/upgrade"
+ >
+ upgrade
+ </Link>{' '}
+ manual.
+ </div>
+ </div>
+ <div className="all-download-card">
+ <DownloadFormTools data={TOOL_VERSIONS} />
+ </div>
+ </div>
+ </PageColumn>
<a id="runAnywhere" className="scroll-mt-20"></a>
<div className="run-anywhere bg-[#F7F9FE] pt-[5.5rem] pb-[7.5rem]
mt-[80px]">
<div className="container mx-auto">
@@ -298,8 +362,8 @@ export default function Download() {
<ul className="mt-10 grid gap-x-6 gap-y-3 lg:grid-cols-3
lg:gap-y-0">
{RUN_ANYWHERE.map(item =>
item.title !== 'Doris on AWS' ? (
- <Link
- href={item.link}
+ <div
+ onClick={() => window.open(item.link)}
key={item.title}
className="run-anywhere-card relative
bg-white flex cursor-pointer flex-col items-center justify-center
overflow-hidden rounded-lg border-b-4 border-b-[#444FD9] py-[2rem] px-4
lg:px-[1.5rem] shadow-[inset_0_0_0_1px_#444FD9] hover:no-underline"
>
@@ -308,9 +372,9 @@ export default function Download() {
<div className="flex items-center mt-4
text-[#444FD9]">
<LinkWithArrow to={item.link}
text="Learn more" />
</div>
- </Link>
+ </div>
) : (
- <section>
+ <section key={item.title}>
<div className="relative bg-white flex
cursor-pointer flex-col items-center justify-center overflow-hidden rounded-lg
border-b-4 border-b-[#444FD9] py-[2rem] px-4 lg:px-[1.5rem]
shadow-[inset_0_0_0_1px_#444FD9] hover:no-underline">
<div className="text-2xl
text-[#1D1D1D]">{item.title}</div>
<div className="mt-4 text-base
text-center text-[#4C576C]">
diff --git a/static/js/custom-script.js b/static/js/custom-script.js
index 4527b14de19..e746900d0bf 100644
--- a/static/js/custom-script.js
+++ b/static/js/custom-script.js
@@ -1,7 +1,12 @@
-<script type="text/javascript">
- (function(c,l,a,r,i,t,y){
- c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
- t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
- y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
- })(window, document, "clarity", "script", "kfyqejiz0g");
-</script>
\ No newline at end of file
+(function (c, l, a, r, i, t, y) {
+ c[a] =
+ c[a] ||
+ function () {
+ (c[a].q = c[a].q || []).push(arguments);
+ };
+ t = l.createElement(r);
+ t.async = 1;
+ t.src = 'https://www.clarity.ms/tag/' + i;
+ y = l.getElementsByTagName(r)[0];
+ y.parentNode.insertBefore(t, y);
+})(window, document, 'clarity', 'script', 'kfyqejiz0g');
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
