sort alphabetically unique labels, labels and parsed fields (#29030)

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

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 (