& { slotType?: symbol } = ({ children }) => {
19 | return <>{children};
20 | };
21 | CardTable.slotType = SLOT_TYPES.TABLE;
--------------------------------------------------------------------------------
/frontend/src/core/components/CopyPre.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import CopyButton from 'src/core/components/CopyButton'
7 |
8 | const CopyPre = ({ code, iconText = 'COPY' }) => {
9 | return (
10 |
11 |
12 | {code}
13 |
14 |
15 |
16 |
17 |
17 |
24 | {text || 'docs'}
25 |
26 |
27 | )
28 | }
29 |
30 | DocsLink.propTypes = {
31 | href: PropTypes.string,
32 | name: PropTypes.string,
33 | text: PropTypes.string,
34 | }
35 |
36 | export default React.memo(DocsLink)
37 |
--------------------------------------------------------------------------------
/frontend/src/core/components/Empty/Empty.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { CImage } from '@coreui/react'
7 | import React, { useEffect, useState } from 'react'
8 | import emptyImg from 'src/core/assets/images/empty.svg'
9 | import { useTranslation } from 'react-i18next'
10 | function Empty({ context = '', width = 100 }) {
11 | const [stateContext, setStateContext] = useState('No data')
12 | const { i18n } = useTranslation()
13 | useEffect(() => {
14 | if (context) {
15 | setStateContext(context)
16 | return
17 | }
18 | setStateContext(i18n.language === 'en' ? 'No data' : '暂无数据')
19 | }, [i18n.language])
20 | return (
21 |
22 |
23 | {stateContext}
24 |
25 | )
26 | }
27 | export default Empty
28 |
--------------------------------------------------------------------------------
/frontend/src/core/components/FallbackPage.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { Spin, Image } from 'antd'
7 | import ErrorPage from 'src/core/assets/errorPage.svg'
8 | import { t } from 'i18next'
9 |
10 | interface FallbackPageProps {
11 | errorInfo?: string
12 | }
13 |
14 | const FallbackPage = ({ errorInfo }: FallbackPageProps) => {
15 | return (
16 |
17 |
18 |
19 | { errorInfo ? errorInfo : t('common:error') }
20 |
21 |
11 | {label}：
12 |
26 | )
27 |
28 | export default React.memo(FilterSelector)
29 |
--------------------------------------------------------------------------------
/frontend/src/core/components/PermissionAuthorize/index.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .tagContainer {
7 | // position: relative;
8 | border-width: 1px;
9 | border-style: solid;
10 | border-color: var(--ant-color-border);
11 | border-radius: 6px;
12 | padding: 4px 11px;
13 | min-height: 32px;
14 | flex-shrink: 0;
15 | flex-grow: 0;
16 | max-height: 80px;
17 | overflow: auto;
18 | display: flex;
19 | }
20 |
--------------------------------------------------------------------------------
/frontend/src/core/components/Select/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import CustomSelect from "./CustomSelect";
7 |
8 | export {CustomSelect}
--------------------------------------------------------------------------------
/frontend/src/core/components/Spinner.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import React from 'react'
7 | import { Spin } from 'antd'
8 | import { LoadingOutlined } from '@ant-design/icons'
9 |
10 | const LoadingSpinner = ({ loading, size = 'large' }) => {
11 | return (
12 | <>
13 | {loading ? (
14 |
15 | } size={size} />
16 |
17 | ) : null}
18 |
19 | )
20 | }
21 | export default LoadingSpinner
22 |
--------------------------------------------------------------------------------
/frontend/src/core/components/header/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import AppHeaderDropdown from './AppHeaderDropdown'
7 |
8 | export { AppHeaderDropdown }
9 |
--------------------------------------------------------------------------------
/frontend/src/core/components/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import AppBreadcrumb from './AppBreadcrumb'
7 | import AppContent from './AppContent'
8 | import AppFooter from './AppFooter'
9 | import AppHeader from './AppHeader'
10 | import AppHeaderDropdown from './header/AppHeaderDropdown'
11 | import AppSidebar from './AppSidebar'
12 | import DocsCallout from './DocsCallout'
13 | import DocsLink from './DocsLink'
14 | import DocsExample from './DocsExample'
15 |
16 | export {
17 | AppBreadcrumb,
18 | AppContent,
19 | AppFooter,
20 | AppHeader,
21 | AppHeaderDropdown,
22 | AppSidebar,
23 | DocsCallout,
24 | DocsLink,
25 | DocsExample,
26 | }
27 |
--------------------------------------------------------------------------------
/frontend/src/core/contexts/MessageContext.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { message } from 'antd'
7 | import React, { createContext, useContext } from 'react'
8 |
9 | const MessageContext = createContext({})
10 |
11 | export const useMessageContext = () => useContext(MessageContext)
12 |
13 | export const MessageProvider = ({ children }) => {
14 | const [messageApi, contextHolder] = message.useMessage()
15 | return (
16 | <>
17 | {contextHolder}
18 | {children}
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/frontend/src/core/contexts/PropsContext.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import React, { createContext, useContext } from 'react';
7 |
8 | const PropsContext = createContext({});
9 |
10 | export const usePropsContext = () => useContext(PropsContext);
11 |
12 | export const PropsProvider = ({ children, value }) => (
13 |
14 | {children}
15 |
16 | );
17 |
--------------------------------------------------------------------------------
/frontend/src/core/scss/_variables.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | // Variable overrides
7 | //
8 | // If you want to customize your project please add your variables below.
9 |
10 | $enable-deprecation-messages: false !default;
11 | $card-border-radius: 0.75rem;
12 | $card-box-shadow: rgba(62, 72, 83, 0.3) 0px 8px 24px;
13 | $--cui-border-radius: 0.75rem;
14 | $--cui-body-bg: rgba(255, 255, 255);
15 |
16 | $--ce-app-head-height: 60px;
17 | $--ee-app-head-height: 100px;
18 | $--service-page-tab-list-height: 60px;
19 |
20 | :root {
21 | --service-page-tab-list-height: #{$--service-page-tab-list-height};
22 |
23 | --ce-app-head-height: #{$--ce-app-head-height};
24 | --ee-app-head-height: #{$--ee-app-head-height};
25 |
26 | --ce-app-content-height: #{calc(100vh - #{$--ce-app-head-height})};
27 | --ee-app-content-height: #{calc(100vh - #{$--ee-app-head-height})};
28 | }
--------------------------------------------------------------------------------
/frontend/src/core/scss/style.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | // 自定义模块，用 @use
7 | @use './_variables' as variables;
8 | @use './theme/index' as theme;
9 | @use './_custom' as custom;
10 |
11 | // 官方库，用 @import
12 | @import '@coreui/coreui/scss/coreui';
13 | // @import '@coreui/chartjs/scss/coreui-chartjs';
14 |
15 | // 第三方小库 simplebar
16 | @import 'vendors/simplebar';
17 | a {
18 | text-decoration: inherit !important;
19 | }
20 |
--------------------------------------------------------------------------------
/frontend/src/core/scss/theme/dark.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 | [data-coreui-theme='dark'] {
6 | --body-bg: #212631;
7 | --color-sider: #212631;
8 | --main-color: #1677ff;
9 | --menu-selected-text-color: #ffffff;
10 | --row-hover-bg: rgb(29, 29, 29);
11 | --header-bg: rgb(29, 29, 29);
12 | --scrollbar-bg: #424242;
13 |
14 | --cui-primary: #212631;
15 | --text-color: #ffffff;
16 | --disabled-color: #555555;
17 |
18 | --collapse-bg: #1a1d22;
19 | --active-collapse-bg: #285587;
20 | --mask-bg: rgba(0, 0, 0, 0.2);
21 | --chat-ask-bg: #2f2f2f;
22 | --chat-ai-bg: #3e3f4c;
23 | --custom-alert-error-bg: rgb(127 29 29 / 0.2);
24 | --header-menu-color: black;
25 | }
26 |
--------------------------------------------------------------------------------
/frontend/src/core/scss/theme/index.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 | @import './dark.scss';
6 | @import './light.scss'; // @import './dark.scss'
7 |
--------------------------------------------------------------------------------
/frontend/src/core/store/persist/groupLabelPresistConfig.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import storage from 'redux-persist/lib/storage'
7 |
8 | const groupLabelPersistConfig = {
9 | key: 'groupLabel',
10 | storage,
11 | }
12 |
13 | export default groupLabelPersistConfig
14 |
--------------------------------------------------------------------------------
/frontend/src/core/store/persist/logsPresistConfig.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import storage from 'redux-persist/lib/storage'
7 |
8 | const logsPresistConfig = {
9 | key: 'logs',
10 | storage,
11 | whitelist: ['displayFields']
12 | }
13 |
14 | export default logsPresistConfig
15 |
--------------------------------------------------------------------------------
/frontend/src/core/store/persist/settingPresistConfig.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import storage from 'redux-persist/lib/storage';
7 |
8 | const settingPersistConfig = {
9 | key: 'setting',
10 | storage,
11 | // whitelist: ['name'], // 仅持久化 name 属性
12 | };
13 |
14 | export default settingPersistConfig;
15 |
--------------------------------------------------------------------------------
/frontend/src/core/store/persist/timeRangePersistConfig.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 |
7 | import sessionStorage from 'redux-persist/lib/storage/session'; // 引入 sessionStorage
8 |
9 | const timeRangePersistConfig = {
10 | key: 'timeRange',
11 | storage: sessionStorage,
12 | // whitelist: ['name'], // 仅持久化 name 属性
13 | };
14 |
15 | export default timeRangePersistConfig;
16 |
--------------------------------------------------------------------------------
/frontend/src/core/store/persist/topologyPresistConfig.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import sessionStorage from 'redux-persist/lib/storage/session' // 引入 sessionStorage
7 |
8 | const topologyPresistConfig = {
9 | key: 'topology',
10 | storage: sessionStorage,
11 | blacklist: ['allTopologyData', 'displayData', 'modalDataUrl'],
12 | // whitelist: ['name'], // 仅持久化 name 属性
13 | }
14 |
15 | export default topologyPresistConfig
16 |
--------------------------------------------------------------------------------
/frontend/src/core/store/persist/urlParamsPresistConfig.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import sessionStorage from 'redux-persist/lib/storage/session' // 引入 sessionStorage
7 |
8 | const urlParamsPresistConfig = {
9 | key: 'urlParams',
10 | storage: sessionStorage,
11 | // blacklist: ['allTopologyData', 'displayData', 'modalDataUrl'],
12 | whitelist: [], // 仅持久化
13 | }
14 |
15 | export default urlParamsPresistConfig
16 |
--------------------------------------------------------------------------------
/frontend/src/core/store/persist/userPresistConfig.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import storage from 'redux-persist/lib/storage'
7 |
8 | const userPersistConfig = {
9 | key: 'user',
10 | storage,
11 | }
12 |
13 | export default userPersistConfig
14 |
--------------------------------------------------------------------------------
/frontend/src/core/store/reducers/groupLabelReducer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { createSelector } from 'reselect'
7 |
8 | const initialState = {
9 | groupLabel: {},
10 | // 为了下拉选择
11 | groupLabelSelectOptions: [],
12 | }
13 |
14 | const groupLabelReducer = (state = initialState, action) => {
15 | switch (action.type) {
16 | case 'setGroupLabel':
17 | let groupLabelSelectOptions = Object.entries(action.payload).map(([key, value]) => ({
18 | label: value,
19 | value: key,
20 | }))
21 | return { ...state, groupLabel: action.payload, groupLabelSelectOptions }
22 | default:
23 | return state
24 | }
25 | }
26 |
27 | export default groupLabelReducer
28 |
--------------------------------------------------------------------------------
/frontend/src/core/store/reducers/settingReducer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | const initialState = {
7 | sidebarShow: true,
8 | theme: 'light',
9 | monacoPromqlConfig: {},
10 | language: 'zh',
11 | reactJsonTheme: 'shapeshifter:inverted'
12 | }
13 |
14 | const settingReducer = (state = initialState, { type, payload, ...rest }) => {
15 | switch (type) {
16 | case 'set':
17 | return { ...state, ...rest }
18 | case 'setMonacoPromqlConfig':
19 | return { ...state, monacoPromqlConfig: payload }
20 | case 'setLanguage':
21 | return { ...state, language: payload }
22 | case 'setTheme':
23 | return { ...state, theme: payload, reactJsonTheme: payload === 'light' ? 'shapeshifter:inverted' : 'brewer' }
24 | default:
25 | return state
26 | }
27 | }
28 |
29 | export default settingReducer
30 |
--------------------------------------------------------------------------------
/frontend/src/core/store/reducers/userReducer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | export const initialState = {
7 | user: { username: 'anonymous', userId: '', role: '', roleList: '' },
8 | token: { accesstoken: null, refreshToken: null },
9 | menuItems: [],
10 | dataGroupList: [],
11 | }
12 |
13 | const userReducer = (state = initialState, action) => {
14 | switch (action.type) {
15 | case 'setUser':
16 | return { ...state, user: action.payload }
17 | case 'removeUser':
18 | return { user: 'anonymous', token: { accesstoken: null, refreshToken: null } }
19 | case 'setMenu':
20 | return { ...state, menuItems: action.payload }
21 | case 'setDataGroupList':
22 | return { ...state, dataGroupList: action.payload }
23 | default:
24 | return state
25 | }
26 | }
27 |
28 | export default userReducer
29 |
--------------------------------------------------------------------------------
/frontend/src/core/store/store.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { createStore } from 'redux';
7 | import { persistStore } from 'redux-persist';
8 | import rootReducer from './reducers/rootReducer';
9 |
10 | const store = createStore(rootReducer);
11 | const persistor = persistStore(store);
12 |
13 | export { store, persistor };
14 |
--------------------------------------------------------------------------------
/frontend/src/core/types/common.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | export interface Pagination {
7 | currentPage: number
8 | pageSize: number
9 | }
10 |
--------------------------------------------------------------------------------
/frontend/src/core/types/role.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | export interface Role {
7 | roleId: string | number;
8 | roleName: string;
9 | [key: string]: any;
10 | }
--------------------------------------------------------------------------------
/frontend/src/core/types/team.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { Pagination } from './common'
7 |
8 | export interface GetTeamParams extends Pagination {
9 | teamName?: string
10 | featureList?: string[]
11 | dataGroupList?: string[]
12 | }
13 | export interface TeamParams {
14 | teamId: string
15 | }
16 | export interface SaveTeamParams {
17 | teamId?: string
18 | teamName: string
19 | description?: string
20 | userList: string[]
21 | }
22 |
--------------------------------------------------------------------------------
/frontend/src/core/types/user.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { Role } from "./role";
7 |
8 | export interface User {
9 | userId: string | number;
10 | username: string;
11 | corporation?: string;
12 | email?: string;
13 | phone?: string;
14 | roleList?: Role[];
15 | role?: string; // For UI display
16 | }
--------------------------------------------------------------------------------
/frontend/src/core/utils/notify.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 | import type { NotificationPlacement } from 'antd/es/notification/interface'
6 | import { ReactNode } from 'react'
7 |
8 | let notifyApi: any = null
9 |
10 | export const setNotifyApi = (api: any) => {
11 | notifyApi = api
12 | }
13 |
14 | export interface NotifyOptions {
15 | type: 'success' | 'error' | 'info' | 'warning'
16 | message: string | ReactNode
17 | description?: string
18 | duration?: number
19 | placement?: NotificationPlacement
20 | onClick?: () => void
21 | showProgress?: boolean
22 | pauseOnHover?: boolean
23 | }
24 |
25 | export const notify = (options: NotifyOptions) => {
26 | if (!notifyApi) {
27 | console.warn('error')
28 | return
29 | }
30 |
31 | const { type, showProgress = true, pauseOnHover = true, ...rest } = options
32 |
33 | notifyApi[type]?.({
34 | duration: 3,
35 | placement: 'topRight',
36 | showProgress,
37 | pauseOnHover,
38 | ...rest,
39 | })
40 | }
41 |
--------------------------------------------------------------------------------
/frontend/src/core/utils/toast.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | // src/core/utils/toast.js
7 |
8 | let addToastFunction = null
9 |
10 | export const setAddToastFunction = (fn) => {
11 | addToastFunction = fn
12 | }
13 |
14 | export const showToast = ({ title, message = '', color = 'default' }) => {
15 | if (addToastFunction) {
16 | addToastFunction({ title, message, color })
17 | } else {
18 | console.warn('Toast function is not set')
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/frontend/src/core/views/DataGroup/DataGroupFilter.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { Flex, Input, Select } from 'antd'
7 | import { useState } from 'react'
8 |
9 | const DataGroupFilter = ({ onSearch }) => {
10 | const [searchGroupName, setSearchGroupName] = useState('')
11 |
12 | return (
13 |
14 |
15 | 数据组名：
16 | setSearchGroupName(e.target.value)}>
17 |
18 |
19 | 数据源：
20 |
21 |
22 |
23 | )
24 | }
25 | export default DataGroupFilter
26 |
--------------------------------------------------------------------------------
/frontend/src/core/views/DataGroup/component/DatasourceTag.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { Tag } from 'antd'
7 | import { DatasourceType } from 'src/core/types/dataGroup'
8 |
9 | interface DatasourceTagProps {
10 | type: DatasourceType
11 | datasource: string
12 | closable?: boolean
13 | onClose?: any
14 | }
15 | const DatasourceTag = ({ type, datasource, closable = false, onClose }: DatasourceTagProps) => {
16 | return (
17 | {
21 | onClose(e, datasource, type)
22 | }}
23 | >
24 | {datasource}
25 |
26 | )
27 | }
28 | export default DatasourceTag
29 |
--------------------------------------------------------------------------------
/frontend/src/core/views/DataGroup/index.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .tagContainer {
7 | background: var(--ant-color-bg-container);
8 | border-width: 1px;
9 | border-style: solid;
10 | border-color: var(--ant-color-border);
11 | border-radius: 6px;
12 | padding: 4px 11px;
13 | min-height: 32px;
14 | flex-shrink: 0;
15 | flex-grow: 0;
16 | max-height: 80px;
17 | overflow: auto;
18 | }
19 |
--------------------------------------------------------------------------------
/frontend/src/core/views/IntegrationCenter/AlertsIntegration/ConfigDrawer/SourceTypeInfo/index.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .sourceTypeInfo {
7 | background: var(--ant-color-bg-layout);
8 | border-radius: 1.5rem;
9 | margin-top: 12px;
10 | pre {
11 | background: #0d0d0e;
12 | max-height: 300px;
13 | overflow: auto;
14 | padding: 12px;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/frontend/src/core/views/IntegrationCenter/AlertsIntegration/ConfigDrawer/SourceTypeInfo/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { Card } from 'antd'
7 | import { AlertKey } from 'src/core/types/alertIntegration'
8 | import ZabbixInfo from './ZabbixInfo'
9 | import styles from './index.module.scss'
10 | import PrometheusInfo from './PrometheusInfo'
11 | import JsonInfo from './JsonInfo'
12 | function SourceTypeInfo({ sourceType }) {
13 | return (
14 |
15 | {sourceType === 'zabbix' ? (
16 |
17 | ) : sourceType === 'prometheus' ? (
18 |
19 | ) : (
20 |
21 | )}
22 |
23 | )
24 | }
25 | export default SourceTypeInfo
26 |
--------------------------------------------------------------------------------
/frontend/src/core/views/IntegrationCenter/AlertsIntegration/ConfigDrawer/TagContent/TagContactRule/preview.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .ellipsisText {
7 | white-space: nowrap; // 禁止换行
8 | overflow: hidden; // 隐藏溢出的内容
9 | text-overflow: ellipsis; // 显示省略号
10 | margin-right: 0;
11 | }
12 |
--------------------------------------------------------------------------------
/frontend/src/core/views/IntegrationCenter/AlertsIntegration/ConfigDrawer/TagContent/TagContactRule/segmented.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .segmented {
7 | :global(.ant-segmented-item) {
8 | border: 1px solid rgb(77 130 255 / var(--tw-border-opacity, 0));
9 | }
10 | :global(.ant-segmented-item.ant-segmented-item-selected) {
11 | border: 1px solid rgb(77 130 255 / var(--tw-border-opacity, 1));
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/frontend/src/core/views/IntegrationCenter/DataIntegration/Integration/Document/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { Card } from 'antd'
7 | import { useTranslation } from 'react-i18next'
8 |
9 | const IntegrationDoc = () => {
10 | const { t } = useTranslation('core/dataIntegration')
11 | return (
12 |
18 | )
19 | }
20 | export default IntegrationDoc
21 |
--------------------------------------------------------------------------------
/frontend/src/core/views/IntegrationCenter/DataIntegration/Integration/SettingsForm/index.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .bottomDiv {
7 | flex-shrink: 0;
8 | flex-grow: 0;
9 | text-align: right;
10 | padding: 6px 12px;
11 | border-top: 1px solid var(--ant-color-split);
12 | }
13 |
--------------------------------------------------------------------------------
/frontend/src/core/views/IntegrationCenter/DataIntegration/Integration/index.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .tabs {
7 | height: 100%;
8 |
9 | :gloabl(.ant-tabs-content) {
10 | height: 100% !important;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/frontend/src/core/views/IntegrationCenter/DataIntegration/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { Card } from 'antd'
7 | import ClusterTable from './ClusterTable'
8 |
9 | export default function DataIntegrationPage() {
10 | return (
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/frontend/src/core/views/IntegrationCenter/components/datasourceList.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .container {
7 | display: grid;
8 | grid-template-columns: repeat(auto-fit, minmax(140px, 140px)); /* 每列最小 200px，最大自动扩展 */
9 | gap: 20px; /* 项目之间的间隙 */
10 | justify-items: center; /* 水平对齐中心 */
11 | align-items: center; /* 垂直对齐中心 */
12 | }
13 |
14 | .item {
15 | padding: 10px;
16 | // background-color: #f0f0f0;
17 | position: relative;
18 | text-align: center;
19 | }
20 |
--------------------------------------------------------------------------------
/frontend/src/core/views/Login/Login.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .loginBackground {
7 | width: 100vw;
8 | height: 100vh;
9 | justify-content: center;
10 | align-items: center;
11 | /* background-image: url('src/core/assets/brand/bg.jpg'); */
12 | background-position-x: 50%;
13 | background-position-y: 50%;
14 | background-repeat: no-repeat;
15 | background-size: cover;
16 | }
17 |
--------------------------------------------------------------------------------
/frontend/src/core/views/RoleManage/index.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .roleManageContainer {
7 | display: flex;
8 | flex-direction: column;
9 | width: 100%;
10 | height: calc(100vh - 60px);
11 | position: relative;
12 | }
--------------------------------------------------------------------------------
/frontend/src/core/views/UserManage/index.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .userManageContainer {
7 | display: flex;
8 | flex-direction: column;
9 | width: 100%;
10 | height: calc(100vh - 60px);
11 | position: relative;
12 | }
--------------------------------------------------------------------------------
/frontend/src/core/views/UserPage/index.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import UserInfo from './component/UserInfo'
7 | import { Menu, Flex, Splitter, Divider } from 'antd'
8 | import { useState } from 'react'
9 | import { EditOutlined, PlusOutlined, KeyOutlined } from '@ant-design/icons'
10 | import UpdatePassword from './component/UpdatePassword'
11 | import { LiaUser } from 'react-icons/lia'
12 | import { PiUsersDuotone } from 'react-icons/pi'
13 | import { IoMdLock } from 'react-icons/io'
14 | import { useTranslation } from 'react-i18next'
15 |
16 | export default function UserPage() {
17 | const { t } = useTranslation('core/userPage')
18 | return (
19 | <>
20 |
21 | {t('index.basicInfo')}
22 |
23 | {t('index.updatePassword')}
24 |
25 |
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/frontend/src/oss/components/TranslationCom.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import React from 'react'
7 | import { useTranslation } from 'react-i18next'
8 |
9 | function TranslationCom({ text, space }) {
10 | const { t } = useTranslation(space)
11 | return t(text)
12 | }
13 |
14 | export default TranslationCom
15 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/config/index.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import React from 'react'
7 | import ConfigTTL from './configTTL/ConfigTTL'
8 |
9 | export default function ConfigPage() {
10 | return (
11 | <>
12 |
13 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/dashboard/ApplicationDashboard.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import React, { useEffect, useRef } from 'react'
7 | import IframeDashboard from 'src/core/components/Dashboard/IframeDashboard'
8 |
9 |
10 | function ApplicationDashboard() {
11 | return (
12 |
13 |
16 |
17 | )
18 | }
19 |
20 | export default ApplicationDashboard
21 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/dashboard/BasicDashboard.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import React, { useEffect, useRef } from 'react'
7 | import IframeDashboard from 'src/core/components/Dashboard/IframeDashboard'
8 |
9 |
10 | function BasicDashboard() {
11 | return (
12 |
13 |
16 |
17 | )
18 | }
19 |
20 | export default BasicDashboard
21 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/dashboard/SystemDashboard.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import React, { useEffect, useRef } from 'react'
7 | import IframeDashboard from 'src/core/components/Dashboard/IframeDashboard'
8 |
9 |
10 | function SystemDashboard() {
11 | return (
12 |
13 |
14 |
15 | )
16 | }
17 | export default SystemDashboard
18 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/logs/FullLogsPage.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import React from 'react'
7 | import { LogsProvider } from 'src/core/contexts/LogsContext'
8 | import FullLogs from './component/FullLogs'
9 |
10 | export default function FullLogsPage() {
11 | return (
12 |
13 |
14 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/logs/component/FullLogs/component/IndexList/component/IndexCollapse.module.less:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .collapse {
7 | height: 100%;
8 | overflow-y: scroll;
9 | overflow-x: hidden;
10 | scrollbar-width: thin;
11 | }
12 |
13 | .collapse ::-webkit-scrollbar {
14 | width: 0px;
15 | }
16 |
17 | .collapseItemContainer:hover>div:first-of-type {
18 | background-color: rgba(211, 211, 211, 0.1);
19 | }
20 |
21 | .collapseItem {
22 | display: flex;
23 | justify-content: space-between;
24 | align-items: center;
25 |
26 | .collapseItemButton {
27 | width: 18px;
28 | height: 18px;
29 | border-radius: 3px;
30 | border: none;
31 | box-shadow: none;
32 | }
33 | }
--------------------------------------------------------------------------------
/frontend/src/oss/views/logs/component/FullLogs/component/IndexList/index.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .indexList .ant-collapse-content-box {
7 | padding: 0 !important;
8 | }
9 |
10 | .ant-collapse-header-text {
11 | overflow: hidden;
12 | white-space: nowrap;
13 | text-align: left;
14 | text-overflow: ellipsis;
15 | }
16 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/logs/component/FullLogs/component/LogQueryResult/QueryList/LogItem/component/LogValueTag.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { Tag, theme, Tooltip } from 'antd'
7 | import React from 'react'
8 | import LogTagDropDown from './LogTagDropdown'
9 | // value作为tag内容
10 | const LogValueTag = React.memo((props) => {
11 | const { objKey, value } = props
12 | const { useToken } = theme
13 | const { token } = useToken()
14 |
15 | return (
16 |
21 |
25 | {value}
26 |
27 |
28 | }
29 | />
30 | )
31 | })
32 | export default LogValueTag
33 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/logs/component/FullLogs/component/LogQueryResult/QueryList/index.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import LogItem from './LogItem'
7 | import { Empty, List } from 'antd'
8 | import { useTranslation } from 'react-i18next' // 引入i18n
9 |
10 | const QueryList = ({ logs, openContextModal = null, loading }) => {
11 | const { t } = useTranslation('oss/fullLogs')
12 |
13 | return (
14 |
15 | {logs?.length > 0 && (
16 | (
19 |
20 |
21 |
22 | )}
23 | />
24 | )}
25 | {logs?.length === 0 && !loading && (
26 |
27 | )}
28 |
29 | )
30 | }
31 |
32 | export default QueryList
33 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/logs/component/FullLogs/component/SerarchBar/index.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import React from 'react'
7 | import RawLogQuery from './RawLogQuery'
8 |
9 | const SearchBar = () => {
10 | return (
11 |
12 |
13 |
14 | )
15 | }
16 |
17 | export default SearchBar
18 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/logs/component/FullLogs/component/Sider/LogRuleList/index.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .logRuleItem {
7 | position: relative;
8 |
9 | .action {
10 | visibility: hidden;
11 | position: absolute;
12 | right: 0;
13 | top: 50%;
14 | transform: translateY(-50%);
15 | }
16 |
17 | &:hover .action {
18 | visibility: visible;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/logs/component/FullLogs/component/Sider/index.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import React from 'react'
7 | import LogRuleList from './LogRuleList'
8 | import DataSourceTree from './DataSourceTree'
9 | import Sider from 'antd/es/layout/Sider'
10 | import { Card } from 'antd'
11 |
12 | const FullLogSider = () => {
13 | return (
14 | <>
15 |
16 |
17 |
18 | )
19 | }
20 |
21 | export default FullLogSider
22 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/logs/component/FullLogs/index.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .logSiderButton {
7 | top: 50%;
8 | position: absolute;
9 | transform: translate(0, -50%);
10 | z-index: 100;
11 | background: #ffffff1a;
12 | height: 40px;
13 | border-radius: 0px 100% 100% 0px / 50%;
14 | display: flex;
15 | align-items: center;
16 | cursor: pointer;
17 | }
18 |
19 | .openButton {
20 | left: 290px;
21 | transition: left 0.2s ease;
22 | /* 添加 transition */
23 | }
24 |
25 | .closeButton {
26 | left: -1px;
27 | transition: left 0.2s ease;
28 | /* 添加 transition */
29 | }
30 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/service/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { useUserContext } from 'src/core/contexts/UserContext'
7 | import ServiceTable from './ServiceTable'
8 | import DataGroupTabs from 'src/core/components/DataGroupTabs'
9 | import { useEffect } from 'react'
10 | import { ChartsProvider } from 'src/core/contexts/ChartsContext'
11 | export default function ServiceView() {
12 | const { getUserDataGroup } = useUserContext()
13 | useEffect(() => {
14 | getUserDataGroup()
15 | }, [])
16 | return (
17 | <>
18 |
19 | {(groupId, height) => (
20 |
21 |
22 |
23 |
24 |
25 | )}
26 |
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/serviceInfo/component/dependent/index.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .tabs {
7 | height: 100%;
8 |
9 | :global {
10 | .ant-tabs-content {
11 | height: 100% !important;
12 | }
13 | .ant-tabs-tabpane {
14 | height: 100% !important;
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/serviceInfo/component/infoUni/SingleLinkTopology.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import React from 'react'
7 | import { MdHexagon } from 'react-icons/md'
8 | import { BsArrowRight } from 'react-icons/bs'
9 | export default function SingleLinkTopology() {
10 | return (
11 |
12 |
13 | node1
14 |
15 |
16 |
17 | node2
18 |
19 |
9 |
10 |
11 | )
12 | }
13 |
14 | export default FullTrace
15 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/trace/component/JaegerIframeModal.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { CModal, CModalBody, CModalHeader, CModalTitle } from '@coreui/react'
7 | import React from 'react'
8 | function EndpointTableModal(props) {
9 | const { visible, traceId, closeModal } = props
10 | return (
11 |
18 |
19 | Jaeger Trace : {traceId}
20 |
21 |
22 |
23 |
29 |
30 |
31 | )
32 | }
33 |
34 | export default EndpointTableModal
35 |
--------------------------------------------------------------------------------
/frontend/src/oss/views/workflows/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2025 CloudDetail
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import WorkflowsIframe from './workflowsIframe'
7 |
8 | const WorkflowsPage = () => {
9 | return (
10 |
11 |
12 |
13 | )
14 | }
15 |
16 | export default WorkflowsPage
17 |
--------------------------------------------------------------------------------
/frontend/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,jsx,ts,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/frontend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "module": "ESNext",
5 | "checkJs": true,
6 | "allowJs": true,
7 | "jsx": "react-jsx",
8 |
9 | "types": ["react", "react-dom"],
10 | "noEmit": true,
11 | "esModuleInterop": true,
12 | "moduleResolution": "node",
13 | "baseUrl": ".",
14 |
15 | "allowSyntheticDefaultImports": true,
16 | "paths": {
17 | "src/*": ["src/*"],
18 | "components/*": ["src/core/components/*"],
19 | "core/*": ["src/core/*"],
20 | "pro/*": ["src/pro/*"]
21 | }
22 | },
23 | "include": ["src"]
24 | }
25 |
--------------------------------------------------------------------------------