doc: add some document links

plugins/PlusPlaceholder.tsx

@@ -50,6 +50,7 @@ const extraColumns = () => {};
 const getNetworkDevices = () => {};
 const getNetworkDevicesList = () => {};
 const getNetworkDevicesTags = () => {};
+const proDocumentPathMap = {};
 export {
   AlertRule,
   QueryBuilder,
@@ -71,4 +72,5 @@ export {
   getNetworkDevices,
   getNetworkDevicesList,
   getNetworkDevicesTags,
+  proDocumentPathMap,
 };

src/components/InputGroupWithFormItem/index.tsx

@@ -10,10 +10,11 @@ interface IProps {
   noStyle?: boolean;
   customStyle?: CSSProperties;
   addonAfter?: React.ReactNode;
+  addonAfterWithContainer?: React.ReactNode;
 }
 
 export default function index(props: IProps) {
-  const { children, label, labelWidth = 'max-content', noStyle = false, customStyle, addonAfter } = props;
+  const { children, label, labelWidth = 'max-content', noStyle = false, customStyle, addonAfter, addonAfterWithContainer } = props;
   return (
     <Input.Group compact className='input-group-with-form-item'>
       <span
@@ -31,6 +32,7 @@ export default function index(props: IProps) {
       </span>
       <div className='input-group-with-form-item-content'>{children}</div>
       {addonAfter && <span className='ant-input-group-addon'>{addonAfter}</span>}
+      {addonAfterWithContainer}
     </Input.Group>
   );
 }

src/components/InputGroupWithFormItem/style.less

@@ -20,4 +20,11 @@
     height: 32px;
     line-height: 32px;
   }
+  // 2024-11-20 对 focused 和 hover 状态下的 select 组件进行 z-index 修正防止被后面 addonAfter 内容遮挡
+  .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) {
+    z-index: 1;
+  }
+  .ant-select:not(.ant-select-disabled):hover {
+    z-index: 1;
+  }
 }

src/components/pageLayout/HelpLink.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import DocumentDrawer from '@/components/DocumentDrawer';
+import { CommonStateContext } from '@/App';
+
+interface Props {
+  src: string;
+}
+
+export default function HelpLink(props: Props) {
+  const { t, i18n } = useTranslation();
+  const { darkMode } = useContext(CommonStateContext);
+  const { src } = props;
+
+  return (
+    <a
+      className='text-12'
+      onClick={() => {
+        DocumentDrawer({
+          language: i18n.language,
+          darkMode,
+          title: t('common:page_help'),
+          type: 'iframe',
+          documentPath: src,
+        });
+      }}
+    >
+      {t('common:page_help')}
+    </a>
+  );
+}

src/components/pageLayout/index.tsx

@@ -27,8 +27,12 @@ import { AccessTokenKey, IS_ENT } from '@/utils/constant';
 import DarkModeSelect from '@/components/DarkModeSelect';
 import Version from './Version';
 import SideMenuColorSetting from './SideMenuColorSetting';
+import HelpLink from './HelpLink';
 import './index.less';
 import './locale';
+
+export { HelpLink };
+
 // @ts-ignore
 import FeatureNotification from 'plus:/pages/FeatureNotification';
 interface IPageLayoutProps {
@@ -186,10 +190,10 @@ const PageLayout: React.FC<IPageLayoutProps> = ({ icon, title, rightArea, introI
                     </a>
                   </Dropdown>
 
-                    <div style={{ marginRight: 8 }}>
-                      <DarkModeSelect />
-                    </div>
-               
+                  <div style={{ marginRight: 8 }}>
+                    <DarkModeSelect />
+                  </div>
+
                   <Dropdown overlay={menu} trigger={['click']}>
                     <span className='avator' style={{ cursor: 'pointer' }}>
                       <img src={profile.portrait || '/image/avatar1.png'} alt='' />

src/locales/common/en_US.ts

@@ -15,6 +15,7 @@ const en_US = {
   document_link: 'Document',
   required: 'Required',
   unit: 'Unit',
+  page_help: 'Help',
   host: {
     tags: 'Custom Tags',
     tags_tip: 'Tags configured by the user on the page will be appended to the time series data reported by this machine',

src/locales/common/ja_JP.ts

@@ -15,6 +15,7 @@ const ja_JP = {
   document_link: '使用説明',
   required: '必須項目',
   unit: '単位',
+  page_help: '使用説明',
   host: {
     tags: 'ユーザータグ',
     tags_tip: 'ユーザーがページで構成したタグは、このマシンが報告した時系列データに追加されます',

src/locales/common/zh_CN.ts

@@ -15,6 +15,7 @@ const zh_CN = {
   document_link: '使用说明',
   required: '必填项',
   unit: '单位',
+  page_help: '使用说明',
   host: {
     tags: '自定义标签',
     tags_tip: '用户在页面配置的标签，会追加到此机器上报的时序数据中',

src/locales/common/zh_HK.ts

@@ -15,6 +15,7 @@ const zh_HK = {
   document_link: '使用說明',
   required: '必填項',
   unit: '單位',
+  page_help: '使用說明',
   host: {
     tags: '自定義標籤',
     tags_tip: '用戶在頁面配置的標籤，會追加到此機器上報的時序數據中',

src/pages/explorer/Explorer.tsx

@@ -34,9 +34,11 @@ import { Explorer as TDengine } from '@/plugins/TDengine';
 import Prometheus from './Prometheus';
 import Elasticsearch from './Elasticsearch';
 import Loki from './Loki';
+import Help from './components/Help';
+import './index.less';
+
 // @ts-ignore
 import PlusExplorer from 'plus:/parcels/Explorer';
-import './index.less';
 
 type Type = 'logging' | 'metric' | 'loki';
 
@@ -61,6 +63,7 @@ const Panel = ({ type, defaultCate, panelIdx, defaultFormValuesControl }: IProps
   const params = new URLSearchParams(useLocation().search);
   const defaultDatasourceCate = params.get('data_source_name') || localStorage.getItem(`explorer_datasource_cate_${type}`) || defaultCate;
   const defaultDatasourceValue = params.get('data_source_id') ? _.toNumber(params.get('data_source_id')) : getDefaultDatasourceValue(defaultDatasourceCate, groupedDatasourceList);
+  const datasourceCate = Form.useWatch('datasourceCate', form);
 
   return (
     <div className='explorer-container'>
@@ -74,7 +77,7 @@ const Panel = ({ type, defaultCate, panelIdx, defaultFormValuesControl }: IProps
         <div className='explorer-content'>
           <Row gutter={8}>
             <Col>
-              <InputGroupWithFormItem label={t('common:datasource.type')}>
+              <InputGroupWithFormItem label={t('common:datasource.type')} addonAfterWithContainer={<Help datasourceCate={datasourceCate} />}>
                 <Form.Item name='datasourceCate' noStyle>
                   <DatasourceCateSelect
                     scene='graph'

src/pages/explorer/components/Help/index.tsx

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
+import DocumentDrawer from '@/components/DocumentDrawer';
+import { CommonStateContext } from '@/App';
+import { DatasourceCateEnum } from '@/utils/constant';
+
+// @ts-ignore
+import { proDocumentPathMap } from 'plus:/constants';
+
+interface Props {
+  datasourceCate?: string;
+}
+
+const documentPathMap = {
+  [DatasourceCateEnum.prometheus]: 'https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v7/usage/timing-indicators/instant-query/open-source/prometheus/',
+  [DatasourceCateEnum.tdengine]: 'https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v7/usage/timing-indicators/instant-query/open-source/tdengine/',
+  [DatasourceCateEnum.elasticsearch]: 'https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v7/usage/log-analysis/open-source/elasticserch/',
+  ...(proDocumentPathMap || {}),
+};
+
+export default function index(props: Props) {
+  const { t, i18n } = useTranslation('explorer');
+  const { darkMode } = useContext(CommonStateContext);
+  const { datasourceCate } = props;
+
+  if (!datasourceCate || (datasourceCate && !documentPathMap[datasourceCate])) return null;
+
+  return (
+    <span className='ant-input-group-addon'>
+      <Tooltip title={t('help')}>
+        <QuestionCircleOutlined
+          onClick={() => {
+            DocumentDrawer({
+              language: i18n.language,
+              darkMode,
+              title: t('help'),
+              type: 'iframe',
+              documentPath: documentPathMap[datasourceCate],
+            });
+          }}
+        />
+      </Tooltip>
+    </span>
+  );
+}

src/pages/explorer/locale/en_US.ts

@@ -63,5 +63,6 @@ const en_US = {
     button: 'Historical Records',
     searchPlaceholder: 'Search historical records',
   },
+  help: 'Show data source Help',
 };
 export default en_US;

src/pages/explorer/locale/ja_JP.ts

@@ -1,71 +1,69 @@
 const ja_JP = {
-  title: "即時クエリ",
-  add_btn: "クエリパネルを追加",
-  query_btn: "クエリ実行",
-  query_tab: "クエリ",
-  addPanel: "パネルを追加",
+  title: '即時クエリ',
+  add_btn: 'クエリパネルを追加',
+  query_btn: 'クエリ実行',
+  query_tab: 'クエリ',
+  addPanel: 'パネルを追加',
   log: {
-    search_placeholder: "検索フィールド",
-    available: "選択可能フィールド",
-    selected: "選択済みフィールド",
-    interval: "間隔",
+    search_placeholder: '検索フィールド',
+    available: '選択可能フィールド',
+    selected: '選択済みフィールド',
+    interval: '間隔',
     mode: {
-      indexPatterns: "インデックスパターン",
-      indices: "インデックス",
+      indexPatterns: 'インデックスパターン',
+      indices: 'インデックス',
     },
-    hideChart: "チャートを非表示",
-    showChart: "チャートを表示",
-    fieldValues_topn: "トップ5の値",
-    fieldValues_topnNoData:
-      "このフィールドはマッピングに存在しますが、表示される500ドキュメントに存在しません",
-    copyToClipboard: "クリップボードにコピー",
-    show_conext: "コンテキストを表示",
-    context: "ログコンテキスト",
-    limit: "結果数",
+    hideChart: 'チャートを非表示',
+    showChart: 'チャートを表示',
+    fieldValues_topn: 'トップ5の値',
+    fieldValues_topnNoData: 'このフィールドはマッピングに存在しますが、表示される500ドキュメントに存在しません',
+    copyToClipboard: 'クリップボードにコピー',
+    show_conext: 'コンテキストを表示',
+    context: 'ログコンテキスト',
+    limit: '結果数',
     sort: {
-      NEWEST_FIRST: "最新のものから",
-      OLDEST_FIRST: "最古のものから",
+      NEWEST_FIRST: '最新のものから',
+      OLDEST_FIRST: '最古のものから',
     },
-    download: "ログをダウンロード",
-    export: "レコードをエクスポート",
+    download: 'ログをダウンロード',
+    export: 'レコードをエクスポート',
     log_download: {
-      title: "ダウンロード",
-      download_title: "ログデータをダウンロード",
-      range: "時間範囲",
-      filter: "検索語句",
-      format: "データ形式",
-      time_sort: "ログの並べ替え",
-      count: "ログの数",
-      time_sort_desc: "時間降順",
-      time_sort_asc: "時間昇順",
-      all: "全て",
-      custom: "カスタム",
-      custom_validated: "数は1-65535の間でなければなりません",
-      all_quantity: "合計約",
-      createSuccess: "タスク作成成功",
+      title: 'ダウンロード',
+      download_title: 'ログデータをダウンロード',
+      range: '時間範囲',
+      filter: '検索語句',
+      format: 'データ形式',
+      time_sort: 'ログの並べ替え',
+      count: 'ログの数',
+      time_sort_desc: '時間降順',
+      time_sort_asc: '時間昇順',
+      all: '全て',
+      custom: 'カスタム',
+      custom_validated: '数は1-65535の間でなければなりません',
+      all_quantity: '合計約',
+      createSuccess: 'タスク作成成功',
     },
     log_export: {
-      title:
-        "レコードをエクスポート（オンラインエクスポートファイルは3日間保持）",
-      fileName: "ファイル名",
-      create_time: "作成時間",
-      describe: "ファイル説明",
-      status: "状態",
-      status0: "待機中",
-      status1: "生成済み",
-      status2: "ファイルが期限切れ",
-      operation: "操作",
-      delSuccess: "タスクが削除されました",
-      del_btn_tips: "削除してよろしいですか？",
-      del_btn: "削除",
-      emptyText:
-        "エクスポートレコードが見つかりません。ログクエリを実行し、ダウンロードをクリックしてください。",
+      title: 'レコードをエクスポート（オンラインエクスポートファイルは3日間保持）',
+      fileName: 'ファイル名',
+      create_time: '作成時間',
+      describe: 'ファイル説明',
+      status: '状態',
+      status0: '待機中',
+      status1: '生成済み',
+      status2: 'ファイルが期限切れ',
+      operation: '操作',
+      delSuccess: 'タスクが削除されました',
+      del_btn_tips: '削除してよろしいですか？',
+      del_btn: '削除',
+      emptyText: 'エクスポートレコードが見つかりません。ログクエリを実行し、ダウンロードをクリックしてください。',
     },
   },
   historicalRecords: {
-    button: "歴史レコード",
-    searchPlaceholder: "歴史レコードを検索",
+    button: '歴史レコード',
+    searchPlaceholder: '歴史レコードを検索',
   },
+  help: 'データソースヘルプを表示',
 };
 
 export default ja_JP;

src/pages/explorer/locale/zh_CN.ts

@@ -63,5 +63,6 @@ const zh_CN = {
     button: '历史记录',
     searchPlaceholder: '搜索历史记录',
   },
+  help: '使用说明',
 };
 export default zh_CN;

src/pages/explorer/locale/zh_HK.ts

@@ -63,6 +63,7 @@ const zh_HK = {
     button: '歷史記錄',
     searchPlaceholder: '搜索歷史記錄',
   },
+  help: '使用說明',
 };
 
 export default zh_HK;

src/pages/monitor/object/index.tsx

@@ -17,9 +17,9 @@
 import React, { useState, useContext } from 'react';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { Select, Result } from 'antd';
+import { Select, Result, Space } from 'antd';
 import { LineChartOutlined } from '@ant-design/icons';
-import PageLayout from '@/components/pageLayout';
+import PageLayout, { HelpLink } from '@/components/pageLayout';
 import { IRawTimeRange } from '@/components/TimeRangePicker';
 import { CommonStateContext } from '@/App';
 import { getDefaultDatasourceValue, setDefaultDatasourceValue } from '@/utils';
@@ -52,7 +52,12 @@ export default function index() {
 
   return (
     <PageLayout
-      title={t('title')}
+      title={
+        <Space>
+          {t('title')}
+          <HelpLink src='https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v7/usage/timing-indicators/quick-view/' />
+        </Space>
+      }
       icon={<LineChartOutlined />}
       rightArea={
         <div