Skip to content

Commit

Permalink
feat: Support downloading AI dashboard configurations (higress-group#426
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@CH3CHO
CH3CHO authored Feb 14, 2025
1 parent 2974c9a commit acb3a6a
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 203 deletions.
3 changes: 3 additions & 0 deletions frontend/src/locales/en-US/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,9 @@
"item3": "We recommend you using the built-in dashboard configuration of Higress. You can input the UID of the Prometheus data source in Grafana and download the JSON configuration file for import. (<1>How to obtain the UID of a data source?</1>)",
"item3_dataSourceId": "Prometheus Data Source UID",
"item3_dataSourceId_required": "Please input Prometheus Data Source UID.",
"item3_templateType": "Template",
"item3_templateType_MAIN": "Generic Gateway Dashboard Template",
"item3_templateType_AI": "AI Gateway Dashboard Template",
"item3_download": "Download Config File",
"item4": "Input the HTTPS URL of Grafana is highly recommended to ensure the dashboard can be shown with in this page correctly."
}
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/locales/zh-CN/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,9 @@
"item3": "推荐各位使用 Higress 官方提供的 Grafana 看板配置。您可填写 Grafana 中的 Prometheus 数据源 UID 获取可供导入的 JSON 配置文件。（<1>如何获取数据源 UID？</1>）",
"item3_dataSourceId": "Prometheus 数据源 UID",
"item3_dataSourceId_required": "请填写 Prometheus 数据源 UID",
"item3_templateType": "配置模板",
"item3_templateType_MAIN": "通用网关监控模板",
"item3_templateType_AI": "AI 网关监控模板",
"item3_download": "下载配置文件",
"item4": "强烈建议填写 Grafana 的 HTTPS URL 以确保监控面板可以在本页面内正常显示。"
}
Expand Down
324 changes: 123 additions & 201 deletions frontend/src/pages/dashboard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { DashboardType } from '@/interfaces/dashboard';
import { getDashboardConfigData, getDashboardInfo, initDashboard, setDashboardUrl } from '@/services';
import store from '@/store';
import { useRequest } from 'ahooks';
import { Button, Col, Collapse, Form, Image, Input, Row, Spin } from 'antd';
import { Button, Col, Collapse, Form, Image, Input, Row, Select, Spin } from 'antd';
import React, { useEffect, useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import styles from './index.module.css';
Expand Down Expand Up @@ -92,12 +92,12 @@ const Dashboard: React.FC = () => {
await setDashboardUrl(values.url);
location.reload();
};
const downloadConfigFile = async ({ dataSourceUid }) => {
const downloadConfigFile = async ({ dataSourceUid, type }) => {
if (!dataSourceUid) {
return;
}

const data = await getDashboardConfigData(dataSourceUid);
const data = await getDashboardConfigData(dataSourceUid, type);
const blob = new Blob([data], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
Expand All @@ -108,207 +108,129 @@ const Dashboard: React.FC = () => {
link.remove();
};


if (mode === Mode.K8S) {
return (
<>
<Form form={form} layout="vertical">
<h3>{t('dashboard.noBuiltInDashboard')}</h3>
<Form.Item
label={t('dashboard.setForm.url')}
required
name="url"
rules={[
{
required: true,
message: t('dashboard.setForm.urlRequired'),
},
]}
>
<Input showCount allowClear maxLength={256} type="url" />
</Form.Item>
<Form.Item>
<Button type="primary" onClick={handleSetDashboard}>
{t('misc.confirm')}
</Button>
</Form.Item>
</Form>
<Collapse defaultActiveKey="note">
<Panel header={t('dashboard.configNotes.header')} key="note">
<p>{t('dashboard.configNotes.brief')}</p>
<ol style={{ marginBottom: '0' }}>
<li style={{ marginBottom: '1rem' }}>
{t('dashboard.configNotes.item1_k8s')}
<pre className={`${styles.mb0}`}>
- regex: &apos;__meta_kubernetes_pod_label_(.+)&apos;<br />
&nbsp;&nbsp;replacement: &apos;$1&apos;<br />
&nbsp;&nbsp;action: labelmap
</pre>
</li>
<li style={{ marginBottom: '1rem' }}>
{t('dashboard.configNotes.item2')}
<ul>
<li>
{t('dashboard.configNotes.item2_1')}
<pre className={`${styles.mb0}`}>
[security]<br />
cookie_secure=true<br />
cookie_samesite=none<br />
allow_embedding=true
</pre>
</li>
<li>
{t('dashboard.configNotes.item2_2')}
<pre className={`${styles.mb0}`}>
GF_SECURITY_COOKIE_SECURE=true<br />
GF_SECURITY_COOKIE_SAMESITE=none<br />
GF_SECURITY_ALLOW_EMBEDDING=true
</pre>
</li>
</ul>
</li>
<li style={{ marginBottom: '1rem' }}>
<Trans t={t} i18nKey="dashboard.configNotes.item3">
推荐各位使用 Higress 官方提供的 Grafana 看板配置。您可填写 Grafana 中的 Prometheus 数据源 ID 获取可供导入的 JSON 配置文件。
（<a href="" onClick={e => { e.preventDefault(); setDataSourceUidSampleVisible(true); }}>如何获取数据源 ID？</a>）
</Trans>
<Form
style={{ marginTop: '0.5rem' }}
layout="inline"
onFinish={downloadConfigFile}
>
<Form.Item
name="dataSourceUid"
label={t('dashboard.configNotes.item3_dataSourceId')}
rules={[
{
required: true,
message: t('dashboard.configNotes.item3_dataSourceId_required'),
},
]}
>
<Input type="text" style={{ width: 200 }} />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">{t('dashboard.configNotes.item3_download')}</Button>
</Form.Item>
</Form>
<Image
width={200}
style={{ display: 'none' }}
preview={{
visible: dataSourceUidSampleVisible,
src: dataSourceUidSampleImage,
onVisibleChange: value => {
setDataSourceUidSampleVisible(value);
return (
<>
<Form form={form} layout="vertical">
<h3>{t(mode === Mode.K8S ? 'dashboard.noBuiltInDashboard' : 'dashboard.configureDashboard')}</h3>
<Form.Item
label={t('dashboard.setForm.url')}
required
name="url"
rules={[
{
required: true,
message: t('dashboard.setForm.urlRequired'),
},
]}
>
<Input showCount allowClear maxLength={256} type="url" />
</Form.Item>
<Form.Item>
<Button type="primary" onClick={handleSetDashboard}>
{t('misc.confirm')}
</Button>
</Form.Item>
</Form>
<Collapse defaultActiveKey="note">
<Panel header={t('dashboard.configNotes.header')} key="note">
<p>{t('dashboard.configNotes.brief')}</p>
<ol style={{ marginBottom: '0' }}>
{
mode === Mode.K8S && (
<li style={{ marginBottom: '1rem' }}>
{t('dashboard.configNotes.item1_k8s')}
<pre className={`${styles.mb0}`}>
- regex: &apos;__meta_kubernetes_pod_label_(.+)&apos;<br />
&nbsp;&nbsp;replacement: &apos;$1&apos;<br />
&nbsp;&nbsp;action: labelmap
</pre>
</li>
) || (
<li style={{ marginBottom: '1rem' }}>
{t('dashboard.configNotes.item1_standalone')}
</li>
)
}
<li style={{ marginBottom: '1rem' }}>
{t('dashboard.configNotes.item2')}
<ul>
<li>
{t('dashboard.configNotes.item2_1')}
<pre className={`${styles.mb0}`}>
[security]<br />
cookie_secure=true<br />
cookie_samesite=none<br />
allow_embedding=true
</pre>
</li>
<li>
{t('dashboard.configNotes.item2_2')}
<pre className={`${styles.mb0}`}>
GF_SECURITY_COOKIE_SECURE=true<br />
GF_SECURITY_COOKIE_SAMESITE=none<br />
GF_SECURITY_ALLOW_EMBEDDING=true
</pre>
</li>
</ul>
</li>
<li style={{ marginBottom: '1rem' }}>
<Trans t={t} i18nKey="dashboard.configNotes.item3">
推荐各位使用 Higress 官方提供的 Grafana 看板配置。您可填写 Grafana 中的 Prometheus 数据源 ID 获取可供导入的 JSON 配置文件。
（<a href="" onClick={e => { e.preventDefault(); setDataSourceUidSampleVisible(true); }}>如何获取数据源 ID？</a>）
</Trans>
<Form
style={{ marginTop: '0.5rem' }}
layout="inline"
onFinish={downloadConfigFile}
>
<Form.Item
name="dataSourceUid"
label={t('dashboard.configNotes.item3_dataSourceId')}
rules={[
{
required: true,
message: t('dashboard.configNotes.item3_dataSourceId_required'),
},
}}
/>
</li>
<li>{t('dashboard.configNotes.item4')}</li>
</ol>
</Panel>
</Collapse>
</>
);
} else {
return (
<>
<Form form={form} layout="vertical">
<h3>{t('dashboard.configureDashboard')}</h3>
<Form.Item
label={t('dashboard.setForm.url')}
required
name="url"
rules={[
{
required: true,
message: t('dashboard.setForm.urlRequired'),
},
]}
>
<Input showCount allowClear maxLength={256} type="url" />
</Form.Item>
<Form.Item>
<Button type="primary" onClick={handleSetDashboard}>
{t('misc.confirm')}
</Button>
</Form.Item>
</Form>
<Collapse defaultActiveKey="note">
<Panel header={t('dashboard.configNotes.header')} key="note">
<p>{t('dashboard.configNotes.brief')}</p>
<ol style={{ marginBottom: '0' }}>
<li style={{ marginBottom: '1rem' }}>
{t('dashboard.configNotes.item1_standalone')}
</li>
<li style={{ marginBottom: '1rem' }}>
{t('dashboard.configNotes.item2')}
<ul>
<li>
{t('dashboard.configNotes.item2_1')}
<pre className={`${styles.mb0}`}>
[security]<br />
cookie_secure=true<br />
cookie_samesite=none<br />
allow_embedding=true
</pre>
</li>
<li>
{t('dashboard.configNotes.item2_2')}
<pre className={`${styles.mb0}`}>
GF_SECURITY_COOKIE_SECURE=true<br />
GF_SECURITY_COOKIE_SAMESITE=none<br />
GF_SECURITY_ALLOW_EMBEDDING=true
</pre>
</li>
</ul>
</li>
<li style={{ marginBottom: '1rem' }}>
<Trans t={t} i18nKey="dashboard.configNotes.item3">
推荐各位使用 Higress 官方提供的 Grafana 看板配置。您可填写 Grafana 中的 Prometheus 数据源 ID 获取可供导入的 JSON 配置文件。
（<a href="" onClick={e => { e.preventDefault(); setDataSourceUidSampleVisible(true); }}>如何获取数据源 ID？</a>）
</Trans>
<Form
style={{ marginTop: '0.5rem' }}
layout="inline"
onFinish={downloadConfigFile}
]}
>
<Form.Item
name="dataSourceUid"
label={t('dashboard.configNotes.item3_dataSourceId')}
rules={[
{
required: true,
message: t('dashboard.configNotes.item3_dataSourceId_required'),
},
]}
>
<Input type="text" style={{ width: 200 }} />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">{t('dashboard.configNotes.item3_download')}</Button>
</Form.Item>
</Form>
<Image
width={200}
style={{ display: 'none' }}
preview={{
visible: dataSourceUidSampleVisible,
src: dataSourceUidSampleImage,
onVisibleChange: value => {
setDataSourceUidSampleVisible(value);
<Input type="text" style={{ width: 200 }} />
</Form.Item>
<Form.Item
name="type"
label={t('dashboard.configNotes.item3_templateType')}
rules={[
{
required: true,
},
}}
/>
</li>
<li>{t('dashboard.configNotes.item4')}</li>
</ol>
</Panel>
</Collapse>
</>
);
}
]}
initialValue={"MAIN"}
>
<Select
options={['MAIN', 'AI'].map(type => { return { value: type, label: t(`dashboard.configNotes.item3_templateType_${type}`) } })}
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">{t('dashboard.configNotes.item3_download')}</Button>
</Form.Item>
</Form>
<Image
width={200}
style={{ display: 'none' }}
preview={{
visible: dataSourceUidSampleVisible,
src: dataSourceUidSampleImage,
onVisibleChange: value => {
setDataSourceUidSampleVisible(value);
},
}}
/>
</li>
<li>{t('dashboard.configNotes.item4')}</li>
</ol>
</Panel>
</Collapse >
</>
);
}
};

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/services/dashboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ export const setDashboardUrl = (url: string): Promise<DashboardInfo> => {
return request.put<any, DashboardInfo>("/dashboard/info", { url });
}

export const getDashboardConfigData = (dataSourceUid: string): Promise<string> => {
export const getDashboardConfigData = (dataSourceUid: string, type: string): Promise<string> => {
return request.get<any, string>("/dashboard/configData", {
params: { dataSourceUid },
params: { dataSourceUid, type },
});
}

0 comments on commit acb3a6a

Please sign in to comment.