From 4cb87b6b60e061edaf357bdb3ab9c660b30a75f2 Mon Sep 17 00:00:00 2001
From: Villena Guillaume <guillaume@villena.me>
Date: Tue, 24 Aug 2021 05:57:44 +0200
Subject: [PATCH] Annotations Panel: Show annotations end time if present
 (#38425)

* Annotation Panel: Show annotation end time if present

* Added hyphen between dates
---
 public/app/plugins/panel/annolist/AnnotationListItem.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/panel/annolist/AnnotationListItem.tsx b/public/app/plugins/panel/annolist/AnnotationListItem.tsx
index 51a90eb5dca..7bc1ab178c5 100644
--- a/public/app/plugins/panel/annolist/AnnotationListItem.tsx
+++ b/public/app/plugins/panel/annolist/AnnotationListItem.tsx
@@ -23,7 +23,7 @@ export const AnnotationListItem: FC<Props> = ({
 }) => {
   const styles = useStyles2(getStyles);
   const { showUser, showTags, showTime } = options;
-  const { text, login, email, avatarUrl, tags, time } = annotation;
+  const { text, login, email, avatarUrl, tags, time, timeEnd } = annotation;
   const onItemClick = (e: MouseEvent) => {
     e.stopPropagation();
     onClick(annotation);
@@ -33,6 +33,7 @@ export const AnnotationListItem: FC<Props> = ({
   };
   const showAvatar = login && showUser;
   const showTimeStamp = time && showTime;
+  const showTimeStampEnd = timeEnd && timeEnd !== time && showTime;
 
   return (
     <div>
@@ -40,6 +41,8 @@ export const AnnotationListItem: FC<Props> = ({
         <div className={styles.title}>
           <span>{text}</span>
           {showTimeStamp ? <TimeStamp formatDate={formatDate} time={time!} /> : null}
+          {showTimeStampEnd ? <span className={styles.time}>-</span> : null}
+          {showTimeStampEnd ? <TimeStamp formatDate={formatDate} time={timeEnd!} /> : null}
         </div>
         <div className={styles.login}>
           {showAvatar ? <Avatar email={email} login={login!} avatarUrl={avatarUrl} onClick={onLoginClick} /> : null}
@@ -129,6 +132,7 @@ function getStyles(theme: GrafanaTheme2) {
     `,
     time: css`
       margin-left: ${theme.spacing(1)};
+      margin-right: ${theme.spacing(1)}
       font-size: ${theme.typography.bodySmall.fontSize};
       color: ${theme.colors.text.secondary};
     `,