Beam metrics are unreadable in Flink history server

Beam metric values (payload) are not readable in Flink's web UI and Flink history server. Similar problem affected Spark history server and it was resolved in BEAM-10294.

Beam metrics are rendered by *MetricsContainerStepMap.toString()* method as JSON which is created from protobuffer defined in *metrics.proto* where metric's value is defined as bytes.

For example, metrics in Flink web UI used to look like:
```

MetricQueryResults(Counters(sets-by-key-bloomfilter/filter-by-bloom-filter/ParMultiDo(FilterByBloomFilter):org.apache.beam.sdk.extensions.sketching.BloomFilters$FilterByBloomFilterFn:filtered-out:
123456789))
```

Now they look like:

```

{\n \"metrics\": {\n \"attempted\": [{\n \"urn\": \"beam:metric:user:sum_int64:v1\",\n \"type\": \"beam:metrics:sum_int64:v1\",\n
\"payload\": \"ip0K\",\n \"labels\": {\n \"NAMESPACE\": \"ImageClicksReader\",\n \"NAME\": \"filtered-out\",\n
\"PTRANSFORM\": \"sets-by-key-bloomfilter/filter-by-bloom-filter/ParMultiDo(FilterByBloomFilter\"\n
}\n } \n} \n}
```

Imported from Jira [BEAM-12401](https://issues.apache.org/jira/browse/BEAM-12401). Original Jira may contain additional context.
Reported by: davidak09.