alot more changes

otel-ui/src/components/Tabs.tsx

@@ -23,9 +23,11 @@ import { TrendsVisualizer } from "./TrendsVisualizer"
 import { authFetch } from "../lib/auth"
 import type { Issue, LogEntry, OtelAttribute } from "../lib/types"
 import { formatAttributeValue, getServicePalette, getServiceName } from "../lib/otel-utils"
+import { KeyValue } from "./common/DetailField"
 import { TelemetryFilters } from "./TelemetryFilters"
 import { PatternsVisualizer } from "./PatternsVisualizer"
 import { RolloutsVisualizer } from "./RolloutsVisualizer"
+import { SourceIpsVisualizer } from "./SourceIpsVisualizer"
 
 
 type SeverityMeta = {
@@ -218,10 +220,7 @@ export const LogEntryView = ({ log }: { log: LogEntry }) => {
                       <p className="text-[10px] font-bold uppercase tracking-widest text-ds-text-3">Attributes</p>
                       <div className="space-y-1">
                         {(record.attributes ?? []).map(attr => (
-                          <div key={attr.key} className="flex gap-2">
-                            <span className="text-ds-accent shrink-0">{attr.key}:</span>
-                            <span className="text-ds-text-2 break-all">{formatAttributeValue(attr.value)}</span>
-                          </div>
+                          <KeyValue key={attr.key} name={attr.key} value={formatAttributeValue(attr.value)} />
                         ))}
                       </div>
                     </div>
@@ -231,10 +230,7 @@ export const LogEntryView = ({ log }: { log: LogEntry }) => {
                       <p className="text-[10px] font-bold uppercase tracking-widest text-ds-text-3">Resource</p>
                       <div className="space-y-1">
                         {(record.resourceAttributes ?? []).map(attr => (
-                          <div key={attr.key} className="flex gap-2">
-                            <span className="text-ds-ok shrink-0">{attr.key}:</span>
-                            <span className="text-ds-text-2 break-all">{formatAttributeValue(attr.value)}</span>
-                          </div>
+                          <KeyValue key={attr.key} name={attr.key} value={formatAttributeValue(attr.value)} />
                         ))}
                       </div>
                     </div>
@@ -336,6 +332,9 @@ export const TabsComponent = () => {
         <Tabs.Content className="outline-none py-2" value="tab9">
           {activeTab === "tab9" && <ViewErrorBoundary><RolloutsVisualizer /></ViewErrorBoundary>}
         </Tabs.Content>
+        <Tabs.Content className="outline-none py-2" value="tab10">
+          {activeTab === "tab10" && <ViewErrorBoundary><SourceIpsVisualizer /></ViewErrorBoundary>}
+        </Tabs.Content>
         <Tabs.Content
           className="outline-none py-2"
           value="tab2"