bring back visited nodes for private registry (#424)

Author: jacekkolasa

src/components/sidebar/space/index.js

@@ -8,6 +8,7 @@ import ReplicatedNodes from "./replicatedNodes"
 import SpacePanelIframe from "./spacePanelIframe"
 import SignInPrompt from "./prompts/signIn"
 import OfflinePrompt from "./prompts/offline"
+import VisitedNodes from "./visitedNodes"
 
 const replicatedNodesSelector = createSelector(
   state => state.global.chartsMetadata.data || {},
@@ -62,7 +63,7 @@ const Space = ({ isOpen, toggle }) => {
               )}
               {!!visitedNodes.length && (
                 <Text strong color="border">
-                  VisitedNodes
+                  <VisitedNodes machinesArray={visitedNodes} />
                 </Text>
               )}
             </>

src/components/sidebar/space/visitedNodes/index.js

@@ -0,0 +1,92 @@
+import React, { useCallback, useState } from "react"
+import { CollapsibleList, SimpleListItem } from "@rmwc/list"
+import "@material/list/dist/mdc.list.css"
+import "@rmwc/list/collapsible-list.css"
+import "@rmwc/icon/icon.css"
+import { Box, Flex, Text } from "@netdata/netdata-ui"
+
+import truncateMiddle from "utils/truncateMiddle"
+import { naturalSortCompare } from "domains/dashboard/utils/sorting"
+import { MASKED_DATA } from "domains/global/constants"
+import { MenuList } from "components/menus"
+
+import { NodesContainer, ListItem, StyledIcon, NodeUrl, NodeName, TrashIcon } from "./styled"
+
+const Node = ({ name, alternateUrls, machineGuid }) => (
+  <CollapsibleList
+    handle={
+      <SimpleListItem
+        text={
+          <>
+            <StyledIcon name="node" />
+            <NodeName
+              color="bright"
+              href=""
+              onClick={event => {
+                event.preventDefault() // prevent navigating to url
+                event.stopPropagation()
+                window.gotoServerModalHandler(machineGuid)
+              }}
+            >
+              {name}
+            </NodeName>
+          </>
+        }
+        metaIcon={alternateUrls.length && "chevron_right"}
+      />
+    }
+  >
+    <Box margin={[2, 0, 0]}>
+      {alternateUrls.map(url => (
+        <ListItem key={url}>
+          <NodeUrl href={url}>{truncateMiddle(url, 50)}</NodeUrl>
+          <TrashIcon
+            name="trashcan"
+            size="small"
+            onClick={() => {
+              window.deleteRegistryModalHandler(machineGuid, name, url)
+            }}
+          />
+        </ListItem>
+      ))}
+    </Box>
+  </CollapsibleList>
+)
+
+export const VisitedNodes = ({ machinesArray }) => {
+  const sortedMachines = machinesArray
+    .sort((a, b) => naturalSortCompare(a.name, b.name))
+    .filter(({ url }) => url !== MASKED_DATA)
+
+  const [listOpen, setListOpen] = useState(true)
+  const toggleListOpen = useCallback(() => setListOpen(o => !o), [])
+
+  return (
+    <MenuList
+      isOpen={listOpen}
+      toggleOpen={toggleListOpen}
+      label={
+        <Flex alignItems="center" justifyContent="between">
+          <Text strong color="border">
+            Visited Nodes
+          </Text>
+          <StyledIcon right={!listOpen} name="chevron_down" size="small" color="text" />
+        </Flex>
+      }
+    >
+      <NodesContainer column gap={2}>
+        {sortedMachines.map(({ name, alternateUrls, guid, url }) => (
+          <Node
+            alternateUrls={alternateUrls}
+            key={`${name}-${guid}`}
+            machineGuid={guid}
+            name={name}
+            url={url}
+          />
+        ))}
+      </NodesContainer>
+    </MenuList>
+  )
+}
+
+export default VisitedNodes

src/components/sidebar/space/visitedNodes/styled.js

@@ -0,0 +1,75 @@
+import styled from "styled-components"
+import { getSizeBy, getColor, Icon, TextNano, Text } from "@netdata/netdata-ui"
+
+export const NodesContainer = styled.div`
+  .mdc-list-item {
+    padding: 0 0;
+    padding-left: 0;
+  }
+  .rmwc-collapsible-list__children {
+    .mdc-list-item {
+      padding: 0 0;
+      padding-left: 0;
+      height: ${getSizeBy(4)};
+    }
+  }
+  .rmwc-collapsible-list__handle {
+    .mdc-list-item {
+      padding: 0 ${getSizeBy(2)};
+    }
+  }
+  .mdc-list-item__meta {
+    color: ${getColor("bright")};
+  }
+  .mdc-list-item:before {
+    background: none;
+  }
+`
+
+export const ListItem = styled.div`
+  width: 100%;
+  min-height: ${getSizeBy(3)};
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  cursor: pointer;
+  justify-content: space-between;
+`
+
+export const TrashIcon = styled(Icon)`
+  fill: #35414a;
+  margin-right: ${getSizeBy(2)};
+  transition: opacity 0.4s ease-in;
+  &:hover {
+    opacity: 0.6;
+  }
+`
+
+export const StyledIcon = styled(Icon)`
+  flex-shrink: 0;
+  flex-grow: 0;
+  margin-right: ${getSizeBy(2)};
+  fill: ${getColor(["gray", "arsenic"])};
+`
+
+// @ts-ignore todo extend interface in dashboard due to lack of types in netdata-ui
+export const NodeUrl = styled(TextNano.withComponent("a"))`
+  text-decoration: none;
+  margin-left: ${getSizeBy(5)};
+  color: #aeb3b7;
+  max-width: 145px;
+  word-wrap: break-word;
+  &:hover {
+    color: inherit; // overwrite bootstrap
+    text-decoration: none;
+  }
+`
+
+// @ts-ignore todo
+export const NodeName = styled(Text.withComponent("a"))`
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  white-space: nowrap;
+`