More recipe running (#19)

More recipe running

Author: mythmon

extension/content/components/filters/JexlColumn.js

@@ -2,11 +2,6 @@ import PropTypes from "prop-types";
 import React from "react";
 import { Controlled as CodeMirror } from "react-codemirror2";
 
-// Mode and theme for Code Mirror
-import "codemirror/addon/selection/active-line";
-import "codemirror/mode/javascript/javascript";
-import "codemirror/theme/neo.css";
-
 export default class JexlColumn extends React.PureComponent {
   static propTypes = {
     filterExpression: PropTypes.string.isRequired,

extension/content/components/pages/RecipesPage.js

@@ -1,7 +1,20 @@
 import autobind from "autobind-decorator";
 import React from "react";
-import { Header, Icon, Loader, Nav, Navbar, Pagination } from "rsuite";
+import { Controlled as CodeMirror } from "react-codemirror2";
+import {
+  Button,
+  Drawer,
+  Header,
+  Icon,
+  Loader,
+  Modal,
+  Nav,
+  Navbar,
+  Pagination,
+  SelectPicker,
+} from "rsuite";
 
+import { ENVIRONMENTS } from "devtools/config";
 import RecipeListing from "devtools/components/recipes/RecipeListing";
 import api from "devtools/utils/api";
 
@@ -11,11 +24,22 @@ const normandy = browser.experiments.normandy;
 class RecipesPage extends React.PureComponent {
   constructor(props) {
     super(props);
+
+    const recipePages = {};
+    Object.values(ENVIRONMENTS).forEach(v => {
+      recipePages[v] = {};
+    });
+
     this.state = {
-      recipePages: {},
+      arbitraryRecipe: "",
+      count: 0,
+      environment: ENVIRONMENTS.prod,
       loading: false,
       page: 1,
-      count: 0,
+      runningArbitrary: false,
+      showSettings: false,
+      showWriteRecipes: false,
+      recipePages,
     };
   }
 
@@ -24,45 +48,64 @@ class RecipesPage extends React.PureComponent {
   }
 
   async componentDidMount() {
-    const { page } = this.state;
-
-    if (page in this.state.recipePages) {
-      // cache hit
-      this.setState({ page });
-      return;
-    }
-
-    this.setState({ loading: true });
-
-    let data = await api.fetchRecipePage(page, { ordering: "-id" });
-    this.setState(({ recipePages }) => ({
-      recipePages: { ...recipePages, [page]: data.results },
-      loading: false,
-      count: data.count,
-    }));
+    const { environment, page } = this.state;
+    this.refreshRecipeList(environment, page);
   }
 
-  async handlePageChange(page) {
-    if (page in this.state.recipePages) {
+  async refreshRecipeList(environment, page) {
+    if (
+      environment in this.state.recipePages &&
+      page in this.state.recipePages[environment]
+    ) {
       // cache hit
       this.setState({ page });
       return;
     }
 
     // cache miss
     this.setState({ loading: true });
-    let data = await api.fetchRecipePage(page);
+    let data = await api.fetchRecipePage(environment, page, {
+      ordering: "-id",
+    });
     this.setState(({ recipePages }) => ({
-      recipePages: { ...recipePages, [page]: data.results },
+      recipePages: {
+        ...recipePages,
+        [environment]: {
+          ...recipePages.environment,
+          [page]: data.results,
+        },
+      },
       page,
       loading: false,
       count: data.count,
     }));
   }
 
+  handlePageChange(page) {
+    const { environment } = this.state;
+    this.refreshRecipeList(environment, page);
+  }
+
+  handleEnvironmentChange(environment) {
+    this.setState({ environment });
+    this.refreshRecipeList(environment, 1);
+  }
+
+  showSettings() {
+    this.setState({ showSettings: true });
+  }
+
+  hideSettings() {
+    this.setState({ showSettings: false });
+  }
+
   renderRecipeList() {
-    const { loading, page, recipePages } = this.state;
-    const recipes = recipePages[page];
+    const { environment, loading, page, recipePages } = this.state;
+    const recipes = recipePages[environment][page];
+
+    let envName = Object.keys(ENVIRONMENTS).find(
+      v => ENVIRONMENTS[v] === environment,
+    );
 
     if (loading) {
       return (
@@ -72,13 +115,128 @@ class RecipesPage extends React.PureComponent {
       );
     } else if (recipes) {
       return recipes.map(recipe => (
-        <RecipeListing key={recipe.id} recipe={recipe} />
+        <RecipeListing
+          key={recipe.id}
+          recipe={recipe}
+          environmentName={envName}
+        />
       ));
     }
 
     return null;
   }
 
+  renderSettingsDrawer() {
+    const { showSettings, environment } = this.state;
+
+    const envOptions = Object.keys(ENVIRONMENTS).reduce((reduced, value) => {
+      reduced.push({
+        label: value.charAt(0).toUpperCase() + value.slice(1),
+        value: ENVIRONMENTS[value],
+      });
+      return reduced;
+    }, []);
+
+    return (
+      <Drawer
+        placement="right"
+        show={showSettings}
+        onHide={this.hideSettings}
+        size="xs"
+      >
+        <Drawer.Header>Settings</Drawer.Header>
+        <Drawer.Body>
+          <h5>Environment</h5>
+          <SelectPicker
+            data={envOptions}
+            defaultValue={environment}
+            cleanable={false}
+            searchable={false}
+            onChange={this.handleEnvironmentChange}
+          />
+        </Drawer.Body>
+      </Drawer>
+    );
+  }
+
+  showWriteRecipePopup() {
+    this.setState({ showWriteRecipes: true });
+  }
+
+  hideWriteRecipePopup() {
+    this.setState({ showWriteRecipes: false });
+  }
+
+  handleArbitraryRecipeChange(editor, data, value) {
+    this.setState({ arbitraryRecipe: value });
+  }
+
+  async runArbitraryRecipe() {
+    const { arbitraryRecipe } = this.state;
+    this.setState({ runningArbitrary: true });
+    try {
+      await normandy.runRecipe(JSON.parse(arbitraryRecipe));
+    } catch (ex) {
+      throw ex;
+    } finally {
+      this.setState({ runningArbitrary: false });
+    }
+  }
+
+  renderWriteRecipeModal() {
+    const { arbitraryRecipe, runningArbitrary } = this.state;
+
+    return (
+      <Modal
+        show={this.state.showWriteRecipes}
+        onHide={this.hideWriteRecipePopup}
+      >
+        <Modal.Header>
+          <Modal.Title>Write a recipe</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <CodeMirror
+            options={{
+              mode: "javascript",
+              theme: "neo",
+              lineNumbers: true,
+              styleActiveLine: true,
+            }}
+            value={arbitraryRecipe}
+            style={{
+              height: "auto",
+            }}
+            onBeforeChange={this.handleArbitraryRecipeChange}
+          />
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            onClick={this.runArbitraryRecipe}
+            appearance="primary"
+            disabled={runningArbitrary}
+          >
+            Run
+          </Button>
+          <Button onClick={this.hideWriteRecipePopup} appearance="subtle">
+            Cancel
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+
+  renderRunButton() {
+    const { environment } = this.state;
+    if (environment !== ENVIRONMENTS.prod) {
+      return null;
+    }
+    return (
+      <Nav.Item icon={<Icon icon="play" />} onClick={this.runNormandy}>
+        Run Normandy
+      </Nav.Item>
+    );
+  }
+
   render() {
     const { count, page } = this.state;
 
@@ -87,8 +245,15 @@ class RecipesPage extends React.PureComponent {
         <Header>
           <Navbar>
             <Nav pullRight>
-              <Nav.Item icon={<Icon icon="play" />} onClick={this.runNormandy}>
-                Run Normandy
+              <Nav.Item
+                icon={<Icon icon="edit" />}
+                onClick={this.showWriteRecipePopup}
+              >
+                Write & Run Arbitrary
+              </Nav.Item>
+              {this.renderRunButton()}
+              <Nav.Item icon={<Icon icon="gear" />} onClick={this.showSettings}>
+                Settings
               </Nav.Item>
             </Nav>
           </Navbar>
@@ -112,6 +277,9 @@ class RecipesPage extends React.PureComponent {
             />
           </div>
         </div>
+
+        {this.renderSettingsDrawer()}
+        {this.renderWriteRecipeModal()}
       </React.Fragment>
     );
   }

extension/content/components/recipes/RecipeListing.js

@@ -7,10 +7,11 @@ import { Button, Icon, Panel, Tag } from "rsuite";
 
 const normandy = browser.experiments.normandy;
 
-function convertToV1Recipe(v3Recipe) {
+function convertToV1Recipe(v3Recipe, environmentName) {
   // Normandy expects a v1-style recipe, but we have a v3-style recipe. Convert it.
+  const idSuffix = environmentName !== "prod" ? `-${environmentName}` : "";
   return {
-    id: v3Recipe.id,
+    id: `${v3Recipe.id}${idSuffix}`,
     name: v3Recipe.latest_revision.name,
     enabled: v3Recipe.latest_revision.enabled,
     is_approved: v3Recipe.latest_revision.is_approved,
@@ -24,6 +25,7 @@ function convertToV1Recipe(v3Recipe) {
 @autobind
 class RecipeListing extends React.PureComponent {
   static propTypes = {
+    environmentName: PropTypes.object.string,
     recipe: PropTypes.object.isRequired,
   };
 
@@ -36,17 +38,17 @@ class RecipeListing extends React.PureComponent {
   }
 
   async componentDidMount() {
-    const { recipe } = this.props;
+    const { environmentName, recipe } = this.props;
     let filterMatches = await normandy.checkRecipeFilter(
-      convertToV1Recipe(recipe),
+      convertToV1Recipe(recipe, environmentName),
     );
     this.setState({ filterMatches });
   }
 
   async handleRunButtonClick(ev) {
-    const { recipe } = this.props;
+    const { environmentName, recipe } = this.props;
     this.setState({ running: true });
-    await normandy.runRecipe(convertToV1Recipe(recipe));
+    await normandy.runRecipe(convertToV1Recipe(recipe, environmentName));
     this.setState({ running: false });
   }
 

extension/content/config.js

@@ -0,0 +1,5 @@
+export const ENVIRONMENTS = {
+  prod: "https://normandy.cdn.mozilla.net/",
+  stage: "https://stage.normandy.nonprod.cloudops.mozgcp.net/",
+  dev: "https://dev.normandy.nonprod.cloudops.mozgcp.net/",
+};

extension/content/index.js

@@ -5,6 +5,12 @@ import ErrorBoundary from "react-error-boundary";
 import { Container, Icon, Nav, Sidebar, Sidenav } from "rsuite";
 
 import "devtools/less/index.less";
+
+// Mode and theme for Code Mirror
+import "codemirror/addon/selection/active-line";
+import "codemirror/mode/javascript/javascript";
+import "codemirror/theme/neo.css";
+
 import Logo from "devtools/components/svg/Logo";
 import RecipesPage from "devtools/components/pages/RecipesPage";
 import FiltersPage from "devtools/components/pages/FiltersPage";

extension/content/less/filter-page.less

@@ -62,6 +62,7 @@
 
     .rc-tree-title {
       font-family: monospace;
+      font-size: @font-size-base - 1;
       padding-left: 2px;
     }
   }

extension/content/less/main.less

@@ -56,3 +56,8 @@
     width: 100%;
   }
 }
+
+.react-codemirror2,
+code.hljs {
+  font-size: @font-size-base - 1;
+}