From fcc7b537e814ed33ed8337fe88c84a296c7ee54a Mon Sep 17 00:00:00 2001 From: Matheus Littig Date: Tue, 7 Nov 2023 11:46:57 -0400 Subject: [PATCH 1/4] feat: initial post --- apps/blog/src/pages/incident-bot.mdx | 47 +++++++++++++++++++++++++++ apps/blog/src/theme/mdx-theme.tsx | 7 ++++ apps/zipper.dev/src/framework-hash.ts | 2 +- 3 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 apps/blog/src/pages/incident-bot.mdx diff --git a/apps/blog/src/pages/incident-bot.mdx b/apps/blog/src/pages/incident-bot.mdx new file mode 100644 index 000000000..976be0990 --- /dev/null +++ b/apps/blog/src/pages/incident-bot.mdx @@ -0,0 +1,47 @@ +--- +title: Product's incidents management made easy with Zipper +date: 2023/11/07 +description: A detailed review on how Zipper can automate your on call proccess +tag: build-process +author: Matheus Littig +summary: | + We’ve released two applets that make it really easy to manage your product’s waitlist directly from Slack. We’ve integrated them into Clerk so that approved users can be automatically invited into your system. +--- + +During your day-a-day inside your company, have you been faced with a emergencial incident related to your product and have no idea from where start to solve it? Which people to invite for the problem discuss? Who gonna be ahead to solve this issue, from start to end? If there's a historic relating the same issue and how the company solved it in this past? So how about automate and to document it proccess with a internal tool dedicated for this incidents?! + +Based on this that we're exicited to share our Incident Manegment Bot! In a few words, it's a Slack-bot that facilitate create, update and close new incidents, but at the same time it provides an overview of: On-hold, Closed and In-progress incidents. Follow bellow some of the main features: + +- Providing slash commands to create, update, and add contextual info to incidents. +- Creating a incident channel for each incident. +- Broadcasting updates to multiple channels. +- Allowing you to capture contextual information that might be helpful during the post-mortem. + +## Setting Up Slack Bot + +Before we start to properly create new incidents, it's important to know that integrate your Zipper's applet with Slack API is a crucial part of the proccess, so let's start first with it. + +1. Access [Slack API apps](https://api.slack.com/apps) and create a new app from scratch. +2. Get the App Credentials: **Client ID** and **Client Secret** and in the _Basic Information_ menu. +3. Go _Oauth & Permissions_ menu and paste the following url: https://zipper.dev/connectors/slack/auth in the **Redirect URLs** section. +4. In the Slash Commands menu, let's create a new command called `/incident` with the following configuration: +_img_here_ +4. Paste **Client ID** and **Client Secret** in the `slack-connector.ts`, setup the bot-scopes: `channels:history`, `channels:join`, `channels:manage`, `channels:write.invites`, `channels:read`, `chat:write`, `commands,` `users:read`, `users:read.email` and `users:write`. And finally, click in **Save and Install**. +_img_here_ + +After installed the bot in the desired slack channel, we're all setted to start to create new incidents. + +## Creating a new Incident + +In the slack channel that the incident bot has been added, write in the in chat _/incident create_ and it will open a modal like this: +_img_here_ + +Fill the modal with Incident information and click to **Save**. + +Forward it, the bot will sent a message to the pre-selected broadcast channels, alerting then that a new incident has been created and invite then to join to the discussion channel about it. + + + + + + diff --git a/apps/blog/src/theme/mdx-theme.tsx b/apps/blog/src/theme/mdx-theme.tsx index e12cb2906..0c3c218a3 100644 --- a/apps/blog/src/theme/mdx-theme.tsx +++ b/apps/blog/src/theme/mdx-theme.tsx @@ -27,6 +27,7 @@ import { List, ListItemProps, ListItem, + UnorderedList, } from '@chakra-ui/react'; import { ChakraUIRenderer } from '@zipper/ui'; @@ -152,6 +153,12 @@ const useComponents = (): Components => { {...props} /> ), + ul: (props: ListProps) => ( + + ), + ol: (props: ListProps) => ( + + ), h4: (props: HeadingProps) => ( Date: Wed, 8 Nov 2023 10:58:44 -0400 Subject: [PATCH 2/4] fix: fixing blog layout styles --- apps/blog/src/theme/mdx-theme.tsx | 6 +++--- apps/blog/src/theme/posts-layout.tsx | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/apps/blog/src/theme/mdx-theme.tsx b/apps/blog/src/theme/mdx-theme.tsx index 0c3c218a3..aa8db95f3 100644 --- a/apps/blog/src/theme/mdx-theme.tsx +++ b/apps/blog/src/theme/mdx-theme.tsx @@ -24,10 +24,9 @@ import { OrderedList, TextProps, ListProps, - List, - ListItemProps, - ListItem, UnorderedList, + Image, + ImageProps, } from '@chakra-ui/react'; import { ChakraUIRenderer } from '@zipper/ui'; @@ -132,6 +131,7 @@ const useComponents = (): Components => { p: (props: TextProps) => , a: A, h1: H1, + img: (props: ImageProps) => , h2: (props: HeadingProps) => ( ( - + )); return ( @@ -155,6 +155,7 @@ export function PostsLayout(): ReactElement { gridTemplateColumns={{ base: '1fr', lg: 'repeat(2, 1fr)' }} as="ul" gap={3} + columnGap={4} flex={1} > From 2a2a62291f8449eca72bcf142913e6f7ff0135b9 Mon Sep 17 00:00:00 2001 From: Matheus Littig Date: Wed, 8 Nov 2023 10:59:25 -0400 Subject: [PATCH 3/4] feat: finishing incident bot blog post --- apps/blog/src/pages/incident-bot.mdx | 139 ++++++++++++++++++++++----- 1 file changed, 117 insertions(+), 22 deletions(-) diff --git a/apps/blog/src/pages/incident-bot.mdx b/apps/blog/src/pages/incident-bot.mdx index 976be0990..c7a51f93f 100644 --- a/apps/blog/src/pages/incident-bot.mdx +++ b/apps/blog/src/pages/incident-bot.mdx @@ -1,44 +1,139 @@ --- -title: Product's incidents management made easy with Zipper +title: Incidents management made easy with Zipper date: 2023/11/07 -description: A detailed review on how Zipper can automate your on call proccess +description: A comprehensive review of how Zipper can streamline your product incidents process. tag: build-process author: Matheus Littig summary: | - We’ve released two applets that make it really easy to manage your product’s waitlist directly from Slack. We’ve integrated them into Clerk so that approved users can be automatically invited into your system. + Hello! We'ew thrilled to announce that our company has developed an innovative solution to streamline incident management processes. Introducing the Incident Management Bot, a Slack bot designed to simplify the creation, updates, and closure of incidents, and provide a comprehensive overview of on-hold, closed, and in-progress incidents. --- -During your day-a-day inside your company, have you been faced with a emergencial incident related to your product and have no idea from where start to solve it? Which people to invite for the problem discuss? Who gonna be ahead to solve this issue, from start to end? If there's a historic relating the same issue and how the company solved it in this past? So how about automate and to document it proccess with a internal tool dedicated for this incidents?! +Have you ever found yourself facing an urgent incident related to your product within your company, unsure of where to start to resolve it? Who should be involved in the discussion? Who will take charge of resolving the issue from beginning to end? Is there a historical record of similar issues and how they were previously resolved? What if you could automate and document this process using a dedicated internal tool for handling incidents? -Based on this that we're exicited to share our Incident Manegment Bot! In a few words, it's a Slack-bot that facilitate create, update and close new incidents, but at the same time it provides an overview of: On-hold, Closed and In-progress incidents. Follow bellow some of the main features: +That's precisely why we're thrilled to introduce our Incident Management Bot! In a nutshell, it's a Slack bot designed to simplify the creation, updates, and closure of incidents while providing an overview of on-hold, closed, and in-progress incidents. Below are some of the key features: -- Providing slash commands to create, update, and add contextual info to incidents. -- Creating a incident channel for each incident. -- Broadcasting updates to multiple channels. -- Allowing you to capture contextual information that might be helpful during the post-mortem. +- Provides slash commands for creating, updating, and adding contextual information to incidents. +- Creates a dedicated incident channel for each incident. +- Broadcasts updates to multiple channels. +- Captures contextual information that may be useful during post-mortem analysis. ## Setting Up Slack Bot -Before we start to properly create new incidents, it's important to know that integrate your Zipper's applet with Slack API is a crucial part of the proccess, so let's start first with it. +Before we delve into creating new incidents, it's crucial to integrate your Zipper applet with the Slack API. Let's get started with the setup: -1. Access [Slack API apps](https://api.slack.com/apps) and create a new app from scratch. -2. Get the App Credentials: **Client ID** and **Client Secret** and in the _Basic Information_ menu. -3. Go _Oauth & Permissions_ menu and paste the following url: https://zipper.dev/connectors/slack/auth in the **Redirect URLs** section. -4. In the Slash Commands menu, let's create a new command called `/incident` with the following configuration: -_img_here_ -4. Paste **Client ID** and **Client Secret** in the `slack-connector.ts`, setup the bot-scopes: `channels:history`, `channels:join`, `channels:manage`, `channels:write.invites`, `channels:read`, `chat:write`, `commands,` `users:read`, `users:read.email` and `users:write`. And finally, click in **Save and Install**. -_img_here_ +1. Access [Slack API apps](https://api.slack.com/apps) and create a new app from scratch. + slack-new-app +2. Obtain the App Credentials: **Client ID** and **Client Secret** from the _Basic Information_ menu. + slack-credentials +3. In the _OAuth & Permissions_ menu, paste the following URL: https://zipper.dev/connectors/slack/auth into the **Redirect URLs** section. + slack-permissions +4. In the Slash Commands menu, create a new command called `/incident` with the specified configuration. + slack-slash-commands -After installed the bot in the desired slack channel, we're all setted to start to create new incidents. + +5. Paste the **Client ID** and **Client Secret** into the `slack-connector.ts`, configure the bot-scopes as follows: `channels:history`, `channels:join`, `channels:manage`, `channels:write.invites`, `channels:read`, `chat:write`, `commands,` `users:read`, `users:read.email`, and `users:write`. Finally, click on **Submit**. + +Once the bot is installed in the desired Slack channel, we're all set to start creating new incidents. ## Creating a new Incident -In the slack channel that the incident bot has been added, write in the in chat _/incident create_ and it will open a modal like this: -_img_here_ +In the Slack channel where the incident bot has been added, simply type `/incident create` in the chat. This will open a modal like the one shown below: + +incident-create + +Fill in the modal with incident information, and click **Submit**. The following JSON objects will be stored within Zipper's applet. + +_Incidents store_ + +```JSON +{ + "ok": true, + "data": { + "id": "15ce61ff-a80a-466d-9b53-7fafadcc4968", + "name": "Critical Database Outage", + "closedAt": null, + "channelId": "https://zipperworkspace.slack.com/archives/C05QZTFC02D", + "createdAt": "2023-09-01T13:42:06.477Z", + "broadCastChannels": [ + "C05KX9B6WAD" + ] + }, + "__meta": { + "request": { + "executionId": "ec86af3e-905f-471a-bb59-a883379e6cf8", + "server": "cloudflare", + "timing": "system;dur=0,deployment;dur=52" + } + } +} +``` + +Once you've created an incident, the bot will send a message to the pre-selected broadcast channels, notifying them of the new incident and inviting them to join the discussion in the incident channel. + +In the incident channel, the bot will post a summary containing the main information about the incident and a direct link to access further details within Zipper's applet. + +## Updating an Incident + +Within the incident's channel, you can use the slash command /incident update to update an incident. Executing this command will open a modal with the following fields. + +incident-create + +After filling in the modal's fields with the most recent incident statistics and saving the changes, this update will be automatically linked to the incident's history within the Zipper storage, as shown in the following JSON object. + +_Updates store_ + +```JSON +{ + "ok": true, + "data": { + "id": "682c8fe0-7e32-11ee-b962-0242ac120002", + "incident_id": "15ce61ff-a80a-466d-9b53-7fafadcc4968", + "history": [ + { + "stage": "in_progress", + "summary": "Our Bug Tracking System is currently experiencing a critical database outage. This incident is impacting our ability to track and manage bugs effectively, which may result in delays in resolving issues and potential data loss.", + "severity": "high", + "commander": "littig.works", + "commsLead": "sachin.ranchod" + }, + ], + "createdAt": "2023-11-08T13:42:06.477Z", + }, + "__meta": { + "request": { + "executionId": "de82e3d8-7e32-11ee-b962-0242ac120002", + "server": "cloudflare", + "timing": "system;dur=0,deployment;dur=32" + } + } +} +``` + +## Closing an Incident + +Just like `/incident update`, the slash command to close an incident `/incident close` is only available for execution within the incident's channel. + +Upon executing this command, a confirmation modal will appear, and when submitted, the incident's status will be updated as "closed" with the current date. + +## Getting Incidents Summary + +In the `main.ts` file of the applet workspace, you will find three list of incidents categorized by their current status from the last history update of then. + + + +#### _“That's all folks”_ + +This bot is just one of the amazing bots you can build with Zipper, not only for Slack but also for Github, OpenAI, Discord, and many other connector types that you can easily set up within Zipper! + +The sky's the limit. Would you like to be one of the crew members who will build the ship to reach it?! Subscribe to Zipper's [open beta](https://zipper.dev/home) right now! + +For more information on how to use Zipper, visit [here](https://zipper.dev/docs). If you have any questions, don't hesitate to reach out to us at [hello@zipper.works](mailto:hello@zipper.works) -Fill the modal with Incident information and click to **Save**. -Forward it, the bot will sent a message to the pre-selected broadcast channels, alerting then that a new incident has been created and invite then to join to the discussion channel about it. From f6ac2eff5c2bd4647fe80802c6f78308af25c75d Mon Sep 17 00:00:00 2001 From: Sachin Ranchod Date: Thu, 16 Nov 2023 06:14:58 -0800 Subject: [PATCH 4/4] Sachin edits to Incident Management Bot blog post (#600) * sachin edits * fix: fixing incident blog content --------- Co-authored-by: Matheus Littig --- apps/blog/src/pages/incident-bot.mdx | 137 +++++++++++++++++++++------ apps/blog/src/theme/mdx-theme.tsx | 21 +++- 2 files changed, 124 insertions(+), 34 deletions(-) diff --git a/apps/blog/src/pages/incident-bot.mdx b/apps/blog/src/pages/incident-bot.mdx index c7a51f93f..38bb8529f 100644 --- a/apps/blog/src/pages/incident-bot.mdx +++ b/apps/blog/src/pages/incident-bot.mdx @@ -1,37 +1,112 @@ --- title: Incidents management made easy with Zipper date: 2023/11/07 -description: A comprehensive review of how Zipper can streamline your product incidents process. +description: How a Slack bot can help you improve your incident management process tag: build-process author: Matheus Littig summary: | - Hello! We'ew thrilled to announce that our company has developed an innovative solution to streamline incident management processes. Introducing the Incident Management Bot, a Slack bot designed to simplify the creation, updates, and closure of incidents, and provide a comprehensive overview of on-hold, closed, and in-progress incidents. + We've built a Slack bot that simplifies the process of creating, updating, and closing incidents. A single slash command kicks off the process by creating an incident channel, assigning a incident commander and communication lead, and reminds you to capture regular updates. You can fork the applet from https://zipper.dev/zipper-inc/incident-bot and follow the Readme instructions to get started. --- -Have you ever found yourself facing an urgent incident related to your product within your company, unsure of where to start to resolve it? Who should be involved in the discussion? Who will take charge of resolving the issue from beginning to end? Is there a historical record of similar issues and how they were previously resolved? What if you could automate and document this process using a dedicated internal tool for handling incidents? +Anyone that's been involved in dealing with a serious incident or outage will tell you that it can be an overwhelming experience. You're under pressure to move quickly, communicate clearly, and solve complex problems with limited information. -That's precisely why we're thrilled to introduce our Incident Management Bot! In a nutshell, it's a Slack bot designed to simplify the creation, updates, and closure of incidents while providing an overview of on-hold, closed, and in-progress incidents. Below are some of the key features: +One of the ways that you can make the lives of on-call teams easier ris by implementing a clear incident management process that includes: + +- Well-defined roles for the incident manager and the communications lead +- A clear communication plan with regular updates +- Dedicated space for the team to work +- Ways for people to ramp up quickly +- Timelines for post-mortems + +We all know that having a plan is great. We also know that plans tend to go out the window when you're scrambling to fix an outage. That's why we built a Slack bot that helps manage the process for you - all you need to remember is a single slash command. + +The Incident Management Bot we built using Zipper is designed to simplify and standardize the process of creating, updating, and closing incidents. It also includes a dedicate web page for every incident that shows a summary of the key updates for stakeholder management. Below are some of the key features: - Provides slash commands for creating, updating, and adding contextual information to incidents. -- Creates a dedicated incident channel for each incident. -- Broadcasts updates to multiple channels. +- Creates a dedicated Slack channel for each incident. +- Broadcasts updates to multiple channels and a web page. - Captures contextual information that may be useful during post-mortem analysis. ## Setting Up Slack Bot Before we delve into creating new incidents, it's crucial to integrate your Zipper applet with the Slack API. Let's get started with the setup: -1. Access [Slack API apps](https://api.slack.com/apps) and create a new app from scratch. - slack-new-app -2. Obtain the App Credentials: **Client ID** and **Client Secret** from the _Basic Information_ menu. - slack-credentials -3. In the _OAuth & Permissions_ menu, paste the following URL: https://zipper.dev/connectors/slack/auth into the **Redirect URLs** section. - slack-permissions -4. In the Slash Commands menu, create a new command called `/incident` with the specified configuration. - slack-slash-commands +1. **Fork the Incident Management Bot applet.** + +2. **Create a new Slack app:** + - Visit [Slack API apps](https://api.slack.com/apps). + - Choose "Create New App" and select "From an App Manifest." + - Paste the provided JSON object: +```JSON +{ + "display_information": { + "name": "Incident-Bot" + }, + "features": { + "bot_user": { + "display_name": "Incident-Bot", + "always_online": false + }, + "slash_commands": [ + { + "command": "/incident", + "url": "https://{your-forked-applet-name}.zipper.run/slack-commands.ts/relay", + "description": "Manage incidents inside Zipper", + "usage_hint": "create, update, close, summary", + "should_escape": false + } + ] + }, + "oauth_config": { + "redirect_urls": [ + "https://zipper.dev/connectors/slack/auth" + ], + "scopes": { + "bot": [ + "channels:history", + "channels:join", + "channels:manage", + "channels:read", + "channels:write.invites", + "chat:write", + "chat:write.public", + "commands", + "incoming-webhook", + "usergroups:read", + "users.profile:read", + "users:read", + "users:read.email", + "users:write", + "usergroups:write", + "groups:read" + ] + } + }, + "settings": { + "event_subscriptions": { + "request_url": "https://{your-forked-applet-name}.zipper.run/slack-commands.ts/relay", + "bot_events": [ + "message.channels" + ] + }, + "interactivity": { + "is_enabled": true, + "request_url": "https://{your-forked-applet-name}.zipper.run/slack-interactivity.ts/relay" + }, + "org_deploy_enabled": false, + "socket_mode_enabled": false, + "token_rotation_enabled": false + } +} +``` +3. **Obtain App Credentials:** + - In the Slack app, go to the _Basic Information_ menu. + - Retrieve the **Client ID** and **Client Secret.** - -5. Paste the **Client ID** and **Client Secret** into the `slack-connector.ts`, configure the bot-scopes as follows: `channels:history`, `channels:join`, `channels:manage`, `channels:write.invites`, `channels:read`, `chat:write`, `commands,` `users:read`, `users:read.email`, and `users:write`. Finally, click on **Submit**. +4. **Configure Slack Connector:** + - Paste the **Client ID** and **Client Secret** into `slack-connector.ts`. + - Configure bot-scopes as specified in the app manifest. + - Click on **Save and Install.** Once the bot is installed in the desired Slack channel, we're all set to start creating new incidents. @@ -39,7 +114,12 @@ Once the bot is installed in the desired Slack channel, we're all set to start c In the Slack channel where the incident bot has been added, simply type `/incident create` in the chat. This will open a modal like the one shown below: -incident-create +incident-create Fill in the modal with incident information, and click **Submit**. The following JSON objects will be stored within Zipper's applet. @@ -76,7 +156,12 @@ In the incident channel, the bot will post a summary containing the main informa Within the incident's channel, you can use the slash command /incident update to update an incident. Executing this command will open a modal with the following fields. -incident-create +incident-create After filling in the modal's fields with the most recent incident statistics and saving the changes, this update will be automatically linked to the incident's history within the Zipper storage, as shown in the following JSON object. @@ -117,7 +202,7 @@ Upon executing this command, a confirmation modal will appear, and when submitte ## Getting Incidents Summary -In the `main.ts` file of the applet workspace, you will find three list of incidents categorized by their current status from the last history update of then. +In the `main.ts` file of the applet workspace, you will find three list of incidents categorized by their current status from the last history update of then.