[Web] Implement Instance Inventory UI

lib/cache/inventory/inventory_cache.go

@@ -660,6 +660,7 @@ func (ic *InventoryCache) parseFilter(filter *inventoryv1.ListUnifiedInstancesFi
 // fully initialized.
 func (ic *InventoryCache) ListUnifiedInstances(ctx context.Context, req *inventoryv1.ListUnifiedInstancesRequest) (*inventoryv1.ListUnifiedInstancesResponse, error) {
 	if !ic.IsHealthy() {
+		// Keep this error message in sync with web/Instances.tsx(isCacheInitializing)
 		return nil, trace.ConnectionProblem(nil, "inventory cache is not yet healthy")
 	}
 

lib/services/useracl.go

@@ -108,6 +108,8 @@ type UserACL struct {
 	Bots ResourceAccess `json:"bots"`
 	// BotInstances defines access to manage bot instances
 	BotInstances ResourceAccess `json:"botInstances"`
+	// Instances defines access to manage instances
+	Instances ResourceAccess `json:"instances"`
 	// AccessMonitoringRule defines access to manage access monitoring rule resources.
 	AccessMonitoringRule ResourceAccess `json:"accessMonitoringRule"`
 	// CrownJewel defines access to manage CrownJewel resources.
@@ -217,6 +219,7 @@ func NewUserACL(user types.User, userRoles RoleSet, features proto.Features, des
 	externalAuditStorage := newAccess(userRoles, ctx, types.KindExternalAuditStorage)
 	bots := newAccess(userRoles, ctx, types.KindBot)
 	botInstances := newAccess(userRoles, ctx, types.KindBotInstance)
+	instances := newAccess(userRoles, ctx, types.KindInstance)
 	crownJewelAccess := newAccess(userRoles, ctx, types.KindCrownJewel)
 	userTasksAccess := newAccess(userRoles, ctx, types.KindUserTask)
 	reviewRequests := userRoles.MaybeCanReviewRequests()
@@ -275,6 +278,7 @@ func NewUserACL(user types.User, userRoles RoleSet, features proto.Features, des
 		AccessGraph:             accessGraphAccess,
 		Bots:                    bots,
 		BotInstances:            botInstances,
+		Instances:               instances,
 		AccessMonitoringRule:    accessMonitoringRules,
 		CrownJewel:              crownJewelAccess,
 		AccessGraphSettings:     accessGraphSettings,

web/packages/design/src/Icon/Icons.story.tsx

@@ -175,6 +175,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.MoreHoriz} text="MoreHoriz" />
     <IconBox IconCmpt={Icon.MoreVert} text="MoreVert" />
     <IconBox IconCmpt={Icon.Mute} text="Mute" />
+    <IconBox IconCmpt={Icon.Network} text="Network" />
     <IconBox IconCmpt={Icon.NewTab} text="NewTab" />
     <IconBox IconCmpt={Icon.NoteAdded} text="NoteAdded" />
     <IconBox IconCmpt={Icon.Notification} text="Notification" />
@@ -214,6 +215,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.Speed} text="Speed" />
     <IconBox IconCmpt={Icon.Spinner} text="Spinner" />
     <IconBox IconCmpt={Icon.SquaresFour} text="SquaresFour" />
+    <IconBox IconCmpt={Icon.Stack} text="Stack" />
     <IconBox IconCmpt={Icon.Stars} text="Stars" />
     <IconBox IconCmpt={Icon.Sun} text="Sun" />
     <IconBox IconCmpt={Icon.SyncAlt} text="SyncAlt" />

web/packages/design/src/Icon/Icons/Network.tsx

@@ -0,0 +1,65 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* MIT License
+
+Copyright (c) 2020 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '../Icon';
+
+/*
+
+THIS FILE IS GENERATED. DO NOT EDIT.
+
+*/
+
+export const Network = forwardRef<HTMLSpanElement, IconProps>(
+  ({ size = 24, color, ...otherProps }, ref) => (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-network"
+      {...otherProps}
+      ref={ref}
+    >
+      <path d="M21.75 10.5h-9V8.25h.75a1.5 1.5 0 0 0 1.5-1.5v-3a1.5 1.5 0 0 0-1.5-1.5h-3A1.5 1.5 0 0 0 9 3.75v3a1.5 1.5 0 0 0 1.5 1.5h.75v2.25h-9a.75.75 0 1 0 0 1.5h3v3H4.5A1.5 1.5 0 0 0 3 16.5v3A1.5 1.5 0 0 0 4.5 21h3A1.5 1.5 0 0 0 9 19.5v-3A1.5 1.5 0 0 0 7.5 15h-.75v-3h10.5v3h-.75a1.5 1.5 0 0 0-1.5 1.5v3a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5v-3a1.5 1.5 0 0 0-1.5-1.5h-.75v-3h3a.75.75 0 1 0 0-1.5M10.5 3.75h3v3h-3zm-3 15.75h-3v-3h3zm12 0h-3v-3h3z" />
+    </Icon>
+  )
+);

web/packages/design/src/Icon/Icons/Stack.tsx

@@ -0,0 +1,71 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* MIT License
+
+Copyright (c) 2020 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '../Icon';
+
+/*
+
+THIS FILE IS GENERATED. DO NOT EDIT.
+
+*/
+
+export const Stack = forwardRef<HTMLSpanElement, IconProps>(
+  ({ size = 24, color, ...otherProps }, ref) => (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-stack"
+      {...otherProps}
+      ref={ref}
+    >
+      <path
+        fillRule="evenodd"
+        d="M12.378 1.602a.75.75 0 0 0-.756 0l-9 5.25a.75.75 0 0 0 0 1.296l9 5.25a.75.75 0 0 0 .756 0l9-5.25a.75.75 0 0 0 0-1.296zM12 11.882 4.488 7.5 12 3.118 19.512 7.5z"
+        clipRule="evenodd"
+      />
+      <path d="M2.352 11.622a.75.75 0 0 1 1.026-.27L12 16.382l8.622-5.03a.75.75 0 0 1 .756 1.296l-9 5.25a.75.75 0 0 1-.756 0l-9-5.25a.75.75 0 0 1-.27-1.026" />
+      <path d="M2.352 16.122a.75.75 0 0 1 1.026-.27L12 20.882l8.622-5.03a.75.75 0 0 1 .756 1.296l-9 5.25a.75.75 0 0 1-.756 0l-9-5.25a.75.75 0 0 1-.27-1.026" />
+    </Icon>
+  )
+);

web/packages/design/src/Icon/index.ts

@@ -164,6 +164,7 @@ export { Moon } from './Icons/Moon';
 export { MoreHoriz } from './Icons/MoreHoriz';
 export { MoreVert } from './Icons/MoreVert';
 export { Mute } from './Icons/Mute';
+export { Network } from './Icons/Network';
 export { NewTab } from './Icons/NewTab';
 export { NoteAdded } from './Icons/NoteAdded';
 export { Notification } from './Icons/Notification';
@@ -203,6 +204,7 @@ export { SortDescending } from './Icons/SortDescending';
 export { Speed } from './Icons/Speed';
 export { Spinner } from './Icons/Spinner';
 export { SquaresFour } from './Icons/SquaresFour';
+export { Stack } from './Icons/Stack';
 export { Stars } from './Icons/Stars';
 export { Sun } from './Icons/Sun';
 export { SyncAlt } from './Icons/SyncAlt';

web/packages/shared/components/CopyButton/CopyButton.tsx

@@ -31,13 +31,15 @@ export function CopyButton({
   value,
   mr,
   ml,
+  customTooltip,
 }: {
   value: string;
   mr?: number;
   ml?: number;
+  customTooltip?: string;
 }) {
   const copySuccess = 'Copied!';
-  const copyDefault = 'Click to copy';
+  const copyDefault = customTooltip || 'Click to copy';
   const timeout = useRef<ReturnType<typeof setTimeout>>(undefined);
   const copyAnchorEl = useRef(null);
   const [copiedText, setCopiedText] = useState(copyDefault);