Add "You are here" marker in WebUI (#670)

Co-authored-by: Roman Babaev <r.babaev@corp.mail.ru>
tarantool · Mar 20, 2020 · 4355900 · 4355900
1 parent afcd7d7
commit 4355900
Show file tree

Hide file tree

Showing 19 changed files with 104 additions and 87 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- "You are here" marker in webui.
+
 ### Deprecated
 
 Lua API:

diff --git a/webui/package-lock.json b/webui/package-lock.json
diff --git a/webui/package.json b/webui/package.json
@@ -15,7 +15,7 @@
     "@graphql-codegen/typescript-compatibility": "^1.2.0",
     "@tarantool.io/frontend-core": "6.4.0",
     "@tarantool.io/lua-bundler-webpack-plugin": "^1.0.1",
-    "@tarantool.io/ui-kit": "0.13.1",
+    "@tarantool.io/ui-kit": "0.14.0",
     "antd": "3.18.2",
     "apollo-boost": "0.4.0",
     "apollo-link-http": "^1.5.14",

diff --git a/webui/src/components/ConfigureServerModal.js b/webui/src/components/ConfigureServerModal.js
@@ -42,6 +42,7 @@ type ConfigureServerModalProps = {
   setModalFilter: Function,
   joinServer: Function,
   createReplicaset: Function,
+  selfURI?: string
 }
 
 class ConfigureServerModal extends React.Component<ConfigureServerModalProps> {
@@ -55,7 +56,8 @@ class ConfigureServerModal extends React.Component<ConfigureServerModalProps> {
       replicasetList,
       serverList,
       selectedServerUri,
-      setModalFilter
+      setModalFilter,
+      selfURI
     } = this.props;
 
     const selectedServers = (
@@ -77,6 +79,7 @@ class ConfigureServerModal extends React.Component<ConfigureServerModalProps> {
               knownRoles={knownRoles}
               onSubmit={this.handleCreateReplicasetSubmit}
               onCancel={this.handleClose}
+              selfURI={selfURI}
             />
           </div>
         )
@@ -96,6 +99,7 @@ class ConfigureServerModal extends React.Component<ConfigureServerModalProps> {
               filteredReplicasetList={filteredReplicasetList}
               selectedServers={selectedServers}
               setFilter={setModalFilter}
+              selfURI={selfURI}
             />
           </div>
         )
@@ -142,7 +146,8 @@ const mapStateToProps = state => {
     app: {
       clusterSelf: {
         knownRoles,
-        vshard_groups
+        vshard_groups,
+        uri: selfURI
       }
     },
     clusterPage: {
@@ -164,6 +169,7 @@ const mapStateToProps = state => {
     replicasetList,
     selectedServerUri,
     serverList,
+    selfURI,
     loading: !pageDataRequestStatus.loaded || pageDataRequestStatus.loading
   };
 };

diff --git a/webui/src/components/CreateReplicasetForm.js b/webui/src/components/CreateReplicasetForm.js
@@ -83,6 +83,7 @@ const initialValues = {
 };
 
 type CreateReplicasetFormProps = {
+  selfURI?: string,
   knownRoles?: Role[],
   onCancel: () => void,
   onSubmit: (d: CreateReplicasetArgs) => void,
@@ -92,6 +93,7 @@ type CreateReplicasetFormProps = {
 };
 
 const CreateReplicasetForm = ({
+  selfURI,
   knownRoles,
   onCancel,
   onSubmit,
@@ -128,7 +130,7 @@ CreateReplicasetFormProps) => (
       return (
         <form className={styles.form} onSubmit={handleSubmit}>
           <PopupBody className={styles.wrap}>
-            <SelectedServersList className={styles.splash} serverList={selectedServers} />
+            <SelectedServersList className={styles.splash} serverList={selectedServers} selfURI={selfURI} />
             <FormSpy
               subscription={{ values: true }}
               onChange={({ values }) => {

diff --git a/webui/src/components/EditReplicasetForm.js b/webui/src/components/EditReplicasetForm.js
@@ -89,7 +89,8 @@ type EditReplicasetFormProps = {
   onCancel: () => void,
   onSubmit: (d: EditReplicasetArgs) => void,
   replicaset?: Replicaset,
-  vshard_groups?: VshardGroup[]
+  vshard_groups?: VshardGroup[],
+  selfURI?: string
 };
 
 const EditReplicasetForm = ({
@@ -98,7 +99,8 @@ const EditReplicasetForm = ({
   onCancel,
   onSubmit,
   vshard_groups,
-  replicaset
+  replicaset,
+  selfURI
 }:
 EditReplicasetFormProps) => {
   if (!replicaset) {
@@ -300,6 +302,7 @@ EditReplicasetFormProps) => {
                         R.map(([val]) => val),
                         R.groupBy(R.prop('uuid'))
                       )(replicaset.servers || [])}
+                      selfURI={selfURI}
                     />
                   </LabeledInput>
                 )}

diff --git a/webui/src/components/EditReplicasetModal.js b/webui/src/components/EditReplicasetModal.js
@@ -22,6 +22,7 @@ type EditReplicasetModalProps = {
   replicasetList?: Replicaset[],
   history: History,
   location: Location,
+  selfURI?: string
 }
 
 class EditReplicasetModal extends React.Component<EditReplicasetModalProps> {
@@ -31,7 +32,8 @@ class EditReplicasetModal extends React.Component<EditReplicasetModalProps> {
       loading,
       vshard_groups,
       replicasetList,
-      selectedReplicasetUuid
+      selectedReplicasetUuid,
+      selfURI
     } = this.props;
 
     const selectedReplicaset = (
@@ -57,6 +59,7 @@ class EditReplicasetModal extends React.Component<EditReplicasetModalProps> {
             onSubmit={this.handleEditReplicasetSubmit}
             onCancel={this.handleClose}
             loading={!!loading}
+            selfURI={selfURI}
           />
         }
       </Modal>
@@ -81,7 +84,8 @@ const mapStateToProps = state => {
     app: {
       clusterSelf: {
         knownRoles,
-        vshard_groups
+        vshard_groups,
+        uri: selfURI
       }
     },
     clusterPage: {
@@ -96,6 +100,7 @@ const mapStateToProps = state => {
     vshard_groups,
     replicasetList,
     selectedReplicasetUuid,
+    selfURI,
     loading: !pageDataRequestStatus.loaded || pageDataRequestStatus.loading
   };
 };

diff --git a/webui/src/components/FormField.js b/webui/src/components/FormField.js
@@ -2,8 +2,13 @@
 // TODO: move to uikit
 import * as React from 'react';
 import { css, cx } from 'emotion';
-import Tooltip from 'src/components/Tooltip';
-import { ControlsPanel, IconInfo, InputGroup, Text } from '@tarantool.io/ui-kit';
+import {
+  ControlsPanel,
+  IconInfo,
+  InputGroup,
+  Text,
+  Tooltip
+} from '@tarantool.io/ui-kit';
 
 const styles = {
   wrap: css`

diff --git a/webui/src/components/JoinReplicasetForm.js b/webui/src/components/JoinReplicasetForm.js
@@ -4,7 +4,6 @@ import { css } from 'react-emotion';
 import { Formik } from 'formik';
 
 import SelectedServersList from 'src/components/SelectedServersList';
-import Tooltip from 'src/components/Tooltip';
 import {
   Button,
   IconInfo,
@@ -14,7 +13,8 @@ import {
   PopupBody,
   PopupFooter,
   RadioButton,
-  Text
+  Text,
+  Tooltip
 } from '@tarantool.io/ui-kit';
 import ReplicasetRoles from 'src/components/ReplicasetRoles';
 import FormField from 'src/components/FormField';
@@ -116,6 +116,7 @@ type JoinReplicasetFormData = {
 type JoinReplicasetFormProps = {
   filter: string,
   filteredReplicasetList?: Replicaset[],
+  selfURI?: string,
   onCancel: () => void,
   onSubmit: (d: JoinReplicasetFormData) => void,
   replicasetList?: Replicaset[],
@@ -145,6 +146,7 @@ class JoinReplicasetForm extends React.Component<JoinReplicasetFormProps> {
     const {
       filter,
       filteredReplicasetList,
+      selfURI,
       onCancel,
       onSubmit,
       replicasetList,
@@ -176,7 +178,7 @@ class JoinReplicasetForm extends React.Component<JoinReplicasetFormProps> {
           return (
             <form onSubmit={handleSubmit}>
               <PopupBody>
-                <SelectedServersList className={styles.splash} serverList={selectedServers} />
+                <SelectedServersList className={styles.splash} serverList={selectedServers} selfURI={selfURI} />
                 <FormField
                   className={styles.wideField}
                   itemClassName={styles.radioWrap}

diff --git a/webui/src/components/LabeledInput.js b/webui/src/components/LabeledInput.js
@@ -2,8 +2,7 @@
 // TODO: move to uikit
 import * as React from 'react';
 import { css, cx } from 'emotion';
-import Tooltip from 'src/components/Tooltip';
-import { ControlsPanel, IconInfo, Text } from '@tarantool.io/ui-kit';
+import { ControlsPanel, IconInfo, Text, Tooltip } from '@tarantool.io/ui-kit';
 
 const styles = {
   wrap: css`

diff --git a/webui/src/components/ReplicasetList/ReplicasetList.js b/webui/src/components/ReplicasetList/ReplicasetList.js
@@ -8,9 +8,9 @@ import {
   HealthStatus,
   IconGear,
   Text,
-  TiledList
+  TiledList,
+  Tooltip
 } from '@tarantool.io/ui-kit';
-import Tooltip from 'src/components/Tooltip';
 import ReplicasetRoles from 'src/components/ReplicasetRoles';
 import ReplicasetServerList from 'src/components/ReplicasetServerList';
 import { addSearchParams } from 'src/misc/url';

diff --git a/webui/src/components/ReplicasetServerList.js b/webui/src/components/ReplicasetServerList.js
@@ -107,6 +107,7 @@ class ReplicasetServerList extends React.PureComponent<ReplicasetServerListProps
                   onServerLabelClick={onServerLabelClick}
                   tagsHighlightingClassName={SERVER_LABELS_HIGHLIGHTING_CLASS}
                   totalBucketsCount={clusterSelf && clusterSelf.vshard_bucket_count}
+                  selfURI={clusterSelf && clusterSelf.uri}
                   {...server}
                 />
               )}

diff --git a/webui/src/components/ReplicasetServerListItem.js b/webui/src/components/ReplicasetServerListItem.js
@@ -2,7 +2,6 @@
 // TODO: move to uikit
 import * as React from 'react';
 import { css, cx } from 'react-emotion';
-import Tooltip from 'src/components/Tooltip';
 import ServerLabels, { type Label } from 'src/components/ServerLabels';
 import store from 'src/store/instance';
 import {
@@ -12,10 +11,12 @@ import {
   HealthStatus,
   IconBucket,
   IconChip,
+  IconGeoPin,
   IconMore,
   LeaderFlag,
   ProgressBar,
   Text,
+  Tooltip,
   UriLabel
 } from '@tarantool.io/ui-kit';
 import { showExpelModal } from '../store/actions/clusterPage.actions';
@@ -135,6 +136,7 @@ type ServerAction = {
 }
 
 type Server = {
+  selfURI?: string,
   statistics?: {
     arenaUsed: number,
     bucketsCount: number,
@@ -172,6 +174,7 @@ class ReplicasetServerListItem extends React.PureComponent<
   render() {
     const {
       activeMaster,
+      selfURI,
       statistics,
       status,
       uri,
@@ -203,7 +206,7 @@ class ReplicasetServerListItem extends React.PureComponent<
                 {alias}
               </Link>
             </Text>
-            <UriLabel uri={uri} />
+            <UriLabel uri={uri} icon={selfURI && uri === selfURI && IconGeoPin} />
           </div>
           <div className={styles.statusGroup}>
             <HealthStatus className={styles.status} status={status} message={message} />

diff --git a/webui/src/components/SelectedServersList.js b/webui/src/components/SelectedServersList.js
@@ -2,7 +2,7 @@
 // TODO: split and move to uikit
 import React from 'react';
 import { css, cx } from 'react-emotion';
-import { Text, UriLabel } from '@tarantool.io/ui-kit';
+import { IconGeoPin, Text, UriLabel } from '@tarantool.io/ui-kit';
 import type { Server } from 'src/generated/graphql-typing';
 
 const styles = {
@@ -40,16 +40,17 @@ const styles = {
 
 type SelectedServersListProps = {
   className?: string,
+  selfURI?: string,
   serverList?: Server[],
 }
 
-const SelectedServersList = ({ className, serverList }: SelectedServersListProps) => (
+const SelectedServersList = ({ className, selfURI, serverList }: SelectedServersListProps) => (
   <ul className={cx(styles.serversList, className)}>
     <Text variant='h3'>Selected servers:</Text>
     {serverList && serverList.map(server => (
       <li className={styles.serversListItem}>
         <Text className={styles.serverListItemAlias} variant='h5' tag='span'>{server.alias}</Text>
-        <UriLabel uri={server.uri} />
+        <UriLabel uri={server.uri} icon={selfURI && selfURI === server.uri && IconGeoPin} />
       </li>
     ))}
   </ul>