feat: support environment filtering (#482)

<img width="221" alt="Screenshot 2024-07-24 at 2 34 07 PM" src="https://github.com/user-attachments/assets/2a4f9113-c567-4ce8-9992-6c11645c2126">

.changeset/rich-games-type.md

@@ -0,0 +1,6 @@
+---
+'@hyperdx/api': minor
+'@hyperdx/app': minor
+---
+
+feat: copy "deployment.environment" resource attribute to the top level (span)

.changeset/twelve-berries-double.md

@@ -0,0 +1,6 @@
+---
+'@hyperdx/api': patch
+'@hyperdx/app': patch
+---
+
+feat: support environment filtering

docker/ingestor/core.toml

@@ -746,6 +746,11 @@ if is_object(.r) {
     .b."k8s.deployment.name" = .b.process.tag."k8s.deployment.name"
   }
 
+  # copy common resource attributes to the top level
+  if is_nullish(.b."deployment.environment") && !is_nullish(.b.process.tag."deployment.environment") {
+    .b."deployment.environment" = .b.process.tag."deployment.environment"
+  }
+
   if (.b."span.kind" == "server") {
     if (exists(.b."http.status_code") && exists(.b."http.method") && exists(.b."http.route")) {
       .b._hdx_body = join([

packages/api/src/routers/api/chart.ts

@@ -24,7 +24,12 @@ router.get('/services', async (req, res, next) => {
       return res.sendStatus(403);
     }
 
-    const FIELDS = ['k8s.namespace.name', 'k8s.pod.name', 'k8s.pod.uid'];
+    const FIELDS = [
+      'deployment.environment',
+      'k8s.namespace.name',
+      'k8s.pod.name',
+      'k8s.pod.uid',
+    ];
     const nowInMs = Date.now();
     const startTime = nowInMs - ms('5d');
     const endTime = nowInMs;

packages/app/src/SearchPage.components.tsx

@@ -285,6 +285,19 @@ export const SearchPageFilters = ({
     }));
   }, [services]);
 
+  const environmentsOptions = React.useMemo(() => {
+    const allAttrs = Object.values(services?.data ?? {});
+    const envs = new Set<string>();
+    for (const attrs of allAttrs) {
+      for (const attr of attrs) {
+        if (attr['deployment.environment']) {
+          envs.add(attr['deployment.environment']);
+        }
+      }
+    }
+    return Array.from(envs).map(env => ({ value: env, label: env }));
+  }, [services]);
+
   const { setFilterValue, filters, clearFilter } = useSearchPageFilterState({
     searchQuery,
     onSearchQueryChange,
@@ -331,6 +344,18 @@ export const SearchPageFilters = ({
             onClearClick={() => clearFilter('service')}
             onOnlyClick={value => setFilterValue('service', value, true)}
           />
+
+          <FilterGroup
+            name="Environment"
+            options={environmentsOptions}
+            optionsLoading={isServicesLoading}
+            selectedValues={filters['deployment.environment']}
+            onChange={value => setFilterValue('deployment.environment', value)}
+            onClearClick={() => clearFilter('deployment.environment')}
+            onOnlyClick={value =>
+              setFilterValue('deployment.environment', value, true)
+            }
+          />
         </Stack>
       </ScrollArea>
     </div>

packages/app/src/api.ts

@@ -39,6 +39,7 @@ type ServicesResponse = {
   data: Record<
     string,
     Array<{
+      'deployment.environment'?: string;
       'k8s.namespace.name'?: string;
       'k8s.pod.name'?: string;
       'k8s.pod.uid'?: string;