Skip to content

Commit

Permalink
🚀 Optimize rule template supported application to alarm rules (#72)
Browse files Browse the repository at this point in the history 
🚀 Optimize rule template supported application to alarm rules
  • Loading branch information
@Cairry
Cairry authored Dec 9, 2024
1 parent 9a9862c commit 1a62c2f
Show file tree
Hide file tree
Showing 17 changed files with 1,218 additions and 293 deletions.
5 changes: 3 additions & 2 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,20 @@ import { Helmet } from 'react-helmet';
import routes from './routes';
import { useRoutes } from 'react-router-dom';
import './index.css'
import { ContextProvider } from './context/RuleContext';

export default function App() {
const element = useRoutes(routes);
const title = "WatchAlert";

return (
<>
<ContextProvider>
<ConfigProvider theme={{ algorithm: theme.defaultAlgorithm }}>
<Helmet>
<title>{title}</title>
</Helmet>
{element}
</ConfigProvider>
</>
</ContextProvider>
);
}
36 changes: 36 additions & 0 deletions src/api/ruleTmpl.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,23 @@ async function createRuleTmpl(params) {
}
}

async function updateRuleTmpl(params) {
try {
const res = await http('post', `/api/w8t/ruleTmpl/ruleTmplUpdate`, params);
message.open({
type: 'success',
content: '规则模版更新成功',
});
return res;
} catch (error) {
message.open({
type: 'error',
content: '规则模版更新失败',
});
return error
}
}

async function deleteRuleTmpl(params) {
try {

Expand Down Expand Up @@ -83,6 +100,23 @@ async function createRuleTmplGroup(params) {
}
}

async function updateRuleTmplGroup(params) {
try {
const res = await http('post', `/api/w8t/ruleTmplGroup/ruleTmplGroupUpdate`, params);
message.open({
type: 'success',
content: '规则模版组更新成功',
});
return res;
} catch (error) {
message.open({
type: 'error',
content: '规则模版组更新失败',
});
return error
}
}

async function deleteRuleTmplGroup(params) {
try {
const res = await http('post', `/api/w8t/ruleTmplGroup/ruleTmplGroupDelete`,params);
Expand All @@ -103,8 +137,10 @@ async function deleteRuleTmplGroup(params) {
export {
getRuleTmplList,
createRuleTmpl,
updateRuleTmpl,
deleteRuleTmpl,
getRuleTmplGroupList,
createRuleTmplGroup,
updateRuleTmplGroup,
deleteRuleTmplGroup
}
48 changes: 20 additions & 28 deletions src/components/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,12 +153,11 @@ export const ComponentsContent = (props) => {
</div>

{/* 内容区 */}
<Layout className="site-layout" >
<Layout className="site-layout">
{/* 右侧顶部 */}
<Layout style={{ marginLeft: '-216px', padding: 0, borderRadius: '12px', }}>
<Layout style={{marginLeft: '-216px', padding: 0, borderRadius: '12px',}}>
<Header
style={{
height: '60px',
margin: '16px 16px 0',
background: colorBgContainer,
borderRadius: borderRadiusLG,
Expand All @@ -184,17 +183,18 @@ export const ComponentsContent = (props) => {
position: 'absolute',
top: '12px',
right: '35px',
bottom: '10px'}}>
<div style={{ marginRight: '20px', marginTop: '5px'}}>
<Dropdown overlay={menu} trigger={['click']} overlayStyle={{marginRight:'100px'}}>
<Typography.Link style={{fontSize: 13, color: '#404142'}}>
<Space>
{<TeamOutlined />}切换租户
<DownOutlined/>
</Space>
</Typography.Link>
</Dropdown>
</div>
bottom: '10px'
}}>
<div style={{marginRight: '20px', marginTop: '5px'}}>
<Dropdown overlay={menu} trigger={['click']} overlayStyle={{marginRight: '100px'}}>
<Typography.Link style={{fontSize: 13, color: '#404142'}}>
<Space>
{<TeamOutlined/>}切换租户
<DownOutlined/>
</Space>
</Typography.Link>
</Dropdown>
</div>

{/* 分割线 */}
<div style={{
Expand All @@ -203,11 +203,10 @@ export const ComponentsContent = (props) => {
width: '1px',
height: '45px', // 设置分割线的高度
backgroundColor: '#e0e0e0', // 分割线颜色
// margin: '0 20px', // 分割线左右的间距
}} />
}}/>

{userInfo ? (
<div style={{ marginTop: '18px' }}>
<div style={{marginTop: '18px'}}>
<Popover content={content} trigger="hover" placement="bottom">
<Avatar
style={{
Expand All @@ -234,7 +233,7 @@ export const ComponentsContent = (props) => {
<Layout>
<Content
style={{
height: 'calc(97vh - 100px )',
height: 'calc(97vh - 100px)',
margin: '0px 16px 0',
background: colorBgContainer,
borderRadius: borderRadiusLG,
Expand All @@ -252,23 +251,16 @@ export const ComponentsContent = (props) => {
</div>
<div
className="site-layout-background"
style={{padding: 24, textAlign: 'center', height: '10px'}}
style={{padding: 24, textAlign: 'center'}}
>
<Divider style={{marginTop: '-10px', marginBottom: '40px'}}/>
{c}
</div>
</Content>
<span style={{textAlign:'center',color:'#B1B1B1FF',marginLeft:'-200px'}}> WatchAlert 轻量级一站式监控报警服务!</span>
</Layout>

{/*<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '1vh' }}>*/}
{/* <a href="https://github.com/w8t-io/WatchAlert" target="_blank" title="GitHub" rel="noreferrer">*/}
{/* <img src={githubIcon} alt="GitHub Icon" className="icon" style={{ width: '2vh', height: '2vh', marginRight: '5px' }} />*/}
{/* </a>*/}
{/*</div>*/}

<span style={{textAlign: 'center', color: '#B1B1B1FF', marginLeft: '-200px'}}> WatchAlert 轻量级一站式监控报警服务!</span>
</Layout>
</Layout >
</Layout>
</>
)

Expand Down
4 changes: 1 addition & 3 deletions src/components/sider/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,7 @@ export const ComponentSider = (props) => {
<Menu.Item key='2-1' onClick={(e) => handleMenuClick(e.key, '/ruleGroup')}>告警规则</Menu.Item>
<Menu.Item key='2-2' onClick={(e) => handleMenuClick(e.key, '/silenceRules')}>静默规则</Menu.Item>
<Menu.Item key='2-3' onClick={(e) => handleMenuClick(e.key, '/events')}>告警事件</Menu.Item>
{/*<Menu.Item key='2-3' onClick={(e) => handleMenuClick(e.key, '/alertCurEvent')}>当前告警</Menu.Item>*/}
{/*<Menu.Item key='2-4' onClick={(e) => handleMenuClick(e.key, '/alertHisEvent')}>历史告警</Menu.Item>*/}
<Menu.Item key='2-5' onClick={(e) => handleMenuClick(e.key, '/ruleTemplateGroup')}>规则模版</Menu.Item>
<Menu.Item key='2-5' onClick={(e) => handleMenuClick(e.key, '/tmplType/Metrics/group')}>规则模版</Menu.Item>
<Menu.Item key='2-6' onClick={(e) => handleMenuClick(e.key, '/subscribes')}>告警订阅</Menu.Item>

</SubMenu>
Expand Down
15 changes: 15 additions & 0 deletions src/context/RuleContext.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React, { createContext, useContext, useState } from 'react';

const RuleContext = createContext();

export const ContextProvider = ({ children }) => {
const [ruleTemplate, setRuleTemplate] = useState(null);

return (
<RuleContext.Provider value={{ ruleTemplate, setRuleTemplate }}>
{children}
</RuleContext.Provider>
);
};

export const useRule = () => useContext(RuleContext);
1 change: 1 addition & 0 deletions src/pages/alert/assets/event.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/pages/alert/assets/log.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/pages/alert/assets/metric.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/pages/alert/assets/trace.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 16 additions & 4 deletions src/pages/alert/rule/create.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import K8sImg from "./img/Kubernetes.svg"
import ESImg from "./img/ElasticSearch.svg"
import {PrometheusPromQL} from "../../promethues";
import {getKubernetesReasonList, getKubernetesResourceList} from "../../../api/kubernetes";
import { useRule } from '../../../context/RuleContext';

const format = 'HH:mm';
const MyFormItemContext = React.createContext([])
Expand All @@ -64,7 +65,8 @@ const MyFormItem = ({ name, ...props }) => {
return <Form.Item name={concatName} {...props} />
}

export const AlertRule = ({ type, ruleGroupId }) => {
export const AlertRule = ({ type }) => {
const { ruleTemplate } = useRule();
const [form] = Form.useForm()
const { id,ruleId } = useParams()
const [selectedRow,setSelectedRow] = useState({})
Expand Down Expand Up @@ -137,9 +139,18 @@ export const AlertRule = ({ type, ruleGroupId }) => {
const [selectedKubeResource,setSelectedKubeResource]=useState('')
const [kubeReasonListOptions,setKubeReasonListOptions]=useState({})
const [filterTags,setFilterTags] = useState([])

const [esfilter, setEsfilter] = useState([{}])

useEffect(() => {
if (ruleTemplate) {
// 使用模板数据初始化表单
type = "tmpl";
form.setFieldsValue(ruleTemplate);
setPromQL(ruleTemplate.prometheusConfig.promQL)
setExprRule(ruleTemplate.prometheusConfig.rules)
}
}, [ruleTemplate]);

useEffect(() => {
const handleSearchRuleInfo = async ()=>{
try {
Expand Down Expand Up @@ -201,6 +212,7 @@ export const AlertRule = ({ type, ruleGroupId }) => {
elasticSearchConfig: selectedRow.elasticSearchConfig,
recoverNotify:selectedRow.recoverNotify,
})
setPromQL(selectedRow.prometheusConfig.promQL)
setSelectedItems(selectedRow.datasourceId)
setWeek(selectedRow.effectiveTime.week)
setStartTime(selectedRow.effectiveTime.startTime)
Expand Down Expand Up @@ -879,9 +891,9 @@ export const AlertRule = ({ type, ruleGroupId }) => {
height: 100,
width: 120,
position: 'relative',
cursor: type === 'edit' ? 'not-allowed' : 'pointer',
cursor: (type !== 'add') ? 'not-allowed' : 'pointer',
border: selectedCard === index ? '2px solid #1890ff' : '1px solid #d9d9d9',
pointerEvents: type === 'edit' ? 'none' : 'auto',
pointerEvents: (type !== 'add') ? 'none' : 'auto',
}}
onClick={() => handleCardClick(index)}
>
Expand Down
Loading

0 comments on commit 1a62c2f

Please sign in to comment.