Ceph » mgr » Dashboard

Description¶

Rather than using literal Font-Awesome icon names in the back-end, we could just use a enum set of labels, and perform the mapping in the front-end (e.g.: Icon.add maps to 'fa fa-plus'), which by the way is already done in the front-end:
ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts

Lines 1 to 85 in 66c4dc5

export enum Icons { 
   /* Icons for Symbol */ 
   add = 'fa fa-plus', // Create, Add 
   addCircle = 'fa fa-plus-circle', // Plus with Circle 
   minusCircle = 'fa fa-minus-circle', // Minus with Circle 
   edit = 'fa fa-pencil', // Edit, Edit Mode, Rename 
   destroy = 'fa fa-times', // Destroy, Remove, Delete 
   destroyCircle = 'fa fa-times-circle', // Destroy, Remove, Delete 
   exchange = 'fa fa-exchange', // Edit-Peer 
   copy = 'fa fa-copy', // Copy 
   clipboard = 'fa fa-clipboard', // Clipboard 
   flatten = 'fa fa-chain-broken', // Flatten, Link broken, Mark Lost 
   trash = 'fa fa-trash-o', // Move to trash 
   lock = 'fa fa-lock', // Protect 
   unlock = 'fa fa-unlock', // Unprotect 
   clone = 'fa fa-clone', // clone 
   undo = 'fa fa-undo', // Rollback, Restore 
   search = 'fa fa-search', // Search 
   start = 'fa fa-play', // Enable 
   stop = 'fa fa-stop', // Disable 
   analyse = 'fa fa-stethoscope', // Scrub 
   deepCheck = 'fa fa-cog', // Deep Scrub, Setting, Configuration 
   reweight = 'fa fa-balance-scale', // Reweight 
   left = 'fa fa-arrow-left', // Mark out 
   right = 'fa fa-arrow-right', // Mark in 
   down = 'fa fa-arrow-down', // Mark Down 
   erase = 'fa fa-eraser', // Purge  color: bd.$white; 

user = 'fa fa-user', // User, Initiators 
   users = 'fa fa-users', // Users, Groups 
   share = 'fa fa-share-alt', // share 
   key = 'fa fa-key-modern', // S3 Keys, Swift Keys, Authentication 
   warning = 'fa fa-exclamation-triangle', // Notification warning 
   info = 'fa fa-info', // Notification information 
   infoCircle = 'fa fa-info-circle', // Info on landing page 
   questionCircle = 'fa fa-question-circle-o', 
   check = 'fa fa-check', // Notification check 
   show = 'fa fa-eye', // Show 
   paragraph = 'fa fa-paragraph', // Silence Matcher - Attribute name 
   terminal = 'fa fa-terminal', // Silence Matcher - Value 
   magic = 'fa fa-magic', // Silence Matcher - Regex checkbox 
   hourglass = 'fa fa-hourglass-o', // Task 
   filledHourglass = 'fa fa-hourglass', // Task 
   table = 'fa fa-table', // Table, 
   spinner = 'fa fa-spinner', // spinner, Load 
   refresh = 'fa fa-refresh', // Refresh 
   bullseye = 'fa fa-bullseye', // Target 
   disk = 'fa fa-hdd-o', // Hard disk, disks 
   server = 'fa fa-server', // Server, Portal 
   filter = 'fa fa-filter', // Filter 
   lineChart = 'fa fa-line-chart', // Line chart 
   signOut = 'fa fa-sign-out', // Sign Out 
   health = 'fa fa-heartbeat', // Health 
   circle = 'fa fa-circle', // Circle 
   bell = 'fa fa-bell', // Notification 
   mute = 'fa fa-bell-slash', // Mute or silence 
   tag = 'fa fa-tag', // Tag, Badge 
   leftArrow = 'fa fa-angle-left', // Left facing angle 
   rightArrow = 'fa fa-angle-right', // Right facing angle 
   leftArrowDouble = 'fa fa-angle-double-left', // Left facing Double angle 
   rightArrowDouble = 'fa fa-angle-double-right', // Left facing Double angle 
   flag = 'fa fa-flag', // OSD configuration 
   clearFilters = 'fa fa-window-close', // Clear filters, solid x 
   download = 'fa fa-download', // Download 
   upload = 'fa fa-upload', // Upload 
   close = 'fa fa-times', // Close 
   json = 'fa fa-file-code-o', // JSON file 
   text = 'fa fa-file-text', // Text file 
   wrench = 'fa fa-wrench', // Configuration Error 
   enter = 'fa fa-sign-in', // Enter 
   exit = 'fa fa-sign-out', // Exit 
   restart = 'fa fa-history', // Restart 
   deploy = 'fa fa-cube', // Deploy, Redeploy

/* Icons for special effect */ 
   large = 'fa fa-lg', // icon becomes 33% larger 
   large2x = 'fa fa-2x', // icon becomes 50% larger 
   large3x = 'fa fa-3x', // icon becomes 3 times larger 
   stack = 'fa fa-stack', // To stack multiple icons 
   stack1x = 'fa fa-stack-1x', // To stack regularly sized icon 
   stack2x = 'fa fa-stack-2x', // To stack regularly sized icon 
   pulse = 'fa fa-pulse', // To have spinner rotate with 8 steps 
   spin = 'fa fa-spin', //  To get any icon to rotate 
   inverse = 'fa fa-inverse' // To get an alternative icon color 
 } 
Even better: we don't even really need to expose "icon" or permission fields, just an "ActionType" enum set. For example, an action whose type = ActionType.ADD will have icon Icon.ADD and a permission Permission.CREATE.

Target persona¶

Examples...Examples...

Context¶

Design¶

Diagram (block, sequence) or mock-up

Additional Info¶

Examples of other dashboards or web ui consoles providing the same functionality