Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Added Console button component to display links to AWS console #1016

Merged
merged 1 commit into from
Jul 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/images/console-button.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions docs/style_guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,20 @@ sidebar_custom_props: {"info": true}
---
```

### Navigating the AWS console

There are instances where the user needs to navigate to specific screens in the AWS console. It is preferable to provide a link to the exact screen if possible, or a close as can be done.

For example to link to the EKS console you can use a link like this:

```
https://console.aws.amazon.com/eks/home#/clusters
```

> Note that this has had the region information removed, the link as shown in the browser would be: `https://us-west-2.console.aws.amazon.com/eks/home?region=us-west-2#/clusters`. The region must be removed to allow the content to be portable.

These links should be displayed to the user with the [Console button component](./ui_components.md) for consistency.

### Screenshots

Use of screenshots should be limited to only wherever necessary. Where possible command-line output should be used as it is more maintainable and testable. When screenshots are necessary only the relevant section of the screen should be included as it reduces image size and makes the images more legible, especially for users with limited screen resolution. Screenshots should be cropped to display only the necessary details.
Expand Down
18 changes: 18 additions & 0 deletions docs/ui_components.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,24 @@ This is done by adding an ordered markdown list immediately after the `::yaml` d

If using annotations then all paths should have a corresponding list entry, and the code lines will always be annotated in the order of the paths as listed in the attribute.

## Console button

![Console button](images/console-button.png)

The console button component is designed to provide a consistent way to link to the AWS console.

The component is used like so:

```jsx
<ConsoleButton
url="https://console.aws.amazon.com/cloudwatch/home#dashboards"
service="cloudwatch"
label="Open CloudWatch console"
/>
```

The `service` parameter dictates the icon that is shown, and the corresponding image must exist in `website/static/img/services`.

## Browser Window

![Browser Window](images/browser-window.png)
Expand Down
31 changes: 31 additions & 0 deletions website/src/components/ConsoleButton/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React, { type ReactNode } from "react";
import clsx from "clsx";

import styles from "./styles.module.css";
import useBaseUrl from "@docusaurus/useBaseUrl";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";

interface Props {
service: string;
url: string;
label: string;
}

export default function ConsoleButton({
service,
url = "http://localhost:3000",
label = "Launch",
}: Props): JSX.Element {
let serviceIcon = service || "console";
return (
<a className={styles.button} href={url} target="_blank">
<img
className={styles.icon}
src={useBaseUrl(`/img/services/${serviceIcon}.png`)}
alt="AWS console icon"
/>
<span className={styles.label}>{label}</span>
</a>
);
}
31 changes: 31 additions & 0 deletions website/src/components/ConsoleButton/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;

text-decoration: none;
color: initial;
background-color: #f90;
padding-inline: 10px;
padding-block: 4px;
border: 1px solid #f90;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
text-align: center;
line-height: 30px;
margin-bottom: 30px;
color: black;
}

.icon {
width: 25px;
height: auto;
margin: auto;
vertical-align: middle;
display: inline-block;
}

.label {
padding-left: 10px;
}
2 changes: 2 additions & 0 deletions website/src/theme/MDXComponents.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Kustomization from "@site/src/components/Kustomization";
import LaunchButton from "@site/src/components/LaunchButton";
import YamlFile, { YamlAnnotation } from "@site/src/components/YamlFile";
import ReactPlayer from "react-player";
import ConsoleButton from "@site/src/components/ConsoleButton";

export default {
// Re-use the default mapping
Expand All @@ -21,4 +22,5 @@ export default {
ReactPlayer: ReactPlayer,
YamlFile: YamlFile,
YamlAnnotation: YamlAnnotation,
ConsoleButton: ConsoleButton,
};
Binary file added website/static/img/services/cloudwatch.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/services/codebuild.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/services/codepipeline.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/services/console.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/services/dynamodb.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/services/ec2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/services/ecr.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/services/eks.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/services/elb.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/services/rds.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/services/vpc-lattice.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/services/vpc.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading