Break the Glass

 

This post is another small change I've made as part of lesson learnt from the Google SRE book.

See this post for more details.

Some of our produce management functions are dangerous for the production environment. For example, we have several buttons to reset the system state in case of a non-recoverable problem. For example, one of these buttons will reset the production redis cluster.

These buttons a crucial in case of an emergency situation, but in case of a normal system operation might cause unnecessary damage. I've decided to use the SRE's "Break the glass" method for these buttons. By using it, i mean literally...

So I've created a small react component to protect the emergency buttons. This component can wrap any set of react children. It protects the components by hiding them behind a glass, which is broken only when the user clicks multiple times on the items.

glass.js

import React, {useState} from 'react'
import {Behind, GlassCover, Root} from './style'

function Glass(props) {
  const {children} = props
  const [count, setCount] = useState(0)
  const max = 4

  function clickHandler() {
    if (count === max) {
      alert('The Glass is Broken')
    }

    setCount(count + 1)
  }


  let zIndex = 10
  if (count > max) {
    zIndex = -1
  }

  return (
    <Root>
      <GlassCover
        opacity={count / max}
        zIndex={zIndex}
        src={process.env.PUBLIC_URL + '/glass.png'}
        onClick={clickHandler}
      >

      </GlassCover>
      <Behind>
        {children}
      </Behind>
    </Root>
  )
}

export default Glass

We have the styled components CSS as well:

style.js

import styled from 'styled-components'

export const Root = styled.div`
  position: relative;
`


export const GlassCover = styled.img`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  ${({zIndex}) => `
  z-index: ${zIndex};
  `}
  ${({opacity}) => `
  opacity: ${opacity};
  `}
`

export const Behind = styled.div`
`

And the image, is the same image which appears in the post header.

Feel free to use...