Plugin UX improvement prerequisites (#24436)

* Add new assets for integration enroll flow

* Adapt integration status after switch to enum

* Prettier

* Fix some lints

* Rename enum numbers according to conventions
This commit is contained in:
Justinas Stankevičius 2023-04-13 16:13:36 +03:00 committed by GitHub
parent 7ce53f2a42
commit 067ccba2b8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 152 additions and 32 deletions

View file

@ -0,0 +1,76 @@
<svg width="393" height="393" viewBox="0 0 393 393" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="196.5" cy="196.5" r="196.5" fill="#0E1224"/>
<g clip-path="url(#clip0_262_9062)">
<path d="M72 270.2C72 274.4 68.6 277.7 64.5 277.7C60.4 277.7 57 274.3 57 270.2C57 266.1 60.4 262.7 64.5 262.7H72V270.2Z" fill="#E01E5A"/>
<path d="M75.8 270.2C75.8 266 79.2 262.7 83.3 262.7C87.4 262.7 90.8001 266.1 90.8001 270.2V289.1C90.8001 293.3 87.4 296.6 83.3 296.6C79.2 296.6 75.8 293.2 75.8 289.1V270.2Z" fill="#E01E5A"/>
<path d="M83.3999 240C79.1999 240 75.8999 236.6 75.8999 232.5C75.8999 228.4 79.2999 225 83.3999 225C87.4999 225 90.8999 228.4 90.8999 232.5V240H83.3999Z" fill="#36C5F0"/>
<path d="M83.4 243.8C87.6 243.8 90.9 247.2 90.9 251.3C90.9 255.4 87.5 258.8 83.4 258.8H64.5C60.3 258.8 57 255.4 57 251.3C57 247.2 60.4 243.8 64.5 243.8H83.4Z" fill="#36C5F0"/>
<path d="M113.5 251.4C113.5 247.2 116.9 243.9 121 243.9C125.2 243.9 128.5 247.3 128.5 251.4C128.5 255.5 125.1 258.9 121 258.9H113.5V251.4Z" fill="#2EB67D"/>
<path d="M109.8 251.4C109.8 255.6 106.4 258.9 102.3 258.9C98.2 258.9 94.8 255.5 94.8 251.4V232.5C94.8 228.3 98.2 225 102.3 225C106.4 225 109.8 228.4 109.8 232.5V251.4Z" fill="#2EB67D"/>
<path d="M102.2 281.5C106.4 281.5 109.7 284.9 109.7 289C109.7 293.2 106.3 296.5 102.2 296.5C98.1 296.5 94.7 293.1 94.7 289V281.5H102.2Z" fill="#ECB22E"/>
<path d="M102.2 277.8C98 277.8 94.7 274.4 94.7 270.3C94.7 266.2 98.1 262.8 102.2 262.8H121.1C125.3 262.8 128.6 266.2 128.6 270.3C128.6 274.4 125.2 277.8 121.1 277.8H102.2Z" fill="#ECB22E"/>
</g>
<g filter="url(#filter0_d_262_9062)">
<path d="M79.5266 150.678H69V169.818H79.5266V150.678Z" fill="#06AC38"/>
<path d="M108.646 101.509C102.995 98.5013 99.0759 98 89.8253 98H69V141.565H79.5266H80.8937H89.7342C97.9823 141.565 104.134 141.063 109.557 137.463C115.481 133.544 118.534 127.028 118.534 119.509C118.534 111.352 114.752 104.835 108.646 101.509ZM92.1494 132.451H79.5266V107.342L91.4203 107.251C102.266 107.114 107.689 110.942 107.689 119.6C107.689 128.896 100.99 132.451 92.1494 132.451Z" fill="#06AC38"/>
</g>
<path d="M210.221 63.147H228.819C230.576 63.147 232 64.5731 232 66.3323V83.2931C232 89.7586 226.765 94.9999 220.308 94.9999H220.252C213.795 95.0008 208.559 89.7603 208.558 83.2948C208.558 83.2942 208.558 83.2937 208.558 83.2931V64.8117C208.558 63.8923 209.303 63.147 210.221 63.147Z" fill="#5059C9"/>
<path d="M222.791 59.7943C226.952 59.7943 230.326 56.4167 230.326 52.2502C230.326 48.0837 226.952 44.7061 222.791 44.7061C218.629 44.7061 215.256 48.0837 215.256 52.2502C215.256 56.4167 218.629 59.7943 222.791 59.7943Z" fill="#5059C9"/>
<path d="M199.349 59.7941C205.36 59.7941 210.233 54.9154 210.233 48.8971C210.233 42.8788 205.36 38 199.349 38C193.338 38 188.465 42.8788 188.465 48.8971C188.465 54.9154 193.338 59.7941 199.349 59.7941Z" fill="#7B83EB"/>
<path d="M213.861 63.147H183.162C181.426 63.19 180.053 64.6325 180.093 66.3708V85.7156C179.851 96.147 188.093 104.803 198.512 105.059C208.93 104.803 217.173 96.147 216.93 85.7156V66.3708C216.971 64.6325 215.597 63.19 213.861 63.147Z" fill="#7B83EB"/>
<path opacity="0.1" d="M200.186 63.147V90.2555C200.178 91.4986 199.425 92.6154 198.277 93.0887C197.912 93.2436 197.519 93.3234 197.122 93.3234H181.566C181.349 92.7702 181.148 92.217 180.98 91.647C180.394 89.7233 180.095 87.7235 180.093 85.7123V66.3658C180.053 64.6303 181.424 63.19 183.157 63.147H200.186Z" fill="black"/>
<path opacity="0.2" d="M198.512 63.147V91.932C198.511 92.3294 198.432 92.7227 198.277 93.0887C197.804 94.2383 196.689 94.9916 195.447 94.9999H182.353C182.069 94.4467 181.801 93.8934 181.566 93.3234C181.332 92.7535 181.148 92.217 180.98 91.647C180.394 89.7233 180.095 87.7235 180.093 85.7123V66.3658C180.053 64.6303 181.424 63.19 183.157 63.147H198.512Z" fill="black"/>
<path opacity="0.2" d="M198.512 63.147V88.579C198.499 90.2681 197.135 91.6342 195.448 91.647H180.981C180.394 89.7233 180.095 87.7235 180.093 85.7123V66.3658C180.053 64.6303 181.424 63.19 183.157 63.147H198.512Z" fill="black"/>
<path opacity="0.2" d="M196.837 63.147V88.579C196.825 90.2681 195.46 91.6342 193.773 91.647H180.981C180.394 89.7233 180.095 87.7235 180.093 85.7123V66.3658C180.053 64.6303 181.424 63.19 183.157 63.147H196.837Z" fill="black"/>
<path opacity="0.1" d="M200.186 54.4798V59.7607C199.901 59.7774 199.634 59.7942 199.349 59.7942C199.064 59.7942 198.796 59.7774 198.512 59.7607C197.947 59.7231 197.386 59.6333 196.837 59.4924C193.447 58.6885 190.645 56.3076 189.302 53.0883C189.071 52.5477 188.892 51.9864 188.767 51.4119H197.122C198.812 51.4183 200.18 52.788 200.186 54.4798Z" fill="black"/>
<path opacity="0.2" d="M198.512 56.1563V59.7607C197.946 59.7232 197.386 59.6334 196.837 59.4925C193.446 58.6885 190.645 56.3077 189.302 53.0884H195.447C197.137 53.0948 198.505 54.4646 198.512 56.1563Z" fill="black"/>
<path opacity="0.2" d="M198.512 56.1563V59.7607C197.946 59.7232 197.386 59.6334 196.837 59.4925C193.446 58.6885 190.645 56.3077 189.302 53.0884H195.447C197.137 53.0948 198.505 54.4646 198.512 56.1563Z" fill="black"/>
<path opacity="0.2" d="M196.837 56.1561V59.4922C193.446 58.6883 190.645 56.3074 189.302 53.0881H193.773C195.463 53.0946 196.831 54.4644 196.837 56.1561Z" fill="black"/>
<path d="M163.069 53.0881H193.768C195.463 53.0881 196.837 54.464 196.837 56.1611V86.8975C196.837 88.5947 195.463 89.9705 193.768 89.9705H163.069C161.374 89.9705 160 88.5946 160 86.8975V56.1611C160 54.464 161.374 53.0881 163.069 53.0881Z" fill="url(#paint0_linear_262_9062)"/>
<path d="M186.496 64.7867H180.359V81.5178H176.45V64.7867H170.341V61.541H186.496V64.7867Z" fill="white"/>
<g clip-path="url(#clip1_262_9062)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M328.993 105.243L329.383 112.79C335.499 119.557 337.928 129.142 334.892 138.164C330.337 151.61 315.33 158.68 301.32 153.952C287.311 149.224 279.72 134.477 284.275 121.031C287.354 111.966 295.118 105.807 304.14 104.202L308.998 98.4338C293.774 98.0434 279.46 107.455 274.299 122.636C268.01 141.287 277.986 161.499 296.636 167.788C315.287 174.077 335.499 164.101 341.788 145.451C346.906 130.357 341.267 114.135 328.993 105.243Z" fill="#F0F2F4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M320.275 127.537L320.014 116.954L319.798 110.882L319.667 105.59C319.667 105.59 319.711 103.031 319.624 102.467C319.624 102.337 319.581 102.251 319.537 102.164V102.077C319.451 101.904 319.277 101.773 319.104 101.687C318.887 101.6 318.67 101.643 318.496 101.73C318.496 101.73 318.453 101.73 318.453 101.773C318.366 101.817 318.279 101.86 318.193 101.947C317.759 102.381 316.241 104.419 316.241 104.419L312.945 108.54L309.084 113.267L302.448 121.508C302.448 121.508 299.412 125.282 300.063 129.966C300.713 134.651 304.226 136.906 306.916 137.817C309.605 138.728 313.769 139.031 317.108 135.735C320.361 132.395 320.275 127.537 320.275 127.537Z" fill="#F0F2F4"/>
</g>
<path d="M341.165 259.05L310.922 228.044L307.954 225L285.225 248.303L274.835 259.05C273.722 260.192 273.722 261.999 274.835 263.045L295.615 284.35L307.954 297L330.682 273.697L331.053 273.317L341.165 263.045C342.278 261.903 342.278 260.097 341.165 259.05ZM307.954 271.7L297.563 261.048L307.954 250.395L318.344 261.048L307.954 271.7Z" fill="#2684FF"/>
<path d="M307.96 250.4C301.178 243.466 301.169 232.029 307.95 225L285.17 248.367L297.535 261L307.96 250.4Z" fill="url(#paint1_linear_262_9062)"/>
<path d="M318.419 260.905L307.96 271.7C314.816 278.729 314.806 289.971 307.95 297L330.74 273.633L318.419 260.905Z" fill="url(#paint2_linear_262_9062)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M160 178C160 173.029 164.029 169 169 169H223C227.971 169 232 173.029 232 178V216C232 220.971 227.971 225 223 225H169C164.029 225 160 220.971 160 216V178ZM162 178C162 174.134 165.134 171 169 171H223C226.866 171 230 174.134 230 178V178.952C230 181.391 228.731 183.654 226.65 184.925L199.65 201.425C197.409 202.795 194.591 202.795 192.35 201.425L165.35 184.925C163.269 183.654 162 181.391 162 178.952V178ZM230 184.61V216C230 219.866 226.866 223 223 223H169C165.134 223 162 219.866 162 216V184.61C162.638 185.4 163.415 186.087 164.307 186.632L191.307 203.132C194.188 204.893 197.812 204.893 200.693 203.132L227.693 186.632C228.585 186.087 229.362 185.4 230 184.61Z" fill="#F0F2F4"/>
<g clip-path="url(#clip2_262_9062)">
<path d="M220.991 299.57C216.26 297.404 211.267 295.868 206.137 295C205.435 296.255 204.8 297.546 204.234 298.868C198.77 298.044 193.213 298.044 187.749 298.868C187.183 297.546 186.548 296.255 185.846 295C180.713 295.875 175.716 297.415 170.981 299.581C161.58 313.49 159.032 327.053 160.306 340.423C165.811 344.491 171.973 347.584 178.524 349.569C179.999 347.585 181.304 345.481 182.426 343.277C180.295 342.482 178.239 341.5 176.281 340.344C176.797 339.97 177.301 339.585 177.788 339.211C183.485 341.891 189.704 343.28 196 343.28C202.296 343.28 208.515 341.891 214.212 339.211C214.705 339.613 215.209 339.999 215.719 340.344C213.757 341.502 211.697 342.486 209.563 343.283C210.683 345.485 211.988 347.588 213.465 349.569C220.021 347.592 226.188 344.5 231.694 340.429C233.189 324.924 229.14 311.485 220.991 299.57ZM184.04 332.201C180.489 332.201 177.555 328.978 177.555 325.014C177.555 321.05 180.387 317.799 184.028 317.799C187.67 317.799 190.58 321.05 190.518 325.014C190.456 328.978 187.658 332.201 184.04 332.201ZM207.96 332.201C204.404 332.201 201.482 328.978 201.482 325.014C201.482 321.05 204.313 317.799 207.96 317.799C211.607 317.799 214.495 321.05 214.433 325.014C214.371 328.978 211.579 332.201 207.96 332.201Z" fill="#5865F2"/>
</g>
<defs>
<filter id="filter0_d_262_9062" x="53" y="98" width="80" height="80" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_262_9062"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_262_9062" result="shape"/>
</filter>
<linearGradient id="paint0_linear_262_9062" x1="166.399" y1="50.687" x2="190.482" y2="92.3461" gradientUnits="userSpaceOnUse">
<stop stop-color="#5A62C3"/>
<stop offset="0.5" stop-color="#4D55BD"/>
<stop offset="1" stop-color="#3940AB"/>
</linearGradient>
<linearGradient id="paint1_linear_262_9062" x1="306.118" y1="239.576" x2="291.264" y2="254.103" gradientUnits="userSpaceOnUse">
<stop offset="0.176" stop-color="#0052CC"/>
<stop offset="1" stop-color="#2684FF"/>
</linearGradient>
<linearGradient id="paint2_linear_262_9062" x1="309.969" y1="282.257" x2="324.793" y2="267.8" gradientUnits="userSpaceOnUse">
<stop offset="0.176" stop-color="#0052CC"/>
<stop offset="1" stop-color="#2684FF"/>
</linearGradient>
<clipPath id="clip0_262_9062">
<rect width="72" height="72" fill="white" transform="translate(57 225)"/>
</clipPath>
<clipPath id="clip1_262_9062">
<rect width="72" height="72" fill="white" transform="translate(272 98)"/>
</clipPath>
<clipPath id="clip2_262_9062">
<rect width="72" height="72" fill="white" transform="translate(160 286)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

View file

@ -22,8 +22,15 @@ import awsIcon from 'design/assets/images/icons/aws.svg';
import slackIcon from 'design/assets/images/icons/slack.svg';
import Table, { Cell } from 'design/DataTable';
import { MenuButton, MenuItem } from 'shared/components/MenuAction';
import { ToolTipInfo } from 'shared/components/ToolTip';
import type { Integration, Plugin } from 'teleport/services/integrations';
import {
getStatusCodeDescription,
getStatusCodeTitle,
Integration,
IntegrationStatusCode,
Plugin,
} from 'teleport/services/integrations';
type Props<IntegrationLike> = {
list: IntegrationLike[];
@ -75,12 +82,18 @@ export function IntegrationList(props: Props<IntegrationLike>) {
const StatusCell = ({ item }: { item: IntegrationLike }) => {
const status = getStatus(item);
const statusDescription = getStatusCodeDescription(item.statusCode);
return (
<Cell>
<Flex alignItems="center">
<StatusLight status={status} />
{item.statusCode}
{getStatusCodeTitle(item.statusCode)}
{statusDescription && (
<Box mx="1">
<ToolTipInfo>{statusDescription}</ToolTipInfo>
</Box>
)}
</Flex>
</Cell>
);
@ -106,17 +119,20 @@ enum Status {
Error,
}
function getStatus(item: IntegrationLike) {
switch (item.statusCode) {
case 'Running':
function getStatus(item: IntegrationLike): Status | null {
if (item.resourceType !== 'plugin') {
return Status.Success;
}
case 'Unauthorized':
case 'Unknown error':
return Status.Error;
case 'Bot not invited to channel':
switch (item.statusCode) {
case IntegrationStatusCode.Unknown:
return null;
case IntegrationStatusCode.Running:
return Status.Success;
case IntegrationStatusCode.SlackNotInChannel:
return Status.Warning;
default:
return Status.Error;
}
}

View file

@ -14,6 +14,8 @@
* limitations under the License.
*/
import { IntegrationStatusCode } from 'teleport/services/integrations';
import type { Plugin, Integration } from 'teleport/services/integrations';
export const plugins: Plugin[] = [
@ -22,7 +24,7 @@ export const plugins: Plugin[] = [
name: 'slack-default',
details: `plugin running status`,
kind: 'slack',
statusCode: 'Running',
statusCode: IntegrationStatusCode.Running,
spec: {},
},
{
@ -30,7 +32,7 @@ export const plugins: Plugin[] = [
name: 'slack-secondary',
details: `plugin unknown status`,
kind: 'slack',
statusCode: 'Unknown',
statusCode: IntegrationStatusCode.Unknown,
spec: {},
},
{
@ -38,15 +40,15 @@ export const plugins: Plugin[] = [
name: 'acmeco-default',
details: `plugin unauthorized status`,
kind: 'acmeco' as any, // unknown plugin, should handle gracefuly
statusCode: 'Unauthorized',
statusCode: IntegrationStatusCode.Unauthorized,
spec: {},
},
{
resourceType: 'plugin',
name: 'slack',
details: 'plugin unknown error status',
details: 'plugin other error status',
kind: 'slack',
statusCode: 'Unknown error',
statusCode: IntegrationStatusCode.OtherError,
spec: {},
},
{
@ -54,7 +56,7 @@ export const plugins: Plugin[] = [
name: 'slack',
details: '',
kind: 'slack',
statusCode: 'Bot not invited to channel',
statusCode: IntegrationStatusCode.SlackNotInChannel,
spec: {},
},
];
@ -64,14 +66,14 @@ export const integrations: Integration[] = [
resourceType: 'integration',
name: 'aws',
kind: 'aws-oidc',
statusCode: 'Running',
statusCode: IntegrationStatusCode.Running,
spec: { roleArn: '' },
},
{
resourceType: 'integration',
name: 'some-integration-name',
kind: '' as any,
statusCode: 'Running',
statusCode: IntegrationStatusCode.Running,
spec: { roleArn: '' },
},
];

View file

@ -17,7 +17,7 @@
import api from 'teleport/services/api';
import cfg from 'teleport/config';
import { Integration } from './types';
import { Integration, IntegrationStatusCode } from './types';
export const integrationService = {
fetchIntegration(clusterId: string, name: string): Promise<Integration> {
@ -51,6 +51,6 @@ function makeIntegration(json: any): Integration {
// integration resources together. As discussed, the only
// supported status for integration is `Running` for now:
// https://github.com/gravitational/teleport/pull/22556#discussion_r1158674300
statusCode: 'Running',
statusCode: IntegrationStatusCode.Running,
};
}

View file

@ -45,18 +45,44 @@ export type IntegrationSpecAwsOidc = {
roleArn: string;
};
// IntegrationStatusCode must be in sync with the text values defined
// in the backend as these are used to determine the status color:
// https://github.com/gravitational/teleport.e/blob/1ebe50ce2fe608dc6dd24fef205fb9caaa216a46/lib/web/ui/plugins.go#L51
export type IntegrationStatusCode =
| 'Unknown'
| 'Running'
| 'Unknown error'
| 'Unauthorized'
| 'Bot not invited to channel';
export enum IntegrationStatusCode {
Unknown = 0,
Running = 1,
OtherError = 2,
Unauthorized = 3,
SlackNotInChannel = 10,
}
export function getStatusCodeTitle(code: IntegrationStatusCode): string {
switch (code) {
case IntegrationStatusCode.Unknown:
return 'Unknown';
case IntegrationStatusCode.Running:
return 'Running';
case IntegrationStatusCode.Unauthorized:
return 'Unauthorized';
case IntegrationStatusCode.SlackNotInChannel:
return 'Bot not invited to channel';
default:
return 'Unknown error';
}
}
export function getStatusCodeDescription(
code: IntegrationStatusCode
): string | null {
switch (code) {
case IntegrationStatusCode.Unauthorized:
return 'The integration was denied access. This could be a result of revoked authorization on the 3rd party provider. Try removing and re-connecting the integration.';
case IntegrationStatusCode.SlackNotInChannel:
return 'The Slack integration must be invited to the default channel in order to receive access request notifications.';
default:
return null;
}
}
export type Plugin = Integration<'plugin', PluginKind, PluginSpec>;
export type PluginSpec = {
statusDescription?: string;
};
export type PluginSpec = Record<string, never>; // currently no 'spec' fields exposed to the frontend
export type PluginKind = 'slack';