Change Icon/Logo in OpenShift Topology View

Chan
2 min readMay 24, 2020

--

ใน OpenShift 4.x จะมี perspective สำหรับ Administrator และ Developer เพราะการใช้งานที่สะดวกตรงกับความต้องการของทั้ง 2 กลุ่ม โดยใน Developer view นี้จะมีเมนูชื่อ Topology ที่ช่วยให้เราเห็นภาพมากขึ้นว่า application ของเราที่ deploy ในแต่ละ project ประกอบไปด้วย service อะไรบ้างแล้วมีความสัมพันธ์กันอย่างไร

ref: https://www.redhat.com/en/blog/openshift-topology-view-milestone-towards-better-developer-experience

แต่บางครั้งเมื่อเรา deploy application เข้าไปแล้วกลับพบว่ามันดันไม่แสดง Logo หรือ Icon สวยๆซะงั้น ซึ่งจริงๆแล้วก็ไม่ได้กระทบกับการทำงานของ application เราแต่อย่างใด แต่มันก็แอบอยากให้มันดูสวยงามอ่ะ

สิ่งที่เราทำได้คือการใส่ label กับ node ที่เราต้องการให้แสดง icon ครับ โดยหลักระบบจะดูจาก label “app.kubernetes.io/name” ก่อนถ้าไม่มีจะไปดูที่ label “app.openshift.io/runtime” นั้นหมายความว่าถ้ามีทั้ง 2 ตัวมันจะยึดเอาจาก “app.kubernetes.io/name” เป็นหลักครับ

คำถามต่อมาคือแล้ว value ที่ใส่ให้กับ label 2 ตัวนี้คืออะไร เอกสารก็จะบอกว่าใส่ให้ตรงกับที่ predefine ไว้ (แล้วมัน predefine ไว้ตรงไหนเหรอ ???)

จากลองคุ้ยๆดูมันอ้างตามชื่อไฟล์ที่ใน path นี้ครับ

https://<openshift cluster>/static/assets/

ซึ่งถ้าเราเข้าไปก็จะเห็น list file .svg ยาวเป็นหางว่าวเลย เราก็เอาชื่อไฟล์ไม่ต้องมีนามสกุลมาใส่เป็น value ให้กับ label ทั้ง 2 ตัวข้างต้นได้เลยครับ เช่น

app.kubernetes.io/name=golang

app.kubernetes.io/name=aerogear

app.kubernetes.io/name=postgresql

ลองเล่นกันดูครับ

References:

  1. https://www.redhat.com/en/blog/openshift-topology-view-milestone-towards-better-developer-experience
  2. https://docs.openshift.com/container-platform/4.4/applications/application_life_cycle_management/odc-viewing-application-composition-using-topology-view.html

List .svg

1-deny-other-namespaces.svg

2-limit-certain-apps.svg

3-allow-ingress.svg

3scale.svg

4-default-deny-all.svg

5-web-allow-external.svg

6-web-db-allow-all-ns.svg

7-web-allow-production.svg

PatternFlyIcons-webfont.eot

PatternFlyIcons-webfont.svg

PatternFlyIcons-webfont.ttf

PatternFlyIcons-webfont.woff

RedHatDisplay-Bold.eot

RedHatDisplay-Bold.woff

RedHatDisplay-Medium.eot

RedHatDisplay-Medium.woff

RedHatDisplay-Regular.eot

RedHatDisplay-Regular.woff

RedHatText-Medium.eot

RedHatText-Medium.woff

RedHatText-Regular.eot

RedHatText-Regular.woff

aerogear.svg

amq.svg

angularjs.svg

ansible.svg

apache.svg

apiserversource.png

beaker.svg

bracket.svg

camel.svg

camelsource.svg

capedwarf.svg

cassandra.svg

catalog-icon.svg

clojure.svg

codeigniter.svg

containersource.png

cordova.png

cronjobsource.png

datagrid.svg

datavirt.svg

debian.svg

decisionserver.svg

django.svg

dockerfile.svg

dotnet.svg

drupal.svg

eap.svg

elastic.svg

erlang.svg

fa-solid-900.eot

fa-solid-900.svg

fa-solid-900.ttf

fa-solid-900.woff

fa-solid-900.woff2

fedora.svg

freebsd.svg

from-git.svg

git.svg

github.svg

gitlab.svg

glassfish.svg

golang.svg

grails.svg

hadoop.svg

haproxy.svg

helm.svg

infinispan.svg

jboss.svg

jenkins.svg

jetty.svg

joomla.svg

jruby.svg

js.svg

kafkasource.svg

knative.svg

kubevirt.svg

laravel.svg

load-balancer.svg

mariadb.svg

mediawiki.svg

memcached.svg

mongodb.svg

mssql.svg

mysql-database.svg

nginx.svg

nodejs.svg

okd-apple-touch-icon-precomposed.png

okd-favicon.png

okd-logo.svg

okd-mask-icon.svg

okd-mstile-144x144.png

openjdk.svg

openliberty.svg

openshift-apple-touch-icon-precomposed.png

openshift-dedicated-logo.svg

openshift-favicon.png

openshift-logo.svg

openshift-logos-icon.svg

openshift-logos-icon.ttf

openshift-logos-icon.woff

openshift-mask-icon.svg

openshift-mstile-144x144.png

openshift-online-logo.svg

openshift-platform-logo.svg

openshift.svg

openstack.svg

operator.svg

other-linux.svg

other-unknown.svg

perl.svg

pfbg_2000.jpg

pfbg_576.jpg

pfbg_576@2x.jpg

pfbg_768.jpg

pfbg_768@2x.jpg

pfbg_992.jpg

pfbg_992@2x.jpg

phalcon.svg

php.svg

play.svg

postgresql.svg

processserver.svg

python.svg

quarkus.svg

rabbitmq.svg

rails.svg

redhat.svg

redis.svg

restricted-sign.svg

rh-integration.svg

rh-tomcat.svg

ruby.svg

scala.svg

shadowman.svg

skeleton-chart-cpu.png

spring.svg

sso.svg

stackoverflow.svg

suse.svg

symfony.svg

tomcat.svg

ubuntu.svg

vertx.svg

wildfly.svg

windows.svg

wordpress.svg

xamarin.svg

yaml.svg

zend.svg

--

--

Responses (1)