+
+ );
+
return (
-
-
+
);
},
- { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Integrations }
+ {
+ action: ProjectPermissionActions.Read,
+ subject: ProjectPermissionSub.Integrations
+ }
);
diff --git a/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
index 164470289..b9d51c303 100644
--- a/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx
@@ -1,11 +1,11 @@
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
-import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faChevronLeft, faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { NoEnvironmentsBanner } from "@app/components/integrations/NoEnvironmentsBanner";
import { createNotification } from "@app/components/notifications";
-import { DeleteActionModal, Skeleton, Tooltip } from "@app/components/v2";
+import { Button, DeleteActionModal, Skeleton, Tooltip } from "@app/components/v2";
import {
ProjectPermissionActions,
ProjectPermissionSub,
@@ -22,6 +22,7 @@ type Props = {
onIntegrationStart: (slug: string) => void;
// cb: handle popUpClose child->parent communication pattern
onIntegrationRevoke: (slug: string, cb: () => void) => void;
+ onViewActiveIntegrations?: () => void;
};
type TRevokeIntegrationPopUp = { provider: string };
@@ -31,7 +32,8 @@ export const CloudIntegrationSection = ({
cloudIntegrations = [],
integrationAuths = {},
onIntegrationStart,
- onIntegrationRevoke
+ onIntegrationRevoke,
+ onViewActiveIntegrations
}: Props) => {
const { t } = useTranslation();
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
@@ -60,11 +62,19 @@ export const CloudIntegrationSection = ({
)}
+ {view === IntegrationView.List ? (
+
+ setView(IntegrationView.New)}
+ isLoading={isIntegrationLoading}
+ integrations={integrations}
+ environments={environments}
+ onIntegrationDelete={handleIntegrationDelete}
+ workspaceId={workspaceId}
+ />
+
+ ) : (
+
+ setView(IntegrationView.List) : undefined
+ }
+ isLoading={isCloudIntegrationsLoading || isIntegrationAuthLoading}
+ cloudIntegrations={cloudIntegrations}
+ integrationAuths={integrationAuths}
+ onIntegrationStart={handleProviderIntegrationStart}
+ onIntegrationRevoke={handleIntegrationAuthRevoke}
+ />
+
+ )}
+
+ {onViewActiveIntegrations && (
+ }
+ >
+ Back to Integrations
+
+ )}
-
- {t("integrations.cloud-integrations")}
{t("integrations.click-to-start")}
+
{isLoading &&
Array.from({ length: 12 }).map((_, index) => (
-
-
+
-
{cloudIntegration.name}
{cloudIntegration.isAvailable &&
diff --git a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
index 3b1df9bdd..a4e6bb586 100644
--- a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
@@ -23,34 +23,29 @@ export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
{t("integrations.framework-integrations")}
{t("integrations.click-to-setup")}
+
{sortedFrameworks.map((framework) => (
- 
+ )}
+ {framework?.name && (
+
1 ? "px-1 text-sm" : "px-2 text-xl"
- } w-full max-w-xs text-center`}
- >
- {framework?.image && (
-
- )}
- {framework?.name && framework?.image && }
- {framework?.name && framework.name}
-
+ {framework?.image && (
+
- )}
- {framework?.name && framework?.image && }
- {framework?.name && framework.name}
-
+ )}
+ {framework?.name && (
+
+ {framework.name}
+
+ )}
))}
{
href="https://infisical.com/docs/cli/commands/run"
rel="noopener noreferrer"
target="_blank"
- className="relative flex h-32 cursor-pointer flex-row items-center justify-center rounded-md p-0.5 duration-200"
+ className="relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4 duration-200 hover:bg-mineshaft-700"
>
-
-
CLI
@@ -73,13 +65,10 @@ export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
href="https://infisical.com/docs/sdks/overview"
rel="noopener noreferrer"
target="_blank"
- className="relative flex h-32 cursor-pointer flex-row items-center justify-center rounded-md p-0.5 duration-200"
+ className="relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4 duration-200 hover:bg-mineshaft-700"
>
-
- ;
workspaceId: string;
+ onAddIntegration: () => void;
};
export const IntegrationsSection = ({
@@ -22,58 +26,47 @@ export const IntegrationsSection = ({
environments = [],
isLoading,
onIntegrationDelete,
- workspaceId
+ workspaceId,
+ onAddIntegration,
+ cloudIntegrations = []
}: Props) => {
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"deleteConfirmation",
"deleteSecretsConfirmation"
] as const);
- const { mutate: syncIntegration } = useSyncIntegration();
const [shouldDeleteSecrets, setShouldDeleteSecrets] = useToggle(false);
return (
SDKs
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
index 2fbcca15d..a09535f03 100644
--- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -1,13 +1,16 @@
-import { Checkbox, DeleteActionModal, EmptyState, Skeleton } from "@app/components/v2";
-import { usePopUp, useToggle } from "@app/hooks";
-import { useSyncIntegration } from "@app/hooks/api/integrations/queries";
-import { TIntegration } from "@app/hooks/api/types";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ConfiguredIntegrationItem } from "./ConfiguredIntegrationItem";
+import { Button, Checkbox, DeleteActionModal } from "@app/components/v2";
+import { usePopUp, useToggle } from "@app/hooks";
+import { TCloudIntegration, TIntegration } from "@app/hooks/api/types";
+
+import { IntegrationsTable } from "./components";
type Props = {
environments: Array<{ name: string; slug: string; id: string }>;
integrations?: TIntegration[];
+ cloudIntegrations?: TCloudIntegration[];
isLoading?: boolean;
onIntegrationDelete: (
integrationId: string,
@@ -15,6 +18,7 @@ type Props = {
cb: () => void
) => Promise
-
- {isLoading && (
- Current Integrations
+Integrations
Manage integrations with third-party services.
- {
+ return (
+ router.push(`/integrations/details/${integration.id}`)}
+ className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+ key={`integration-${id}`}
+ >
+
+
+
+
+ {" "}
+
+ {environment?.name ?? "-"}
+
+
+
+ {" "}
+ {typeof integration.isSynced !== "boolean" ? (
+
+ Pending Sync
+
+ ) : (
+
+ {integration.lastUsed && (
+
+ )}
+
+
+
+
+ );
+};
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationsTable.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationsTable.tsx
new file mode 100644
index 000000000..f61624451
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationsTable.tsx
@@ -0,0 +1,415 @@
+import { useMemo, useState } from "react";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import {
+ faArrowDown,
+ faArrowUp,
+ faCheck,
+ faClock,
+ faFilter,
+ faMagnifyingGlass,
+ faPlug,
+ faSearch,
+ faWarning
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuTrigger,
+ EmptyState,
+ IconButton,
+ Input,
+ Pagination,
+ Table,
+ TableContainer,
+ TBody,
+ Th,
+ THead,
+ Tooltip,
+ Tr
+} from "@app/components/v2";
+import { usePagination, useResetPageHelper } from "@app/hooks";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { useSyncIntegration } from "@app/hooks/api/integrations/queries";
+import { TCloudIntegration, TIntegration } from "@app/hooks/api/integrations/types";
+
+import { IntegrationRow } from "./IntegrationRow";
+
+type Props = {
+ integrations?: TIntegration[];
+ cloudIntegrations?: TCloudIntegration[];
+ workspaceId: string;
+ isLoading?: boolean;
+ environments: Array<{ name: string; slug: string; id: string }>;
+ onDeleteIntegration: (integration: TIntegration) => void;
+};
+
+enum IntegrationsOrderBy {
+ App = "app",
+ Status = "status",
+ SecretPath = "secretPath",
+ Environment = "environment"
+}
+
+enum IntegrationStatus {
+ Synced = "synced",
+ NotSynced = "not-synced",
+ PendingSync = "pending-sync"
+}
+
+type IntegrationFilters = {
+ environmentIds: string[];
+ integrations: string[];
+ status: IntegrationStatus[];
+};
+
+const STATUS_ICON_MAP = {
+ [IntegrationStatus.Synced]: { icon: faCheck, className: "text-green" },
+ [IntegrationStatus.NotSynced]: { icon: faWarning, className: "text-red" },
+ [IntegrationStatus.PendingSync]: { icon: faClock, className: "text-yellow" }
+};
+
+export const IntegrationsTable = ({
+ integrations = [],
+ cloudIntegrations = [],
+ workspaceId,
+ environments,
+ onDeleteIntegration,
+ isLoading
+}: Props) => {
+ const { mutate: syncIntegration } = useSyncIntegration();
+
+ const initialFilters = useMemo(
+ () => ({
+ environmentIds: environments.map((env) => env.id),
+ integrations: [...new Set(integrations.map(({ integration }) => integration))],
+ status: Object.values(IntegrationStatus)
+ }),
+ [environments, integrations]
+ );
+
+ const [filters, setFilters] = useState(initialFilters);
+
+ const cloudIntegrationMap = useMemo(() => {
+ return new Map(
+ cloudIntegrations.map((cloudIntegration) => [cloudIntegration.slug, cloudIntegration])
+ );
+ }, [cloudIntegrations]);
+
+ const {
+ search,
+ setSearch,
+ setPage,
+ page,
+ perPage,
+ setPerPage,
+ offset,
+ orderDirection,
+ toggleOrderDirection,
+ orderBy,
+ setOrderDirection,
+ setOrderBy
+ } = usePagination(IntegrationsOrderBy.Status, { initPerPage: 20 });
+
+ const environmentMap = new Map(environments.map((env) => [env.id, env]));
+
+ const filteredIntegrations = useMemo(
+ () =>
+ integrations
+ .filter(({ integration, secretPath, envId, isSynced }) => {
+ if (!filters.status.includes(IntegrationStatus.Synced) && isSynced) return false;
+ if (!filters.status.includes(IntegrationStatus.NotSynced) && isSynced === false)
+ return false;
+ if (
+ !filters.status.includes(IntegrationStatus.PendingSync) &&
+ typeof isSynced !== "boolean"
+ )
+ return false;
+
+ if (!filters.integrations.includes(integration)) return false;
+
+ return (
+ integration.replace("-", " ").toLowerCase().includes(search.trim().toLowerCase()) ||
+ secretPath.replace("-", " ").toLowerCase().includes(search.trim().toLowerCase()) ||
+ environmentMap
+ .get(envId)
+ ?.name.replace("-", " ")
+ .toLowerCase()
+ .includes(search.trim().toLowerCase())
+ );
+ })
+ .sort((a, b) => {
+ const [integrationOne, integrationTwo] =
+ orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+ switch (orderBy) {
+ case IntegrationsOrderBy.SecretPath:
+ return integrationOne.secretPath
+ .toLowerCase()
+ .localeCompare(integrationTwo.secretPath.toLowerCase());
+ case IntegrationsOrderBy.Environment:
+ return (environmentMap.get(integrationOne.envId)?.name ?? "-")
+ .toLowerCase()
+ .localeCompare(
+ (environmentMap.get(integrationTwo.envId)?.name ?? "-").toLowerCase()
+ );
+ case IntegrationsOrderBy.Status:
+ if (typeof integrationOne.isSynced !== "boolean") return 1; // Place undefined at the end
+ if (typeof integrationTwo.isSynced !== "boolean") return -1;
+
+ return Number(integrationOne.isSynced) - Number(integrationTwo.isSynced);
+ case IntegrationsOrderBy.App:
+ default:
+ return integrationOne.integration
+ .toLowerCase()
+ .localeCompare(integrationTwo.integration.toLowerCase());
+ }
+ }),
+ [integrations, orderDirection, search, orderBy, filters]
+ );
+
+ useResetPageHelper({
+ totalCount: filteredIntegrations.length,
+ offset,
+ setPage
+ });
+
+ const handleSort = (column: IntegrationsOrderBy) => {
+ if (column === orderBy) {
+ toggleOrderDirection();
+ return;
+ }
+
+ setOrderBy(column);
+ setOrderDirection(OrderByDirection.ASC);
+ };
+
+ const getClassName = (col: IntegrationsOrderBy) =>
+ twMerge("ml-2", orderBy === col ? "" : "opacity-30");
+
+ const getColSortIcon = (col: IntegrationsOrderBy) =>
+ orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown;
+
+ const isTableFiltered =
+ filters.integrations.length !== initialFilters.integrations.length ||
+ filters.environmentIds.length !== initialFilters.environmentIds.length ||
+ filters.status.length !== initialFilters.status.length;
+
+ return (
+
+ {
+ setShouldDeleteSecrets.off();
+ handlePopUpOpen("deleteConfirmation", integration);
+ }}
+ />
+
+
- )}
-
- {!isLoading && !integrations.length && (
- Active Integrations
+ } + onClick={onAddIntegration} + > + Add Integration +
-
- )}
- {!isLoading && (
-
- {integrations?.map((integration) => (
- {
- syncIntegration({
- workspaceId,
- id: integration.id,
- lastUsed: integration.lastUsed as string
- });
- }}
- onRemoveIntegration={() => {
- setShouldDeleteSecrets.off();
- handlePopUpOpen("deleteConfirmation", integration);
- }}
- integration={integration}
- environments={environments}
- />
- ))}
-
- )}
+
+ {integration.integration === "octopus-deploy" && (
+
+ );
+};
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationRow.tsx b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationRow.tsx
new file mode 100644
index 000000000..5579c7f76
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationRow.tsx
@@ -0,0 +1,191 @@
+import { useMemo } from "react";
+import { useRouter } from "next/router";
+import {
+ faCalendarCheck,
+ faCheck,
+ faInfoCircle,
+ faRefresh,
+ faTrash,
+ faWarning,
+ faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Badge, IconButton, Td, Tooltip, Tr } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { TCloudIntegration } from "@app/hooks/api/integrations/types";
+import { TIntegration } from "@app/hooks/api/types";
+
+import { IntegrationDetails } from "./IntegrationDetails";
+
+type IProps = {
+ integration: TIntegration;
+ environment?: { name: string; slug: string; id: string };
+ onRemoveIntegration: VoidFunction;
+ onManualSyncIntegration: VoidFunction;
+ cloudIntegration: TCloudIntegration;
+};
+
+export const IntegrationRow = ({
+ integration,
+ environment,
+ onRemoveIntegration,
+ onManualSyncIntegration,
+ cloudIntegration
+}: IProps) => {
+ const router = useRouter();
+
+ const { id, secretPath, syncMessage, isSynced } = integration;
+
+ const failureMessage = useMemo(() => {
+ if (isSynced === false) {
+ if (syncMessage)
+ try {
+ // format if json
+ return JSON.stringify(JSON.parse(syncMessage), null, 2);
+ } catch (e) {
+ return syncMessage;
+ }
+
+ return "An Unknown Error Occurred.";
+ }
+ return null;
+ }, [isSynced, syncMessage]);
+
+ return (
+
+
+ )}
+ {integration.integration === "qovery" && (
+ <>
+
+ {integration.targetEnvironment || integration.targetEnvironmentId}
+
+
+
+ {integration?.owner || "-"}
+
+
+ {integration?.targetService || "-"}
+
+
+
+ )}
+ {!(
+ integration.integration === "aws-secret-manager" &&
+ integration.metadata?.mappingBehavior === IntegrationMappingBehavior.ONE_TO_ONE
+ ) && (
+ {integration?.targetEnvironment || "-"}
+
+
+ )}
+ {(integration.integration === "vercel" ||
+ integration.integration === "netlify" ||
+ integration.integration === "railway" ||
+ integration.integration === "gitlab" ||
+ integration.integration === "teamcity" ||
+ (integration.integration === "github" && integration.scope === "github-env")) && (
+
+ {(integration.integration === "hashicorp-vault" &&
+ `${integration.app} - path: ${integration.path}`) ||
+ (integration.scope === "github-org" && `${integration.owner}`) ||
+ (["aws-parameter-store", "rundeck"].includes(integration.integration) &&
+ `${integration.path}`) ||
+ (integration.scope?.startsWith("github-") &&
+ `${integration.owner}/${integration.app}`) ||
+ integration.app}
+
+
+
+ )}
+ {integration.integration === "bitbucket" && (
+ <>
+ {integration.targetServiceId && (
+
+ {integration.targetEnvironment || integration.targetEnvironmentId}
+
+
+
+ )}
+
+ {integration.targetService || integration.targetServiceId}
+
+
+
+
+ )}
+ {integration.integration === "checkly" && integration.targetService && (
+
+ {integration.targetEnvironment || integration.targetEnvironmentId}
+
+
+
+ )}
+ {integration.integration === "circleci" && integration.owner && (
+ {integration.targetService}
+
+
+ )}
+ {integration.integration === "terraform-cloud" && integration.targetService && (
+ {integration.owner}
+
+
+ )}
+ {(integration.integration === "checkly" || integration.integration === "github") && (
+ {integration.targetService}
+
+
+ )}
+ {integration.integration === "github" && integration.metadata?.githubVisibility ? (
+ {integration?.metadata?.secretSuffix || "-"}
+
+ {/* eslint-disable-next-line no-nested-ternary */}
+ {integration.metadata?.githubVisibility === "selected"
+ ? "* Syncing to selected repositories in the organization. "
+ : integration.metadata?.githubVisibility === "private"
+ ? "* Syncing to all private repositories in the organization"
+ : "* Syncing to all public and private repositories in the organization"}
+
+ ) : undefined}
+
+ 
+ {cloudIntegration?.name}
+
+
+ {cloudIntegration?.name}
+ {secretPath}
+
+
+ + {(integration.integration === "hashicorp-vault" && + `${integration.app} - path: ${integration.path}`) || + (integration.scope === "github-org" && `${integration.owner}`) || + (["aws-parameter-store", "rundeck"].includes(integration.integration) && + `${integration.path}`) || + (integration.scope?.startsWith("github-") && + `${integration.owner}/${integration.app}`) || + integration.app} +
+
+
+ )}
+ {failureMessage && (
+
+
+ Last Synced
+
+ {format(new Date(integration.lastUsed!), "yyyy-MM-dd, hh:mm aaa")}
+
+
+
+ )}
+
+ }
+ >
+
+
+ Failure Reason
+ {failureMessage}
+
+
+
+
+
+
+ {integration.isSynced ? "Synced" : "Not Synced"}
+
+
+ {
+ e.stopPropagation();
+ onManualSyncIntegration();
+ }}
+ ariaLabel="sync"
+ colorSchema="secondary"
+ variant="plain"
+ >
+
+
+
+ {(isAllowed: boolean) => (
+
+ {
+ e.stopPropagation();
+ onRemoveIntegration();
+ }}
+ ariaLabel="delete"
+ isDisabled={!isAllowed}
+ colorSchema="danger"
+ variant="plain"
+ >
+
+
+ )}
+
+
+
+
+
+
+
+ {Boolean(filteredIntegrations.length) && (
+
+
+ );
+};
diff --git a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/index.ts b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/index.ts
new file mode 100644
index 000000000..d9567592c
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/index.ts
@@ -0,0 +1 @@
+export * from "./IntegrationsTable";
+ setSearch(e.target.value)}
+ leftIcon={
+
+
+
+
+
+
+
+ Status
+ {Object.values(IntegrationStatus).map((status) => (
+ {
+ e.preventDefault();
+ setFilters((prev) => ({
+ ...prev,
+ status: prev.status.includes(status)
+ ? prev.status.filter((s) => s !== status)
+ : [...prev.status, status]
+ }));
+ }}
+ key={status}
+ icon={
+ filters.status.includes(status) && (
+
+ ))}
+ Integration
+ {[...new Set(integrations.map(({ integration }) => integration))].map((integration) => (
+ {
+ e.preventDefault();
+ setFilters((prev) => ({
+ ...prev,
+ integrations: prev.integrations.includes(integration)
+ ? prev.integrations.filter((i) => i !== integration)
+ : [...prev.integrations, integration]
+ }));
+ }}
+ key={integration}
+ icon={
+ filters.integrations.includes(integration) && (
+
+ ))}
+ Environment
+ {environments.map((env) => (
+ {
+ e.preventDefault();
+ setFilters((prev) => ({
+ ...prev,
+ integrations: prev.environmentIds.includes(env.id)
+ ? prev.environmentIds.filter((i) => i !== env.id)
+ : [...prev.environmentIds, env.id]
+ }));
+ }}
+ key={env.id}
+ icon={
+ filters.environmentIds.includes(env.id) && (
+
+ ))}
+
+
+
+
+
+
+ !.image}`})
+ {cloudIntegrationMap.get(integration)!.name}
+
+
+ {cloudIntegrationMap.get(integration)!.name}
+ |
+
+ Integration
+
+ |
+
+
+ Source Path
+
+ |
+
+
+ Source Environment
+
+ |
+ Destination | +
+
+ Status
+
+ |
+ + |
|---|