Skip to content

Commit

Permalink
⚡ disk 사용율 차트 지속적으로 그리는 현상 수정 및 정렬 기능 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
@kranian
kranian committed Oct 29, 2019
1 parent f0f0631 commit 2bb853b
Showing 1 changed file with 149 additions and 43 deletions.
192 changes: 149 additions & 43 deletions src/components/Paper/DiskUsage/DiskUsage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,15 @@ const layout = [
type: "percent"
}
];
const orderBy ={
auto : "asc",
asc : "desc",
desc : "auto"
};


class DiskUsage extends Component {

lastSort=null;

constructor(props) {
super(props);
Expand All @@ -48,56 +53,81 @@ class DiskUsage extends Component {
};
}

componentWillReceiveProps() {
componentWillReceiveProps(nextProps) {
if(nextProps.diskUsage !== this.props.diskUsage) {
let allDisk = nextProps.diskUsage;

let allDisk = this.props.diskUsage;
if (!allDisk || !allDisk.time || !allDisk.diskUsage) {
return;
}

if (!allDisk || !allDisk.time || !allDisk.diskUsage) {
return;
}
let allInstance = [];
let arrDiskUsage = allDisk.diskUsage;
let arrObjName = allDisk.objName;

let allInstance = [];
let arrDiskUsage = allDisk.diskUsage;
let arrObjName = allDisk.objName;
let box = this.refs.listBox.parentNode.parentNode.parentNode.parentNode;

let box = this.refs.listBox.parentNode.parentNode.parentNode.parentNode;
// used & total 사이즈가 0 보다 큰 데이터만 정리
arrDiskUsage.map((data, index) => {

if (data !== null) {
JSON.stringify((data).map((instance) => {
if (instance.used > 0 && instance.total > 0) {
instance.objName = arrObjName[index];
instance.diskUsage = Math.round((instance.used / instance.total) * 100);
instance.diskUsed = instance.used;
instance.diskTotal = instance.total;
instance.diskMount = instance.mount;
instance.diskDevice = instance.device;
allInstance.push(instance);
}
return null;
}));
}
return null;
});

if (allInstance.length > 0) {

// used & total 사이즈가 0 보다 큰 데이터만 정리
arrDiskUsage.map((data, index) => {

if(data !== null) {
JSON.stringify((data).map((instance) => {
if(instance.used > 0 && instance.total > 0) {
instance.objName = arrObjName[index];
instance.diskUsage = Math.round((instance.used / instance.total) * 100)
instance.diskUsed = instance.used;
instance.diskTotal = instance.total;
instance.diskMount = instance.mount;
instance.diskDevice = instance.device;
allInstance.push(instance);
}
return null;
}));
this.setState({
allInstance: {
data: allInstance,
origin: [...allInstance]
},
boxHeight: box.offsetHeight,
boxWidth: box.offsetWidth,
sort : layout.map(d=>({...d, order:"auto"}))
});
}
return null;
}
let box = this.refs.listBox.parentNode.parentNode.parentNode.parentNode;

this.setState({
boxHeight: box.offsetHeight,
boxWidth: box.offsetWidth
});

if(allInstance.length > 0) {
this.setState({
allInstance : allInstance,
boxHeight : box.offsetHeight,
boxWidth : box.offsetWidth
});
}
}
shouldComponentUpdate(nextProps, nextState){
if(nextProps.diskUsage !== this.props.diskUsage){
return true;
}

getRow = (row, i) => {
if(nextState.sort !== this.state.sort){
return true;
}
if(nextState.boxHeight !== this.state.boxHeight
|| nextState.boxWidth !== this.state.boxWidth){
return true;
}
return false;

}
getRow = (row, i) => {
return layout.map((meta, j) => {

let className = meta.key;
let data = row[className];

if(data !== undefined){
if (meta.type === "bytes") {
return <span className={meta.key} key={j}>{this.bytesToSize(data)}</span>
Expand All @@ -111,17 +141,93 @@ class DiskUsage extends Component {
});
};

onSort(headerKey){
onSort(meta){

const {data,origin} = this.state.allInstance;
const {order,key,type} = meta;
const _orderBy = orderBy[order];
let _orderData;
if(type === "string"){
switch(_orderBy) {
case "desc":
data.sort((a, b) => a[key].localeCompare(b[key]));
_orderData = data;
break;
case "asc":
data.sort((a, b) => b[key].localeCompare(a[key]));
_orderData = data;
break;
default:
_orderData = origin;
}
}else if( type === "percent"){
switch(_orderBy) {
case "desc":
data.sort((a, b) => String(a[key]).localeCompare(String(b[key]), 'en-US', { numeric: true, sensitivity: 'base' }));
_orderData = data;
break;
case "asc":
data.sort((a, b) => String(b[key]).localeCompare(String(a[key]), 'en-US', { numeric: true, sensitivity: 'base' }));
_orderData = data;
break;
default:
_orderData = origin;
}
}else{

switch(_orderBy) {
case "desc":
data.sort((a, b) => a[key].localeCompare(b[key], 'en-US', { numeric: true, sensitivity: 'base' }));
_orderData = data;
break;
case "asc":
data.sort((a, b) => b[key].localeCompare(a[key], 'en-US', { numeric: true, sensitivity: 'base' }));
_orderData = data;
break;
default:
_orderData = origin;
}
}
this.lastSort =

this.setState({
allInstance: {
data: [..._orderData],
origin: origin
},
sort: layout.map(d=> {
if( d.key === key){
d.order = _orderBy;
}else {
d.order = "auto";
}
return d;
})
});

}
getHeader = () => {
return layout.map((meta, j) => {
const {sort} = this.state;
const {data} = this.state.allInstance;

return sort.map((meta, j) => {
const isObject = meta.key === 'objName';
let iconClass ="";

if(meta.key === 'objName') {
return <span className={meta.key} key={j} onClick={()=>this.onSort(meta.key)}>{meta.name} (Total : {this.state.allInstance.length})<i className="fa fa-sort" style={{color:"#a0a0a0"}}></i></span>
}else{
return <span className={meta.key} key={j} onClick={()=>this.onSort(meta.key)}>{meta.name}<i className="fa fa-sort" style={{color:"#a0a0a0"}}></i></span>
switch(meta.order){
case "asc":
iconClass = "fa fa-sort-up";
break;
case "desc":
iconClass = "fa fa-sort-desc";
break;
default:
iconClass = "fa fa-sort";
}
return <span className={meta.key} key={j} onClick={()=>this.onSort(meta)}>
{meta.name} {isObject ? `(Total : ${data.length})` : ""}
<i className={iconClass} style={{color:"#a0a0a0", cursor: "pointer"}}></i>
</span>

});
};
Expand All @@ -139,7 +245,7 @@ class DiskUsage extends Component {
return (
<div className="disk-usage-list scrollbar" ref="listBox" style={{width: this.state.boxWidth + "px"}}>
<div className="row table-title">{this.state.allInstance && this.getHeader()}</div>
{this.state.allInstance && this.state.allInstance.map((data, i) => {
{this.state.allInstance && this.state.allInstance.data.map((data, i) => {
return <div className="row" key={i}>{this.getRow(data, i)}</div>;
})}
{(!this.state.allInstance) && <div className="no-data">
Expand Down

0 comments on commit 2bb853b

Please sign in to comment.