random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Create new home page (#1257) 

* initial commit

* Remove test code

* Rename icon

* Fix feature flag

* Update links and texts

* Remove unintended change
This commit is contained in:
victor-meng 2022-05-02 13:45:54 -07:00 committed by GitHub
parent 56731ec051
commit 27423e2321
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 395 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
images/Connect_color.svg Normal file
View File

@ -0,0 +1,23 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_480_185430)">
<path d="M35.4911 6.39638L33.4106 4.31591L37.559 0.167553C37.6611 0.0654497 37.7996 0.00808785 37.944 0.00808785C38.0884 0.00808801 38.2269 0.0654482 38.329 0.167551L39.641 1.47963C39.7431 1.58173 39.8005 1.72021 39.8005 1.86461C39.8005 2.009 39.7431 2.14749 39.641 2.24959L35.4927 6.39795L35.4911 6.39638Z" fill="#32BEDD"/>
<path d="M4.45313 33.6455L6.53988 35.7323L2.44494 39.8272C2.34367 39.9285 2.20632 39.9853 2.06311 39.9853C1.91989 39.9853 1.78254 39.9285 1.68127 39.8272L0.364478 38.5104C0.312974 38.4606 0.271905 38.401 0.243665 38.3351C0.215426 38.2692 0.20058 38.1984 0.199995 38.1267C0.19941 38.0551 0.213098 37.984 0.240258 37.9177C0.267419 37.8514 0.307509 37.7911 0.358193 37.7404L4.45313 33.6455Z" fill="#0078D4"/>
<path d="M5.09381 25.0287C3.78099 26.3415 3.04346 28.1221 3.04346 29.9787C3.04346 31.8353 3.78099 33.6159 5.09381 34.9287C6.40664 36.2415 8.1872 36.9791 10.0438 36.9791C11.9004 36.9791 13.681 36.2415 14.9938 34.9287L18.2027 31.7176L8.30492 21.8198L5.09381 25.0287Z" fill="url(#paint0_linear_480_185430)"/>
<path d="M17.4209 18.1581L17.6157 18.353C17.8133 18.5505 17.9242 18.8185 17.9242 19.0978C17.9242 19.3772 17.8133 19.6451 17.6157 19.8426L13.6009 23.8574L11.918 22.1745L15.9344 18.1581C16.1319 17.9606 16.3998 17.8496 16.6792 17.8496C16.9586 17.8496 17.2265 17.9606 17.424 18.1581L17.4209 18.1581Z" fill="#C3F1FF"/>
<path d="M21.5835 22.32L21.7783 22.5149C21.9759 22.7124 22.0868 22.9803 22.0868 23.2597C22.0868 23.539 21.9759 23.807 21.7783 24.0045L17.7588 28.024L16.0759 26.3411L20.097 22.32C20.2945 22.1225 20.5624 22.0115 20.8418 22.0115C21.1212 22.0115 21.3891 22.1225 21.5866 22.32L21.5835 22.32Z" fill="#C3F1FF"/>
<path d="M20.9363 30.0618L9.87241 18.9979C9.66673 18.7922 9.33327 18.7922 9.12759 18.9979L7.67566 20.4498C7.46999 20.6555 7.46999 20.989 7.67566 21.1946L18.7395 32.2585C18.9452 32.4642 19.2787 32.4642 19.4843 32.2585L20.9363 30.8066C21.1419 30.6009 21.1419 30.2674 20.9363 30.0618Z" fill="#5EA0EF"/>
<path d="M34.9067 14.9711C36.2196 13.6583 36.9571 11.8777 36.9571 10.0211C36.9571 8.1645 36.2196 6.38393 34.9067 5.07111C33.5939 3.75829 31.8134 3.02075 29.9567 3.02075C28.1001 3.02075 26.3196 3.75829 25.0067 5.07111L21.7979 8.28222L31.6956 18.18L34.9067 14.9711Z" fill="#ECF4FD"/>
<path d="M22.5828 21.8375L22.388 21.6426C22.1904 21.4451 22.0795 21.1772 22.0795 20.8978C22.0795 20.6184 22.1904 20.3505 22.388 20.153L26.4075 16.1335L28.092 17.8179L24.0677 21.8422C23.8698 22.0376 23.6025 22.1469 23.3243 22.146C23.0461 22.1451 22.7795 22.0342 22.5828 21.8375Z" fill="#ECF4FD"/>
<path d="M18.4178 17.6802L18.2229 17.4854C18.0254 17.2878 17.9144 17.0199 17.9144 16.7406C17.9144 16.4612 18.0254 16.1933 18.2229 15.9957L22.2409 11.9778L23.9254 13.6623L19.909 17.6787C19.7115 17.8762 19.4435 17.9872 19.1642 17.9872C18.8848 17.9872 18.6169 17.8762 18.4194 17.6787L18.4178 17.6802Z" fill="#ECF4FD"/>
<path d="M19.0642 9.93799L30.1281 21.0019C30.3338 21.2075 30.6672 21.2075 30.8729 21.0019L32.3248 19.5499C32.5305 19.3443 32.5305 19.0108 32.3248 18.8051L21.261 7.74125C21.0553 7.53557 20.7218 7.53557 20.5161 7.74125L19.0642 9.19317C18.8585 9.39885 18.8585 9.73232 19.0642 9.93799Z" fill="#ECF4FD"/>
</g>
<defs>
<linearGradient id="paint0_linear_480_185430" x1="10.6227" y1="21.8179" x2="10.6227" y2="36.9783" gradientUnits="userSpaceOnUse">
<stop stop-color="#5EA0EF"/>
<stop offset="0.997" stop-color="#0078D4"/>
</linearGradient>
<clipPath id="clip0_480_185430">
<rect width="40" height="40" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

8
images/Containers.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 34.635C24 34.8143 23.9647 34.9918 23.8961 35.1574C23.8275 35.323 23.727 35.4734 23.6002 35.6002C23.4734 35.727 23.323 35.8275 23.1574 35.8961C22.9918 35.9647 22.8143 36 22.635 36H1.365C1.18575 36 1.00825 35.9647 0.842637 35.8961C0.677028 35.8275 0.526551 35.727 0.399799 35.6002C0.273047 35.4734 0.172502 35.323 0.103904 35.1574C0.0353068 34.9918 0 34.8143 0 34.635L0 13.365C0 13.003 0.143812 12.6558 0.399799 12.3998C0.655786 12.1438 1.00298 12 1.365 12H22.635C22.997 12 23.3442 12.1438 23.6002 12.3998C23.8562 12.6558 24 13.003 24 13.365V34.635Z" fill="#005BA1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30 28.635C30 28.997 29.8562 29.3442 29.6002 29.6002C29.3442 29.8562 28.997 30 28.635 30H7.365C7.00298 30 6.65579 29.8562 6.3998 29.6002C6.14381 29.3442 6 28.997 6 28.635V7.365C6 7.00298 6.14381 6.65579 6.3998 6.3998C6.65579 6.14381 7.00298 6 7.365 6H28.635C28.997 6 29.3442 6.14381 29.6002 6.3998C29.8562 6.65579 30 7.00298 30 7.365V28.635Z" fill="#5EA0EF"/>
<path d="M22.635 12H6V28.635C6 28.997 6.14381 29.3442 6.3998 29.6002C6.65579 29.8562 7.00298 30 7.365 30H24V13.365C24 13.003 23.8562 12.6558 23.6002 12.3998C23.3442 12.1438 22.997 12 22.635 12Z" fill="#0078D4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36 22.635C36 22.8143 35.9647 22.9918 35.8961 23.1574C35.8275 23.323 35.727 23.4734 35.6002 23.6002C35.4734 23.727 35.323 23.8275 35.1574 23.8961C34.9918 23.9647 34.8143 24 34.635 24H13.365C13.003 24 12.6558 23.8562 12.3998 23.6002C12.1438 23.3442 12 22.997 12 22.635V1.365C12 1.00298 12.1438 0.655786 12.3998 0.399799C12.6558 0.143812 13.003 0 13.365 0L34.635 0C34.8143 0 34.9918 0.0353068 35.1574 0.103904C35.323 0.172502 35.4734 0.273047 35.6002 0.399799C35.727 0.526551 35.8275 0.677028 35.8961 0.842637C35.9647 1.00825 36 1.18575 36 1.365V22.635Z" fill="#E6E7E8"/>
<path d="M22.635 12H12V22.635C12 22.997 12.1438 23.3442 12.3998 23.6002C12.6558 23.8562 13.003 24 13.365 24H24V13.365C24 13.003 23.8562 12.6558 23.6002 12.3998C23.3442 12.1438 22.997 12 22.635 12Z" fill="#BCBEC0"/>
<path d="M28.635 6H12V12H22.635C22.997 12 23.3442 12.1438 23.6002 12.3998C23.8562 12.6558 24 13.003 24 13.365V24H30V7.365C30 7.00298 29.8562 6.65579 29.6002 6.3998C29.3442 6.14381 28.997 6 28.635 6Z" fill="#D1D3D4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

16
images/Cost.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3328 13.6532C13.3454 13.8483 13.3149 14.0438 13.2435 14.2259C13.172 14.4079 13.0614 14.572 12.9195 14.7065C12.5895 14.9979 12.1721 15.1714 11.7328 15.1998V15.9998H11.1462V15.1732C10.6342 15.1699 10.1307 15.0418 9.67951 14.7998V13.7198C9.88302 13.865 10.108 13.9775 10.3462 14.0532C10.6041 14.1483 10.8728 14.211 11.1462 14.2398V12.8532C10.6948 12.7095 10.2805 12.4683 9.93285 12.1465C9.68588 11.8542 9.55715 11.4801 9.57195 11.0977C9.58675 10.7153 9.74402 10.3522 10.0128 10.0798C10.3224 9.7875 10.7219 9.60886 11.1462 9.57318V8.83984H11.7195V9.55984C12.1428 9.55959 12.5612 9.65055 12.9462 9.82651V10.8932C12.5717 10.6689 12.1533 10.528 11.7195 10.4798V11.9998C12.1784 12.1422 12.5982 12.3886 12.9462 12.7198C13.1925 12.9682 13.3314 13.3034 13.3328 13.6532ZM11.1462 11.7465V10.5065C11.0094 10.52 10.8832 10.5858 10.7938 10.6902C10.7043 10.7945 10.6586 10.9293 10.6662 11.0665C10.6662 11.3465 10.8395 11.5732 11.1995 11.7465H11.1462ZM12.2795 13.7065C12.2795 13.4532 12.0928 13.2532 11.7195 13.0798V14.2798C12.0928 14.2132 12.2795 14.0265 12.2795 13.7065Z" fill="#258277"/>
<path d="M22.0531 12.6532H17.2531C17.2522 13.4842 17.076 14.3056 16.7359 15.0638C16.3959 15.822 15.8997 16.4999 15.2798 17.0532L18.4665 20.6399C19.597 19.6367 20.5014 18.4046 21.1197 17.0254C21.738 15.6462 22.0562 14.1514 22.0531 12.6399" fill="#FFCA00"/>
<path d="M11.3595 18.573C9.79299 18.573 8.29061 17.9507 7.18289 16.843C6.07518 15.7353 5.45287 14.2329 5.45287 12.6663C5.45287 11.0998 6.07518 9.5974 7.18289 8.48968C8.29061 7.38197 9.79299 6.75966 11.3595 6.75966V1.98633C8.53056 1.98633 5.81745 3.11013 3.81707 5.11052C1.81668 7.11091 0.692871 9.82402 0.692871 12.653C0.692871 15.482 1.81668 18.1951 3.81707 20.1955C5.81745 22.1959 8.53056 23.3197 11.3595 23.3197C13.9799 23.3355 16.5143 22.3863 18.4795 20.653L15.2795 17.0663C14.2049 18.0372 12.8078 18.5742 11.3595 18.573Z" fill="url(#paint0_radial_669_8617)"/>
<path d="M10.8662 0.6399V6.18657C11.7766 6.17211 12.6805 6.34098 13.5243 6.68313C14.368 7.02527 15.1343 7.53369 15.7775 8.17812C16.4207 8.82254 16.9276 9.5898 17.2681 10.4342C17.6086 11.2786 17.7758 12.1829 17.7595 13.0932H23.3329C23.3329 11.4567 23.0103 9.83624 22.3836 8.32447C21.757 6.81269 20.8385 5.43925 19.6807 4.28268C18.5229 3.12611 17.1484 2.20908 15.636 1.58402C14.1235 0.95897 12.5027 0.638148 10.8662 0.6399Z" fill="#CCCCCC"/>
<path d="M17.7862 13.0934C17.804 11.2839 17.104 9.54104 15.8395 8.24653C14.575 6.95203 12.849 6.21137 11.0395 6.18677H10.8662L11.3062 7.01343C12.7784 7.09978 14.1672 7.72528 15.2075 8.77052C16.2479 9.81576 16.8668 11.2075 16.9462 12.6801L17.7862 13.0934Z" fill="#999999"/>
<defs>
<radialGradient id="paint0_radial_669_8617" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.57287 12.6663) scale(9.84)">
<stop stop-color="#76BC2D"/>
<stop offset="0.41" stop-color="#74B92C"/>
<stop offset="0.66" stop-color="#6FB12A"/>
<stop offset="0.88" stop-color="#66A227"/>
<stop offset="1" stop-color="#5E9624"/>
</radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

4
images/Green_check.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#57A300"/>
<path d="M5.32942 12.4366C5.21842 12.3181 5.16142 12.1621 5.16742 12.0001C5.17342 11.8366 5.24242 11.6866 5.36242 11.5741L6.61492 10.4161C6.72892 10.3126 6.87442 10.2556 7.02592 10.2556C7.19392 10.2556 7.35592 10.3261 7.46992 10.4491L10.6739 13.8871L16.3844 6.57461C16.4999 6.42611 16.6739 6.33911 16.8629 6.33911C16.9979 6.33911 17.1254 6.38261 17.2334 6.46511L18.5924 7.51361C18.8519 7.70561 18.9074 8.07911 18.7124 8.34461L11.4104 17.6941C11.1269 18.0571 10.5854 18.0811 10.2704 17.7436L5.32942 12.4366Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 767 B

3
images/Link_blue.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 6H11V11H0V0H5V1H1V10H10V6ZM11 0V5H10V1.71094L5.35156 6.35156L4.64844 5.64844L9.28906 1H6V0H11Z" fill="#0078D4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 229 B

28
images/Notebooks.svg Normal file
View File

@ -0,0 +1,28 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_669_8707)">
<path d="M20.7873 0H4.403C4.30483 -1.37536e-07 4.20762 0.0193565 4.11694 0.0569623C4.02626 0.0945681 3.94389 0.149685 3.87453 0.21916C3.80517 0.288634 3.75019 0.371103 3.71273 0.461847C3.67528 0.552592 3.65609 0.64983 3.65625 0.748V21.1432C3.65625 21.3414 3.73489 21.5314 3.87491 21.6716C4.01492 21.8118 4.20486 21.8907 4.403 21.891H20.7873C20.9854 21.8908 21.1754 21.8119 21.3154 21.6717C21.4554 21.5315 21.5341 21.3414 21.534 21.1432V0.748C21.534 0.549834 21.4554 0.359767 21.3154 0.219526C21.1754 0.0792842 20.9854 0.000331159 20.7873 0V0Z" fill="url(#paint0_linear_669_8707)"/>
<path d="M11.433 2.1499H2.11601C1.92247 2.1499 1.73685 2.22679 1.6 2.36364C1.46314 2.5005 1.38626 2.68611 1.38626 2.87965V22.9767C1.38543 23.0725 1.4035 23.1675 1.43941 23.2564C1.47533 23.3452 1.5284 23.4261 1.59558 23.4944C1.66277 23.5627 1.74276 23.6172 1.83098 23.6546C1.91921 23.692 2.01394 23.7116 2.10976 23.7124H18.2618C18.4553 23.7124 18.6409 23.6355 18.7778 23.4987C18.9146 23.3618 18.9915 23.1762 18.9915 22.9827V9.68015C18.9916 9.58428 18.9727 9.48933 18.9361 9.40074C18.8995 9.31214 18.8457 9.23163 18.7779 9.16382C18.7102 9.096 18.6297 9.0422 18.5411 9.0055C18.4526 8.96879 18.3576 8.9499 18.2618 8.9499H12.9033C12.7095 8.94799 12.5243 8.86969 12.3879 8.73202C12.2516 8.59435 12.1751 8.40843 12.175 8.21465V2.8879C12.1752 2.69332 12.0985 2.50655 11.9616 2.3683C11.8246 2.23006 11.6386 2.15155 11.444 2.1499H11.433Z" fill="white"/>
<path d="M11.45 2.10889H1.99675C1.79861 2.10915 1.60867 2.18805 1.46866 2.32825C1.32864 2.46845 1.25 2.65849 1.25 2.85664V23.2519C1.25 23.4501 1.32864 23.6401 1.46864 23.7804C1.60865 23.9206 1.79858 23.9996 1.99675 23.9999H18.381C18.5792 23.9996 18.7691 23.9206 18.9091 23.7804C19.0491 23.6401 19.1278 23.4501 19.1278 23.2519V9.75364C19.1278 9.55559 19.0491 9.36565 18.909 9.22561C18.769 9.08556 18.5791 9.00689 18.381 9.00689H12.9423C12.7442 9.00689 12.5543 8.92821 12.4142 8.78817C12.2742 8.64813 12.1955 8.45819 12.1955 8.26014V8.26014V2.85664C12.1949 2.65889 12.1162 2.46938 11.9766 2.32934C11.837 2.1893 11.6477 2.11007 11.45 2.10889Z" fill="url(#paint1_linear_669_8707)"/>
<path d="M18.8418 9.15547L11.9375 2.27197V7.88072C11.9355 8.21667 12.067 8.53967 12.303 8.77874C12.539 9.01782 12.8603 9.15341 13.1963 9.15572L18.8418 9.15547Z" fill="#83B9F9"/>
<path d="M12.496 10.9395H3.84072C3.64797 10.9395 3.49072 11.0362 3.49072 11.1555V11.6882C3.49072 11.8075 3.64697 11.904 3.84072 11.904H12.496C12.6887 11.904 12.846 11.8075 12.846 11.6882V11.1555C12.845 11.0362 12.6887 10.9395 12.496 10.9395Z" fill="#83B9F9"/>
<path d="M12.496 13.8333H3.84072C3.64797 13.8333 3.49072 13.9298 3.49072 14.049V14.5818C3.49072 14.701 3.64697 14.7978 3.84072 14.7978H12.496C12.6887 14.7978 12.846 14.701 12.846 14.5818V14.05C12.845 13.9298 12.6887 13.8333 12.496 13.8333Z" fill="#83B9F9"/>
<path d="M12.496 16.7271H3.84072C3.64797 16.7271 3.49072 16.8236 3.49072 16.9428V17.4751C3.49072 17.5943 3.64697 17.6911 3.84072 17.6911H12.496C12.6887 17.6911 12.846 17.5943 12.846 17.4751V16.9428C12.845 16.8236 12.6887 16.7271 12.496 16.7271Z" fill="#83B9F9"/>
<path d="M8.98195 19.6208H3.93445C3.68995 19.6208 3.4917 19.7173 3.4917 19.8366V20.3693C3.4917 20.4886 3.68995 20.5854 3.93445 20.5854H8.98195C9.22645 20.5854 9.4247 20.4886 9.4247 20.3693V19.8366C9.42495 19.7173 9.22645 19.6208 8.98195 19.6208Z" fill="#83B9F9"/>
</g>
<defs>
<linearGradient id="paint0_linear_669_8707" x1="12.595" y1="1.4615" x2="12.595" y2="23.415" gradientUnits="userSpaceOnUse">
<stop stop-color="#DCDCDC"/>
<stop offset="1" stop-color="#AAAAAA"/>
</linearGradient>
<linearGradient id="paint1_linear_669_8707" x1="10.1888" y1="3.57039" x2="10.1888" y2="25.5236" gradientUnits="userSpaceOnUse">
<stop stop-color="#0078D7"/>
<stop offset="0.327" stop-color="#0076D4"/>
<stop offset="0.576" stop-color="#0071CA"/>
<stop offset="0.799" stop-color="#0068BA"/>
<stop offset="1" stop-color="#005BA4"/>
</linearGradient>
<clipPath id="clip0_669_8707">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

11
images/Quickstart_Lightning.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="30" height="34" viewBox="0 0 30 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6457 18.9089H0.67782C0.520018 18.9215 0.361625 18.8893 0.235445 18.819C0.109264 18.7487 0.0249634 18.6456 0 18.5312C0.000766863 18.4748 0.0212497 18.4196 0.0595033 18.3706L14.4179 0.229509C14.4859 0.156313 14.5784 0.0970502 14.6866 0.0573734C14.7949 0.0176966 14.9152 -0.00107025 15.0362 0.00286318H29.1877C29.3456 -0.0102086 29.5043 0.0218054 29.6306 0.0922084C29.757 0.162611 29.8411 0.26595 29.8655 0.380607C29.8655 0.463721 29.823 0.54385 29.7465 0.605364L12.8941 14.7991H29.3222C29.48 14.7865 29.6384 14.8187 29.7646 14.889C29.8907 14.9593 29.975 15.0624 30 15.1768C29.998 15.2265 29.9814 15.2752 29.9516 15.3198C29.9217 15.3645 29.8791 15.4039 29.8267 15.4356L2.51725 33.5994C2.25854 33.6957 0.447568 34.6608 1.33236 33.1952L12.6457 18.9089Z" fill="url(#paint0_radial_480_182017)"/>
<defs>
<radialGradient id="paint0_radial_480_182017" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.0039 17.0718) scale(23.6442 13.4446)">
<stop offset="0.196" stop-color="#FFD70F"/>
<stop offset="0.438" stop-color="#FFCB12"/>
<stop offset="0.873" stop-color="#FEAC19"/>
<stop offset="1" stop-color="#FEA11B"/>
</radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

42
src/Explorer/SplashScreen/SplashScreen.less
View File

@ -12,13 +12,13 @@
margin: auto;
padding-left: 21px;
padding-right: 16px;
max-width: 1168px;;
max-width: 1168px;
>* {
> * {
justify-content: space-between;
}
>.title {
> .title {
position: relative; // To attach FeaturePanelLauncher as absolute
color: @BaseHigh;
font-size: 48px;
@ -27,7 +27,7 @@
text-align: center;
}
>.subtitle {
> .subtitle {
color: @BaseHigh;
font-size: 18px;
padding-left: 0px;
@ -41,18 +41,17 @@
cursor: pointer;
margin: 40px auto;
>.mainButton {
> .mainButton {
min-width: 124px;
max-width: 296px;
padding: 32px 16px;
display: flex;
background-color: @BaseLight;
border: 1px solid #949494;
box-sizing: border-box;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px;
>.legendContainer {
> .legendContainer {
margin-left: 16px;
text-align: left;
@ -65,10 +64,14 @@
.description {
font-size: 10px;
}
.newDescription {
font-size: 13px;
}
}
}
>:nth-child(n+2) {
> :nth-child(n + 2) {
margin-left: 32px;
}
}
@ -83,7 +86,7 @@
min-width: 124px;
max-width: 296px;
>.title {
> .title {
font-size: 18px;
font-family: @SemiboldFont;
color: @BaseDark;
@ -91,7 +94,7 @@
margin-bottom: 16px;
}
>ul {
> ul {
list-style: none;
padding-left: 0px;
margin-bottom: 0px;
@ -101,7 +104,7 @@
.flex-display();
align-items: flex-start;
>img {
> img {
margin-right: @DefaultSpace;
width: 24px;
height: 24px;
@ -133,12 +136,12 @@
.flex-display();
.flex-direction();
>.title {
> .title {
color: @BaseDark;
padding: 0px;
font-size: 12px;
}
>.description {
> .description {
color: @BaseDark;
}
@ -167,11 +170,20 @@
}
&:focus {
.focus();
.focus();
}
&:active {
.active();
.active();
}
}
.notebookSplashScreenItem {
padding: 12px 0 12px 12px;
.itemText {
margin-left: 12px;
font-family: @SemiboldFont;
}
}
}

387
src/Explorer/SplashScreen/SplashScreen.tsx
View File

@ -1,16 +1,23 @@
/**
* Accordion top class
*/
import { Link } from "@fluentui/react";
import { Image, Link, Stack, Text } from "@fluentui/react";
import * as React from "react";
import AddDatabaseIcon from "../../../images/AddDatabase.svg";
import NewQueryIcon from "../../../images/AddSqlQuery_16x16.svg";
import NewStoredProcedureIcon from "../../../images/AddStoredProcedure.svg";
import OpenQueryIcon from "../../../images/BrowseQuery.svg";
import ConnectIcon from "../../../images/Connect_color.svg";
import ContainersIcon from "../../../images/Containers.svg";
import CostIcon from "../../../images/Cost.svg";
import GreenCheckIcon from "../../../images/Green_check.svg";
import NewContainerIcon from "../../../images/Hero-new-container.svg";
import NewNotebookIcon from "../../../images/Hero-new-notebook.svg";
import SampleIcon from "../../../images/Hero-sample.svg";
import LinkIcon from "../../../images/Link_blue.svg";
import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
import NotebooksIcon from "../../../images/Notebooks.svg";
import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
import ScaleAndSettingsIcon from "../../../images/Scale_15x15.svg";
import CollectionIcon from "../../../images/tree-collection.svg";
import { AuthType } from "../../AuthType";
@ -82,110 +89,63 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
public render(): JSX.Element {
const mainItems = this.createMainItems();
const commonTaskItems = this.createCommonTaskItems();
let recentItems = this.createRecentItems();
recentItems = recentItems.filter((item) => item.description !== "Notebook");
const tipsItems = this.createTipsItems();
const onClearRecent = this.clearMostRecent;
const formContainer = (jsx: JSX.Element) => (
return (
<div className="connectExplorerContainer">
<form className="connectExplorerFormContainer">{jsx}</form>
</div>
);
return formContainer(
<div className="splashScreenContainer">
<div className="splashScreen">
<div className="title">
Welcome to Cosmos DB
<FeaturePanelLauncher />
</div>
<div className="subtitle">Globally distributed, multi-model database service for any scale</div>
<div className="mainButtonsContainer">
{mainItems.map((item) => (
<div
className="mainButton focusable"
key={`${item.title}`}
onClick={item.onClick}
onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
tabIndex={0}
role="button"
>
<img src={item.iconSrc} alt="" />
<div className="legendContainer">
<div className="legend">{item.title}</div>
<div className="description">{item.description}</div>
</div>
<form className="connectExplorerFormContainer">
<div className="splashScreenContainer">
<div className="splashScreen">
<div className="title">
Welcome to Cosmos DB
<FeaturePanelLauncher />
</div>
))}
</div>
<div className="moreStuffContainer">
<div className="moreStuffColumn commonTasks">
<div className="title">Common Tasks</div>
<ul>
{commonTaskItems.map((item) => (
<li
className="focusable"
key={`${item.title}${item.description}`}
<div className="subtitle">Globally distributed, multi-model database service for any scale</div>
<div className="mainButtonsContainer">
{mainItems.map((item) => (
<Stack
horizontal
className="mainButton focusable"
key={`${item.title}`}
onClick={item.onClick}
onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
tabIndex={0}
role="button"
>
<img src={item.iconSrc} alt="" />
<span className="oneLineContent" title={item.info}>
{item.title}
</span>
</li>
))}
</ul>
</div>
<div className="moreStuffColumn">
<div className="title">Recents</div>
<ul>
{recentItems.map((item, index) => (
<li key={`${item.title}${item.description}${index}`}>
<img src={item.iconSrc} alt="" />
<span className="twoLineContent">
<Link onClick={item.onClick} title={item.info}>
{item.title}
</Link>
<div className="description">{item.description}</div>
</span>
</li>
))}
</ul>
{recentItems.length > 0 && <Link onClick={() => onClearRecent()}>Clear Recents</Link>}
</div>
<div className="moreStuffColumn tipsContainer">
<div className="title">Tips</div>
<ul>
{tipsItems.map((item) => (
<li
className="tipContainer focusable"
key={`${item.title}${item.description}`}
onClick={item.onClick}
onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
tabIndex={0}
role="link"
>
<div className="title" title={item.info}>
{item.title}
<div>
<img src={item.iconSrc} alt="" />
</div>
<div className="description">{item.description}</div>
</li>
<div className="legendContainer">
<div className="legend">{item.title}</div>
<div className={userContext.features.enableNewQuickstart ? "newDescription" : "description"}>
{item.description}
</div>
</div>
</Stack>
))}
<li>
<a role="link" href={SplashScreen.seeMoreItemUrl} rel="noreferrer" target="_blank" tabIndex={0}>
{SplashScreen.seeMoreItemTitle}
</a>
</li>
</ul>
</div>
<div className="moreStuffContainer">
<div className="moreStuffColumn commonTasks">
<div className="title">
{userContext.features.enableNewQuickstart ? "Why Cosmos DB" : "Common Tasks"}
</div>
{userContext.features.enableNewQuickstart ? this.getNotebookItems() : this.getCommonTasksItems()}
</div>
<div className="moreStuffColumn">
<div className="title">
{userContext.features.enableNewQuickstart ? "Top 3 things you need to know" : "Recents"}
</div>
{userContext.features.enableNewQuickstart ? this.top3Items() : this.getRecentItems()}
</div>
<div className="moreStuffColumn tipsContainer">
<div className="title">
{userContext.features.enableNewQuickstart ? "Learning Resources" : "Tips"}
</div>
{userContext.features.enableNewQuickstart ? this.getLearningResourceItems() : this.getTipItems()}
</div>
</div>
</div>
</div>
</div>
</form>
</div>
);
}
@ -202,35 +162,62 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
*/
public createMainItems(): SplashScreenItem[] {
const dataSampleUtil = this.createDataSampleUtil();
const heroes: SplashScreenItem[] = [
{
if (userContext.features.enableNewQuickstart) {
const launchQuickstartBtn = {
iconSrc: QuickStartIcon,
title: "Launch quick start",
description: "Launch a quick start tutorial to get started with sample data",
// TODO: replace onClick function
onClick: () => 1,
};
const newContainerBtn = {
iconSrc: ContainersIcon,
title: `New ${getCollectionName()}`,
description: "Create a new container for storage and throughput",
onClick: () => this.container.onNewCollectionClicked(),
};
const connectBtn = {
iconSrc: ConnectIcon,
title: "Connect",
description: "Prefer using your own choice of tooling? Find the connection string you need to connect",
// TODO: replace onClick function
onClick: () => 2,
};
return [launchQuickstartBtn, newContainerBtn, connectBtn];
} else {
const heroes: SplashScreenItem[] = [];
if (dataSampleUtil.isSampleContainerCreationSupported()) {
heroes.push({
iconSrc: SampleIcon,
title: "Start with Sample",
description: "Get started with a sample provided by Cosmos DB",
onClick: () => dataSampleUtil.createSampleContainerAsync(),
});
}
heroes.push({
iconSrc: NewContainerIcon,
title: `New ${getCollectionName()}`,
description: "Create a new container for storage and throughput",
onClick: () => this.container.onNewCollectionClicked(),
},
];
if (dataSampleUtil.isSampleContainerCreationSupported()) {
// Insert at the front
heroes.unshift({
iconSrc: SampleIcon,
title: "Start with Sample",
description: "Get started with a sample provided by Cosmos DB",
onClick: () => dataSampleUtil.createSampleContainerAsync(),
});
}
if (useNotebook.getState().isPhoenixNotebooks) {
heroes.push({
iconSrc: NewNotebookIcon,
title: "New Notebook",
description: "Create a notebook to start querying, visualizing, and modeling your data",
onClick: () => this.container.onNewNotebookClicked(),
});
}
if (useNotebook.getState().isPhoenixNotebooks) {
heroes.push({
iconSrc: NewNotebookIcon,
title: "New Notebook",
description: "Create a notebook to start querying, visualizing, and modeling your data",
onClick: () => this.container.onNewNotebookClicked(),
});
}
return heroes;
return heroes;
}
}
private createCommonTaskItems(): SplashScreenItem[] {
@ -393,4 +380,174 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
event.stopPropagation();
}
}
private getNotebookItems(): JSX.Element {
return (
<Stack>
<Stack className="notebookSplashScreenItem" horizontal style={{ marginBottom: 14 }}>
<Image src={NotebooksIcon} />
<Text className="itemText">Notebook - Easy to develop</Text>
</Stack>
<Stack className="notebookSplashScreenItem" horizontal style={{ marginBottom: 14 }}>
<Image src={GreenCheckIcon} />
<Text className="itemText">Notebook - Enterprise ready</Text>
</Stack>
<Stack className="notebookSplashScreenItem" horizontal style={{ marginBottom: 14 }}>
<Image src={CostIcon} />
<Text className="itemText">Notebook - Cost effective</Text>
</Stack>
</Stack>
);
}
private getCommonTasksItems(): JSX.Element {
const commonTaskItems = this.createCommonTaskItems();
return (
<ul>
{commonTaskItems.map((item) => (
<li
className="focusable"
key={`${item.title}${item.description}`}
onClick={item.onClick}
onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
tabIndex={0}
role="button"
>
<img src={item.iconSrc} alt="" />
<span className="oneLineContent" title={item.info}>
{item.title}
</span>
</li>
))}
</ul>
);
}
private top3Items(): JSX.Element {
return (
<Stack>
<Stack style={{ marginBottom: 26 }}>
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
<Link href="https://aka.ms/msl-modeling-partitioning-2" target="_blank" style={{ marginRight: 5 }}>
Advanced Modeling Patterns
</Link>
<Image src={LinkIcon} />
</Stack>
<Text>
Learn advanced strategies for managing relationships between data entities to optimize your database.
</Text>
</Stack>
<Stack style={{ marginBottom: 26 }}>
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
<Link href="https://aka.ms/msl-modeling-partitioning-1" target="_blank" style={{ marginRight: 5 }}>
Partitioning Best Practices
</Link>
<Image src={LinkIcon} />
</Stack>
<Text>
Learn to apply data model and partitioning strategies to support an efficient and scalable NoSQL database.
</Text>
</Stack>
<Stack>
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
<Link href="https://aka.ms/msl-resource-planning" target="_blank" style={{ marginRight: 5 }}>
Plan Your Resource Requirements
</Link>
<Image src={LinkIcon} />
</Stack>
<Text>
Familiarize yourself with the various configuration options for a new Azure Cosmos DB SQL API account.
</Text>
</Stack>
</Stack>
);
}
private getRecentItems(): JSX.Element {
const recentItems = this.createRecentItems()?.filter((item) => item.description !== "Notebook");
return (
<Stack>
<ul>
{recentItems.map((item, index) => (
<li key={`${item.title}${item.description}${index}`}>
<img src={item.iconSrc} alt="" />
<span className="twoLineContent">
<Link onClick={item.onClick} title={item.info}>
{item.title}
</Link>
<div className="description">{item.description}</div>
</span>
</li>
))}
</ul>
{recentItems.length > 0 && <Link onClick={() => this.clearMostRecent()}>Clear Recents</Link>}
</Stack>
);
}
private getLearningResourceItems(): JSX.Element {
return (
<Stack>
<Stack style={{ marginBottom: 26 }}>
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
<Link href="https://aka.ms/msl-sdk-connect" target="_blank" style={{ marginRight: 5 }}>
Get Started using th SQL API with the SDK
</Link>
<Image src={LinkIcon} />
</Stack>
<Text>Learn about the Azure Cosmos DB SDK, then download and use in a .NET application.</Text>
</Stack>
<Stack style={{ marginBottom: 26 }}>
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
<Link href="https://aka.ms/msl-complex-queries" target="_blank" style={{ marginRight: 5 }}>
Master Complex Queries
</Link>
<Image src={LinkIcon} />
</Stack>
<Text>Learn how to author complex queries using cross-products and correlated subqueries.</Text>
</Stack>
<Stack>
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
<Link href="https://aka.ms/msl-move-data" target="_blank" style={{ marginRight: 5 }}>
Migrate Your Data
</Link>
<Image src={LinkIcon} />
</Stack>
<Text>
Migrate data into and out of Azure Cosmos DB SQL API using Azure services and open-source solutions.
</Text>
</Stack>
</Stack>
);
}
private getTipItems(): JSX.Element {
const tipsItems = this.createTipsItems();
return (
<ul>
{tipsItems.map((item) => (
<li
className="tipContainer focusable"
key={`${item.title}${item.description}`}
onClick={item.onClick}
onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
tabIndex={0}
role="link"
>
<div className="title" title={item.info}>
{item.title}
</div>
<div className="description">{item.description}</div>
</li>
))}
<li>
<a role="link" href={SplashScreen.seeMoreItemUrl} rel="noreferrer" target="_blank" tabIndex={0}>
{SplashScreen.seeMoreItemTitle}
</a>
</li>
</ul>
);
}
}

2
src/Platform/Hosted/extractFeatures.ts
View File

@ -29,6 +29,7 @@ export type Features = {
readonly mongoProxyEndpoint?: string;
readonly mongoProxyAPIs?: string;
readonly enableThroughputCap: boolean;
readonly enableNewQuickstart: boolean;
// can be set via both flight and feature flag
autoscaleDefault: boolean;
@ -89,6 +90,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
partitionKeyDefault2: "true" === get("pkpartitionkeytest"),
notebooksDownBanner: "true" === get("notebooksDownBanner"),
enableThroughputCap: "true" === get("enablethroughputcap"),
enableNewQuickstart: "true" === get("enablenewquickstart"),
};
}