diff --git a/frontend/src/addon/128t/components/128t.scss b/frontend/src/addon/128t/components/128t.scss index 922d2a003..82c0fe284 100644 --- a/frontend/src/addon/128t/components/128t.scss +++ b/frontend/src/addon/128t/components/128t.scss @@ -539,11 +539,11 @@ .UsageIndacator-value { &.UsageIndacator--caution { - color: $s-oragne2; + color: $c-pineapple; } &.UsageIndacator--warning { - color: $c-topaz; + color: $c-dreamsicle; } &.UsageIndacator--danger { @@ -551,11 +551,11 @@ } &.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 { diff --git a/frontend/src/agent_admin/apis/index.ts b/frontend/src/agent_admin/apis/index.ts index 320f97bd3..c46726d15 100644 --- a/frontend/src/agent_admin/apis/index.ts +++ b/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] ) diff --git a/frontend/src/alerts/components/AlertsTable.tsx b/frontend/src/alerts/components/AlertsTable.tsx index 28cc76034..ae3b6f72e 100644 --- a/frontend/src/alerts/components/AlertsTable.tsx +++ b/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 { } } + 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
+ } else { + return
+ } + } private renderTable(): JSX.Element { const { source: {id}, @@ -168,6 +177,7 @@ class AlertsTable extends PureComponent { this.state.sortDirection ) const {colName, colLevel, colTime, colHost, colValue} = ALERTS_TABLE + return this.props.alerts.length ? (
@@ -207,15 +217,27 @@ class AlertsTable extends PureComponent { Value
- ( + +
+ {alerts.map(alert => (
))} - /> +
+
) : ( this.renderTableEmpty() diff --git a/frontend/src/hosts/components/HostRow.tsx b/frontend/src/hosts/components/HostRow.tsx index 9e0e02f84..f23ec54e0 100644 --- a/frontend/src/hosts/components/HostRow.tsx +++ b/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 = ({ 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 diff --git a/frontend/src/hosts/components/HostsPageAwsTabTableRow.tsx b/frontend/src/hosts/components/HostsPageAwsTabTableRow.tsx index 6c98398ab..4ccdcf081 100644 --- a/frontend/src/hosts/components/HostsPageAwsTabTableRow.tsx +++ b/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 = ({ 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 = ({ })}
- {(cpuValue === 'N/A' && cpuValue) || + {(cpuValue === NOT_AVAILABLE_STATUS && cpuValue) || usageIndacator({ value: fixedDecimalPercentage(parseFloat(cpuValue), 2), })} @@ -155,13 +162,13 @@ const HostsPageAwsTabTableRow: FunctionComponent = ({ style={{width: CloudMemoryWidth}} className="monotype hosts-table--td" > - {(memoryValue === 'N/A' && memoryValue) || + {(memoryValue === NOT_AVAILABLE_STATUS && memoryValue) || usageIndacator({ value: fixedDecimalPercentage(parseFloat(memoryValue), 2), })}
- {(diskValue === 'N/A' && diskValue) || + {(diskValue === NOT_AVAILABLE_STATUS && diskValue) || usageIndacator({ value: fixedDecimalPercentage(parseFloat(diskValue), 2), })} diff --git a/frontend/src/hosts/components/HostsPageGcpTabTableRow.tsx b/frontend/src/hosts/components/HostsPageGcpTabTableRow.tsx index d03ed1cc7..de66b11da 100644 --- a/frontend/src/hosts/components/HostsPageGcpTabTableRow.tsx +++ b/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 = ({ 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 = ({ })}
- {(cpuValue === 'N/A' && cpuValue) || + {(cpuValue === NOT_AVAILABLE_STATUS && cpuValue) || usageIndacator({ value: fixedDecimalPercentage(parseFloat(cpuValue), 2), })} @@ -141,13 +148,13 @@ const HostsPageGcpTabTableRow: FunctionComponent = ({ style={{width: CloudMemoryWidth}} className="monotype hosts-table--td" > - {(memoryValue === 'N/A' && memoryValue) || + {(memoryValue === NOT_AVAILABLE_STATUS && memoryValue) || usageIndacator({ value: fixedDecimalPercentage(parseFloat(memoryValue), 2), })}
- {(diskValue === 'N/A' && diskValue) || + {(diskValue === NOT_AVAILABLE_STATUS && diskValue) || usageIndacator({ value: fixedDecimalPercentage(parseFloat(diskValue), 2), })} diff --git a/frontend/src/hosts/configurations/topology.ts b/frontend/src/hosts/configurations/topology.ts index f931eb7cf..2ebad10c3 100644 --- a/frontend/src/hosts/configurations/topology.ts +++ b/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,7 +1461,7 @@ 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') @@ -1470,6 +1469,14 @@ export const detectedHostsStatus = function ( 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) }) } diff --git a/frontend/src/hosts/constants/topology.ts b/frontend/src/hosts/constants/topology.ts index 855627b45..f32b47594 100644 --- a/frontend/src/hosts/constants/topology.ts +++ b/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', diff --git a/frontend/src/hosts/utils/topology.ts b/frontend/src/hosts/utils/topology.ts index 9eee49a74..049579797 100644 --- a/frontend/src/hosts/utils/topology.ts +++ b/frontend/src/hosts/utils/topology.ts @@ -7,6 +7,7 @@ import {fixedDecimalPercentage} from 'src/shared/utils/decimalPlaces' import { DATA_GATHER_TYPE, keysWithGatherType, + NOT_AVAILABLE_STATUS, titleWithGatherType, TOOLTIP_TYPE, } from 'src/hosts/constants/topology' @@ -129,7 +130,7 @@ export const getTimeSeriesHostIndicator = ( statusValue: string, selectedTemperatureValue: string ): string => { - if (statusValue === 'N/A') { + if (statusValue === NOT_AVAILABLE_STATUS) { return null } if (statusKind === TOOLTIP_TYPE.temperature) { @@ -168,7 +169,7 @@ export const dataStatusValue = ( host: Host, dataGatherType: string ) => { - let statusValue = 'N/A' + let statusValue = NOT_AVAILABLE_STATUS if (hostValue === undefined) { return statusValue diff --git a/frontend/src/shared/apis/saltStack.ts b/frontend/src/shared/apis/saltStack.ts index 81177fb31..5ed4e5915 100644 --- a/frontend/src/shared/apis/saltStack.ts +++ b/frontend/src/shared/apis/saltStack.ts @@ -238,6 +238,7 @@ export async function getLocalGrainsItem( 'selinux', 'path', ], + tgt_type: 'list', } return await apiRequest(pUrl, pToken, params)