Skip to content

Commit

Permalink
Fix visual error in "About" section (#5337)
Browse files Browse the repository at this point in the history
* Add padding class

* Edit changelog

* Update CHANGELOG.md

* Fix margin icons

* Fix incorrect class

---------

Co-authored-by: Álex Ruiz <alejandro.ruiz.becerra@wazuh.com>
Co-authored-by: yenienserrano <ian.serrano@wazuh.com>
  • Loading branch information
3 people committed Mar 30, 2023
1 parent ed9e44e commit 28fb593
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 21 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ All notable changes to the Wazuh app project will be documented in this file.
## Wazuh v4.4.1 - OpenSearch Dashboards 2.6.0 - Revision 00

### Fixed

- Fixed a visual error in the 'About' section. [#5337](https://github.com/wazuh/wazuh-kibana-app/pull/5337)
- Fixed the `Anomaly and malware detection` link. [#5329](https://github.com/wazuh/wazuh-kibana-app/pull/5329)

## Wazuh v4.4.0 - OpenSearch Dashboards 2.4.0 - Revision 06
Expand Down
6 changes: 5 additions & 1 deletion public/styles/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,10 @@ html{
margin-left: 16px;
}

.wz-margin-left-40 {
margin-left: 40px;
}

.no-margin-left {
margin-left: 0px;
}
Expand Down Expand Up @@ -232,7 +236,7 @@ html{
width: 100%;
}

.wz-mitre-width {
.wz-mitre-width {
width: calc(100% - 35px);
}

Expand Down
73 changes: 54 additions & 19 deletions public/templates/settings/settings.html
Original file line number Diff line number Diff line change
@@ -1,31 +1,55 @@
<!-- head -->
<div ng-cloak ng-controller="settingsController as ctrl">
<div ng-show="ctrl.load" style="padding: 16px">
<react-component name="EuiProgress" props="{size: 'xs', color: 'primary'}"></react-component>
<react-component
name="EuiProgress"
props="{size: 'xs', color: 'primary'}"
></react-component>
</div>

<div
ng-if="!ctrl.load && ctrl.settingsTabsProps && !ctrl.apiIsDown && ctrl.apiTableProps.apiEntries.length"
class="wz-margin-top-16 md-margin-h"
>
<react-component name="Tabs" props="ctrl.settingsTabsProps"></react-component>
<react-component
name="Tabs"
props="ctrl.settingsTabsProps"
></react-component>
</div>
<!-- end head -->
<!-- api -->
<div ng-if="ctrl.tab === 'api' && !ctrl.load">
<!-- API table section-->
<div ng-if="ctrl.apiEntries.length && !ctrl.addingApi && !ctrl.apiIsDown">
<react-component name="ApiTable" props="ctrl.apiTableProps"></react-component>
<react-component
name="ApiTable"
props="ctrl.apiTableProps"
></react-component>
</div>

<!-- Add API section-->
<div layout="row" layout-padding ng-if="!ctrl.apiEntries.length || ctrl.addingApi">
<react-component flex name="AddApi" props="ctrl.addApiProps"></react-component>
<div
layout="row"
layout-padding
ng-if="!ctrl.apiEntries.length || ctrl.addingApi"
>
<react-component
flex
name="AddApi"
props="ctrl.addApiProps"
></react-component>
</div>

<!-- API is down section-->
<div layout="column" layout-padding ng-if="ctrl.apiIsDown && !ctrl.addingApi">
<react-component name="ApiIsDown" props="ctrl.apiIsDownProps"></react-component>
<div
layout="column"
layout-padding
ng-if="ctrl.apiIsDown && !ctrl.addingApi"
>
<react-component
name="ApiIsDown"
props="ctrl.apiIsDownProps"
></react-component>
</div>
</div>
<!-- End API configuration card section -->
Expand All @@ -45,7 +69,10 @@
<!-- end configuration -->
<!-- logs -->
<div ng-if="ctrl.tab === 'logs' && !ctrl.load">
<react-component name="SettingsLogs" props="ctrl.settingsLogsProps"></react-component>
<react-component
name="SettingsLogs"
props="ctrl.settingsLogsProps"
></react-component>
</div>
<!-- end logs -->
<!-- miscellaneous -->
Expand All @@ -55,19 +82,23 @@
<!-- end miscellaneous -->
<!-- about -->
<div ng-if="ctrl.tab === 'about' && !ctrl.load">
<div class="euiPage euiPageBody">
<div class="euiPage euiPage--paddingMedium euiPageBody">
<!-- App information section -->
<div ng-if="!ctrl.load">
<div class="euiCallOut euiCallOut--primary" style="display: flex">
<div class="wz-text-truncatable" flex>
App version: <span class="wz-text-bold">{{ctrl.appInfo["app-version"]}}</span>
App version:
<span class="wz-text-bold">{{ctrl.appInfo["app-version"]}}</span>
</div>
<div class="wz-text-truncatable" flex>
App revision: <span class="wz-text-bold">{{ctrl.appInfo["revision"]}}</span>
App revision:
<span class="wz-text-bold">{{ctrl.appInfo["revision"]}}</span>
</div>
<div class="wz-text-truncatable" flex>
Install date:
<span class="wz-text-bold">{{ctrl.appInfo["installationDate"] | date : "medium"}}</span>
<span class="wz-text-bold"
>{{ctrl.appInfo["installationDate"] | date : "medium"}}</span
>
</div>
</div>
</div>
Expand Down Expand Up @@ -96,10 +127,11 @@ <h2 class="euiTitle euiTitle--medium">
<div class="euiSpacer euiSpacer--l"></div>
<div class="euiText euiText--medium">
<p>
{{ctrl.pluginAppName}} provides management and monitoring capabilities, giving users
control over the Wazuh infrastructure. You can monitor your agents
status and configuration, query and visualize your alert data and monitor manager
rules and configuration.
{{ctrl.pluginAppName}} provides management and monitoring
capabilities, giving users control over the Wazuh
infrastructure. You can monitor your agents status and
configuration, query and visualize your alert data and monitor
manager rules and configuration.
</p>
</div>
</div>
Expand All @@ -121,7 +153,10 @@ <h2 class="euiTitle euiTitle--medium">Community</h2>
</div>
<div class="euiSpacer euiSpacer--m"></div>
<div class="euiText euiText--medium">
<p>Enjoy your Wazuh experience and please don't hesitate to give us your feedback.</p>
<p>
Enjoy your Wazuh experience and please don't hesitate to give us
your feedback.
</p>
</div>
<div class="euiSpacer euiSpacer--l"></div>
<div layout="row" class="layout-align-center-center" flex>
Expand All @@ -130,12 +165,12 @@ <h2 class="euiTitle euiTitle--medium">Community</h2>
props="{iconType:'logoSlack', iconSize:'xxl', href: 'https://wazuh.com/community/join-us-on-slack/', target: '_blank', 'aria-label': 'Wazuh Slack'}"
></react-component>
<react-component
class="wz-margin-left-16"
class="wz-margin-left-40"
name="EuiButtonIcon"
props="{iconType: googleGroupsSVG, iconSize:'xxl', href: 'https://groups.google.com/forum/#!forum/wazuh', target: '_blank', 'aria-label': 'Wazuh forum'}"
></react-component>
<react-component
class="wz-margin-left-16"
class="wz-margin-left-40"
name="EuiButtonIcon"
props="{iconType:'logoGithub', iconSize:'xxl', href: 'https://github.com/wazuh/wazuh-kibana-app', target: '_blank', 'aria-label': 'Wazuh dashboard Github'}"
></react-component>
Expand Down

0 comments on commit 28fb593

Please sign in to comment.