From 71df15738f154af5459e94d2ca54350156091056 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Fri, 13 Nov 2020 14:17:00 +0100
Subject: [PATCH] sort alphabetically unique labels, labels and parsed fields
 (#29030)

---
 .../src/components/Logs/LogDetails.tsx        | 32 ++++++++++---------
 .../src/components/Logs/LogLabels.tsx         |  2 +-
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/grafana-ui/src/components/Logs/LogDetails.tsx b/packages/grafana-ui/src/components/Logs/LogDetails.tsx
index 000bd7193f0..2ef5a8c4b21 100644
--- a/packages/grafana-ui/src/components/Logs/LogDetails.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogDetails.tsx
@@ -112,20 +112,22 @@ class UnThemedLogDetails extends PureComponent<Props> {
                     </td>
                   </tr>
                 )}
-                {Object.keys(labels).map(key => {
-                  const value = labels[key];
-                  return (
-                    <LogDetailsRow
-                      key={`${key}=${value}`}
-                      parsedKey={key}
-                      parsedValue={value}
-                      isLabel={true}
-                      getStats={() => calculateLogsLabelStats(getRows(), key)}
-                      onClickFilterOutLabel={onClickFilterOutLabel}
-                      onClickFilterLabel={onClickFilterLabel}
-                    />
-                  );
-                })}
+                {Object.keys(labels)
+                  .sort()
+                  .map(key => {
+                    const value = labels[key];
+                    return (
+                      <LogDetailsRow
+                        key={`${key}=${value}`}
+                        parsedKey={key}
+                        parsedValue={value}
+                        isLabel={true}
+                        getStats={() => calculateLogsLabelStats(getRows(), key)}
+                        onClickFilterOutLabel={onClickFilterOutLabel}
+                        onClickFilterLabel={onClickFilterLabel}
+                      />
+                    );
+                  })}
 
                 {parsedFieldsAvailable && (
                   <tr>
@@ -134,7 +136,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
                     </td>
                   </tr>
                 )}
-                {fields.map(field => {
+                {fields.sort().map(field => {
                   const { key, value, links, fieldIndex } = field;
                   return (
                     <LogDetailsRow
diff --git a/packages/grafana-ui/src/components/Logs/LogLabels.tsx b/packages/grafana-ui/src/components/Logs/LogLabels.tsx
index 0e8a2306486..ab21a2cfd02 100644
--- a/packages/grafana-ui/src/components/Logs/LogLabels.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogLabels.tsx
@@ -57,7 +57,7 @@ export const UnThemedLogLabels: FunctionComponent<Props> = ({ labels, theme }) =
 
   return (
     <span className={cx([styles.logsLabels])}>
-      {displayLabels.map(label => {
+      {displayLabels.sort().map(label => {
         const value = labels[label];
         const tooltip = `${label}: ${value}`;
         return (