Visual Indicators for Production and Development Instances

1

When we have multiple terminals open, sometimes it’s possible that we may run a command in the wrong window since they all look identical. One thing I found really helpful is to add a custom prompt for the shell, but a little less known feature is the custom prompt for the MariaDB console.

This may have the side-effect of developing bad habits or being careless in the absense of these indicators, but I thought I’ll share my setup anyway.

This is the MariaDB prompt I use for the development instances.

export MYSQL_PS1=$'\001\033[1;48;5;41;38;5;15m\002 DEVELOPMENT \001\033[38;5;41;48;5;27m\033[1;48;5;8;38;5;15m\002 \\d \001\033[38;5;27;49m\033[0m\002 '

development
development1280×864 157 KB

I use this on production instances.

export MYSQL_PS1=$'\001\033[1;48;8;41;38;5;15m\002 PRODUCTION \001\033[38;5;41;48;5;27m\033[1;48;5;8;38;5;15m\002 \\d \001\033[38;5;27;49m\033[0m\002 '
export MYSQL_PS1=$'\001\033[1;1;5;41;38;5;15m\002 PRODUCTION \001\033[38;5;41;48;5;27m\033[1;48;5;8;38;5;15m\002 \\d \001\033[38;5;27;49m\033[0m\002 ' # Blinking Version

production
production1280×864 165 KB

Additionally, I also find it helpful to have a visual indicator in the web interface for the production instances. I did this using a plugin for mitmdump (from mitmproxy project).

Code for plugin:

from mitmproxy import http

def response(flow: http.HTTPFlow) -> None:
    if flow.response.headers.get("Content-Type", "").startswith("text/html"):
        html_content = flow.response.get_text()
        style_tag = "<style>@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }" \
                    "body:after, body:before { animation: blink 1s step-end infinite; }" \
                    "body:after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; border: 10px solid red; z-index: 99998; pointer-events: none; }" \
                    "body:before { content: 'PRODUCTION'; color: white; position: fixed; top: 0; left: 10px; background: red; padding: 0; padding-right: 8px; z-index: 99999; font-weight: bold; }</style>"
        modified_html = html_content.replace("</html>", style_tag + "</html>")
        flow.response.set_text(modified_html)

I run it like this: mitmdump -m reverse:https://production-url -s indicator.py

This makes the production site appear like this for me.

prod-web
prod-web1907×949 20.1 KB

Perhaps a browser addon is better for this but at the time this was the fastest way to get this done.

1 Like