Skip to content
This repository was archived by the owner on Sep 12, 2024. It is now read-only.

Decouple rca fe #970

Merged
merged 7 commits into from
Jun 3, 2022
Merged

Decouple rca fe #970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
918323f
UI changes for decoupled RCA
May 30, 2022
d36a09b
Merge branch 'develop' of github.com:chaos-genius/chaos_genius into d…
May 30, 2022
5cf437c
changed env variable name for hasdrilldowns
May 31, 2022
b31e4d8
corrected variable names
May 31, 2022
e149de1
merge develop
May 31, 2022
578e926
taken hasdrilldowns from global-config
Jun 1, 2022
a4ab11d
Merge branch 'develop' of github.com:chaos-genius/chaos_genius into d…
Jun 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added frontend/src/assets/Animations/PH_Animation.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 43 additions & 0 deletions frontend/src/components/Anomaly/anomaly.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,41 @@
}
}
}
.ddgif_parent_container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.info-container {
width: 214px;
text-align: center;
margin-top: 20px;
span {
color: #7a7a7a;
font-size: 16px;
font-weight: 500;
}
.bold--info-text {
font-weight: 700;
color: #222222;
}
}
.ddGif-container {
display: flex;
align-items: center;
width: 270px;
height: 200px;
margin: 10px;
justify-content: center;
img {
height: 200px;
width: 250px;
box-shadow: 3px 3px 3px 3px rgba(22, 22, 22, 0.05);
}
}
.time-stamp {
font-size: 12px;
font-weight: 400;
Expand Down Expand Up @@ -79,3 +114,11 @@
}
}
}

.gif-container {
padding: 12px 24px;
height: 430px;
&.drilldown-disable {
display: none;
}
}
82 changes: 27 additions & 55 deletions frontend/src/components/Anomaly/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import { formatDateTime, getTimezone } from '../../utils/date-helper';
import { HRNumbers } from '../../utils/Formatting/Numbers/humanReadableNumberFormatter';
import './anomaly.scss';

import deepDrillGif from '../../assets/Animations/PH_Animation.gif';

import {
anomalyDetection,
anomalyDrilldown,
Expand All @@ -25,7 +27,6 @@ import {
} from '../../redux/actions';
import store from '../../redux/store';
import SubdimensionEmpty from '../SubdimensionEmpty';
import EmptyDataQualityAnomaly from '../EmptyDataQualityAnomaly';

import { useToast } from 'react-toast-wnm';
import { CustomContent, CustomActions } from '../../utils/toast-helper';
Expand Down Expand Up @@ -59,8 +60,7 @@ const Anomaly = ({ kpi, anomalystatus, dashboard }) => {
const [subDimLoading, setSubDimloading] = useState(true);
const [retrainOn, setRetrainOn] = useState(false);
const [subDimList, setSubDimList] = useState([]);
const [drilldownCollapse, setDrilldownCollapse] = useState(false);
const [dataQualityCollapse, setDataQualityCollapse] = useState(false);
const [drilldownCollapse, setDrilldownCollapse] = useState(true);
const [anomalStatusInfo, setAnomalyStatusInfo] = useState(false);
const [kpiTab, setKPITab] = useState('Overall KPI');

Expand Down Expand Up @@ -570,9 +570,7 @@ const Anomaly = ({ kpi, anomalystatus, dashboard }) => {
)}
</div>
</div>
{itemList &&
anomalyDrilldownData !== '' &&
kpiTab === 'Overall KPI' ? (
{kpiTab === 'Overall KPI' ? (
<div className="dashboard-layout">
<div
className={
Expand All @@ -593,7 +591,29 @@ const Anomaly = ({ kpi, anomalystatus, dashboard }) => {
<img src={Toparrow} alt="CollapseOpen" />
</div>
</div>
{drilldownCollapse ? (
{itemList.length === 0 && (
<div
className={
drilldownCollapse
? 'gif-container'
: 'gif-container drilldown-disable'
}>
<div className="ddgif_parent_container">
<div className="ddGif-container">
<img src={deepDrillGif} alt="deepDrillclick" />
</div>
<div className="info-container">
<span>
Click on the above graph to view{' '}
<span className="bold--info-text">Drill Downs</span>
</span>
</div>
</div>
</div>
)}
{drilldownCollapse &&
itemList &&
anomalyDrilldownData !== '' ? (
<>
{itemList.length ? (
<div
Expand All @@ -613,54 +633,6 @@ const Anomaly = ({ kpi, anomalystatus, dashboard }) => {
) : null}
</div>
) : null}

{kpiTab === 'Overall KPI' ? (
<div className="dashboard-layout">
<div
className={
!dataQualityCollapse
? 'dashboard-header-wrapper header-wrapper-disable'
: 'dashboard-header-wrapper'
}
onClick={() =>
setDataQualityCollapse(!dataQualityCollapse)
}>
<div className="dashboard-header">
<h3>Data Quality</h3>
</div>
<div
className={
!dataQualityCollapse
? 'header-collapse header-disable'
: 'header-collapse'
}>
<img src={Toparrow} alt="CollapseOpen" />
</div>
</div>
{dataQualityCollapse ? (
<>
{anomalyQualityData !== '' &&
dataQualityList &&
dataQualityList.length !== 0 ? (
<div
className={
dataQualityCollapse
? 'dashboard-container'
: 'dashboard-container drilldown-disable'
}>
{dataQualityList}
</div>
) : (
anomalyQualityData !== '' && (
<div className="anomaly-drilldown-empty">
<EmptyDataQualityAnomaly />
</div>
)
)}
</>
) : null}
</div>
) : null}
</>
) : (
anomalyDetectionData !== '' && <Noresult title="Anomaly" />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/DashboardGraph/dashboardgraph.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@
display: flex;
flex-direction: row;
justify-content: space-between;
height: 118px;
height: 102px;
padding-bottom: 15px;
.aggregate-card-container {
width: 100%;
Expand Down
Loading