improve frontend dev exp (#4296)

# What this PR does

- Add `yarn install` to Tiltfile when running locally
- Build prod bundle of the frontend without watch mode on CI
- Remove `engine` from Tilt deps of grafana and oncall provisioning
config map so grafana can be built in parallel to engine to speed up
things
- Update dev/README.md with Node.js requirement

## Which issue(s) this PR closes

Closes #4295 

<!--
*Note*: if you have more than one GitHub issue that this PR closes, be
sure to preface
each issue link with a [closing
keyword](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/using-keywords-in-issues-and-pull-requests#linking-a-pull-request-to-an-issue).
This ensures that the issue(s) are auto-closed once the PR has been
merged.
-->

## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] Added the relevant release notes label (see labels prefixed w/
`release:`). These labels dictate how your PR will
    show up in the autogenerated release notes.

Tiltfile

@@ -59,13 +59,27 @@ docker_build_sub(
     ],
 )
 
-# Build the plugin in the background
-local_resource(
-    "build-ui",
-    labels=["OnCallUI"],
-    serve_cmd="cd grafana-plugin && yarn watch",
-    allow_parallel=True,
-)
+# On CI dependencies are installed separately so we just build prod bundle to be consumed by Grafana dev server
+if is_ci:
+    local_resource(
+        "build-ui",
+        labels=["OnCallUI"],
+        dir="grafana-plugin",
+        cmd="yarn build",
+        allow_parallel=True,
+    )
+
+# Locally we install dependencies and we run watch mode
+if not is_ci:
+    local_resource(
+        "build-ui",
+        labels=["OnCallUI"],
+        dir="grafana-plugin",
+        cmd="yarn install",
+        serve_dir="grafana-plugin",
+        serve_cmd="yarn watch",
+        allow_parallel=True,
+    )
 
 local_resource(
     "e2e-tests",
@@ -130,7 +144,7 @@ configmap_create(
 k8s_resource(
     objects=["grafana-oncall-app-provisioning:configmap"],
     new_name="grafana-oncall-app-provisioning-configmap",
-    resource_deps=["build-ui", "engine"],
+    resource_deps=["build-ui"],
     labels=["Grafana"],
 )
 
@@ -141,7 +155,7 @@ if not running_under_parent_tiltfile:
         context="grafana-plugin",
         plugin_files=["grafana-plugin/src/plugin.json"],
         namespace="default",
-        deps=["grafana-oncall-app-provisioning-configmap", "build-ui", "engine"],
+        deps=["grafana-oncall-app-provisioning-configmap", "build-ui"],
         extra_env={
             "GF_SECURITY_ADMIN_PASSWORD": "oncall",
             "GF_SECURITY_ADMIN_USER": "oncall",

dev/README.md

@@ -11,6 +11,7 @@ Related: [How to develop integrations](/engine/config_integrations/README.md)
 - [Tilt | Kubernetes for Prod, Tilt for Dev](https://tilt.dev/)
 - [tilt-dev/ctlptl: Making local Kubernetes clusters fun and easy to set up](https://github.com/tilt-dev/ctlptl)
 - [Kind](https://kind.sigs.k8s.io)
+- [Node.js v18.x](https://nodejs.org/en/download)
 - [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable)
 
 ### Launch the environment

grafana-plugin/Dockerfile.dev

@@ -3,4 +3,4 @@ FROM node:18.16.0-alpine
 WORKDIR /etc/app
 ENV PATH /etc/app/node_modules/.bin:$PATH
 
-CMD ["yarn", "start"]
+CMD ["yarn", "start"]