Refactor the way assets are displayed in the messages (#15944)

* Refactor the way assets are displayed in the messages

* Rename asset plugin component name

* handle case where there is no associated_asset field

graylog2-web-interface/src/views/bindings.tsx

@@ -98,7 +98,6 @@ import ScatterVisualization from 'views/components/visualizations/scatter/Scatte
 import Icon from 'components/common/Icon';
 import viewsReducers from 'views/viewsReducers';
 import CreateEventDefinition from 'views/logic/valueactions/createEventDefinition/CreateEventDefinition';
-import ShowAssetInformation from 'views/logic/valueactions/ShowAssetInformation';
 
 import type { ActionHandlerArguments } from './components/actions/ActionHandler';
 import NumberVisualizationConfig from './logic/aggregationbuilder/visualizations/NumberVisualizationConfig';
@@ -127,26 +126,6 @@ Parameter.registerSubtype(LookupTableParameter.type, LookupTableParameter);
 
 const isAnalysisDisabled = (field: string, analysisDisabledFields: string[] = []) => analysisDisabledFields.includes(field);
 
-const GIMSchemaAssetLookupFields = [
-  'source_hostname',
-  'source_ip',
-  'source_ipv6',
-  'source_nat_ip',
-  'destination_hostname',
-  'destination_ip',
-  'destination_nat_ip',
-  'host_hostname',
-  'host_ip',
-  'host_ipv6',
-  'host_mac',
-  'vendor_private_ip',
-  'vendor_private_ipv6',
-  'vendor_public_ip',
-  'vendor_public_ipv6',
-  'event_observer_ip',
-  'event_source',
-];
-
 const exports: PluginExports = {
   pages: {
     search: { component: NewSearchPage },
@@ -363,13 +342,6 @@ const exports: PluginExports = {
       resetFocus: false,
       component: CreateEventDefinition,
     },
-    {
-      type: 'show-asset-information',
-      title: 'Show asset information',
-      isHidden: ({ field }: ActionHandlerArguments) => (GIMSchemaAssetLookupFields.indexOf(field) === -1),
-      resetFocus: false,
-      component: ShowAssetInformation,
-    },
   ], ['create-extractor']),
   visualizationTypes: visualizationBindings,
   widgetCreators: [{

graylog2-web-interface/src/views/components/actions/ActionHandler.tsx

@@ -70,7 +70,7 @@ type ThunkHandlerAction<Contexts> = {
   thunk: ThunkActionHandler<Contexts>,
 }
 type ComponentsHandlerAction = {
-  component: ActionComponentType | React.ComponentType,
+  component: ActionComponentType,
 };
 
 export type HandlerAction<Contexts> =

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+
+const FormatAssetList = ({ assets }: { assets: React.ReactElement[] }) => {
+  if (assets.length === 0) {
+    return null;
+  }
+
+  return (
+    <div>
+      <dt>Associated Assets</dt>
+      {assets.map((assetElement) => (
+        <div>
+          {assetElement}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FormatAssetList;

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

@@ -37,7 +37,9 @@ import type { FieldTypeMappingsList } from 'views/logic/fieldtypes/types';
 import { useStore } from 'stores/connect';
 import { SearchConfigStore } from 'views/stores/SearchConfigStore';
 import FormatReceivedBy from 'views/components/messagelist/FormatReceivedBy';
+import FormatAssetList from 'views/components/messagelist/FormatAssetList';
 import useIsLocalNode from 'views/hooks/useIsLocalNode';
+import usePluginEntities from 'hooks/usePluginEntities';
 
 import MessageDetailProviders from './MessageDetailProviders';
 import MessageActions from './MessageActions';
@@ -89,9 +91,16 @@ const MessageDetail = ({
   const { searchesClusterConfig } = useStore(SearchConfigStore);
   const [showOriginal, setShowOriginal] = useState(false);
   const { fields, index, id, decoration_stats: decorationStats } = message;
-  const { gl2_source_node, gl2_source_input } = fields;
+  const { gl2_source_node, gl2_source_input, associated_assets } = fields;
   const { isLocalNode } = useIsLocalNode(gl2_source_node);
   const additionalContext = useMemo(() => ({ isLocalNode }), [isLocalNode]);
+  const pluggableAssetListComponent = usePluginEntities('views.components.assetInformationActions');
+
+  const assetsList = React.useMemo(() => pluggableAssetListComponent.map(
+    ({ component: PluggableAssetListItem }) => (
+      <PluggableAssetListItem identifiers={associated_assets} />
+    ),
+  ), [pluggableAssetListComponent, associated_assets]);
 
   const _toggleShowOriginal = () => {
     setShowOriginal(!showOriginal);
@@ -166,7 +175,10 @@ const MessageDetail = ({
                                                    sourceNodeId={gl2_source_node}
                                                    sourceInputId={gl2_source_input} />
                                )}
-                               streams={streamsListItems} />
+                               streams={streamsListItems}
+                               assets={associated_assets ? (
+                                 <FormatAssetList assets={assetsList} />
+                               ) : <div />} />
               <MessageAugmentations message={message} />
             </Col>
             <Col md={9}>

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

@@ -24,9 +24,10 @@ type Props = {
   receivedBy: React.ReactElement,
   index: string,
   streams: Immutable.Set<React.ReactElement>,
+  assets: React.ReactElement,
 };
 
-const MessageMetadata = ({ timestamp, receivedBy, index, streams }: Props) => (
+const MessageMetadata = ({ timestamp, receivedBy, index, streams, assets }: Props) => (
   <MessageDetailsDefinitionList>
     {timestamp}
     {receivedBy}
@@ -44,6 +45,8 @@ const MessageMetadata = ({ timestamp, receivedBy, index, streams }: Props) => (
         </dd>
       </>
     )}
+
+    {assets}
   </MessageDetailsDefinitionList>
 );
 

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

@@ -260,8 +260,8 @@ type DashboardActionModalProps = {
   ref: React.Ref<unknown>,
 }
 
-type AssetActionComponentProps = {
-  identifier: unknown,
+type AssetInformationComponentProps = {
+  identifiers: unknown,
 }
 
 type DashboardAction = {
@@ -270,9 +270,8 @@ type DashboardAction = {
   modal?: React.ComponentType<DashboardActionModalProps>,
 }
 
-type AssetAction = {
-  key: string,
-  component: React.ComponentType<AssetActionComponentProps>,
+type AssetInformation = {
+  component: React.ComponentType<AssetInformationComponentProps>,
 }
 
 type EventActionComponentProps = {
@@ -405,7 +404,7 @@ declare module 'graylog-web-plugin/plugin' {
     systemConfigurations?: Array<SystemConfiguration>;
     valueActions?: Array<ActionDefinition>;
     'views.completers'?: Array<Completer>;
-    'views.components.assetValueActions'?: Array<AssetAction>;
+    'views.components.assetInformationActions'?: Array<AssetInformation>;
     'views.components.dashboardActions'?: Array<DashboardAction>;
     'views.components.eventActions'?: Array<{
       component: React.ComponentType<EventActionComponentProps>,