feat(capman): Change allocation policy table color based on active/en…

…forced (#5593)

In order to make it more clear the state of the policy (active, enforced, inactive) change the color of the table to make it more obvious to the user what is happening

* make table component styles configurable, change allocation policy table colors as example

* make the policy table color change based on the active/enforced characteristics

* fix annoying text wrapping

* add a test

* actually add the test

snuba/admin/static/capacity_management/allocation_policy.tsx

@@ -1,13 +1,39 @@
 import React, { useEffect, useState } from "react";
 
-import { Table } from "../table";
+import { Table, createCustomTableStyles} from "../table";
+import { COLORS } from "../theme";
 import Client from "../api_client";
 import { AllocationPolicy, AllocationPolicyConfig } from "./types";
 import { containerStyle, linkStyle, paragraphStyle } from "./styles";
 import { getReadonlyRow } from "./row_data";
 import EditConfigModal from "./edit_config_modal";
 import AddConfigModal from "./add_config_modal";
 
+
+function getTableColor(configs: AllocationPolicyConfig[]): string {
+ let policyIsActive = false;
+ let policyIsEnforced = false;
+ configs.forEach(config => {
+ if (config.name == "is_active"){
+ if (parseInt(config.value) === 1) {policyIsActive = true;}
+ else {policyIsActive = false;}
+ }
+ if (config.name == "is_enforced"){
+ if (parseInt(config.value) === 1) {policyIsEnforced= true;}
+ else {policyIsEnforced= false;}
+ }
+ })
+ if (policyIsActive && policyIsEnforced) {
+ return COLORS.SNUBA_BLUE
+ }
+ else if (policyIsActive && !policyIsEnforced) {
+ return "orange"
+ }
+ else {
+ return "gray"
+ }
+}
+
 function AllocationPolicyConfigs(props: {
  api: Client;
  storage: string;
@@ -113,6 +139,8 @@ function AllocationPolicyConfigs(props: {
  getReadonlyRow(config, () => enterEditMode(config))
  )}
  columnWidths={[3, 3, 2, 5, 1, 1]}
+ customStyles={createCustomTableStyles({headerStyle: {backgroundColor: getTableColor(policy.configs)}})}
+
  />
  {!addingNew && policy.optional_config_definitions.length != 0 && (
  <a onClick={() => setAddingNew(true)} style={linkStyle}>
@@ -125,4 +153,4 @@ function AllocationPolicyConfigs(props: {
  );
 }
 
-export default AllocationPolicyConfigs;
+export {AllocationPolicyConfigs, getTableColor};

snuba/admin/static/capacity_management/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Client from "../api_client";
 import { selectStyle } from "./styles";
-import AllocationPolicyConfigs from "./allocation_policy";
+import {AllocationPolicyConfigs} from "./allocation_policy";
 import { AllocationPolicy } from "./types";
 
 function CapacityManagement(props: { api: Client }) {

snuba/admin/static/capacity_management/row_data.tsx

@@ -18,7 +18,9 @@ function getReadonlyRow(
  <code style={{ wordBreak: "break-all", color: "black" }}>
  {config.value}
  </code>,
- config.description,
+ <code style={{ wordBreak: "normal", overflowWrap: "anywhere", color: "black" }}>
+ {config.description}
+ </code>,
  config.type,
  <Button
  variant="outline-secondary"

snuba/admin/static/table.tsx

@@ -1,11 +1,30 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, CSSProperties } from "react";
 
 import { COLORS } from "./theme";
 
+type CustomTableStyles = {
+ tableStyle?: CSSProperties,
+ headerStyle?: CSSProperties,
+ thStyle?: CSSProperties,
+ tdStyle?: CSSProperties
+}
+
+const EMPTY_CUSTOM_STYLES = {
+ tableStyle: {},
+ headerStyle: {},
+ thStyle: {},
+ tdStyle: {},
+}
+
+function createCustomTableStyles(styles: Partial<CustomTableStyles> = EMPTY_CUSTOM_STYLES): CustomTableStyles {
+ return {...EMPTY_CUSTOM_STYLES, ...styles};
+}
+
 type TableProps = {
  headerData: ReactNode[];
  rowData: ReactNode[][];
  columnWidths?: number[];
+ customStyles?: CustomTableStyles;
 };
 
 function Table(props: TableProps) {
@@ -14,16 +33,34 @@ function Table(props: TableProps) {
  const autoColumnWidths = Array(headerData.length).fill(1);
  const notEmptyColumnWidths = columnWidths ?? autoColumnWidths;
  const sumColumnWidths = notEmptyColumnWidths.reduce((acc, i) => acc + i, 0);
+ const customStyles = props.customStyles ? props.customStyles : EMPTY_CUSTOM_STYLES;
+ const thisTableStyle = {
+ ...tableStyle,
+ ...customStyles.tableStyle,
+ };
+ const thisHeaderStyle = {
+ ...headerStyle,
+ ...customStyles.headerStyle,
+ };
+ const thisThStyle = {
+ ...thStyle,
+ ...customStyles.thStyle,
+ }
+ const thisTdStyle = {
+ ...tdStyle,
+ ...customStyles.tdStyle,
+ }
+
 
  return (
- <table style={tableStyle}>
- <thead style={headerStyle}>
+ <table style={thisTableStyle}>
+ <thead style={thisHeaderStyle}>
  <tr>
  {headerData.map((col, idx) => (
  <th
  key={idx}
  style={{
- ...thStyle,
+ ...thisThStyle,
  width: `${
  (notEmptyColumnWidths[idx] * 100) / sumColumnWidths
  }%`,
@@ -38,7 +75,7 @@ function Table(props: TableProps) {
  {rowData.map((row, rowIdx) => (
  <tr key={rowIdx}>
  {row.map((col, colIdx) => (
- <td key={colIdx} style={tdStyle}>
+ <td key={colIdx} style={thisTdStyle}>
  {col}
  </td>
  ))}
@@ -106,4 +143,4 @@ const textAreaStyle = {
  width: "calc(100% - 24px)",
 };
 
-export { Table, EditableTableCell };
+export { Table, EditableTableCell, createCustomTableStyles};

snuba/admin/static/tests/capacity_management/allocation_policies.spec.tsx

@@ -1,6 +1,6 @@
 import Client from "../../api_client";
 
-import AllocationPolicyConfigs from "../../capacity_management/allocation_policy";
+import {AllocationPolicyConfigs} from "../../capacity_management/allocation_policy";
 import { it, expect } from "@jest/globals";
 import { AllocationPolicy } from "../../capacity_management/types";
 import { act, fireEvent, render } from "@testing-library/react";

snuba/admin/static/tests/capacity_management/table_color.spec.tsx

@@ -0,0 +1,84 @@
+import {getTableColor} from "../../capacity_management/allocation_policy";
+import { AllocationPolicy, AllocationPolicyConfig } from "../../capacity_management/types";
+import { COLORS } from "../../theme";
+import { it, expect } from "@jest/globals";
+
+let bonus_configs = [{
+ name: "key1",
+ value: "10",
+ description: "something",
+ type: "int",
+ params: {},
+ },
+ {
+ name: "key2",
+ value: "20",
+ description: "something params",
+ type: "int",
+ params: { a: "1", b: "2" },
+ },
+]
+
+
+
+it("should be gray when the policy is inactive", () => {
+ let configs = [
+ {
+ name: "is_active",
+ value: "0",
+ description: "",
+ type: "int",
+ params: {},
+ },
+ {
+ name: "is_enforced",
+ value: "1",
+ description: "",
+ type: "int",
+ params: {},
+ },
+ ].concat(bonus_configs);
+ expect(getTableColor(configs)).toBe("gray")
+})
+
+
+it("should be blue when the policy is active and enforced", () => {
+ let configs = [
+ {
+ name: "is_active",
+ value: "1",
+ description: "",
+ type: "int",
+ params: {},
+ },
+ {
+ name: "is_enforced",
+ value: "1",
+ description: "",
+ type: "int",
+ params: {},
+ }
+ ].concat(bonus_configs);
+ expect(getTableColor(configs)).toBe(COLORS.SNUBA_BLUE);
+})
+
+
+it("should be orange when the policy is active and enforced", () => {
+ let configs = [
+ {
+ name: "is_active",
+ value: "1",
+ description: "",
+ type: "int",
+ params: {},
+ },
+ {
+ name: "is_enforced",
+ value: "0",
+ description: "",
+ type: "int",
+ params: {},
+ }
+ ].concat(bonus_configs);
+ expect(getTableColor(configs)).toBe("orange")
+})