Merge pull request #443 from snetsystems/dev-1.4.0-jinhyeong

Topology node별 Agent border에 상태 색상 표시 & Alert Table Scroll 버그

frontend/src/addon/128t/components/128t.scss

@@ -539,23 +539,23 @@
 
   .UsageIndacator-value {
     &.UsageIndacator--caution {
-      color: $s-oragne2;
+      color: $c-pineapple;
     }
 
     &.UsageIndacator--warning {
-      color: $c-topaz;
+      color: $c-dreamsicle;
     }
 
     &.UsageIndacator--danger {
       color: red;
     }
 
     &.UsageIndacator-ipmi--caution {
-      color: $s-oragne2;
+      color: $c-pineapple;
     }
 
     &.UsageIndacator-ipmi--warning {
-      color: $c-topaz;
+      color: $c-dreamsicle;
     }
 
     &.UsageIndacator-ipmi--danger {
@@ -590,11 +590,11 @@
 .IPMI-UsageIndacator {
   height: 2px;
   text-align: center;
-  background: -webkit-linear-gradient(left, #2de5a5 0%, #2de5a5 100%);
+  background: $c-rainforest;
   margin-top: 2px;
 
   &.UsageIndacator--caution {
-    background: $c-pineapple 100%;
+    background: $c-pineapple;
   }
 
   &.UsageIndacator--warning {
@@ -606,7 +606,7 @@
   }
 
   &.UsageIndacator-ipmi--caution {
-    background: $c-pineapple 100%;
+    background: $c-pineapple;
   }
 
   &.UsageIndacator-ipmi--warning {

frontend/src/agent_admin/apis/index.ts

@@ -10,8 +10,8 @@ import {
   getWheelKeyListAll,
   getLocalServiceEnabledTelegraf,
   getLocalServiceStatusTelegraf,
-  getLocalGrainsItems,
   getMinionsState,
+  getLocalGrainsItem,
 } from 'src/shared/apis/saltStack'
 import {getAllHosts} from 'src/shared/apis/multiTenant'
 
@@ -116,7 +116,7 @@ export const getMinionKeyListAllAdmin = async (
 
   const paramKeyList = _.values(minions).map(m => m.host)
   const grainItemInfo = await Promise.all([
-    getLocalGrainsItems(pUrl, pToken, paramKeyList.toString()),
+    getLocalGrainsItem(pUrl, pToken, paramKeyList.toString()),
   ])
   const ipv4Regexformat: RegExp = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/
   const exceptLoopbackRegexFormat: RegExp = /^(?!127.0.0.1)/
@@ -264,7 +264,7 @@ export const getGrainItem = async (
 ) => {
   try {
     const grainItemsInfo = await waitForSaltCallCompletion(
-      getLocalGrainsItems,
+      getLocalGrainsItem,
       res => res.data?.return[0][minionId] !== false,
       [pUrl, pToken, minionId]
     )

frontend/src/alerts/components/AlertsTable.tsx

@@ -9,9 +9,8 @@ import {Link} from 'react-router'
 
 // Components
 import AlertsTableRow from 'src/alerts/components/AlertsTableRow'
-import InfiniteScroll from 'src/shared/components/InfiniteScroll'
 import SearchBar from 'src/alerts/components/SearchBar'
-
+import {Scrollbars} from 'react-custom-scrollbars'
 // Constants
 import {ALERTS_TABLE} from 'src/alerts/constants/tableSizing'
 
@@ -157,6 +156,16 @@ class AlertsTable extends PureComponent<Props, State> {
     }
   }
 
+  private handleMakeDiv = className => props => {
+    if (className === 'view') {
+      const customStyle = {...props}
+      customStyle.style.marginBottom = customStyle.style.marginBottom - 1
+      customStyle.style.marginRight = customStyle.style.marginRight - 1
+      return <div {...customStyle} className={`fancy-scroll--${className}`} />
+    } else {
+      return <div {...props} className={`fancy-scroll--${className}`} />
+    }
+  }
   private renderTable(): JSX.Element {
     const {
       source: {id},
@@ -168,6 +177,7 @@ class AlertsTable extends PureComponent<Props, State> {
       this.state.sortDirection
     )
     const {colName, colLevel, colTime, colHost, colValue} = ALERTS_TABLE
+
     return this.props.alerts.length ? (
       <div className="alert-history-table">
         <div className="alert-history-table--thead">
@@ -207,15 +217,27 @@ class AlertsTable extends PureComponent<Props, State> {
             Value <span className="icon caret-up" />
           </div>
         </div>
-        <InfiniteScroll
-          className="alert-history-table--tbody"
-          itemHeight={25}
-          items={alerts.map(alert => (
+        <Scrollbars
+          className={'alert-history-table--tbody fancy-scroll--container'}
+          autoHide={true}
+          autoHideTimeout={1000}
+          autoHideDuration={250}
+          autoHeight={false}
+          renderTrackHorizontal={this.handleMakeDiv('track-h')}
+          renderTrackVertical={this.handleMakeDiv('track-v')}
+          renderThumbHorizontal={this.handleMakeDiv('thumb-h')}
+          renderThumbVertical={this.handleMakeDiv('thumb-v')}
+          renderView={this.handleMakeDiv('view')}
+          key={window.innerHeight}
+        >
+          <div />
+          {alerts.map(alert => (
             <div className="alert-history-table--tr" key={uuid.v4()}>
               <AlertsTableRow sourceID={id} {...alert} timeZone={timeZone} />
             </div>
           ))}
-        />
+          <div />
+        </Scrollbars>
       </div>
     ) : (
       this.renderTableEmpty()

frontend/src/hosts/components/HostRow.tsx

@@ -10,6 +10,9 @@ import {HostsPageHostTab} from 'src/hosts/containers/HostsPageHostTab'
 import {HOSTS_TABLE_SIZING} from 'src/hosts/constants/tableSizing'
 import {Host} from 'src/types'
 
+//constants
+import {NOT_AVAILABLE_STATUS} from 'src/hosts/constants/topology'
+
 interface Props {
   sourceID: string
   host: Host
@@ -26,8 +29,8 @@ const HostRow: FunctionComponent<Props> = ({
   const {name, cpu, load, apps = []} = host
   const {NameWidth, StatusWidth, CPUWidth, LoadWidth} = HOSTS_TABLE_SIZING
 
-  const CPUValue = isNaN(cpu) ? 'N/A' : `${cpu.toFixed(2)}%`
-  const loadValue = isNaN(load) ? 'N/A' : `${load.toFixed(2)}`
+  const CPUValue = isNaN(cpu) ? NOT_AVAILABLE_STATUS : `${cpu.toFixed(2)}%`
+  const loadValue = isNaN(load) ? NOT_AVAILABLE_STATUS : `${load.toFixed(2)}`
   const dotClassName = classnames(
     'table-dot',
     Math.max(host.deltaUptime || 0, host.winDeltaUptime || 0) > 0

frontend/src/hosts/components/HostsPageAwsTabTableRow.tsx

@@ -14,6 +14,9 @@ import {fixedDecimalPercentage} from 'src/shared/utils/decimalPlaces'
 import classNames from 'classnames'
 import {HostsPageAwsTab} from 'src/hosts/containers/HostsPageAwsTab'
 
+//Constants
+import {NOT_AVAILABLE_STATUS} from 'src/hosts/constants/topology'
+
 interface Instance {
   provider: string
   namespace: string
@@ -63,10 +66,14 @@ const HostsPageAwsTabTableRow: FunctionComponent<Props> = ({
     CloudDiskWidth,
   } = CLOUD_HOSTS_TABLE_SIZING
 
-  const cpuValue = isNaN(cpu) || isNull(cpu) ? 'N/A' : `${cpu.toFixed(2)}%`
+  const cpuValue =
+    isNaN(cpu) || isNull(cpu) ? NOT_AVAILABLE_STATUS : `${cpu.toFixed(2)}%`
   const memoryValue =
-    isNaN(memory) || isNull(memory) ? 'N/A' : `${memory.toFixed(2)}`
-  const diskValue = isNaN(disk) || isNull(disk) ? 'N/A' : `${disk.toFixed(2)}`
+    isNaN(memory) || isNull(memory)
+      ? NOT_AVAILABLE_STATUS
+      : `${memory.toFixed(2)}`
+  const diskValue =
+    isNaN(disk) || isNull(disk) ? NOT_AVAILABLE_STATUS : `${disk.toFixed(2)}`
 
   const focusedClasses = (): string => {
     if (name === _.get(focusedInstance, 'instancename'))
@@ -146,7 +153,7 @@ const HostsPageAwsTabTableRow: FunctionComponent<Props> = ({
         })}
       </div>
       <div style={{width: CloudCPUWidth}} className="monotype hosts-table--td">
-        {(cpuValue === 'N/A' && cpuValue) ||
+        {(cpuValue === NOT_AVAILABLE_STATUS && cpuValue) ||
           usageIndacator({
             value: fixedDecimalPercentage(parseFloat(cpuValue), 2),
           })}
@@ -155,13 +162,13 @@ const HostsPageAwsTabTableRow: FunctionComponent<Props> = ({
         style={{width: CloudMemoryWidth}}
         className="monotype hosts-table--td"
       >
-        {(memoryValue === 'N/A' && memoryValue) ||
+        {(memoryValue === NOT_AVAILABLE_STATUS && memoryValue) ||
           usageIndacator({
             value: fixedDecimalPercentage(parseFloat(memoryValue), 2),
           })}
       </div>
       <div style={{width: CloudDiskWidth}} className="monotype hosts-table--td">
-        {(diskValue === 'N/A' && diskValue) ||
+        {(diskValue === NOT_AVAILABLE_STATUS && diskValue) ||
           usageIndacator({
             value: fixedDecimalPercentage(parseFloat(diskValue), 2),
           })}

frontend/src/hosts/components/HostsPageGcpTabTableRow.tsx

@@ -14,6 +14,9 @@ import {CLOUD_HOSTS_TABLE_SIZING} from 'src/hosts/constants/tableSizing'
 import {CloudHost} from 'src/types'
 import {HostsPageGcpTab} from 'src/hosts/containers/HostsPageGcpTab'
 
+//constants
+import {NOT_AVAILABLE_STATUS} from 'src/hosts/constants/topology'
+
 interface Instance {
   provider: string
   namespace: string
@@ -57,10 +60,14 @@ const HostsPageGcpTabTableRow: FunctionComponent<Props> = ({
     CloudDiskWidth,
   } = CLOUD_HOSTS_TABLE_SIZING
 
-  const cpuValue = isNaN(cpu) || isNull(cpu) ? 'N/A' : `${cpu.toFixed(2)}%`
+  const cpuValue =
+    isNaN(cpu) || isNull(cpu) ? NOT_AVAILABLE_STATUS : `${cpu.toFixed(2)}%`
   const memoryValue =
-    isNaN(memory) || isNull(memory) ? 'N/A' : `${memory.toFixed(2)}`
-  const diskValue = isNaN(disk) || isNull(disk) ? 'N/A' : `${disk.toFixed(2)}`
+    isNaN(memory) || isNull(memory)
+      ? NOT_AVAILABLE_STATUS
+      : `${memory.toFixed(2)}`
+  const diskValue =
+    isNaN(disk) || isNull(disk) ? NOT_AVAILABLE_STATUS : `${disk.toFixed(2)}`
 
   const focusedClasses = (): string => {
     if (name === _.get(focusedInstance, 'instancename'))
@@ -132,7 +139,7 @@ const HostsPageGcpTabTableRow: FunctionComponent<Props> = ({
         })}
       </div>
       <div style={{width: CloudCPUWidth}} className="monotype hosts-table--td">
-        {(cpuValue === 'N/A' && cpuValue) ||
+        {(cpuValue === NOT_AVAILABLE_STATUS && cpuValue) ||
           usageIndacator({
             value: fixedDecimalPercentage(parseFloat(cpuValue), 2),
           })}
@@ -141,13 +148,13 @@ const HostsPageGcpTabTableRow: FunctionComponent<Props> = ({
         style={{width: CloudMemoryWidth}}
         className="monotype hosts-table--td"
       >
-        {(memoryValue === 'N/A' && memoryValue) ||
+        {(memoryValue === NOT_AVAILABLE_STATUS && memoryValue) ||
           usageIndacator({
             value: fixedDecimalPercentage(parseFloat(memoryValue), 2),
           })}
       </div>
       <div style={{width: CloudDiskWidth}} className="monotype hosts-table--td">
-        {(diskValue === 'N/A' && diskValue) ||
+        {(diskValue === NOT_AVAILABLE_STATUS && diskValue) ||
           usageIndacator({
             value: fixedDecimalPercentage(parseFloat(diskValue), 2),
           })}

frontend/src/hosts/configurations/topology.ts

@@ -80,8 +80,7 @@ export const configureStylesheet = function (mx: mxGraphExportObject) {
   style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER
   style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE
   style[mxConstants.STYLE_FILLCOLOR] = '#383846'
-  style[mxConstants.STYLE_STROKECOLOR] = '#ffffff'
-  style[mxConstants.STYLE_STROKECOLOR] = '#f58220'
+  style[mxConstants.STYLE_STROKECOLOR] = '#bec2cc'
   style[mxConstants.STYLE_FONTCOLOR] = '#bec2cc'
   style[mxConstants.STYLE_ROUNDED] = true
   style[mxConstants.STYLE_ABSOLUTE_ARCSIZE] = true
@@ -492,7 +491,7 @@ export const createHTMLValue = function (node: Menu, style: string) {
 
   cell.appendChild(cellTitleBox)
 
-  if (style === 'node') {
+  if (style.includes('node')) {
     const cellIconBox = document.createElement('div')
     const cellIcon = document.createElement('div')
 
@@ -1012,7 +1011,7 @@ export const resizeCell = function (
   bounds: mxRectangleType,
   recurse?: boolean
 ) {
-  if (cell.getStyle() === 'node') {
+  if (cell.getStyle().includes('node')) {
     const containerElement = getContainerElement(cell.value)
     const title = containerElement.querySelector('.mxgraph-cell--title')
     title.setAttribute('style', `width: ${bounds.width}px;`)
@@ -1029,7 +1028,7 @@ export const onClickMxGraph = function (
 ) {
   const cell: mxCellType = me.getProperty('cell')
 
-  if (!_.isEmpty(cell) && cell.style === 'node') {
+  if (!_.isEmpty(cell) && cell.style.includes('node')) {
     document.querySelector('#statusContainer').classList.remove('active')
     document.querySelector('#statusContainerRef').innerHTML = ``
     const containerElement = getContainerElement(cell.value)
@@ -1079,7 +1078,7 @@ export const onMouseMovexGraph = function (
   if (_.isEmpty(cell)) {
     return
   }
-  if (!_.isEmpty(cell) && cell.style === 'node') {
+  if (!_.isEmpty(cell) && cell.style.includes('node')) {
     const focusedCell = getContainerElement(
       this.graph.getModel().getValue(cell)
     )
@@ -1288,7 +1287,7 @@ export const filteredIpmiPowerStatus = function (cells: mxCellType[]) {
   let ipmiCells: IpmiCell[] = []
 
   _.forEach(cells, cell => {
-    if (cell.getStyle() === 'node') {
+    if (cell.getStyle().includes('node')) {
       const containerElement = getContainerElement(cell.value)
 
       if (containerElement.hasAttribute('data-ipmi_host')) {
@@ -1444,7 +1443,7 @@ export const selectedTemperatureType = (
 }
 export const getFocusedCell = (cells: mxCellType[], focusedCell: string) => {
   const findCells = cells.filter(
-    cell => cell.getStyle() === 'node' && cell.getId() === focusedCell
+    cell => cell.getStyle().includes('node') && cell.getId() === focusedCell
   )
 
   return findCells
@@ -1462,14 +1461,22 @@ export const detectedHostsStatus = function (
   model.beginUpdate()
   try {
     _.forEach(cells, cell => {
-      if (cell.getStyle() === 'node') {
+      if (cell.getStyle().includes('node')) {
         const containerElement = getContainerElement(cell.value)
         const name = containerElement.getAttribute('data-name')
 
         const findHost = _.find(hostsObject, host => host.name === name)
 
         if (!_.isEmpty(findHost)) {
           const childCells = this.graph.getChildCells(cell)
+          this.graph.setCellStyles(
+            mxConstants.STYLE_STROKECOLOR,
+            Math.max(findHost.deltaUptime || 0, findHost.winDeltaUptime || 0) >
+              0
+              ? '#f58220'
+              : '#bec2cc',
+            [cell]
+          )
 
           if (!_.isEmpty(childCells)) {
             _.forEach(childCells, childCell => {
@@ -1530,7 +1537,11 @@ export const detectedHostsStatus = function (
                   childElement.classList.add('time-series-status')
                 }
               })
-
+              this.graph.setCellStyles(
+                mxConstants.STYLE_STROKECOLOR,
+                '#bec2cc',
+                [cell]
+              )
               childCell.setValue(childCellElement.outerHTML)
             })
           }

frontend/src/hosts/constants/topology.ts

@@ -11,6 +11,7 @@ export const agentFilter: AgentFilter = {
 }
 
 export const defaultTemperatureType = 'inlet'
+export const NOT_AVAILABLE_STATUS = 'N/A'
 
 export const temperatureMinValue = {
   inlet: '15',