ECS控制台实例搜索的优化与改进

maoer · · 673 次点击 · 开始浏览    置顶
这是一个创建于 的主题,其中的信息可能已经有所发展或是发生改变。

摘要: 搜索功能是控制台非常重要的功能,承载着实例管理入口的作用,应该好用,快速和准确。然而,ECS控制台实例列表的搜索功能经常被吐槽不好用,痛点主要有以下三点: 每次搜索之前需要选择搜索类型,非常繁琐。 过滤条件太多了, 搜索框,tag,表格过滤,高级搜索,搜索条件不统一 不支持模糊搜索 从已知的这些问题出发,ECS控制台将对搜索功能,以及整个实例管理的用户体验部分做长期的优化和改进。 搜索功能是控制台非常重要的功能,承载着实例管理入口的作用,应该好用,快速和准确。然而,ECS控制台实例列表的搜索功能经常被吐槽不好用,痛点主要有以下三点: 1.每次搜索之前需要选择搜索类型,非常繁琐。 2.过滤条件太多了, 搜索框,tag,表格过滤,高级搜索,搜索条件不统一 3.不支持模糊搜索 从已知的这些问题出发,ECS控制台将对搜索功能,以及整个实例管理的用户体验部分做长期的优化和改进。 **已经上线的优化和改进有:** **1. 自动识别输入内容的搜索类型** 搜索框会根据内容自动选择合适的搜索类型,不需要选择。支持实例名称,实例ID,公网/内网IP等13个搜索类型的主动识别。同时也支持手动选择搜索类型。 **2. 搜索条件栏** 统一显示当前实例列表的搜索条件。合并了表格表头的过滤条件,标签选择条件以及通过地址栏或者其他控制台传递过来的搜索条件 **3. 搜索自动提示** 根据当前搜索的内容,自动弹出下拉框显示模糊提示(基于当前页的搜索结果),一定程度解决查询实例列表的API无法模糊搜索,又需要模糊查询的问题。并且支持Up,Down,Enter三种键盘操作。 **4. 搜索历史记录** 自动记录每个地域的搜索历史。默认显示5条搜索历史,可以删除历史记录。 后续,还将进行更多的优化和改进,包括主动识别支持更多的搜索类型;更强大的自动提示;搜索内容匹配高亮以及编辑距离判断方法等等。 **详细改动** **1. 自动识别输入内容的搜索类型。** 主动识别搜索内容,默认不需要选择搜索类型,使用以下的规则自动匹配 ``` * 实例名称: 2-128个字符,以大小写字母或中文开头,可包含数字、“.”、“_”或“-”,支持模糊搜索,是搜索的默认类型 * 实例ID: i-开头,11个或者22个字符,少部分实例是AY开头,20个字符,可能是批量,批量逗号分隔 * 私有IP: vpc机器的内网ip,一般以10.、192.、172. 开头 * 内网IP: 经典网络机器的内网ip,以10.开头,需要二次选择 * 公网IP: 需要二次选择 * 弹性IP: 需要二次选择 * 镜像ID: 公共镜像如centos_7_04_64_20G_alibase_201701015.vhd.vhd结尾, 或m-m5e8omt2xhp513xnhbx6(举例) * 安全组ID: sg开头 * 密钥对名称: 长度为2-128个字符,不能以特殊字符及数字开头,只可包含特殊字符中的".","_"或"-"。 * 即将到期: 7,15,30,60天到期,支持输入天数 * 实例规格: 实例规格列表,可模糊提示 * 专有网络ID: vpc-开头 * 交换机ID: vsw-开头 ``` 如图,输入实例ID后回车,会自动识别实例ID类型进行搜索: ![图片描述](http://img.blog.csdn.net/20180326114834032?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 此外,也可以手动选择搜索项目: ![图片描述](http://img.blog.csdn.net/20180326114855249?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 有些搜索内容无法精确识别的时候,需要进行二次选择,例如公网IP和弹性IP: ![图片描述](http://img.blog.csdn.net/20180326114937406?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) **2. 搜索条件栏** 搜索条件栏显示当前的搜索条件。无论是输入的搜索内容,选择的标签,还是列表页的表头选择的条件,还是从其他控制台跳转带过来的过滤条件,都会统一显示在搜索条件栏中,可以方便的清除和全部清除。 搜索内容: ![图片描述](http://img.blog.csdn.net/20180326115008844?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 选择标签: ![图片描述](http://img.blog.csdn.net/20180326115031888?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 表头过滤: ![图片描述](http://img.blog.csdn.net/20180326115056823?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 外部跳转条件,例如VPC控制台跳转到实例列表页: ![图片描述](http://img.blog.csdn.net/20180326115124254?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) **3. 搜索自动提示** 搜索提示字典来自于用户的当前页请求回来的数据。适合实例数量小于100的地域,点击下拉菜单的选项或者键盘选择选项后回车可以快速查询。 目前支持Up,Down,Enter三种键盘操作。对于不需要输入的,会主动弹窗等待选择,如即将到期的选择,状态的选择等等 例如实例名称: ![图片描述](http://img.blog.csdn.net/20180326115202637?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 实例规格: ![图片描述](http://img.blog.csdn.net/20180326115218115?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 即将到期: ![图片描述](http://img.blog.csdn.net/20180326115239437?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) **4. 搜索历史记录** 自动记录每个地域的搜索历史。默认显示5条搜索历史,可以删除历史记录。 ![图片描述](http://img.blog.csdn.net/20180326115303419?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) **5. 其他改动** 标签除了可以直接选择外,目前也已支持搜索过滤: ![图片描述](http://img.blog.csdn.net/20180326115330206?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 对实例列表页的排版进行了压缩,现在每页可以显示更多的实例7-10个. 以上为控制台实例列表搜索的优化和改进,感谢阅读。 [**原文链接**](https://yq.aliyun.com/articles/499186?spm=a2c41.11181499.0.0) **阅读更多干货好文,请关注扫描以下二维码:** ![图片描述](http://img.blog.csdn.net/20180326115620658?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVucWlpbnNpZ2h0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

673 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传