github
/
statping
mirror of https://github.com/statping/statping
1
0
Fork 0
Code Issues Releases Wiki Activity

PCORE-2213: cosmetic changes on incident updates (#38) 

* feat: minor cosmetic change in showing dates

* feat: minor cosmetic change in showing dates

* feat: scroll to input when editing incident

* fix: class to classname

* fix: added array check for api data

* feat: used created_at instead of updated_at

* feat: added empty message when no incident updates are there
pull/1113/head
Smit Patel 2022-08-16 12:50:22 +05:30 committed by GitHub
parent 14e6b69c6b
commit a51d42b2e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
react-frontend/src/components/IncidentsBlock.jsx
View File

@ -17,7 +17,7 @@ const IncidentsBlock = ({ service, group }) => {
data = await API.incidents_service(service.id); data = await API.incidents_service(service.id);
} }
if(Array.isArray(data)) { if (Array.isArray(data)) {
setIncidents(data); setIncidents(data);
} }
} }
@ -36,8 +36,7 @@ const IncidentsBlock = ({ service, group }) => {
{incidents?.length > 0 ? ( {incidents?.length > 0 ? (
incidents?.map((incident) => { incidents?.map((incident) => {
const { id, title, description, updates, updated_at } = incident; const { id, title, description, updates, updated_at } = incident;
const latestUpdate = const latestUpdate = updates?.length > 0 && updates[0];
updates?.length > 0 && updates[0];
const updatedAt = latestUpdate const updatedAt = latestUpdate
? latestUpdate.created_at ? latestUpdate.created_at
: updated_at; : updated_at;
@ -50,25 +49,23 @@ const IncidentsBlock = ({ service, group }) => {
className={`incident-title col-12 ${ className={`incident-title col-12 ${
incidentsShow[id] && "mb-3" incidentsShow[id] && "mb-3"
}`}> }`}>
{updates?.length > 0 && ( <>
<> {incidentsShow[id] ? (
{incidentsShow[id] ? ( <button
<button className="square-minus"
className="square-minus" type="button"
type="button" id={id}
id={id} onClick={handleIncidentShow}
onClick={handleIncidentShow} />
/> ) : (
) : ( <button
<button className="square-plus"
className="square-plus" type="button"
type="button" id={id}
id={id} onClick={handleIncidentShow}
onClick={handleIncidentShow} />
/> )}
)} </>
</>
)}
<div className="title-wrapper"> <div className="title-wrapper">
<span className="subtitle no-decoration">{title}</span> <span className="subtitle no-decoration">{title}</span>
@ -87,15 +84,29 @@ const IncidentsBlock = ({ service, group }) => {
{incidentsShow[id] && ( {incidentsShow[id] && (
<div className="incident-updates-wrapper col-12"> <div className="incident-updates-wrapper col-12">
{updates?.map((update) => { {updates?.length > 0 ? (
return ( <>
<IncidentUpdate {updates?.map((update) => {
key={update.id} return (
update={update} <IncidentUpdate
admin={false} key={update.id}
/> update={update}
); admin={false}
})} />
);
})}
</>
) : (
<div className="d-flex">
<div className="mr-2 d-flex align-items-center">
<span className="dot"></span>
</div>
<div className="font-14 text-muted">
No recent updates
</div>
</div>
)}
</div> </div>
)} )}
</Fragment> </Fragment>