synced with kubevious oss

client/src/components/About/index.js

@@ -7,7 +7,7 @@ import { isEmptyArray } from '../../utils/util'
 
 const About = ({ result }) => {
     return(
-        <div className="about">
+        <div className="About-wrapper p-40 overflow-hide">
             <div className="container-header">
                 <h3>About Kubevious</h3>
             </div>

client/src/components/Alerts/AlertView/index.js

@@ -0,0 +1,141 @@
+/*** UNDER NO CIRCUMSTANCES DO NOT EDIT THIS FILE. THIS FILE IS COPIED                                    ***/
+/*** FROM OSS UI. ANY CHANGES TO BE MADE IN KUBEVIOUS OSS UI.                                             ***/
+/*** SOURCE: ../ui.git/src/src/components/Alerts/AlertView/index.js                                       ***/
+
+import React, { useState } from 'react'
+import { parseDn } from '../../../utils/naming-utils';
+import cx from 'classnames'
+import { prettyKind } from '../../../utils/ui-utils';
+import { sortSeverity, uniqueMessages, uniqueObjects } from '../../../utils/util';
+
+const AlertView = ({ alerts, clickDn, openRule }) => {
+    const [group, setGroup] = useState('no')
+
+    const clickMessage = (alert) => {
+        if (alert.source.kind === 'rule') {
+            openRule(alert.source.id)
+        }
+    }
+
+    const renderAlert = ({ alert, index, shouldRenderDn = true }) => {
+        return (
+            <div className={cx('alert-detail', { 'even': index % 2 !== 0 })} key={alert.id}>
+                <div className={cx('message-container', { 'rule': alert.source.kind === 'rule' })}
+                     onClick={() => clickMessage(alert)}>
+                    <div className={'alert-item ' + alert.severity} />
+                    {alert.msg}
+                </div>
+
+                {shouldRenderDn && renderDnParts(alert.dn)}
+            </div>
+        )
+    }
+
+    const renderDnParts = (dn) => {
+        const dnParts = parseDn(dn).slice(1)
+
+        return (
+            <div className="dn-container" key={dn} onClick={() => clickDn(dn)}>
+                <div className="logo-container">
+                    <img className="dn-logo" src="/img/entities/ns.svg" alt="logo" />
+                </div>
+                <div className="parts-container">
+                    {dnParts.map(part => (
+                        <span className="dn-part" key={part.name}>
+                        {prettyKind(part.kind)} {part.name}
+                    </span>
+                    ))}
+                </div>
+            </div>
+        )
+    }
+
+    const renderMessageGroup = () => {
+        const messages = uniqueMessages(alerts.map(({ msg, severity, source }) => ({ msg, severity, source })))
+            .map(m => ({
+                ...m,
+                alerts: alerts.filter(a => a.severity === m.severity && a.msg === m.msg),
+            })).sort(sortSeverity)
+
+        return (
+            <>
+                {messages.map((message, index) => (
+                    <div className="message-group-container" key={index}>
+                        <div className="message-container" onClick={() => clickMessage(message)}>
+                            <div className={'alert-item ' + message.severity} />
+                            {message.msg}
+                        </div>
+
+                        <div className="message-objects">
+                            {message.alerts.map(alert => renderDnParts(alert.dn))}
+                        </div>
+                    </div>
+                ))}
+            </>
+        )
+    }
+
+    const renderObjectGroup = () => {
+        const objects = uniqueObjects(alerts.map(({ dn }) => ({ dn })))
+            .map(o => ({
+                ...o,
+                alerts: alerts.filter(a => a.dn === o.dn),
+            }))
+
+        return (
+            <>
+                {objects.map((object, index) => (
+                    <div className="message-group-container" key={index}>
+                        <div className="object-container">
+                            {renderDnParts(object.dn)}
+                        </div>
+
+                        <div className="message-objects">
+                            {object.alerts.map(alert => renderAlert({ alert, shouldRenderDn: false }))}
+                        </div>
+                    </div>
+                ))}
+            </>
+        )
+    }
+
+    return (
+        <div className="AlertView-container">
+            <div className={`alerts group-${group}`}>
+                {group === 'no' && <>
+                    {alerts.map((alert, index) => renderAlert({ alert, index }))}
+                </>}
+
+                {group === 'message' && renderMessageGroup()}
+
+                {group === 'object' && renderObjectGroup()}
+            </div>
+
+
+            <div className="group-options">
+                <div
+                    className={cx('option', { 'selected': group === 'no' })}
+                    onClick={() => setGroup('no')}
+                >
+                    No Group
+                </div>
+
+                <div
+                    className={cx('option', { 'selected': group === 'object' })}
+                    onClick={() => setGroup('object')}
+                >
+                    Group by Object
+                </div>
+
+                <div
+                    className={cx('option', { 'selected': group === 'message' })}
+                    onClick={() => setGroup('message')}
+                >
+                    Group by Message
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default AlertView

client/src/components/Alerts/index.js

@@ -4,8 +4,8 @@
 
 import React from 'react'
 import BaseComponent from '../../HOC/BaseComponent'
-import AlertTable from './AlertTable'
-import { isEmptyArray } from '../../utils/util'
+import AlertView from './AlertView'
+import { isEmptyArray, sortSeverity } from '../../utils/util'
 
 import './styles.scss'
 
@@ -14,23 +14,42 @@ class Alerts extends BaseComponent {
         super(props)
 
         this.state = {
-            alerts: []
+            alerts: [],
         }
+
+        this.clickDn = this.clickDn.bind(this)
+        this.openRule = this.openRule.bind(this)
     }
 
     componentDidMount() {
         this.subscribeToSharedState('selected_object_alerts',
             selected_object_assets => {
                 this.setState({ alerts: selected_object_assets })
             })
+
+        document.getElementById('alertsComponent').parentElement.style.overflow = 'hidden'
+    }
+
+    clickDn(dn) {
+        this.sharedState.set('selected_dn', dn);
+        this.sharedState.set('auto_pan_to_selected_dn', true);
+    }
+
+    openRule(ruleName) {
+        this.sharedState.set('rule_editor_selected_rule_id', ruleName);
+        this.sharedState.set('focus_rule_editor', true);
     }
 
     render() {
         const { alerts } = this.state
 
         return (
             <div id="alertsComponent">
-                {!isEmptyArray(alerts) && <AlertTable alerts={alerts}/>}
+                {!isEmptyArray(alerts) && <AlertView
+                    alerts={alerts.sort(sortSeverity)}
+                    clickDn={this.clickDn}
+                    openRule={this.openRule}
+                />}
             </div>
         )
     }