console bug fixed and update cluster status

This commit is contained in:
liugq 2021-09-26 14:21:59 +08:00
parent a54cd79e95
commit 4178e77160
8 changed files with 23 additions and 22 deletions

View File

@ -1,6 +1,6 @@
import {Icon} from 'antd';
import styles from './DropdownSelect.less';
import {HealthStatusCircle, ClusterHealthStatus} from '@/components/infini/health_status_circle'
import {HealthStatusCircle} from '@/components/infini/health_status_circle'
export interface ClusterItem {
id: string
@ -10,8 +10,8 @@ export interface ClusterItem {
}
export interface ClusterStatus {
cluster_available: boolean
health_status: ClusterHealthStatus
available: boolean
health: any
nodes_count: number
}
@ -30,7 +30,7 @@ export const DropdownItem = ({
}:props)=>{
return <div className={styles["dropdown-item"] +" " + (isSelected ? styles['selected']: '')} onClick={onClick}>
<div className={styles["wrapper"]}>
{clusterStatus?.cluster_available ? <HealthStatusCircle status={clusterStatus?.health_status} />: <Icon type='close-circle' style={{width:14, height:14, color:'red',borderRadius: 14, boxShadow: '0px 0px 5px #555'}} />}
{clusterStatus?.available ? <HealthStatusCircle status={clusterStatus?.health?.status} />: <Icon type='close-circle' style={{width:14, height:14, color:'red',borderRadius: 14, boxShadow: '0px 0px 5px #555'}} />}
<span className={styles["name"]} >{clusterItem?.name}</span>
<div className={styles["version"]}>{clusterItem?.version}</div>
</div>

View File

@ -128,7 +128,7 @@ class DropdownSelect extends React.Component{
type="caret-down"/></Button> */}
<span style={{position:'relative'}}>
<i style={{position: 'absolute', left:15,zIndex:10, top: -28}}>
{cstatus?.cluster_available ? <HealthStatusCircle status={cstatus?.health_status} />: <Icon type='close-circle' style={{width:14, height:14, color:'red',borderRadius: 14, boxShadow: '0px 0px 5px #555'}} />}
{cstatus?.available ? <HealthStatusCircle status={cstatus?.health?.status} />: <Icon type='close-circle' style={{width:14, height:14, color:'red',borderRadius: 14, boxShadow: '0px 0px 5px #555'}} />}
</i>
<input className={styles['btn-ds']} style={{outline:'none', paddingLeft:22}} value={value[labelField]} readOnly={true} />
<Icon style={{position:'absolute', top:-6, right:-4}} type="caret-down"/>

View File

@ -41,11 +41,10 @@ const SendRequestButton = (props: any) => {
const sendCurrentRequestToES = useSendCurrentRequestToES();
const saveCurrentTextObject = useSaveCurrentTextObject();
const {sendCurrentRequestToESRef, saveCurrentTextObjectRef} = props;
const {saveCurrentTextObjectRef} = props;
useEffect(()=>{
sendCurrentRequestToESRef.current = sendCurrentRequestToES
saveCurrentTextObjectRef.current = saveCurrentTextObject
}, [sendCurrentRequestToESRef, saveCurrentTextObjectRef])
}, [saveCurrentTextObjectRef])
return (
@ -87,6 +86,7 @@ const ConsoleInputUI = ({clusterID, initialText}:ConsoleInputProps) => {
const sendCurrentRequestToESRef = useRef(()=>{});
const saveCurrentTextObjectRef = useRef((content:string)=>{});
sendCurrentRequestToESRef.current = useSendCurrentRequestToES();
const {services:{settings}} = useServicesContext();
@ -168,7 +168,7 @@ const ConsoleInputUI = ({clusterID, initialText}:ConsoleInputProps) => {
ref={editorActionsRef}
>
<EuiFlexItem>
<SendRequestButton sendCurrentRequestToESRef={sendCurrentRequestToESRef} saveCurrentTextObjectRef={saveCurrentTextObjectRef}/>
<SendRequestButton saveCurrentTextObjectRef={saveCurrentTextObjectRef}/>
</EuiFlexItem>
<EuiFlexItem>
<ConsoleMenu

View File

@ -50,6 +50,7 @@ export const useSendCurrentRequestToES = () => {
const { services: { history }, clusterID } = useServicesContext();
return useCallback(async () => {
console.log(clusterID)
try {
const editor = registry.getInputEditor();
const requests = await editor.getRequestsInRange();

View File

@ -22,7 +22,6 @@ import Monitors from '../Monitors/containers/Monitors';
import DestinationsList from '../Destinations/containers/DestinationsList';
import { formatMessage } from 'umi/locale';
import {AlertOverview} from '../Dashboard/containers/AlertOverview';
import Overview from '../Overview/Overview';
const getSelectedTabId = (pathname) => {
if (pathname.includes('monitors')) return 'monitors';
@ -123,12 +122,6 @@ export default class Home extends Component {
notifications={notifications}
/>
)}
/>
<Route
path="/overview"
render={(props) => (
<Overview {...props} httpClient={httpClient} notifications={notifications} />
)}
/>
<Route
exact

View File

@ -24,6 +24,7 @@ import MonitorDetails from '../MonitorDetails/containers/MonitorDetails';
import CreateDestination from '../Destinations/containers/CreateDestination';
import Flyout from '../../components/Flyout';
import { APP_PATH } from '../../utils/constants';
import Overview from '../Overview/Overview';
class Main extends Component {
state = { flyout: null };
@ -55,6 +56,12 @@ class Main extends Component {
}}
/>
<Switch>
<Route
path="/overview"
render={(props) => (
<Overview {...props} httpClient={core.http} notifications={core.notifications} />
)}
/>
<Route
path={APP_PATH.CREATE_MONITOR}
render={(props) => (

View File

@ -86,10 +86,10 @@ export default (props)=>{
<div style={{height:'150px'}}>
<Chart>
<Settings theme={theme} />
<Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={timeFormatter(niceTimeFormatByDay(2))} />
<Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={timeFormatter(niceTimeFormatByDay(90))} />
<Axis
id="left"
title={'最近告警统计'}
title={'最近三个月告警统计'}
position={Position.Left}
/>
<LineSeries

View File

@ -43,11 +43,11 @@ class Index extends React.Component {
if(!clusterStatus || !clusterStatus[val]){
return
}
const isAvailable = clusterStatus[val].cluster_available;
const isAvailable = clusterStatus[val].available;
if(!isAvailable){
return <Icon type="close-circle" style={{width:14, height:14, color:'red',borderRadius: 14, boxShadow: '0px 0px 5px #555'}}/>
}
const status = clusterStatus[val].health_status;
const status = clusterStatus[val].health?.status;
return <HealthStatusCircle status={status}/>
}
@ -83,13 +83,13 @@ class Index extends React.Component {
},{
title: '节点数',
dataIndex: 'id',
key: 'mode_count',
key: 'number_of_nodes',
render: (val)=>{
const {clusterStatus} = this.props;
if(!clusterStatus || !clusterStatus[val]){
return
}
return clusterStatus[val].nodes_count;
return clusterStatus[val].health?.number_of_nodes;
}
},{
title: '集群地址',