console bug fixed and update cluster status
This commit is contained in:
parent
a54cd79e95
commit
4178e77160
|
@ -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>
|
||||
|
|
|
@ -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"/>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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) => (
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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: '集群地址',
|
||||
|
|
Loading…
Reference in New Issue