mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-04 00:08:55 +00:00
923348bb43
### **PR Type** Enhancement, Bug fix, Documentation ___ ### **Description** - Extracted inline styles to scoped SCSS - Improved logs UI/UX and theming - Fixed flicker and pagination UX - Added reusable toolbar and collapse styles ___ ### Diagram Walkthrough ```mermaid flowchart LR SearchBar["SearchBar.vue"] -- "toolbar, toggles, menu UX" --> Styles["New SCSS modules"] IndexList["IndexList.vue"] -- "field list pagination, loading" --> Styles SearchResult["SearchResult.vue"] -- "histogram/table layout refactor" --> Styles Index["Index.vue"] -- "splitter/collapse UX, visualize container" --> Styles TenstackTable["TenstackTable.vue"] -- "table hover/headers theme" --> Styles DetailTable["DetailTable.vue"] -- "wrap toggle, layout" --> Styles History["SearchHistory.vue"] -- "wrap toggle, warning pill" --> Styles Scheduler["SearchSchedulersList.vue"] -- "rounded btn, external styles" --> Styles TransformSel["TransformSelector.vue"] -- "toolbarized toggle, icons" --> Styles FunctionSel["FunctionSelector.vue"] -- "class hooks, styles" --> Styles SyntaxGuide["SyntaxGuide.vue"] -- "dark mode class, ext styles" --> Styles JsonPreview["JsonPreview.vue"] -- "externalized styles" --> Styles App["App.vue"] -- "theme root class" --> AppStyles["app.scss: global scrollbar, collapse btn"] ``` <details> <summary><h3> File Walkthrough</h3></summary> <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><details><summary>31 files</summary><table> <tr> <td><strong>SearchBar.vue</strong><dd><code>Toolbar/UI cleanup, toggles and menus restyle</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-81893de4edf186b0556f610acb280c87baa2ffe67d3b48a60a866094c7635baf">+272/-585</a></td> </tr> <tr> <td><strong>IndexList.vue</strong><dd><code>Field list pagination UX, loading state, helpers</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-08f058f883b659e713e606991a7ea37ae1ff016b7cccef970489ab5840dc3d09">+133/-419</a></td> </tr> <tr> <td><strong>SearchResult.vue</strong><dd><code>Histogram/table layout classes, external styles</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-5e65533aa4754bb6d0074fda18ffc1ecacded3b9ca6bc28a161c3f6b12f20195">+30/-283</a></td> </tr> <tr> <td><strong>Index.vue</strong><dd><code>Splitter/collapse UX, visualize container cleanup</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-0323c3da69b369843c5d72bf4df5b00ca6b5147192a213baf331659ecf92af62">+99/-57</a> </td> </tr> <tr> <td><strong>DetailTable.vue</strong><dd><code>Wrap toggle restyle and list/table CSS extraction</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-80552b5d25fa6cef9fbbe430b1865d761c4b132284c2d2175afceea8cbabc8c7">+19/-79</a> </td> </tr> <tr> <td><strong>SearchSchedulersList.vue</strong><dd><code>Minor button rounding, moved styles to SCSS</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-0c0a4097c53f07712d35562b1336602bf24faddedab77a9f5717f5582dcac2f1">+2/-137</a> </td> </tr> <tr> <td><strong>TenstackTable.vue</strong><dd><code>Table container class and theming adjustments</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-bc3c669f5ab65a42ae378df1f7d6b35014c9c220790bdcc72b47f55d1385dc22">+5/-104</a> </td> </tr> <tr> <td><strong>SearchHistory.vue</strong><dd><code>Wrap toggle restyle and externalized styles</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-9dd167bd5e272b2057f53c16b905047eec00655a3552daad240a964d67a6f56d">+13/-100</a></td> </tr> <tr> <td><strong>TransformSelector.vue</strong><dd><code>Toolbarized transform toggle and SCSS import</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-0037d8dd9cfbacc26309b26e98ae953e7ccbd0891ac2fd01c6314ebd7eed9d2c">+25/-47</a> </td> </tr> <tr> <td><strong>JsonPreview.vue</strong><dd><code>Moved component styles to shared SCSS</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-3985073134d35ff074742944b114d0905524038b42e6d2ac887fef2c8436fb16">+1/-109</a> </td> </tr> <tr> <td><strong>SyntaxGuide.vue</strong><dd><code>Dark-mode class hook and SCSS extraction</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-c6e8bb651fadd2b15b5b97f5b6069a57813fb97cc3d06eef983af4def33e8806">+5/-67</a> </td> </tr> <tr> <td><strong>FunctionSelector.vue</strong><dd><code>Class hooks and SCSS module inclusion</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-11d9577516700b94b5f3325e77214d0d886473e690db8c9ea981613c9fb89b68">+5/-3</a> </td> </tr> <tr> <td><strong>VisualizeLogsQuery.vue</strong><dd><code>Externalized layout/splitter styles</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-979b01d943d58c5d70faeeac5948b7f02f0b2392a12b84ef07ba7f7393ab0261">+1/-50</a> </td> </tr> <tr> <td><strong>DateTime.vue</strong><dd><code>Rounded buttons and hover feedback</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-c06c96ba750be6fc82f517a53ba809efff8aa619aba203b871d4d2aeb7f64f60">+6/-2</a> </td> </tr> <tr> <td><strong>App.vue</strong><dd><code>Theme root class binding for global styles</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-7322e6842f92edbe4a6e810d63f066ec95e64806d64a02b52e2b9bef2a73db91">+7/-1</a> </td> </tr> <tr> <td><strong>app.scss</strong><dd><code>Global scrollbar, collapse button, toggles polish</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-5703d12504b0395cbfbbfad02a592bc391496026e5f03743102ce06c210ea05f">+142/-2</a> </td> </tr> <tr> <td><strong>search-result.scss</strong><dd><code>New SCSS for search result layout and table</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-e98f726aae49bdd5f8a426c8023eed612f3f33d52b0d458b7730990b3aafc41e">+235/-0</a> </td> </tr> <tr> <td><strong>detail-table.scss</strong><dd><code>New SCSS for detail table and panels</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-63d5673331a5ee1ab792d07831e4a6dbb0d2d40d2ad628652d57944e47a96338">+55/-0</a> </td> </tr> <tr> <td><strong>logs-page.scss</strong><dd><code>New SCSS for logs page structure and splitter</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-3d8458bb7b934b0529dcb35f85e008a4404510435ee4a636ff86e20cfd2970c9">+1401/-0</a></td> </tr> <tr> <td><strong>search-schedulerlist.scss</strong><dd><code>New SCSS for scheduler list views</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-42bbf309982cfcfd1cca270e80a2bddd35947e59dd91f600f5c85788af1e0802">+136/-0</a> </td> </tr> <tr> <td><strong>index-list.scss</strong><dd><code>New SCSS for field/index list</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-0a3be477d7575f8e412bf8092f91901dd1330c8458ebc2b24f96107647cfe200">+139/-0</a> </td> </tr> <tr> <td><strong>search-history.scss</strong><dd><code>New SCSS for search history page</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-01ae0807917e4de78780d9ec549ae2b57e3004e7be72cd77536ac5ae75bda3ed">+97/-0</a> </td> </tr> <tr> <td><strong>transform-selector.scss</strong><dd><code>New SCSS for transform selector controls</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-131c7ba7388ebe94d30b7f42ca12c30b0840a9f8d69622b68e573e829d9fa7d6">+99/-0</a> </td> </tr> <tr> <td><strong>syntax-guide.scss</strong><dd><code>New SCSS for syntax guide dialog</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-7173f5473b8fed57af19a3017f9823e68099745dc181f7996f0024fa8099535c">+78/-0</a> </td> </tr> <tr> <td><strong>tenstack-table.scss</strong><dd><code>New SCSS for data table and resizer</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-0175daf538e52ff95480cb40fadf8e26564474f15e39c5fe2d628f2d7e72aa78">+99/-0</a> </td> </tr> <tr> <td><strong>function-selector.scss</strong><dd><code>New SCSS for function selector</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-16e97b00c534fae20daf24545e4e6a37b83f59e22668eddfd2083c9d778a9032">+58/-0</a> </td> </tr> <tr> <td><strong>visualizelogs-query.scss</strong><dd><code>New SCSS for visualize logs layout</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-263f2af1f510ef9047a88f4cf438ffdc7b22cc598a56071900b898899d5bdab3">+50/-0</a> </td> </tr> <tr> <td><strong>json-preview.scss</strong><dd><code>New SCSS for JSON preview and menus</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-27d0a0d1ec327559e1c09ffec34a7fc937db12580f53d61f10897f378af7d6ff">+17/-0</a> </td> </tr> <tr> <td><strong>quasar-overrides.scss</strong><dd><code>Quasar overrides aligned to new tokens</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-563af58e60b7250169ebe9ced59dfe163a801a106d7f20964a8d20000b320af5">+16/-15</a> </td> </tr> <tr> <td><strong>_variables.scss</strong><dd><code>Variables updated for rem units and theming</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-b3e37ee00c17b89ad1177c5592504277aa645b374095c065ea8b3782df5e89a2">+1/-1</a> </td> </tr> <tr> <td><strong>quasar-variables.sass</strong><dd><code>Quasar variables tuned for new UI</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-bb2b39e6af7e949bef75bce0c7021310c42dd0945c30f963e3c8b599598bfdaa">+2/-2</a> </td> </tr> </table></details></td></tr><tr><td><strong>Documentation</strong></td><td><details><summary>1 files</summary><table> <tr> <td><strong>ui-guidelines.md</strong><dd><code>UI guidelines documentation added</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8790/files#diff-8c5e2f35601f7d06e3389626dd501fc84e694efd6cf0faab6dfaf92445483dfa">+1056/-0</a></td> </tr> </table></details></td></tr></tr></tbody></table> </details> ___ --------- Co-authored-by: Ashish Kolhe <ashish.j.kolhe@gmail.com> Co-authored-by: Shrinath Rao <shnath@openobserve.ai>
116 lines
5.2 KiB
JSON
116 lines
5.2 KiB
JSON
[
|
|
{
|
|
"kubernetes.annotations.kubectl.kubernetes.io/default-container": "prometheus",
|
|
"kubernetes.annotations.kubernetes.io/psp": "eks.privileged",
|
|
"kubernetes.container_hash": "quay.io/prometheus/prometheus@sha256:4748e26f9369ee7270a7cd3fb9385c1adb441c05792ce2bce2f6dd622fd91d38",
|
|
"kubernetes.container_image": "quay.io/prometheus/prometheus:v2.39.1",
|
|
"kubernetes.container_name": "prometheus",
|
|
"kubernetes.docker_id": "563f8f40062cd0188c11f39e89d47e6eacddb5624a8a93b39f77ec53b5c38bf5",
|
|
"kubernetes.host": "ip-10-2-50-35.us-east-2.compute.internal",
|
|
"kubernetes.labels.app.kubernetes.io/component": "prometheus",
|
|
"kubernetes.labels.app.kubernetes.io/instance": "k8s",
|
|
"kubernetes.labels.app.kubernetes.io/managed-by": "prometheus-operator",
|
|
"kubernetes.labels.app.kubernetes.io/name": "prometheus",
|
|
"kubernetes.labels.app.kubernetes.io/part-of": "kube-prometheus",
|
|
"kubernetes.labels.app.kubernetes.io/version": "2.39.1",
|
|
"kubernetes.labels.controller-revision-hash": "prometheus-k8s-5857d9766c",
|
|
"kubernetes.labels.operator.prometheus.io/name": "k8s",
|
|
"kubernetes.labels.operator.prometheus.io/shard": "0",
|
|
"kubernetes.labels.prometheus": "k8s",
|
|
"kubernetes.labels.statefulset.kubernetes.io/pod-name": "prometheus-k8s-1",
|
|
"kubernetes.namespace_name": "monitoring",
|
|
"kubernetes.pod_id": "ebdc171d-c891-495f-b4d6-e24711b70e64",
|
|
"kubernetes.pod_name": "prometheus-k8s-1",
|
|
"log": "ts=2022-12-27T14:09:59.212Z caller=klog.go:108 level=warn component=k8s_client_runtime func=Warningf msg=\"pkg/mod/k8s.io/client-go@v0.25.1/tools/cache/reflector.go:169: failed to list *v1.Pod: pods is forbidden: User \\\"system:serviceaccount:monitoring:prometheus-k8s\\\" cannot list resource \\\"pods\\\" in API group \\\"\\\" at the cluster scope\"",
|
|
"stream": "stderr",
|
|
"code": null,
|
|
"kubernetes.labels.app": null,
|
|
"kubernetes.labels.pod-template-hash": null,
|
|
"level": null,
|
|
"message": null,
|
|
"method": null,
|
|
"took": null,
|
|
"kubernetes.labels.name": null,
|
|
"kubernetes.labels.role": null,
|
|
"kubernetes.annotations.prometheus.io/path": null,
|
|
"kubernetes.annotations.prometheus.io/port": null,
|
|
"kubernetes.annotations.prometheus.io/scrape": null,
|
|
"kubernetes.labels.component": null,
|
|
"kubernetes.labels.deploy": null,
|
|
"service.name": "prometheus-monitoring-service",
|
|
"service.version": "2.39.1",
|
|
"service.environment": "production",
|
|
"service.namespace": "observability",
|
|
"service.instance.id": "prom-k8s-instance-1",
|
|
"cloud.provider": "aws",
|
|
"cloud.region": "us-east-2",
|
|
"cloud.availability_zone": "us-east-2a",
|
|
"cloud.account.id": "123456789012",
|
|
"cloud.platform": "aws_eks",
|
|
"host.name": "ip-10-2-50-35",
|
|
"host.id": "i-0abc123def456",
|
|
"host.type": "m5.xlarge",
|
|
"host.architecture": "x86_64",
|
|
"host.ip": "10.2.50.35",
|
|
"container.id": "563f8f40062c",
|
|
"container.runtime": "docker",
|
|
"container.runtime.version": "20.10.21",
|
|
"network.bytes.sent": 156842,
|
|
"network.bytes.received": 892341,
|
|
"network.packets.sent": 2341,
|
|
"network.packets.received": 5672,
|
|
"network.protocol.name": "tcp",
|
|
"network.protocol.version": "ipv4",
|
|
"http.method": "GET",
|
|
"http.status_code": 200,
|
|
"http.url": "https://api.example.com/v1/metrics",
|
|
"http.user_agent": "Prometheus/2.39.1",
|
|
"http.request.bytes": 512,
|
|
"http.response.bytes": 4096,
|
|
"http.request.id": "req-abc-123-xyz-789",
|
|
"database.name": "metricsdb",
|
|
"database.operation": "SELECT",
|
|
"database.statement": "SELECT * FROM metrics WHERE timestamp > NOW() - INTERVAL '1 hour'",
|
|
"database.user": "prometheus_readonly",
|
|
"database.connection.pool.name": "main_pool",
|
|
"trace.id": "4bf92f3577b34da6a3ce929d0e0e4736",
|
|
"span.id": "00f067aa0ba902b7",
|
|
"parent.span.id": "00f067aa0ba902b6",
|
|
"process.pid": 12345,
|
|
"process.command": "/bin/prometheus",
|
|
"process.command_line": "/bin/prometheus --config.file=/etc/prometheus/prometheus.yml",
|
|
"process.executable.name": "prometheus",
|
|
"process.executable.path": "/bin/prometheus",
|
|
"process.owner": "prometheus",
|
|
"process.runtime.name": "go",
|
|
"process.runtime.version": "go1.19.3",
|
|
"process.uptime": 345600,
|
|
"thread.id": 67890,
|
|
"thread.name": "worker-thread-5",
|
|
"cpu.usage.percent": 45.2,
|
|
"memory.usage.bytes": 2147483648,
|
|
"memory.available.bytes": 8589934592,
|
|
"memory.usage.percent": 25.0,
|
|
"disk.io.read.bytes": 524288000,
|
|
"disk.io.write.bytes": 1048576000,
|
|
"disk.io.read.operations": 15234,
|
|
"disk.io.write.operations": 8976,
|
|
"custom.field.alpha": "value-alpha-123",
|
|
"custom.field.beta": "value-beta-456",
|
|
"custom.field.gamma": "value-gamma-789",
|
|
"custom.field.delta": 42,
|
|
"custom.field.epsilon": 3.14159,
|
|
"custom.field.zeta": true,
|
|
"custom.field.eta": false,
|
|
"custom.field.theta": null,
|
|
"custom.array.field": ["item1", "item2", "item3"],
|
|
"custom.nested.field.level1": "nested-value-1",
|
|
"custom.nested.field.level2": "nested-value-2",
|
|
"tags.environment": "prod",
|
|
"tags.team": "platform",
|
|
"tags.owner": "sre-team",
|
|
"tags.cost_center": "engineering",
|
|
"tags.project": "observability-platform"
|
|
}
|
|
]
|