Skip to content

Commit

Permalink
fix error agent view does not render correctly (#3306)
Browse files Browse the repository at this point in the history 
* fix error agent view does not render correctly

* update CHANGELOG.md

* add new file .scss and functions declarations

* prettier
  • Loading branch information
@matiasmoreno876
matiasmoreno876 authored Jun 1, 2021
1 parent a537ec0 commit 6e532ae
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 43 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ All notable changes to the Wazuh app project will be documented in this file.
- Fixed message of error when add sample data fails [#3241](https://github.com/wazuh/wazuh-kibana-app/pull/3241)
- Fixed modules are missing in the agent menu [#3244](https://github.com/wazuh/wazuh-kibana-app/pull/3244)
- Adapt Kibana integrations to Kibana 7.11 and 7.12 [#3309](https://github.com/wazuh/wazuh-kibana-app/pull/3309)
- Fixed error agent view does not render correctly [#3306](https://github.com/wazuh/wazuh-kibana-app/pull/3306)

## Wazuh v4.2.0 - Kibana 7.10.2 , 7.11.2 - Revision 4201

Expand Down
89 changes: 46 additions & 43 deletions public/controllers/agent/components/agents-preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ import { WzDatePicker } from '../../../components/wz-date-picker/wz-date-picker'
import { withReduxProvider, withGlobalBreadcrumb, withUserAuthorizationPrompt } from '../../../components/common/hocs';
import { formatUIDate } from '../../../../public/react-services/time-service';
import { compose } from 'redux';
import './agents-preview.scss'

const FILTER_ACTIVE = 'active';
const FILTER_DISCONNECTED = 'disconnected';
const FILTER_NEVER_CONNECTED = 'never_connected';

export const AgentsPreview = compose(
withReduxProvider,
Expand Down Expand Up @@ -120,21 +125,36 @@ export const AgentsPreview = compose(
this.setState({ platforms: platformsModel, loading: false });
} catch (error) {}
}

removeFilters(){
this._isMount && this.setState({agentTableFilters: []})
}

showLastAgent() {
this.props.tableProps.showAgent(this.lastAgent);
}

showMostActiveAgent() {
this.mostActiveAgent.name ? this.props.tableProps.showAgent(this.mostActiveAgent) : '';
}

showAgentsWithFilters(filter) {
this._isMount &&
this.setState({
agentTableFilters: [{ field: 'q', value: `status=${filter}` }],
});
}

render() {
const colors = ['#017D73', '#bd271e', '#69707D'];
return (
<EuiPage>
<EuiPage className="flex-column">
<EuiFlexItem >
<EuiFlexGroup style={{ marginTop: 0 }} className="agents-evolution-visualization-group">
<EuiFlexGroup className="agents-evolution-visualization-group mt-0">
{this.state.loading && (
<EuiFlexItem>
<EuiLoadingChart
style={{ margin: '75px auto' }}
className="loading-chart"
size="xl"
/>
</EuiFlexItem>
Expand All @@ -143,11 +163,11 @@ export const AgentsPreview = compose(
<EuiFlexItem className="agents-status-pie" grow={false}>
<EuiPanel
betaBadgeLabel="Status"
style={{ paddingBottom: 0, minHeight: 168, minWidth: 350 }}
className="eui-panel"
>
<EuiFlexGroup>
{this.totalAgents > 0 && (
<EuiFlexItem style={{ alignItems: 'center' }}>
<EuiFlexItem className="align-items-center">
<Pie
legendAction={(status) => this._isMount && this.setState({
agentTableFilters: [ {field: 'q', value: `status=${this.agentStatusLabelToID(status)}`}]
Expand All @@ -164,25 +184,23 @@ export const AgentsPreview = compose(
</EuiFlexItem>
{this.totalAgents > 0 && (
<EuiFlexItem >
<EuiPanel betaBadgeLabel="Details">
<EuiPanel betaBadgeLabel="Details">
<EuiFlexGroup>
<EuiFlexItem>
{this.summary && (
<EuiFlexGroup style={{ padding: '12px 0px' }}>
<EuiFlexGroup className="group-details">
<EuiFlexItem>
<EuiStat
title={(
<EuiToolTip
position='top'
content='Show active agents'>
<a onClick={() => this._isMount && this.setState({
agentTableFilters: [ {field: 'q', value: 'status=active'} ]
})} >{this.state.data[0].value}</a>
<a onClick={() => this.showAgentsWithFilters(FILTER_ACTIVE)} >{this.state.data[0].value}</a>
</EuiToolTip>)}
titleSize={'s'}
description="Active"
titleColor="secondary"
style={{ whiteSpace: 'nowrap' }}
className="white-space-nowrap"
/>
</EuiFlexItem>
<EuiFlexItem>
Expand All @@ -191,14 +209,12 @@ export const AgentsPreview = compose(
<EuiToolTip
position='top'
content='Show disconnected agents'>
<a onClick={() => this._isMount && this.setState({
agentTableFilters: [ {field: 'q', value: 'status=disconnected'} ]
})} >{this.state.data[1].value}</a>
<a onClick={() => this.showAgentsWithFilters(FILTER_DISCONNECTED)} >{this.state.data[1].value}</a>
</EuiToolTip>)}
titleSize={'s'}
description="Disconnected"
titleColor="danger"
style={{ whiteSpace: 'nowrap' }}
className="white-space-nowrap"
/>
</EuiFlexItem>
<EuiFlexItem>
Expand All @@ -207,27 +223,25 @@ export const AgentsPreview = compose(
<EuiToolTip
position='top'
content='Show never connected agents'>
<a onClick={() => this._isMount && this.setState({
agentTableFilters: [ {field: 'q', value: 'status=never_connected'} ]
})} >{this.state.data[2].value}</a>
<a onClick={() => this.showAgentsWithFilters(FILTER_NEVER_CONNECTED)} >{this.state.data[2].value}</a>
</EuiToolTip>)}
titleSize={'s'}
description="Never connected"
titleColor="subdued"
style={{ whiteSpace: 'nowrap' }}
className="white-space-nowrap"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiStat
title={`${this.agentsCoverity.toFixed(2)}%`}
titleSize={'s'}
description="Agents coverage"
style={{ whiteSpace: 'nowrap' }}
className="white-space-nowrap"
/>
</EuiFlexItem>
</EuiFlexGroup>
)}
<EuiFlexGroup style={{ marginTop: 0 }}>
<EuiFlexGroup className="mt-0">
{this.lastAgent && (
<EuiFlexItem>
<EuiStat
Expand All @@ -236,18 +250,12 @@ export const AgentsPreview = compose(
<EuiToolTip
position='top'
content='View agent details'>
<a onClick={() =>
this.props.tableProps.showAgent(
this.lastAgent
)}>{this.lastAgent.name}</a>
<a onClick={() => this.showLastAgent()}>{this.lastAgent.name}</a>
</EuiToolTip>}
titleSize="s"
description="Last registered agent"
titleColor="primary"
style={{
paddingBottom: 12,
whiteSpace: 'nowrap'
}}
className="pb-12 white-space-nowrap"
/>
</EuiFlexItem>
)}
Expand All @@ -260,18 +268,13 @@ export const AgentsPreview = compose(
title={
<EuiToolTip
position='top'
content='View agent details'><a onClick={() =>
this.mostActiveAgent.name
? this.props.tableProps.showAgent(
this.mostActiveAgent
)
: ''
}>{this.mostActiveAgent.name || '-'}</a>
content='View agent details'>
<a onClick={() => this.showMostActiveAgent()}>{this.mostActiveAgent.name || '-'}</a>
</EuiToolTip>}
style={{ whiteSpace: 'nowrap' }}
className="white-space-nowrap"
titleSize="s"
description="Most active agent"
titleColor="primary"
titleColor="primary"
/>
</EuiFlexItem>
)}
Expand All @@ -298,13 +301,13 @@ export const AgentsPreview = compose(
</div>
{this.props.resultState === 'loading' &&
(
<div style={{ display: 'block', textAlign: "center", padding: 30}}>
<div className="loading-chart-xl">
<EuiLoadingChart size="xl" />
</div>
) }

</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexGroup>
</EuiPanel>
<EuiPanel paddingSize="none" betaBadgeLabel="Evolution" style={{ height: 180, display: this.props.resultState === 'none' ? 'block' : 'none'}}>
<EuiEmptyPrompt
Expand All @@ -318,7 +321,7 @@ export const AgentsPreview = compose(
/>
</EuiPanel>
</EuiFlexItem>

)}
</EuiFlexGroup>
<EuiSpacer size="m" />
Expand Down
42 changes: 42 additions & 0 deletions public/controllers/agent/components/agents-preview.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
.flex-column {
flex-direction: column;
}

.mt-0 {
margin-top: 0px;
}

.loading-chart {
margin: 75px auto;
}

.eui-panel {
padding-bottom: 0px;
min-height: 168px;
min-width: 350px;
}

.align-items-center {
align-items: center;
}

.group-details {
padding: 12px 0px;
}

.white-space-nowrap {
white-space: nowrap;
}

.pb-12 {
padding-bottom: 12px;
}

.p-30 {
}

.loading-chart-xl {
display: block;
text-align: center;
padding: 30px;
}

0 comments on commit 6e532ae

Please sign in to comment.