How to insert badge into Gitlab readme.md?

Help
1

Hello,

Is any way to embed Netdata badge into Gitlab readme markdown file? When I write md-file in Typora editor I can see nice preview, but after commiting the file to gitlab, the badge disappeared.

<embed src="http://example.com:19999//api/v1/badge.svg?chart=mem.available&alarm=ram_available&refresh=auto" type="image/svg+xml" height="20"/>

Probably someone has an experience like this (or Github).

2 Likes
2

Hi Evan :wave:t2:,

The first thing that I notice is that you have a double // after the URL of the node.

Moreover, we have this doc on badges, which is in itself a nice set of examples of badges. You can look into the exact syntax of each badge by right-clicking on a badge and selecting inspect:

image
image1891×1892 1010 KB

2 Likes
3

Hi @OdysLam , thank you very much for your reply and helpful investigation. Actually my question has been resolved with your help. Sorry for my long answer :neutral_face:

Obviously, double // is not a problem, that code was copied as is from Netdata alarms modal window:

изображение

I tried to play with embedding html because it show me a nice preview in my favorite markdown editor Typora. But after reading Gitlab documentaion I’ve made some commits to my local gitlab directly from IDE and found a solution:

изображение

Finally I use the second URL from active alarms’ modal window.

изображение

This badge appears in my readme.md file with the following code:

[Disk IO backlog](http://example.com:19999/#menu_disk_submenu_sda) ![disk IO status](http://example.com:19999/api/v1/badge.svg?chart=disk_backlog.sda&alarm=10min_disk_backlog&refresh=auto "Disk IO backlog")

Honestly, auto refresh doesn’t work right now) but I’m happy :grinning: though disk performance is being degraded and everybody can see it when opens that readme))

1 Like
4

Hi Ivan, Kindly try with https instead of http. I tried the same with my sonarcloud in README file of gitHub and it worked like a charm. Thank you.

If any issues, kindly let us know here.

1 Like
5

Kindly use markdown code instead of embed script!!!

:slightly_smiling_face: :crossed_fingers: :crossed_fingers:

1 Like
6

Hi @Puratchidasan, you are welcome. Thank you for your feedback.

Sure, you are quite right! I realized that markdown capabilities depend on gitlab version, and differ for local or host-based repo as well as Gitlab vs Github. Probably newer versions support more syntax features.

1 Like
7

@ivan Thank you for the quick reply!!!

Feeling positive and motivated!!! Kudos!!!

Regards,
Dasan

8

This solution doesn’t work for Chrome browser :grinning:

изображение

Badges don’t show neither in gitlab nor in confluence. Need to explore this…

2 Likes
9

Hey Ivan,

Unfortunately, I haven’t played with badges, but please do share your experience with the rest of the community.

What is the error that it shows? Try opening the developer console of your chrome browser.

1 Like
10

The reason is in mixed content. Chrome (chromium) blocks http images in https website. Probably there are two solutions:

  1. Create https proxy in front of each agent.
  2. Use Content-Security-Policy meta tag.

For me, I would like to build a proxy for my servers. Hope this info will be helpful.