orientsoft / aidefender Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
实现节点对 DS, KPI, Alert 的配置
实现点击子节点,同步更新父节点配置信息
获取task列表功能:
进入页面获取task列表(API: GET /tasks)
添加task功能:
点击添加按钮弹出模态框,配置数据,点击保存。
(API: POST /tasks 保存数据:{
name: String,
input: ObjectId,
output: ObjectId,
script: String,
params: Array,
type: Number,
cron: String,
running: Boolean
})
修改port功能:
点击edit按钮,弹出模态框,配置数据,点击保存。
首先获取指定数据:(API: GET /tasks/:taskId )
保存修改: (API: PUT //tasks/:taskId )
删除功能:
点击delete按钮弹出confirm框,点击删除。
(API: DELETE /tasks/:taskId)
添加折叠面板,展开查看原始ES数据,类似kibana
tab组件
添加和修改模态框
历史数据模态框
获取flow列表功能:
进入页面获取所有flow(API: GET /flows)
添加flow功能:
点击左上角添加按钮,弹出模态框,添加flow名字,生成一个空白tab,点击tab中的添加按钮,弹出 add tasks 模态框, 配置数据,点击保存,得到后端返回的数据展示flow。
(API: POST /flows
保存数据:{
name: String,
tasks: [ ObjectId ],
triggers: [ ObjectId ],
})
一个flow由多个tasks组成,
add tasks 模态框选项:
type: {NORMAL, CRON},根据type列出tasks,
tasks: 已添加的tasks列表,
create按钮:点击按钮弹出add task模态框,配置数据保存生成新的task,
trigger:(为可选项)
启动按钮:默认关闭状态,如果需要为该task添加trigger,则启动按钮,
operation:START, STOP,RESTART
target:已添加的tasks列表
add按钮:点击按钮则往flow中添加一个节点task,保存trigger,同时展示在table中,
delete按钮:点击按钮删除该节点task,同时删除对应的trigger
done按钮:点击按钮保存flow,
修改flow功能:
点击edit按钮,弹出模态框,配置数据,点击保存。
首先获取指定数据:(API: GET /flows/:flowId )
保存修改: (API: PUT /flows/:flowId
保存数据:{
name: String,
tasks: [ ObjectId ],
triggers: [ ObjectId ],
}))
删除flow功能:
点击delete按钮弹出confirm框,点击删除。
(API: DELETE /flows/:flowId)
启动flow功能:
点击tab中的启动按钮,会将flow中所有的tasks都启动,
(API: POST /jobs
request: {taskId: [ ObjectId ] // 可以一次性发送整个Flow的taskId}
)
日志按钮添加在flow的任务列表中,只有启动的任务才能查看日志(日志用jobId查询)
点击添加按钮后,如果点击页面其他部分,弹出框消失。建议锁定
目前从后端获取的数据是树状结构的JSON数据,需要在前端以分层,树形来创建节点并展示。现在很多图形库都有类似的chart,需要选择一个最合适的,并在上面修改以满足当前的需求。
Sample:
https://www.basicprimitives.com/index.php?option=com_local&view=local&Itemid=42&lang=en
http://echarts.baidu.com/examples.html#chart-type-tree
当前的指标设置需要改变:
这使得项目打包前,无须考虑组件Bug的问题,使得打包后的程序可以正常运行。
index.js?b4767614ff7019707977:1 uncaught at t TypeError: Cannot read property 'getModel' of undefined
at o (http://192.168.0.86:9001/0.0.1/index.js?b4767614ff7019707977:1:3831347)
at r._remove (http://192.168.0.86:9001/0.0.1/index.js?b4767614ff7019707977:1:3833024)
at r.execute (http://192.168.0.86:9001/0.0.1/index.js?b4767614ff7019707977:1:277096)
at n.render (http://192.168.0.86:9001/0.0.1/index.js?b4767614ff7019707977:1:3833041)
at i.s [as _reset] (http://192.168.0.86:9001/0.0.1/index.js?b4767614ff7019707977:1:253889)
at a (http://192.168.0.86:9001/0.0.1/index.js?b4767614ff7019707977:1:489669)
at i.u.perform (http://192.168.0.86:9001/0.0.1/index.js?b4767614ff7019707977:1:490057)
at http://192.168.0.86:9001/0.0.1/index.js?b4767614ff7019707977:1:65357
at n. (http://192.168.0.86:9001/0.0.1/index.js?b4767614ff7019707977:1:987592)
at Array.forEach ()
重构代码,让查询模式和设置模式更加清晰。
实现分支单选。
选择6月29日到7月2日的告警图只显示 6/29 和 7/2 两天的数据,而不是6/29 到 7/2 日,4天的数据。跨月都有这个问题。
而且点击 红色的异常点后,下面的告警指数列表会显示7月3日的数据。
设想是KPI查询详情列表,具有数据链路的数据,允许点击。
弹出数据链路对话框,对话框分为2个部分,上部为数据链路瀑布图,下部为该链路数据详情列表。
比较类似于Chrome调试工具中network页的展示。
需要后端提供配置信息:
哪些类型的数据在数据链路中
根据当前数据(及类型),返回数据链路中其他需要查询的index,以及每个index需要查询的Key
相关配套系统:
数据链路配置,可以创建多条数据链路,每条数据链路中的节点需要包含的信息:
index和对应的key,index的前后关系
展示table
添加和修改模态框
获取port列表功能:
进入页面获取port列表(API: GET /ports)
添加port功能:
点击添加按钮弹出模态框,配置数据,点击保存。
const PORT_TYPES = {
REDIS_CHANNEL: 0,
NSQ_QUEUE: 1,
MONGODB_COLLECTION: 2,
ES_INDEX: 3
};
(API: POST /ports 保存数据:{name: String, type: Number})
修改port功能:
点击edit按钮,弹出模态框,配置数据,点击保存。
首先获取指定数据:(API: GET /ports/:portID )
保存修改: (API: PUT /ports/:portID 保存数据:{name: String, type: Number})
删除功能:
点击delete按钮弹出confirm框,点击删除。
(API: DELETE /ports/:portID)
1、告警展示表头可以配置,告警使用颜色区别
2、节点配置的KPI可以排序
3、暂时关闭系统拓扑
目前只能精确到分钟,再细就看不到了
需要研究如何精确到每一条
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.