status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
consul/ui-v2/app/helpers/css-var.js

20 lines
9.4 KiB
JavaScript
Raw Normal View History

UI: External Source markers (#4640) 1. Addition of external source icons for services marked as such. 2. New %with-tooltip css component (wip) 3. New 'no healthcheck' icon as external sources might not have healthchecks, also minus icon on node cards in the service detail view 4. If a service doesn't have healthchecks, we use the [Services] tabs as the default instead of the [Health Checks] tab in the Service detail page. 5. `css-var` helper. The idea here is that it will eventually be replaced with pure css custom properties instead of having to use JS. It would be nice to be able to build the css variables into the JS at build time (you'd probably still want to specify in config which variables you wanted available in JS), but that's possible future work. Lastly there is probably a tiny bit more testing edits here than usual, I noticed that there was an area where the dynamic mocking wasn't happening, it was just using the mocks from consul-api-double, the mocks I was 'dynamically' setting happened to be the same as the ones in consul-api-double. I've fixed this here also but it wasn't effecting anything until actually made certain values dynamic.
2018-09-12 19:23:39 +00:00
import { helper } from '@ember/component/helper';
ui: Add AWS external-source icon (#5030)
2018-11-30 09:59:02 +00:00
// TODO: Look at ember-inline-svg
UI: External Source markers (#4640) 1. Addition of external source icons for services marked as such. 2. New %with-tooltip css component (wip) 3. New 'no healthcheck' icon as external sources might not have healthchecks, also minus icon on node cards in the service detail view 4. If a service doesn't have healthchecks, we use the [Services] tabs as the default instead of the [Health Checks] tab in the Service detail page. 5. `css-var` helper. The idea here is that it will eventually be replaced with pure css custom properties instead of having to use JS. It would be nice to be able to build the css variables into the JS at build time (you'd probably still want to specify in config which variables you wanted available in JS), but that's possible future work. Lastly there is probably a tiny bit more testing edits here than usual, I noticed that there was an area where the dynamic mocking wasn't happening, it was just using the mocks from consul-api-double, the mocks I was 'dynamically' setting happened to be the same as the ones in consul-api-double. I've fixed this here also but it wasn't effecting anything until actually made certain values dynamic.
2018-09-12 19:23:39 +00:00
const cssVars = {
ui: Discovery Chain (#6746) * Add data layer for discovery chain (model/adapter/serializer/repo) * Add routing plus template for routing tab * Add extra deps - consul-api-double upgrade plus ngraph for graphing * Add discovery-chain and related components and helpers: 1. discovery-chain to orchestrate/view controller 2. route-card, splitter-card, resolver card to represent the 3 different node types. 3. route-match helper for easy formatting of route rules 4. dom-position to figure out where things are in order to draw lines 5. svg-curve, simple wrapper around svg's <path d=""> attribute format. 6. data-structs service. This isn't super required but we are using other data-structures provided by other third party npm modules in other yet to be merged PRs. All of these types of things will live here for easy access/injection/changability 7. Some additions to our css-var 'polyfill' for a couple of extra needed rules * Related CSS for discovery chain 1. We add a %card base component here, eventually this will go into our base folder and %stats-card will also use it for a base component. 2. New icon for failovers * ui: Discovery Chain Continued (#6939) 1. Add in the things we use for the animations 2 Use IntersectionObserver so we know when the tab is visible, otherwise the dom-position helper won't work as the dom elements don't have any display. 3. Add some base work for animations and use them a little 4. Try to detect if a resolver is a redirect. Right now this works for datacenters and namespaces, but it can't work for services and subsets - we are awaiting backend support for doing this properly. 5. Add a fake 'this service has no routes' route that says 'Default' 6. redirect icon 7. Add CSS.escape polyfill for Edge
2019-12-17 19:27:28 +00:00
'--decor-border-100': '1px solid',
'--decor-border-200': '2px solid',
'--decor-radius-300': '3px',
'--white': '#FFF',
'--gray-500': '#6f7682',
UI: External Source markers (#4640) 1. Addition of external source icons for services marked as such. 2. New %with-tooltip css component (wip) 3. New 'no healthcheck' icon as external sources might not have healthchecks, also minus icon on node cards in the service detail view 4. If a service doesn't have healthchecks, we use the [Services] tabs as the default instead of the [Health Checks] tab in the Service detail page. 5. `css-var` helper. The idea here is that it will eventually be replaced with pure css custom properties instead of having to use JS. It would be nice to be able to build the css variables into the JS at build time (you'd probably still want to specify in config which variables you wanted available in JS), but that's possible future work. Lastly there is probably a tiny bit more testing edits here than usual, I noticed that there was an area where the dynamic mocking wasn't happening, it was just using the mocks from consul-api-double, the mocks I was 'dynamically' setting happened to be the same as the ones in consul-api-double. I've fixed this here also but it wasn't effecting anything until actually made certain values dynamic.
2018-09-12 19:23:39 +00:00
'--kubernetes-color-svg': `url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" stroke="%23FFF" fill="none"><path d="M10.21 1.002a1.241 1.241 0 0 0-.472.12L3.29 4.201a1.225 1.225 0 0 0-.667.83l-1.591 6.922a1.215 1.215 0 0 0 .238 1.035l4.463 5.55c.234.29.59.46.964.46l7.159-.002c.375 0 .73-.168.964-.459l4.462-5.55c.234-.292.322-.673.238-1.036l-1.593-6.921a1.225 1.225 0 0 0-.667-.83l-6.45-3.08a1.242 1.242 0 0 0-.598-.12z" fill="%23326CE5"/><path d="M10.275 3.357c-.213 0-.386.192-.386.429v.11c.005.136.035.24.052.367.033.27.06.492.043.7a.421.421 0 0 1-.125.2l-.01.163a4.965 4.965 0 0 0-3.22 1.548 6.47 6.47 0 0 1-.138-.099c-.07.01-.139.03-.23-.022-.172-.117-.33-.277-.52-.47-.087-.093-.15-.181-.254-.27L5.4 5.944a.46.46 0 0 0-.269-.101.372.372 0 0 0-.307.136c-.133.167-.09.422.094.57l.006.003.08.065c.11.08.21.122.32.187.231.142.422.26.574.403.06.063.07.175.078.223l.123.11a4.995 4.995 0 0 0-.787 3.483l-.162.047c-.042.055-.103.141-.166.167-.198.063-.422.086-.692.114-.126.01-.236.004-.37.03-.03.005-.07.016-.103.023l-.003.001-.006.002c-.228.055-.374.264-.327.47.047.206.27.331.498.282h.006c.003-.001.005-.003.008-.003l.1-.022c.131-.036.227-.088.346-.133.255-.092.467-.168.673-.198.086-.007.177.053.222.078l.168-.029a5.023 5.023 0 0 0 2.226 2.78l-.07.168c.025.065.053.154.034.218-.075.195-.203.4-.35.628-.07.106-.142.188-.206.309l-.05.104c-.099.212-.026.456.165.548.191.092.43-.005.532-.218h.001v-.001c.015-.03.036-.07.048-.098.055-.126.073-.233.111-.354.102-.257.159-.526.3-.694.038-.046.1-.063.166-.08l.087-.159a4.987 4.987 0 0 0 3.562.01l.083.148c.066.021.138.032.197.12.105.179.177.391.265.648.038.121.057.229.112.354.012.029.033.069.048.099.102.213.341.311.533.219.19-.092.264-.337.164-.549l-.05-.104c-.064-.12-.136-.202-.207-.307-.146-.23-.267-.419-.342-.613-.032-.1.005-.163.03-.228-.015-.017-.047-.111-.065-.156a5.023 5.023 0 0 0 2.225-2.8l.165.03c.058-.039.112-.088.216-.08.206.03.418.106.673.198.12.045.215.098.347.133.028.008.068.015.1.022l.007.002.006.001c.229.05.45-.076.498-.282.047-.206-.1-.415-.327-.47l-.112-.027c-.134-.025-.243-.019-.37-.03-.27-.027-.494-.05-.692-.113-.081-.031-.139-.128-.167-.167l-.156-.046a4.997 4.997 0 0 0-.804-3.474l.137-.123c.006-.069.001-.142.073-.218.151-.143.343-.261.574-.404.11-.064.21-.106.32-.187.025-.018.06-.047.086-.068.185-.148.227-.403.094-.57-.133-.166-.39-.182-.575-.034-.027.02-.062.048-.086.068-.104.09-.168.178-.255.27-.19.194-.348.355-.52.471-.075.044-.185.029-.235.026l-.146.104A5.059 5.059 0 0 0 10.7 5.328a9.325 9.325 0 0 1-.009-.172c-.05-.048-.11-.09-.126-.193-.017-.208.011-.43.044-.7.018-.126.047-.23.053-.367l-.001-.11c0-.237-.173-.429-.386-.429zM9.79 6.351l-.114 2.025-.009.004a.34.34 0 0 1-.54.26l-.003.002-1.66-1.177A3.976 3.976 0 0 1 9.79 6.351zm.968 0a4.01 4.01 0 0 1 2.313 1.115l-1.65 1.17-.006-.003a.34.34 0 0 1-.54-.26h-.003L10.76 6.35zm-3.896 1.87l1.516 1.357-.002.008a.34.34 0 0 1-.134.585l-.001.006-1.944.561a3.975 3.975 0 0 1 .565-2.516zm6.813.001a4.025 4.025 0 0 1 .582 2.51l-1.954-.563-.001-.008a.34.34 0 0 1-.134-.585v-.004l1.507-1.35zm-3.712 1.46h.62l.387.483-.139.602-.557.268-.56-.269-.138-.602.387-.482zm1.99 1.652a.339.339 0 0 1 .08.005l.002-.004 2.01.34a3.98 3.98 0 0 1-1.609 2.022l-.78-1.885.002-.003a.34.34 0 0 1 .296-.475zm-3.375.008a.34.34 0 0 1 .308.474l.005.007-.772 1.866a3.997 3.997 0 0 1-1.604-2.007l1.993-.339.003.005a.345.345 0 0 1 .067-.006zm1.683.817a.338.338 0 0 1 .312.179h.008l.982 1.775a3.991 3.991 0 0 1-2.57-.002l.979-1.772h.001a.34.34 0 0 1 .288-.18z" stroke-width=".25" fill="%23FFF"/></g></svg>')`,
'--terraform-color-svg': `url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>')`,
'--nomad-color-svg': `url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path fill="%231F9967" d="M11.569 6.871v2.965l-2.064 1.192-1.443-.894v7.74l.04.002 7.78-4.47V4.48h-.145z"/><path fill="%2325BA81" d="M7.997 0L.24 4.481l5.233 3.074 1.06-.645 2.57 1.435v-2.98l2.465-1.481v2.987l4.314-2.391v-.011z"/><path fill="%2325BA81" d="M7.02 9.54v2.976l-2.347 1.488V8.05l.89-.548L.287 4.48.24 4.48v8.926l7.821 4.467v-7.74z"/></g></svg>')`,
'--consul-color-svg': `url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>')`,
ui: Add AWS external-source icon (#5030)
2018-11-30 09:59:02 +00:00
'--aws-color-svg': `url('data:image/svg+xml;charset=UTF-8,<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M13.574 22.395c0 .588.063 1.065.174 1.414.127.35.286.731.509 1.145.08.127.111.254.111.365 0 .16-.095.318-.302.477l-1.001.668a.762.762 0 0 1-.413.143c-.16 0-.318-.08-.477-.223a4.917 4.917 0 0 1-.572-.747c-.16-.27-.318-.572-.493-.938-1.24 1.463-2.797 2.194-4.673 2.194-1.335 0-2.4-.382-3.179-1.145-.779-.763-1.176-1.78-1.176-3.051 0-1.351.477-2.448 1.446-3.274.97-.827 2.257-1.24 3.895-1.24.54 0 1.096.047 1.684.127.588.08 1.192.207 1.828.35V17.5c0-1.209-.254-2.051-.747-2.544-.509-.492-1.367-.73-2.59-.73-.557 0-1.13.063-1.717.206-.588.143-1.16.318-1.717.54a4.56 4.56 0 0 1-.556.207.975.975 0 0 1-.254.047c-.223 0-.334-.158-.334-.492v-.779c0-.254.032-.445.111-.556.08-.112.223-.223.445-.334.556-.286 1.224-.525 2.003-.715a9.636 9.636 0 0 1 2.48-.302c1.89 0 3.273.429 4.164 1.287.874.858 1.319 2.162 1.319 3.91v5.15h.032zM7.12 24.81c.524 0 1.064-.096 1.637-.286.572-.191 1.08-.54 1.51-1.018.254-.302.445-.635.54-1.017.095-.381.159-.842.159-1.383v-.667c-.461-.112-.954-.207-1.462-.27a11.976 11.976 0 0 0-1.494-.096c-1.065 0-1.844.207-2.369.636-.524.43-.778 1.033-.778 1.828 0 .747.19 1.303.588 1.685.381.397.937.588 1.669.588zm12.762 1.716c-.286 0-.476-.048-.604-.159-.127-.095-.238-.318-.333-.62L15.21 13.462c-.096-.318-.143-.524-.143-.636 0-.254.127-.397.381-.397h1.558c.302 0 .508.048.62.16.127.094.222.317.317.619l2.67 10.522 2.48-10.522c.08-.318.175-.525.302-.62.127-.095.35-.159.636-.159h1.271c.302 0 .509.048.636.16.127.094.238.317.302.619l2.511 10.649 2.75-10.65c.095-.317.207-.524.318-.619.127-.095.334-.159.62-.159h1.478c.254 0 .397.127.397.397 0 .08-.016.16-.032.255a2.261 2.261 0 0 1-.11.397l-3.831 12.286c-.096.318-.207.525-.334.62-.127.095-.334.159-.604.159h-1.367c-.302 0-.509-.048-.636-.159s-.238-.318-.302-.636l-2.463-10.251-2.448 10.235c-.08.318-.175.525-.302.636-.127.111-.35.16-.636.16h-1.367zm20.424.43c-.826 0-1.653-.096-2.447-.287-.795-.19-1.415-.397-1.828-.636-.255-.143-.43-.302-.493-.445a1.122 1.122 0 0 1-.095-.445v-.81c0-.334.127-.493.365-.493a.9.9 0 0 1 .286.048c.096.032.239.095.398.159.54.238 1.128.429 1.748.556.636.127 1.256.19 1.891.19 1.002 0 1.78-.174 2.321-.524.54-.35.826-.858.826-1.51 0-.445-.143-.81-.429-1.112-.286-.302-.826-.573-1.605-.827l-2.305-.715c-1.16-.366-2.018-.906-2.543-1.621-.524-.7-.794-1.478-.794-2.305 0-.667.143-1.255.429-1.764a4.087 4.087 0 0 1 1.144-1.303 5.045 5.045 0 0 1 1.653-.827 6.927 6.927 0 0 1 2.003-.27c.35 0 .715.016 1.065.063.365.048.699.112 1.033.175.318.08.62.16.906.255.286.095.508.19.667.286.223.127.382.254.477.397.095.127.143.302.143.525v.747c0 .333-.127.508-.365.508-.128 0-.334-.063-.604-.19-.906-.414-1.924-.62-3.052-.62-.906 0-1.621.143-2.114.445-.493.302-.747.763-.747 1.414 0 .445.159.827.477 1.129.318.302.906.604 1.748.874l2.257.715c1.145.366 1.971.874 2.464 1.526.492.652.73 1.399.73 2.225 0 .684-.142 1.303-.412 1.844a4.275 4.275 0 0 1-1.16 1.398c-.493.398-1.081.684-1.765.89a7.558 7.558 0 0 1-2.273.334z" fill="%23252F3E" fill-rule="nonzero"/><path d="M43.311 34.68c-5.229 3.863-12.826 5.913-19.359 5.913-9.155 0-17.404-3.385-23.634-9.012-.493-.445-.048-1.049.54-.699 6.74 3.91 15.052 6.278 23.65 6.278 5.802 0 12.175-1.208 18.04-3.687.875-.398 1.622.572.763 1.208zm2.178-2.479c-.668-.858-4.419-.413-6.12-.206-.508.063-.588-.382-.127-.716 2.988-2.098 7.9-1.494 8.472-.794.572.715-.159 5.626-2.956 7.979-.43.365-.843.174-.652-.302.636-1.574 2.05-5.118 1.383-5.96z" fill="%23F90"/></g></svg>')`,
UI: External Source markers (#4640) 1. Addition of external source icons for services marked as such. 2. New %with-tooltip css component (wip) 3. New 'no healthcheck' icon as external sources might not have healthchecks, also minus icon on node cards in the service detail view 4. If a service doesn't have healthchecks, we use the [Services] tabs as the default instead of the [Health Checks] tab in the Service detail page. 5. `css-var` helper. The idea here is that it will eventually be replaced with pure css custom properties instead of having to use JS. It would be nice to be able to build the css variables into the JS at build time (you'd probably still want to specify in config which variables you wanted available in JS), but that's possible future work. Lastly there is probably a tiny bit more testing edits here than usual, I noticed that there was an area where the dynamic mocking wasn't happening, it was just using the mocks from consul-api-double, the mocks I was 'dynamically' setting happened to be the same as the ones in consul-api-double. I've fixed this here also but it wasn't effecting anything until actually made certain values dynamic.
2018-09-12 19:23:39 +00:00
};
export function cssVar(params, hash) {
return typeof cssVars[params[0]] !== 'undefined' ? cssVars[params[0]] : params[1];
}
export default helper(cssVar);