Nit/associated assets UI improvement (#22041)

* nit: Improve assoc asset ui

* Increase visibility of Geo lat/long fields

* nit: Fixed MarkdownEditor width and event details styling

---------

Co-authored-by: Dan Torrey <[email protected]>

Author: zeeklop

graylog2-server/src/main/java/org/graylog/plugins/map/geoip/GeoLocationInformation.java

@@ -28,8 +28,8 @@
 @AutoValue
 @JsonDeserialize(builder = GeoLocationInformation.Builder.class)
 public abstract class GeoLocationInformation {
-    private static final String FIELD_LATITUDE = "latitude";
-    private static final String FIELD_LONGITUDE = "longitude";
+    public static final String FIELD_LATITUDE = "latitude";
+    public static final String FIELD_LONGITUDE = "longitude";
     private static final String FIELD_COUNTRY_ISO_CODE = "country_iso_code";
     private static final String FIELD_COUNTRY_NAME = "country_name";
     private static final String FIELD_CITY_NAME = "city_name";

graylog2-web-interface/src/components/common/MarkdownEditor/Preview.tsx

@@ -37,6 +37,7 @@ const Container = styled.div<{ $height?: number; $noBackground?: boolean; $noBor
 
   height: ${({ $height }) => ($height ? `${$height}px` : 'auto')};
   min-height: 100px;
+  width: 100%;
 `;
 
 const ExpandIcon = styled(Icon)`

graylog2-web-interface/src/components/events/events/EventDetailsTable.tsx

@@ -50,9 +50,7 @@ const EventDetailsTable = <E extends EntityBase = Event>({
 
         return (
           <tr key={attribute.id}>
-            <TD>
-              <b>{attribute.title}</b>
-            </TD>
+            {attribute.title && <TD><b>{attribute.title}</b></TD>}
             <td>{renderCell ? renderCell(value, event, attribute, meta) : value}</td>
           </tr>
         );

graylog2-web-interface/src/views/components/messagelist/FormatAssetList.tsx

@@ -38,7 +38,8 @@ const FormatAssetList = ({ associated_assets, fieldType }: { associated_assets:
     () =>
       pluggableAssetListComponent.map(({ component: PluggableAssetListItem }) => (
         <PluggableAssetListItem
-          identifiers={associated_assets}
+          assetIds={associated_assets}
+          direction="col"
           addToQuery={(id) => handleAddToQuery(dispatch, queryId, id, fieldType)}
         />
       )),
@@ -53,7 +54,7 @@ const FormatAssetList = ({ associated_assets, fieldType }: { associated_assets:
     <div>
       <dt>Associated Assets</dt>
       {assetsList.map((assetElement) => (
-        <div key={assetElement.props.identifiers[0]}>{assetElement}</div>
+        <div key={assetElement.props.assetIds[0]}>{assetElement}</div>
       ))}
     </div>
   );

graylog2-web-interface/src/views/types.ts

@@ -310,8 +310,9 @@ type SearchActionModalProps = React.PropsWithRef<{
 };
 
 type AssetInformationComponentProps = {
-  identifiers: unknown;
-  addToQuery: (id: string) => void;
+  assetIds: unknown;
+  direction?: 'col' | 'row';
+  addToQuery?: (id: string) => void;
 };
 
 type SearchAction = {