cbrs UI test pr (meant to be used to play around, won't merge)

snuba/admin/rpc/rpc_queries.py

@@ -2,6 +2,9 @@
 
 from snuba import settings
 from snuba.web.rpc.common.exceptions import BadSnubaRPCRequestException
+from snuba.web.rpc.storage_routing.routing_strategies.storage_routing import (
+    BaseRoutingStrategy,
+)
 
 
 def _validate_projects_in_query(project_ids: List[int]) -> None:
@@ -30,3 +33,7 @@ def validate_request_meta(request_proto: Any) -> None:
     project_ids = list(meta.project_ids)
     _validate_org_ids_in_query(org_id)
     _validate_projects_in_query(project_ids)
+
+
+def get_routing_strategies() -> List[str]:
+    return list(BaseRoutingStrategy.all_names())

snuba/admin/static/api_client.tsx

@@ -35,7 +35,7 @@ import {
   CardinalityQueryResult,
 } from "SnubaAdmin/cardinality_analyzer/types";
 
-import { AllocationPolicy } from "SnubaAdmin/capacity_management/types";
+import { AllocationPolicy, ConfigurableComponent, Configuration, Entity } from "SnubaAdmin/capacity_management/types";
 
 import { ReplayInstruction, Topic } from "SnubaAdmin/dead_letter_queue/types";
 import { AutoReplacementsBypassProjectsData } from "SnubaAdmin/auto_replacements_bypass_projects/types";
@@ -83,18 +83,20 @@ interface Client {
   getAllMigrationGroups: () => Promise<MigrationGroupResult[]>;
   runMigration: (req: RunMigrationRequest) => Promise<RunMigrationResult>;
   getAllowedTools: () => Promise<AllowedTools>;
+  getRoutingStrategies: () => Promise<string[]>;
   getStoragesWithAllocationPolicies: () => Promise<string[]>;
-  getAllocationPolicies: (storage: string) => Promise<AllocationPolicy[]>;
-  setAllocationPolicyConfig: (
-    storage: string,
-    policy: string,
+  getAllocationPolicies: (entity: Entity) => Promise<AllocationPolicy[]>;
+  getRoutingStrategyConfigs: (strategy_name: string) => Promise<Configuration[]>;
+  setConfiguration: (
+    entity: Entity,
+    configurable_component: ConfigurableComponent,
     key: string,
     value: string,
     params: object,
   ) => Promise<void>;
-  deleteAllocationPolicyConfig: (
-    storage: string,
-    policy: string,
+  deleteConfiguration: (
+    entity: Entity,
+    configurable_component: ConfigurableComponent,
     key: string,
     params: object,
   ) => Promise<void>;
@@ -445,31 +447,57 @@ function Client(): Client {
       }).then((resp) => resp.json());
     },
 
+    getRoutingStrategies: () => {
+      const url = baseUrl + "routing_strategies";
+      return fetch(url, {
+        headers: { "Content-Type": "application/json" },
+      }).then((resp) => resp.json());
+    },
+
     getStoragesWithAllocationPolicies: () => {
       const url = baseUrl + "storages_with_allocation_policies";
       return fetch(url, {
         headers: { "Content-Type": "application/json" },
       }).then((resp) => resp.json());
     },
-    getAllocationPolicies: (storage: string) => {
+    getAllocationPolicies: (entity: Entity) => {
       const url =
-        baseUrl + "allocation_policy_configs/" + encodeURIComponent(storage);
+        baseUrl + "allocation_policy_configs/" + entity.type + "/" + encodeURIComponent(entity.name);
       return fetch(url, {
         headers: { "Content-Type": "application/json" },
       }).then((resp) => resp.json());
     },
-    setAllocationPolicyConfig: (
-      storage: string,
-      policy: string,
+    getRoutingStrategyConfigs: (strategy_name: string) => {
+      const url = baseUrl + "routing_strategy_configs/" + strategy_name;
+      return fetch(url, {
+        headers: { "Content-Type": "application/json" },
+      }).then((resp) => resp.json());
+    },
+    setConfiguration: (
+      entity: Entity,
+      configurable_component: ConfigurableComponent,
       key: string,
       value: string,
       params: object,
     ) => {
-      const url = baseUrl + "allocation_policy_config";
+      let body: string;
+      let url: string;
+
+      if (configurable_component.type === "routing_strategy") {
+        body = JSON.stringify({ strategy: configurable_component.name, key, value, params });
+        url = baseUrl + "routing_strategy_config";
+      } else if (entity.type === "strategy" && configurable_component.type === "allocation_policy") {
+        body = JSON.stringify({ strategy: entity.name, policy: configurable_component.name, key, value, params })
+        url = baseUrl + "allocation_policy_config_for_strategy";
+      } else {
+        body = JSON.stringify({ storage: entity.name, policy: configurable_component.name, key, value, params })
+        url = baseUrl + "allocation_policy_config_for_storage";
+      }
+
       return fetch(url, {
         headers: { "Content-Type": "application/json" },
         method: "POST",
-        body: JSON.stringify({ storage, policy, key, value, params }),
+        body: body,
       }).then((res) => {
         if (res.ok) {
           return;
@@ -481,17 +509,30 @@ function Client(): Client {
         }
       });
     },
-    deleteAllocationPolicyConfig: (
-      storage: string,
-      policy: string,
+    deleteConfiguration: (
+      entity: Entity,
+      configurable_component: ConfigurableComponent,
       key: string,
       params: object,
     ) => {
-      const url = baseUrl + "allocation_policy_config";
+      let body: string;
+      let url: string;
+
+      if (configurable_component.type === "routing_strategy") {
+        body = JSON.stringify({ strategy: configurable_component.name, key, params });
+        url = baseUrl + "routing_strategy_config";
+      } else if (entity.type === "strategy" && configurable_component.type === "allocation_policy") {
+        body = JSON.stringify({ strategy: entity.name, policy: configurable_component.name, key, params })
+        url = baseUrl + "allocation_policy_config_for_strategy";
+      } else {
+        body = JSON.stringify({ storage: entity.name, policy: configurable_component.name, key, params })
+        url = baseUrl + "allocation_policy_config_for_storage";
+      }
+
       return fetch(url, {
         headers: { "Content-Type": "application/json" },
         method: "DELETE",
-        body: JSON.stringify({ storage, policy, key, params }),
+        body: body,
       }).then((res) => {
         if (res.ok) {
           return;

snuba/admin/static/capacity_management/add_config_modal.tsx

@@ -3,16 +3,16 @@ import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import Modal from "react-bootstrap/Modal";
 import {
-  AllocationPolicyConfig,
-  AllocationPolicyOptionalConfigDefinition,
+  Configuration,
+  OptionalConfigurationDefinition,
 } from "SnubaAdmin/capacity_management/types";
 import FormGroup from "react-bootstrap/FormGroup";
 
 function AddConfigModal(props: {
   currentlyAdding: boolean;
   setCurrentlyAdding: (currentlyAdding: boolean) => void;
-  optionalConfigDefinitions: AllocationPolicyOptionalConfigDefinition[];
-  saveConfig: (config: AllocationPolicyConfig) => void;
+  optionalConfigDefinitions: OptionalConfigurationDefinition[];
+  saveConfig: (config: Configuration) => void;
 }) {
   const {
     currentlyAdding,
@@ -22,9 +22,9 @@ function AddConfigModal(props: {
   } = props;
 
   const [selectedDefinition, selectDefinition] =
-    useState<AllocationPolicyOptionalConfigDefinition>();
+    useState<OptionalConfigurationDefinition>();
 
-  const [config, buildConfig] = useState<AllocationPolicyConfig>({
+  const [config, buildConfig] = useState<Configuration>({
     name: "",
     value: "",
     description: "",

snuba/admin/static/capacity_management/allocation_policy.tsx

@@ -3,13 +3,18 @@ import React, { useEffect, useState } from "react";
 import { Table, createCustomTableStyles } from "../table";
 import { COLORS } from "SnubaAdmin/theme";
 import Client from "SnubaAdmin/api_client";
-import { AllocationPolicy, AllocationPolicyConfig } from "SnubaAdmin/capacity_management/types";
+import {
+  AllocationPolicy,
+  Configuration,
+  Entity,
+  ConfigurableComponent,
+} from "SnubaAdmin/capacity_management/types";
 import { containerStyle, linkStyle, paragraphStyle } from "SnubaAdmin/capacity_management/styles";
 import { getReadonlyRow } from "SnubaAdmin/capacity_management/row_data";
 import EditConfigModal from "SnubaAdmin/capacity_management/edit_config_modal";
 import AddConfigModal from "SnubaAdmin/capacity_management/add_config_modal";
 
-function getTableColor(configs: AllocationPolicyConfig[]): string {
+function getTableColor(configs: Configuration[]): string {
   let policyIsActive = false;
   let policyIsEnforced = false;
   configs.forEach((config) => {
@@ -37,22 +42,22 @@ function getTableColor(configs: AllocationPolicyConfig[]): string {
   }
 }
 
-function AllocationPolicyConfigs(props: {
+function Configurations(props: {
   api: Client;
-  storage: string;
-  policy: AllocationPolicy;
+  entity: Entity;
+  configurable_component: ConfigurableComponent;
 }) {
-  const { api, storage, policy } = props;
+  const { api, entity, configurable_component } = props;
 
-  const [configs, setConfigs] = useState<AllocationPolicyConfig[]>([]);
+  const [configs, setConfigs] = useState<Configuration[]>([]);
 
   useEffect(() => {
-    policy.configs.sort();
-    setConfigs(policy.configs);
-  }, [policy]);
+    configurable_component.configs.sort();
+    setConfigs(configurable_component.configs);
+  }, [configurable_component]);
 
   const [currentlyEditing, setCurrentlyEditing] = useState(false);
-  const [currentConfig, setCurrentConfig] = useState<AllocationPolicyConfig>({
+  const [currentConfig, setCurrentConfig] = useState<Configuration>({
     name: "",
     value: "",
     description: "",
@@ -61,16 +66,16 @@ function AllocationPolicyConfigs(props: {
   });
   const [addingNew, setAddingNew] = useState(false);
 
-  function enterEditMode(config: AllocationPolicyConfig) {
+  function enterEditMode(config: Configuration) {
     setCurrentlyEditing(true);
     setCurrentConfig(config);
   }
 
-  function deleteConfig(toDelete: AllocationPolicyConfig) {
+  function deleteConfig(toDelete: Configuration) {
     api
-      .deleteAllocationPolicyConfig(
-        storage,
-        policy.policy_name,
+      .deleteConfiguration(
+        entity,
+        configurable_component,
         toDelete.name,
         toDelete.params
       )
@@ -86,11 +91,11 @@ function AllocationPolicyConfigs(props: {
       });
   }
 
-  function saveConfig(config: AllocationPolicyConfig) {
+  function saveConfig(config: Configuration) {
     api
-      .setAllocationPolicyConfig(
-        storage,
-        policy.policy_name,
+      .setConfiguration(
+        entity,
+        configurable_component,
         config.name,
         config.value,
         config.params
@@ -100,7 +105,7 @@ function AllocationPolicyConfigs(props: {
       });
   }
 
-  function addConfig(config: AllocationPolicyConfig) {
+  function addConfig(config: Configuration) {
     saveConfig(config);
     setConfigs((prev) => [...prev, config]);
   }
@@ -117,11 +122,11 @@ function AllocationPolicyConfigs(props: {
       <AddConfigModal
         currentlyAdding={addingNew}
         setCurrentlyAdding={setAddingNew}
-        optionalConfigDefinitions={policy.optional_config_definitions}
+        optionalConfigDefinitions={configurable_component.optional_config_definitions}
         saveConfig={addConfig}
       />
       <div style={containerStyle}>
-        <p>{policy.policy_name}</p>
+        <p>{configurable_component.name}</p>
         <p style={paragraphStyle}>These are the global configurations.</p>
         <Table
           headerData={["Key", "Value", "Description", "Type", "Actions"]}
@@ -139,7 +144,7 @@ function AllocationPolicyConfigs(props: {
             ])}
           columnWidths={[3, 2, 5, 1, 1]}
           customStyles={createCustomTableStyles({
-            headerStyle: { backgroundColor: getTableColor(policy.configs) },
+            headerStyle: { backgroundColor: getTableColor(configurable_component.configs) },
           })}
         />
         <p style={paragraphStyle}>
@@ -169,10 +174,10 @@ function AllocationPolicyConfigs(props: {
             ])}
           columnWidths={[3, 3, 2, 5, 1, 1]}
           customStyles={createCustomTableStyles({
-            headerStyle: { backgroundColor: getTableColor(policy.configs) },
+            headerStyle: { backgroundColor: getTableColor(configurable_component.configs) },
           })}
         />
-        {!addingNew && policy.optional_config_definitions.length != 0 && (
+        {!addingNew && configurable_component.optional_config_definitions.length != 0 && (
           <a onClick={() => setAddingNew(true)} style={linkStyle}>
             add new
           </a>
@@ -183,4 +188,4 @@ function AllocationPolicyConfigs(props: {
   );
 }
 
-export { AllocationPolicyConfigs, getTableColor };
+export { Configurations, getTableColor };

snuba/admin/static/capacity_management/edit_config_modal.tsx

@@ -2,14 +2,14 @@ import React, { useState } from "react";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import Modal from "react-bootstrap/Modal";
-import { AllocationPolicyConfig } from "SnubaAdmin/capacity_management/types";
+import { Configuration } from "SnubaAdmin/capacity_management/types";
 
 function EditConfigModal(props: {
   currentlyEditing: boolean;
-  currentConfig: AllocationPolicyConfig;
+  currentConfig: Configuration;
   setCurrentlyEditing: (currentlyEditing: boolean) => void;
-  deleteConfig: (config: AllocationPolicyConfig) => void;
-  saveConfig: (config: AllocationPolicyConfig) => void;
+  deleteConfig: (config: Configuration) => void;
+  saveConfig: (config: Configuration) => void;
 }) {
   const {
     currentlyEditing,

snuba/admin/static/capacity_management/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Client from "SnubaAdmin/api_client";
-import { AllocationPolicyConfigs } from "SnubaAdmin/capacity_management/allocation_policy";
+import { Configurations } from "SnubaAdmin/capacity_management/allocation_policy";
 import { AllocationPolicy } from "SnubaAdmin/capacity_management/types";
 import { CustomSelect, getParamFromStorage } from "SnubaAdmin/select";
 import { COLORS } from "SnubaAdmin/theme";
@@ -31,7 +31,7 @@ function CapacityManagement(props: { api: Client }) {
 
   function loadAllocationPolicies(storage: string) {
     api
-      .getAllocationPolicies(storage)
+      .getAllocationPolicies({ type: "storage", name: storage })
       .then((res) => {
         setAllocationPolicies(res);
       })
@@ -53,11 +53,11 @@ function CapacityManagement(props: { api: Client }) {
           Policy Type: {policies[0].query_type.toUpperCase()}
         </p>
         {policies.map((policy: AllocationPolicy) => (
-          <AllocationPolicyConfigs
+          <Configurations
             api={api}
-            storage={selectedStorage}
-            policy={policy}
-            key={selectedStorage + policy.policy_name}
+            entity={{ type: "storage", name: selectedStorage }}
+            configurable_component={policy}
+            key={selectedStorage + policy.name}
           />
         ))}
       </div>

snuba/admin/static/capacity_management/row_data.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { AllocationPolicyConfig, RowData } from "SnubaAdmin/capacity_management/types";
+import { Configuration, RowData } from "SnubaAdmin/capacity_management/types";
 import Button from "react-bootstrap/Button";
 
 function getReadonlyRow(
-  config: AllocationPolicyConfig,
+  config: Configuration,
   edit: () => void
 ): RowData {
   return {