Project

General

Profile

Feature #57812

Feature #57808: mgr/dashboard: authx improvements

mgr/dashboard: map icons in backend to frontend

Added by Pere Díaz Bou 4 months ago.

Status:
New
Priority:
Normal
Assignee:
-
Category:
-
Target version:
-
% Done:

0%

Source:
Tags:
Backport:
Reviewed:
Affected Versions:
Pull request ID:

Description

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

Context

Design

Diagram (block, sequence) or mock-up

Additional Info

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

Also available in: Atom PDF