|
|
@ -12,12 +12,6 @@ const BarStype: React.CSSProperties = {
|
|
|
|
margin: 0,
|
|
|
|
margin: 0,
|
|
|
|
borderRadius: 5,
|
|
|
|
borderRadius: 5,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const SpaceProcessUseStyle: React.CSSProperties = {
|
|
|
|
|
|
|
|
transition: "all 0.2s",
|
|
|
|
|
|
|
|
height: "100%",
|
|
|
|
|
|
|
|
backgroundColor: "#428bca",
|
|
|
|
|
|
|
|
borderRadius: 5,
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@inject('store')
|
|
|
|
@inject('store')
|
|
|
|
@observer
|
|
|
|
@observer
|
|
|
@ -33,7 +27,12 @@ export class SpaceInfoBar extends React.Component<{ store?: TopPanelStore }, {}>
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div style={{ width: 200 }}>
|
|
|
|
<div style={{ width: 200 }}>
|
|
|
|
<div style={BarStype}>
|
|
|
|
<div style={BarStype}>
|
|
|
|
<div style={Object.assign(SpaceProcessUseStyle, { width: cloudInfo.used_percentage })}></div>
|
|
|
|
<div
|
|
|
|
|
|
|
|
className="space-process"
|
|
|
|
|
|
|
|
style={{
|
|
|
|
|
|
|
|
width: cloudInfo.used_percentage,
|
|
|
|
|
|
|
|
backgroundColor: parseFloat(cloudInfo.used_percentage) > 80 ? "#db3737" : "#428bca"
|
|
|
|
|
|
|
|
}} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="flex-between" style={{ alignItems: "center" }}>
|
|
|
|
<div className="flex-between" style={{ alignItems: "center" }}>
|
|
|
|
<span>{cloudInfo.used_size}/{cloudInfo.zone_size}</span>
|
|
|
|
<span>{cloudInfo.used_size}/{cloudInfo.zone_size}</span>
|
|
|
|