[BBC] Make additional fields visible on the UI via configuration

[ochiengolanga]

What does this change?

It introduces a way of rendering additional fields on the UI via configuration. This is achieved by adding the following configuration to Kahuna service and Media API service configuration file i.e.

• $USER/.grid/kahuna.conf or /etc/grid/kahuna.conf
• $USER/.grid/media-api.conf or /etc/grid/media-api.conf

where applicable (dev stage or prod stage respectively).

# Field aliases configurations that are used to define which metadata field is visible, searchable and has an alias on the UI
field.aliases = [
  {
    # Sets the image metadata tag to be used when filtering FileMetadata field
    elasticsearchPath = "fileMetadata.xmp.bbc:Programme-Maker"
    # Sets an alias for use in search, shouldn't have whitespace or special characters
    alias = "BBCProgrammeMaker"
    # Sets a human readable label that will rendered on the UI
    label = "BBC Programme Maker"
    # Sets the field alias to be displayed as a search hint when you type `+`
    displaySearchHint = false
  }
  {
    elasticsearchPath = "fileMetadata.xmp.xmp:CreatorTool"
    alias = "creatorTool"
    label = "Creator Tool"
    displaySearchHint = false
  }
  {
    elasticsearchPath = "fileMetadata.exif.Artist"
    alias = "artist"
    label = "Artist"
    displaySearchHint = true
  }
  {
    elasticsearchPath = "fileMetadata.iptc.Caption Writer/Editor"
    alias = "captionWriter"
    label = "Caption Writer / Editor"
    displaySearchHint = true
  }
  {
    elasticsearchPath = "fileMetadata.xmp.Iptc4xmpExt:DigitalSourceType"
    alias = "digitalSourceType"
    label = "Digital Source Type"
    displaySearchHint = false
  }
]

The approach is described in the proposal: #3167

How can success be measured?

On the Image view page, the configured fields are visible on the “Show additional metadata” section when expanded.

Screenshots

Who should look at this?

@AWare , @sihil , @paperboyo and @akash1810

Tested?

• locally by committer
• locally by Guardian reviewer
• on the Guardian's TEST environment

[ochiengolanga]

Sample image used:

[sihil]

We'll do a code review shortly but wanted to put this here as a general comment on the structure of the configuration.

We think that the configuration can be more generic. Specifically:

• Rather than have discreet objects for each metadata type it can be only one
• elasticsearchPath replaces tag and contains the full path instead of the suffix (means that it can be used for any field in ES)
• the alias is used in searching and chips
• label is introduced to be the human readable name
• The whole config becomes an array instead of an object as the keys are redundant and it means that ordering in the UI can be derived from the order here

Taking your example:

• xmp.bbc:Programme-Maker as Visible and Searchable with an alias “BBCProgrammeMaker”
• xmp.aux:Lens as Visible with an alias “AuxLens”
• xmp.CreatorTool as visible with an alias “Creator Tool”
• exif:Artist as visible and searchable with an alias “Artist”

# FileMetadata configurations that are used to define which metadata field is visible, searchable and has an alias on the UI
fieldAliases [
  {
    # Sets the image metadata tag to be used when filtering FileMetadata field
    elasticsearchPath = "fileMetadata.xmp.bbc:Programme-Maker"
    # Sets an alias for use in search, shouldn't have whitespace or special characters
    alias = "BBCProgrammeMaker"
    # Sets a human readable label that will rendered on the UI
    label = "BBC Programme Maker"
    # Sets the field alias to be displayed as a search hint when you type `+`
    displaySearchHint = false
  },
  {
    elasticsearchPath = "fileMetadata.xmp.aux:Lens"
    alias = "auxLens"
    label = "Aux Lens"
    displaySearchHint = false
  },
  {
    elasticsearchPath = "fileMetadata.xmp.CreatorTool"
    alias = "creatorTool"
    label = "Creator Tool"
    displaySearchHint = false
  },
  {
    elasticsearchPath = "fileMetadata.exif.Artist"
    alias = "artist"
    label = "Artist"
    displaySearchHint = true
  }
]

[sihil]

A few thoughts for you to look at. We're very happy to run through in a call if you have any questions or want to discuss further.

[sihil]

Morning @ochiengolanga. This PR is in good shape and very close to being ready. Comments are mainly tidying up this time around. With a little refactor of the ImageResponse code. Let me know if you have any questions.

If you're able to update the description of the PR to match the updated code that would be super helpful.

[sihil]

This is a really nice piece of additional functionality. Thanks @ochiengolanga!

This is fundamentally ready to go. I left a couple of minor comments but I'd be OK merging it as it is.

Please do go ahead and squash your commits and then I'll look to merge shortly after that.

[sihil]

Hi @ochiengolanga,
Have confirmed that this squash is good and will merge in the morning. Thanks again for this PR!

[sihil]

Tested at Guardian towers. Two minor points around the labels losing their casing and formatting of array values but we'll 🚢 this and raise an issue to resolve those.

[prout-bot]

Seen on usage, collections, auth, image-loader-projection (created by @ochiengolanga and merged by @sihil 8 minutes and 36 seconds ago) Please check your changes!

[prout-bot]

Seen on kahuna, metadata-editor (created by @ochiengolanga and merged by @sihil 8 minutes and 41 seconds ago) Please check your changes!

[prout-bot]

Seen on media-api (created by @ochiengolanga and merged by @sihil 8 minutes and 51 seconds ago) Please check your changes!

[prout-bot]

Seen on leases (created by @ochiengolanga and merged by @sihil 8 minutes and 56 seconds ago) Please check your changes!

[prout-bot]

Seen on cropper (created by @ochiengolanga and merged by @sihil 9 minutes and 1 second ago) Please check your changes!

[prout-bot]

Seen on image-loader (created by @ochiengolanga and merged by @sihil 9 minutes and 8 seconds ago) Please check your changes!