[Maps] Display vector tile API response in Console

[maksimkovalev]

Closes: #128534

Running the command get kibana_sample_data_logs/_mvt/geo.coordinates/0/0/0 in Console returns the vector tile source.

[elasticmachine]

Pinging @elastic/kibana-gis (Team:Geo)

[cjcenizal]

This is insanely cool.

[cjcenizal]

Had a few maintainability suggestions. Didn't test locally.

[Bamieh]

core changes LGTM. The fetch function handling the body as array bugger when the content type is a mapbox

[nickpeihl]

this is fantastic! so great to get rid of jQuery, too.

I added a couple of nits, but otherwise lgtm!

code review and tested in chrome

[nreese]

Can you please add a functional test to the https://github.com/elastic/kibana/tree/main/test/functional/apps/console folder to verify _mvt responses are displayed as expected

[elasticmachine]

Pinging @elastic/platform-deployment-management (Team:Deployment Management)

[nreese]

LGTM, being able to view vector tile results in console is such a big help for debugging. Thanks
code review, tested in chrome

[cjcenizal]

How about using toEqual to compare against a full object? This will give maintainers more insight into the expected output and will catch silly errors like defining one of these properties with an incorrect value.

@nreese I think this will also address 80% of your request to add a functional test. Functional tests are slower than unit tests and the Console ones have been especially flaky, so maybe we don't need to add functional test coverage if we enhance these units tests. WDYT?

[maksimkovalev]

I'm not really sure it's a good idea to compare to a full object, just because the typical response of vector tile data is a pretty big json object.
Here's an example of it, and this is just for one specific coordinate like 8/47/98:

Click to expand

{
  "meta":[
    {
      "geometry":{
        "type":"Polygon",
        "coordinates":[
          [
            [
              0,
              4096
            ],
            [
              4096,
              4096
            ],
            [
              4096,
              0
            ],
            [
              0,
              0
            ],
            [
              0,
              4096
            ]
          ]
        ]
      },
      "properties":{
        "_shards.failed":0,
        "_shards.skipped":0,
        "_shards.successful":1,
        "_shards.total":1,
        "aggregations._count.avg":5,
        "aggregations._count.count":3,
        "aggregations._count.max":8,
        "aggregations._count.min":3,
        "aggregations._count.sum":15,
        "hits.total.relation":"eq",
        "hits.total.value":15,
        "timed_out":false,
        "took":67
      }
    }
  ],
  "hits":[
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          3585,
          2204
        ]
      },
      "properties":{
        "_id":"-BbN9X8BEs3pqeJ47-oU",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          3175,
          3576
        ]
      },
      "properties":{
        "_id":"QhbN9X8BEs3pqeJ47-sU",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          3585,
          2204
        ]
      },
      "properties":{
        "_id":"GhfN9X8BEs3pqeJ49QJE",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          3175,
          3576
        ]
      },
      "properties":{
        "_id":"uhfN9X8BEs3pqeJ49w44",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          3585,
          2204
        ]
      },
      "properties":{
        "_id":"bhfN9X8BEs3pqeJ49xP6",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          3585,
          2204
        ]
      },
      "properties":{
        "_id":"XhfN9X8BEs3pqeJ4-iNJ",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          2603,
          1476
        ]
      },
      "properties":{
        "_id":"LxfN9X8BEs3pqeJ4-ykP",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          2603,
          1476
        ]
      },
      "properties":{
        "_id":"mxfN9X8BEs3pqeJ4-zDa",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          3585,
          2204
        ]
      },
      "properties":{
        "_id":"dhfN9X8BEs3pqeJ4_zlP",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          3585,
          2204
        ]
      },
      "properties":{
        "_id":"DRfN9X8BEs3pqeJ4_zpQ",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          3175,
          3576
        ]
      },
      "properties":{
        "_id":"ZxfO9X8BEs3pqeJ4Akf1",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          3585,
          2204
        ]
      },
      "properties":{
        "_id":"-xfO9X8BEs3pqeJ4Akf1",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          3585,
          2204
        ]
      },
      "properties":{
        "_id":"fxfO9X8BEs3pqeJ4ClfI",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          2603,
          1476
        ]
      },
      "properties":{
        "_id":"fxfO9X8BEs3pqeJ4C1rB",
        "_index":"kibana_sample_data_logs"
      }
    },
    {
      "geometry":{
        "type":"Point",
        "coordinates":[
          2603,
          1476
        ]
      },
      "properties":{
        "_id":"thfO9X8BEs3pqeJ4DFvc",
        "_index":"kibana_sample_data_logs"
      }
    }
  ],
  "aggs":[
    {
      "geometry":{
        "type":"Polygon",
        "coordinates":[
          [
            [
              3584,
              2208
            ],
            [
              3600,
              2208
            ],
            [
              3600,
              2192
            ],
            [
              3584,
              2192
            ],
            [
              3584,
              2208
            ]
          ]
        ]
      },
      "properties":{
        "_key":"16/12256/25225",
        "_count":8
      }
    },
    {
      "geometry":{
        "type":"Polygon",
        "coordinates":[
          [
            [
              2592,
              1488
            ],
            [
              2608,
              1488
            ],
            [
              2608,
              1472
            ],
            [
              2592,
              1472
            ],
            [
              2592,
              1488
            ]
          ]
        ]
      },
      "properties":{
        "_key":"16/12194/25180",
        "_count":4
      }
    },
    {
      "geometry":{
        "type":"Polygon",
        "coordinates":[
          [
            [
              3168,
              3584
            ],
            [
              3184,
              3584
            ],
            [
              3184,
              3568
            ],
            [
              3168,
              3568
            ],
            [
              3168,
              3584
            ]
          ]
        ]
      },
      "properties":{
        "_key":"16/12230/25311",
        "_count":3
      }
    }
  ]
}

[nreese]

I think this will also address 80% of your request to add a functional test. Functional tests are slower than unit tests and the Console ones have been especially flaky, so maybe we don't need to add functional test coverage if we enhance these units tests.

I am not as concerned with the output format as ensuring vector tile responses continue to work. There are lots of things that could break this that are not tied to the formatting of a vector tile to an output such as blocking/removing http header. The use case for running _mvt API commands in console is narrow so I think having a functional test to ensure everything continues to work adds a lot of value and is worth test maintenance costs.

I'm not really sure it's a good idea to compare to a full object, just because the typical response of vector tile data is a pretty big json object.

How about adding a query to the sample request so the tile only contains a single hit?

[cjcenizal]

Those are good points, Nathan. I'm +1 on giving a functional test a shot, but I suggest we run it through the flaky test runner. If it turns out to be flaky we can fall back to the unit test.

[yuliacech]

Thanks a lot for adding support for vector tile in Console, @maksimkovalev!
Code changes LGTM expect 1 comment about editorOutput. I tested locally and it seems like that causes an empty response for APIs that return text, for example GET _cat/indices.
I opened an issue to add more test coverage because this potential regression should have ideally been caught by a failing test.

[yuliacech]

Thanks a lot for adding a fix, @maksimkovalev!
Latest changes LGTM, re-tested locally 👍

[cjcenizal]

Thanks for making this change!

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 5afeec9
• Storybooks Preview
• Webpack Bundle Analyzer

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
console	172	181	+9

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
console	382.6KB	399.5KB	+16.9KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
core	320.1KB	320.2KB	+94.0B

History

• 💚 Build #37862 succeeded 0bee3c9
• 💚 Build #37487 succeeded 8907fae
• 💚 Build #37345 succeeded b7956d6
• 💚 Build #37157 succeeded 1c1925e
• 💚 Build #37037 succeeded c37ba4b
• 💛 Build #36859 was flaky e4a0158

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[nreese]

Ran flaky test runner, https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/447, and there were no failures with new functional tests.