Skip to content

Commit ae7b77a

Browse files
wph95wph95
committed
improve ui
1 parent bac9220 commit ae7b77a

File tree

4 files changed

+92
-49
lines changed

4 files changed

+92
-49
lines changed

‎src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ function App() {
3232
<Tabs defaultActiveKey="1" onChange={setTabId} activeKey={tabId}>
3333
<TabPane tab="Overview" key="1"/>
3434
<TabPane tab="Anomaly Extraction" key="2"/>
35-
<TabPane tab="Dependency intelligence" key="4"/>
3635
<TabPane tab="knowledge graph" key="3"/>
36+
<TabPane tab="Dependency intelligence" key="4"/>
3737
</Tabs>
3838
}
3939
>

‎src/index.css

+5
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,11 @@ code {
112112
flex: 0 0 60px;
113113
}
114114

115+
.metric-table .rca {
116+
flex: 0 0 120px;
117+
118+
}
119+
115120
/*.col-md-12 text {*/
116121
/* text-anchor: start!important;*/
117122
/* transform: translate(-45px, 0);*/

‎src/pages/Data.jsx

+37-25
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { format } from "d3-format";
55
import _ from "underscore";
66
import data from "./ts.json"
77
import {Set} from "immutable"
8+
import { Switch } from 'antd';
9+
810
// Pond
911
import { TimeSeries, TimeRange } from "pondjs";
1012
import {
@@ -66,6 +68,8 @@ export default class cycling extends React.Component {
6668
this.state = {
6769
ready: false,
6870
mode: "channels",
71+
enableHint: false,
72+
enableLabel: false,
6973
channels: [],
7074
channelNames: [],
7175
rollup: "1m",
@@ -153,7 +157,7 @@ export default class cycling extends React.Component {
153157
};
154158

155159
renderChannelsChart = () => {
156-
const { selected, channelNames, channels, maxTime, minTime, minDuration } = this.state;
160+
const { enableHint,enableLabel, selected, channelNames, channels, maxTime, minTime, minDuration } = this.state;
157161

158162
const rows = [];
159163

@@ -196,31 +200,37 @@ export default class cycling extends React.Component {
196200
// }
197201

198202
const isSelect = selected.has(channelName)
199-
charts.push(<TimeRangeMarker
200-
onClick={()=>console.log("?")}
201-
202-
type="flag"
203-
style={{ fill: isSelect? "rgba(82, 196, 26, 0.25)":"rgba(70, 130, 180, 0.25)" }}
204-
axis={`${channelName}_axis`}
205-
timerange={new TimeRange([1641555720000, 1641556500000])}
206-
/>)
207-
for (let p of channels[channelName].cp) {
208-
charts.push(<TimeMarker
209-
time={new Date(p.start / 1000000)}
210-
// infoValues={"Shift↘"}
211-
showTime={false}
212-
infoHeight={0}
213-
infoWidth={0}
214-
infoStyle={{
215-
line: { stroke: "red", cursor: "crosshair", pointerEvents: "none" },
216-
box: {
217-
fill: "red", opacity: 0, stroke: "#999", pointerEvents: "none",
218-
label: { fill: "red", transform: "translate(-10px, -10px)" }
219-
},
220-
dot: { fill: "#999" }
221-
}}
203+
if (enableLabel){
204+
charts.push(<TimeRangeMarker
205+
onClick={()=>console.log("?")}
206+
207+
type="flag"
208+
style={{ fill: (isSelect && enableHint)? "rgba(82, 196, 26, 0.25)":"rgba(70, 130, 180, 0.25)" }}
209+
axis={`${channelName}_axis`}
210+
timerange={new TimeRange([1641555720000, 1641556500000])}
222211
/>)
223212
}
213+
if (enableHint){
214+
215+
for (let p of channels[channelName].cp) {
216+
charts.push(<TimeMarker
217+
time={new Date(p.start / 1000000)}
218+
// infoValues={"Shift↘"}
219+
showTime={false}
220+
infoHeight={0}
221+
infoWidth={0}
222+
infoStyle={{
223+
line: { stroke: "red", cursor: "crosshair", pointerEvents: "none" },
224+
box: {
225+
fill: "red", opacity: 0, stroke: "#999", pointerEvents: "none",
226+
label: { fill: "red", transform: "translate(-10px, -10px)" }
227+
},
228+
dot: { fill: "#999" }
229+
}}
230+
/>)
231+
}
232+
233+
}
224234

225235

226236

@@ -317,7 +327,7 @@ export default class cycling extends React.Component {
317327
};
318328

319329
render() {
320-
const { ready } = this.state;
330+
const { ready, enableHint, enableLabel } = this.state;
321331

322332
if (!ready) {
323333
return <div>{`Building rollups...`}</div>;
@@ -337,6 +347,8 @@ export default class cycling extends React.Component {
337347
return (
338348
<div className="site-layout-background" style={{ padding: 8, marginTop: 24 }}>
339349
<div className="row">
350+
DBA label: <Switch onChange={()=>this.setState({enableLabel: !enableLabel})} />
351+
Collie Detection:<Switch onChange={()=>this.setState({enableHint: !enableHint})} />
340352

341353
<div className="col-md-6">
342354
{this.state.tracker

‎src/pages/intelligence.jsx

+49-23
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import React from 'react'
22
import { endOfToday, set } from 'date-fns'
3-
import TimeRange from 'react-timeline-range-slider'
3+
import { TimePicker } from 'antd';
44
import { Collapse } from 'antd';
5-
import { RiseOutlined, FallOutlined } from '@ant-design/icons';
6-
5+
import { DownOutlined, FallOutlined, UpOutlined, WarningTwoTone } from '@ant-design/icons';
6+
import { Select, Tag } from 'antd';
7+
import moment from "moment";
8+
const { Option } = Select;
79
const { Panel } = Collapse;
8-
9-
10+
const Rise =<Tag icon={<UpOutlined />} color="#2db7f5">Shift Up</Tag>
11+
const Down = <Tag icon={<DownOutlined />} color="#87d068">Shift Down</Tag>
12+
const DownError = <><Tag icon={<DownOutlined />} color="#108ee9">Spike Up</Tag><WarningTwoTone twoToneColor="#f1c40f" /></>
1013
const now = new Date()
1114
const getTodayAtSpecificHour = (hour = 12) =>
1215
set(now, { hours: hour, minutes: 0, seconds: 0, milliseconds: 0 })
@@ -24,7 +27,7 @@ const disabledIntervals = [
2427
]
2528

2629

27-
const MetricLine = ({ name, b, a , hits = undefined}) => {
30+
const MetricLine = ({ name, b, a , hits = undefined, rca = undefined}) => {
2831
return <div className={"metric-line"}>
2932
<div className={"name"}>{name}</div>
3033
<div className="baseline">
@@ -39,6 +42,10 @@ const MetricLine = ({ name, b, a , hits = undefined}) => {
3942
{hits}
4043

4144
</div>
45+
46+
<div className="rca">
47+
{rca}
48+
</div>
4249
</div>
4350

4451

@@ -47,6 +54,7 @@ const MetricLine = ({ name, b, a , hits = undefined}) => {
4754
export class Intelligence extends React.Component {
4855
state = {
4956
error: false,
57+
rcaId: "1",
5058
selectedInterval: [selectedStart, selectedEnd],
5159
}
5260

@@ -55,7 +63,7 @@ export class Intelligence extends React.Component {
5563
onChangeCallback = selectedInterval => this.setState({ selectedInterval })
5664

5765
render() {
58-
const { selectedInterval, error } = this.state
66+
const { rcaId, error } = this.state
5967
const text = `
6068
A dog is a type of domesticated animal.
6169
Known for its loyalty and faithfulness,
@@ -64,35 +72,53 @@ export class Intelligence extends React.Component {
6472
return (
6573
<div className="site-layout-background" style={{ padding: 8, marginTop: 24 }}>
6674
<div style={{marginBottom:"10px", fontSize: "16px"}}>
67-
RCA suggest: <span style={{color: "red"}}>Network Latency</span>, similar: 93.7%
75+
<div style={{display:"flex"}}>
76+
<div style={{flex: "1 1 800px"}}>
77+
baseline: <TimePicker.RangePicker defaultValue={[moment('04:08:23', 'HH:mm:ss'), moment('14:08:23', 'HH:mm:ss')]} size="small"/>
78+
actual: <TimePicker.RangePicker defaultValue={[moment('14:08:24', 'HH:mm:ss'), moment('14:19:23', 'HH:mm:ss')]} size="small"/>
79+
</div>
80+
<div style={{ flex: "0 0 300px"}}>
81+
rac:<Select defaultValue="1" onChange={id=>{this.setState({rcaId: id})}} style={{ width: 220}} value={rcaId}>
82+
<Option value="1">97.1% 网络延迟</Option>
83+
<Option value="2">14.3% CPU 异常负载</Option>
84+
<Option value="3">4.7% Cpu 瓶颈</Option>
85+
<Option value="4">3.2% 网络瓶颈</Option>
86+
87+
</Select>
88+
89+
</div>
90+
</div>
91+
{/*RCA suggest: <span style={{color: "red"}}>Network Latency</span>, similar: 93.7%*/}
92+
6893
</div>
69-
<TimeRange
70-
error={error}
71-
ticksNumber={60}
72-
selectedInterval={selectedInterval}
73-
timelineInterval={[startTime, endTime]}
74-
onUpdateCallback={this.errorHandler}
75-
onChangeCallback={this.onChangeCallback}
76-
disabledIntervals={disabledIntervals}
77-
/>
94+
{/*<TimeRange*/}
95+
{/* error={error}*/}
96+
{/* ticksNumber={60}*/}
97+
{/* selectedInterval={selectedInterval}*/}
98+
{/* timelineInterval={[startTime, endTime]}*/}
99+
{/* onUpdateCallback={this.errorHandler}*/}
100+
{/* onChangeCallback={this.onChangeCallback}*/}
101+
{/* disabledIntervals={disabledIntervals}*/}
102+
{/*/>*/}
103+
78104

79105

80106
<div className={"metric-table"} style={{padding: "0 16px", marginTop: "36px"}}>
81-
<MetricLine name={""} b={"baseline"} a={"actual"}/>
107+
<MetricLine name={""} b={"baseline"} a={"actual"} rca={"rca"}/>
82108
<MetricLine name={""} b={"AVG"} a={"AVG"}/>
83109
</div>
84110
<Collapse defaultActiveKey={['1', '2']} style={{ marginTop: "8px" }}>
85111
<Panel header="app:TiKV 172.31.34.23:20160" key="1">
86112
<div className={"metric-table"}>
87-
<MetricLine name={"tikv.cpu.usage"} b={"71.7%"} a={"24.1%"} hits={<>2.9x<FallOutlined /></>}/>
113+
<MetricLine name={"tikv.cpu.usage"} b={"71.7%"} a={"24.1%"} hits={<>2.9x<FallOutlined /></>} rca={rcaId!=="1"?DownError:Down}/>
88114
</div>
89115
</Panel>
90116
<Panel header="app:TiDB 172.31.40.244:4000" key="2">
91117
<div className={"metric-table"}>
92-
<MetricLine name={"tidb.duration.p99"} b={"478ms"} a={"1400ms"}/>
93-
<MetricLine name={"tidb.qps"} b={"1170"} a={"469"}/>
94-
<MetricLine name={"tidb.tps"} b={"182"} a={"68"}/>
95-
<MetricLine name={"tidb.tp_duration.p99"} b={"2010ms"} a={"3430ms"}/>
118+
<MetricLine name={"tidb.duration.p99"} b={"478ms"} a={"1400ms"} rca={Rise}/>
119+
<MetricLine name={"tidb.qps"} b={"1170"} a={"469"} rca={Down}/>
120+
<MetricLine name={"tidb.tps"} b={"182"} a={"68"} rca={Down}/>
121+
<MetricLine name={"tidb.tp_duration.p99"} b={"2010ms"} a={"3430ms"} rca={Rise}/>
96122
<Collapse defaultActiveKey={['1']} style={{ marginTop: "8px" }}>
97123
<Panel header="Log Pattern Diff (power by naglfar)" key="1">
98124
<div className={"metric-table log"}>

0 commit comments

Comments
 (0)