dashboard: display pics

Author: wuriyanto

config_example.json

@@ -5,103 +5,116 @@
             "url": "postgres://demo:12345@localhost:5432/demo?sslmode=disable",
             "checkInterval": 10,
             "enable": false,
-            "tags": ["product 1", "product 2"]
+            "tags": ["product 1", "product 2"],
+            "pics": ["alex", "jason"]
         },
 
         "postgresql_two": {
             "kind": "postgresql",
             "url": "postgres://demo:12345@localhost:5433/demo?sslmode=disable",
             "checkInterval": 10,
             "enable": false,
-            "tags": ["product 1", "product 2"]
+            "tags": ["product 1", "product 2"],
+            "pics": ["alex", "jason"]
         },
 
         "oracle_one": {
             "kind": "oracle",
             "url": "oracle://username:pass%[email protected]:1521/servicename",
             "checkInterval": 10,
             "enable": false,
-            "tags": ["product 1", "product 2"]
+            "tags": ["product 1", "product 2"],
+            "pics": ["alex", "jason"]
         },
 
         "mongodb_one": {
             "kind": "mongodb",
             "url": "mongodb://admin:admin@localhost:27017",
             "checkInterval": 10,
             "enable": false,
-            "tags": ["product 2"]
+            "tags": ["product 2"],
+            "pics": ["alex", "jason"]
         },
 
         "mysql_one": {
             "kind": "mysql",
             "url": "demo:123456@tcp(127.0.0.1:3306)/demo",
             "checkInterval": 5,
             "enable": false,
-            "tags": ["product 1"]
+            "tags": ["product 1"],
+            "pics": ["alex", "jason"]
         },
 
         "redis_one": {
             "kind": "redis",
             "url": "redis://:[email protected]:6379",
             "checkInterval": 5,
             "enable": false,
-            "tags": ["product 1", "product 2", "product 3"]
+            "tags": ["product 1", "product 2", "product 3"],
+            "pics": ["alex", "jason"]
         },
 
         "minio_one": {
             "kind": "web",
             "url": "https://minio-storage.com/minio/health/ready",
             "checkInterval": 10,
             "enable": false,
-            "tags": ["product 1", "product 2"]
+            "tags": ["product 1", "product 2"],
+            "pics": ["alex", "jason"]
         },
 
         "elasticsearch_cluster_one": {
             "kind": "elasticsearch",
             "url": "http://elastic:devpass@localhost:9200/_cluster/health?pretty",
             "checkInterval": 10,
             "enable": false,
-            "tags": ["product 1", "product 2"]
+            "tags": ["product 1", "product 2"],
+            "pics": ["alex", "jason"]
         },
 
         "kafka_cluster_one": {
             "kind": "kafka",
             "url": "kafka://myname:[email protected]:9093,10.1.1.2:9093,10.1.1.3:9093",
             "checkInterval": 5,
             "enable": false,
-            "tags": ["product 1", "product 2"]
+            "tags": ["product 1", "product 2"],
+            "pics": ["bimo", "walker"]
         },
 
         "kafka_local": {
             "kind": "kafka",
             "url": "kafka://127.0.0.1:9092",
             "checkInterval": 5,
             "enable": false,
-            "tags": ["product 1", "product 2"]
+            "tags": ["product 1", "product 2"],
+            "pics": ["ryan", "walker"]
         },
 
         "airflow_one": {
             "kind": "airflow",
             "url": "http://localhost:8080/health",
             "checkInterval": 10,
             "enable": false,
-            "tags": ["product 1"]
+            "tags": ["product 1"],
+            "pics": ["ryan", "walker"]
         },
 
         "airflow_flower_one": {
             "kind": "airflowflower",
             "url": "http://localhost:9090",
             "checkInterval": 10,
             "enable": false,
-            "tags": ["product 1", "product 2"]
+            "tags": ["product 1", "product 2"],
+            "pics": ["ryan", "walker"]
         },
 
         "dummy_one": {
             "kind": "dummy",
             "url": "https://minio-storage.com/minio/health/ready",
             "checkInterval": 5,
             "enable": true,
-            "tags": ["product 1", "product 2"]
+            "tags": ["product 1", "product 2"],
+            "pics": ["ryan", "walker"]
         },
 
         "server_1_storage_status": {
@@ -111,7 +124,8 @@
             "thresholdDiskUsage": 5,
             "fileSystem": "/dev/sdd",
             "enable": false,
-            "tags": ["product 1", "product 2"]
+            "tags": ["product 1", "product 2"],
+            "pics": ["ryan", "walker"]
         }
     },
 

dashboard/ui/src/pages/dashboard.js

@@ -153,6 +153,7 @@ function Dashboard() {
         <div style={{ flex: '1 1 auto', marginBottom: '10px' }}>
           <img
             src="tob.png"
+            title='Tob the Bot (https://github.com/telkomdev/tob)'
             alt="Logo"
             style={{
               width: '100px',
@@ -251,10 +252,17 @@ function Dashboard() {
                 {service.messageDetails}
               </span>
             )}
-            
+
+            {service.pics && service.pics.length > 0 && (
+              <span style={{ fontSize: '14px', color: '#555', marginBottom: '10px', fontWeight: 'bold' }}>
+                <span style={{ color: '#04a0bf' }}>PICs: {service.pics.join(', ')}</span> 
+              </span>
+            )}
+
             <span style={{ fontSize: '13px', color: '#555' }}>
               <span style={{ color: '#593f03' }}>Last checked: {service.latestCheckTime}</span> 
             </span>
+            
             {service.tags && (
               <div style={getTagsStyle()}>
                 {service.tags.map((tag, tagIndex) => (