argoproj / argo-ui Goto Github PK
View Code? Open in Web Editor NEWArgoproj shared React components
License: Apache License 2.0
Argoproj shared React components
License: Apache License 2.0
The current Page component is a bit inflexible in terms of being able to set custom values for the Helmet title and the TopBar title. Want to have the topBar title set specifically and can be different than the Helmet title. Also may not want the toolbar breadcrumbs to be part of the Helmet title.
Here is an example with it being more flexible. Note the tooltip, which is the helmet title and the top bar title on the right.
followed the setup guide for the setup of argo-ui with given steps
yarn install
yarn start
yarn start
failed with[Error message "error:0308010C:digital envelope `routines::unsupported](https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported)
using export NODE_OPTIONS=--openssl-legacy-provider
worked to start the build and server but on server module build fails with
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
at getLoaderOptions (/workspace/argo-ui/node_modules/ts-loader/dist/index.js:91:41)
at Object.loader (/workspace/argo-ui/node_modules/ts-loader/dist/index.js:14:21)
Create V2 switch component according to design
https://www.figma.com/proto/0lfWk3817so9UpCEsrWZdu/argo-CD?page-id=0%253A1&node-id=138%3A26
React forms is deprecated and we need stop using it for new ui
When Argo runs with multiple controllers in the cluster Argo UI should display workflows from specific controller.
Two CVEs are introduced via the portable-fetch dependency because of its dependency on node-fetch:
I don't see any references in argo-ui to fetch(
, which I think is the function this package introduces.
It looks like the package hasn't been updated for five years. So even if we need it, we should probably look for an alternative.
Can we just remove this dependency since it doesn't appear to be used? If not, can we use an alternative?
All the details for this issue are here argoproj/argo-workflows#12947
I dug into this issue ans it's due to the Terminal
from xterm
in LogsViewer
component that catches Keyboard events. This bug is still in an open state on xterm repo, and seems to be a desired behavior, so no real need to update it.
As a workaround I'll implement something inspired from xtermjs/xterm.js#2478 (comment)
Argo Image returns 404
When a workflowTemplate
has a workflow parameter with an enum
arguments:
parameters:
- name: scale
value: "500"
enum:
- "500"
- "1000"
- "2000"
- "5000"
- "10000"
It would be useful to be able to have a placeholder instead of the default value to display to the user (example: "Please select") to ensure the user select something.
At the moment, the workaround to put it in value
does not work as the value
has to be in the enum
.
Should use FontAwesome icons as checkboxes to avoid browser compatibility issues.
For use in argoproj/argo-cd#6091
Document design system for Argo UI
Describe the bug
Error message popup cannot be displayed properly
To Reproduce
At project level, add new role
Grant "get" to all resources under the related app
Project --> edit --> save
Expected behavior
Error message should be displayed properly, at least all the text should be visible
Related to argoproj/argo-cd#16745
These are some of the accessibility issues i have identified on the side nav bar, with some quick solutions (may not be the best):
nav
elementaria-current="true"
button
instead of a div
with onClickArgoCD always pulls the master version of argo-ui (link), which is somewhat risky if breaking changes go into argo-ui. Consequently, argo-ui master
has to be highly stable.
Short of a proper release cycle, one easy way to stabilize this dependency is to create a "stable" branch which is manually rebased on the development branch. The development branch in GitHub terms would be the 'main' branch - the one PRs are targeted against by default. Currently, the master
branch is both the development and stable branch.
This manual rebase can be done periodically (eg weekly) or whenever the maintainer feels the development branch contains changes that are safe/stable enough.
The advantage of this approach is a relatively cheap separation between stable and latest code on argo-ui, which allows low-cost "releases" that do not require updating any code in the projects that depend on argo-ui, since those projects are already targeting the stable branch. This reduces the testing overhead required for individual argo-ui PRs, since the stability of the development branch can be "lower".
The disadvantage of this approach is that it requires significant attention from a maintainer whose job it is to periodically rebase the stable branch on the development branch. The cost of reducing testing for individual PRs means that the testing is now batched into these periodic rebases, so the testing pre-rebase should be extensive.
The naming of the dev/stable branches is subjective. I would personally suggest leaving master
as the dev/main branch and creating a new stable branch, eg stable
, or release
.
Redesign V2 button component according to design:
https://www.figma.com/proto/0lfWk3817so9UpCEsrWZdu/argo-CD?page-id=0%253A1&node-id=138%3A26
The v2/package.json and v2/tsconfig.json were created as a quick workaround to unblock v2 usage. Now we can remove both and move new dependencies (if any) from v2/package.json to package.json
After merging the package.json and tsconfig.json we need to merge storybooks and CI for both packages
When opening the Autocomplete complete it auto highlight the first item, so when you hit enter it select the first item and not what you freely search into the input.
My proposal is to simply remove this behavior that is misleading users.
This is based on discussions in this Slack thread (which is fairly long and winding) that I had raised after realizing the fairly neglected and incomplete state of this repo when having to do an upgrade of it for Argo Workflows in argoproj/argo-workflows#11585.
This was also mentioned in a Maintainers meeting that I was not part of.
This repo has been neglected for some time and right now there are not that many cross-project contributors. Due to this and the interim state of this repo as not entirely a library (see below), this has resulted in slowing down development while simultaneously not really creating a "consistent look and feel" between projects (such as Workflows and CD). There are some similarities and shared branding, but many differences (in part because CD has received more attention) despite having some shared components.
While it may be possible to improve this situation, some contributors believe that this may not be worthwhile and that a design guide of sorts may be a better substitute. Argoproj also already uses antd
as the underlying component library. This repo has higher-level components on top of those as well as some components that are not part of antd
.
(Personally, I do not really have a strong opinion myself as I am a more recent contributor to Argoproj and am more documenting the current thoughts around this for everyone. I think the "ideal state" of this repo could be great, but if it does not suffice for those purposes and may not ever suffice, while also currently slowing things down, phasing out may certainly make a lot of sense.)
In any case, as the repo is indeed not really actively maintained (and has no active maintainer list), we should document its current state.
Instead of having contributors create issues and PRs here ad-hoc, it may be better in the interim to require that issues and PRs have a downstream issue in consuming projects like Argo Workflows or Argo CD. That way, maintainers of the consuming projects will be aware of and can review PRs here.
Issue and PR templates can be updated to explicitly note this requirement. Perhaps the README and other docs as well.
I may perhaps be the only one interested in improving this, but as I mentioned in argoproj/argo-workflows#11510 (comment), this repo currently exports raw TSX, instead of compiled JS. This causes compat issues when consuming projects have different TS versions or settings, which means that the settings and version of this repo largely define the settings and version of consuming repos. It also means longer compilation times and that consuming repos must have many of the same devDeps despite not using them directly (which is very confusing and hard to determine -- package managers will not automatically determine this given that this is not how devDeps are meant to be used).
Of particular note is that this repo is on TS 4.9 and does not have the strictest (or even strict, for that matter) type-checking configuration.
This makes it all the more harder to decouple this repo from consuming projects as if they use any components from here, they are hard tied to its version and settings. Compiling the TSX to JS and publishing it, whether in the NPM package or directly in the repo, would significantly improve this situation.
This is more of a miscellaneous note, but I think the history of a repo is important context to any decisions.
As far as I know, this repo was initially the UI for Argo Workflows. Then it evolved as the Argoproj org evolved, including Argo CD and others. This can be seen in late-2019 PRs #53 and argoproj/argo-workflows#1859 that move the Workflows UI into Argo Workflows. (Notably, COVID-19 started to make its mark on the entire world around that time).
Then there was some momentum from contributors to make this repo into a component library for all Argo Projects. Can see some mid-2021 PRs such as #96.
This appears to have never quite been completed though, and this repo has been in this interim state ever since.
I don't know that many details here, but if I'm interpreting correctly, v1 was a first-pass assortment of components and v2 was meant to be "a true component library which is shared between all Argo Projects and published on NPM".
It looks like it was also supposed to modern hooks syntax and other things. There is not a 1-to-1 component match though.
Redesign V2 checkbox component according to design
https://www.figma.com/proto/0lfWk3817so9UpCEsrWZdu/argo-CD?page-id=0%253A1&node-id=138%3A26
If the app name is too big external link icon and favorite icon overlap the app name. Word wrap the name or on mouse over show the complete name and fix the name length width.
{
"Version": "v2.4.0+655be25",
"BuildDate": "2022-04-15T00:29:43Z",
"GitCommit": "655be25f871d109a7f346c84bf985b397aa87fd9",
"GitTreeState": "clean",
"GoVersion": "go1.18.1",
"Compiler": "gc",
"Platform": "linux/amd64",
"KustomizeVersion": "v4.4.1 2021-11-11T23:36:27Z",
"HelmVersion": "v3.8.1+g5cb9af4",
"KubectlVersion": "v0.23.1",
"JsonnetVersion": "v0.18.0"
}
Following the instructions here with argoui v2.1.0-beta2 resulted in an empty Argo workflows page. No workflow data and missing assets:
Console only indicated 404s for icons and fonts
Reduce the scope of this component library, reduce its bundle size, use more tooling from the UI libraries we import, and have more consistent styling with that UI library. Should help with #453
We already use antd
, let's use its components everywhere instead of having custom components in some places. At the very least, if we need custom functionality, we can wrap the antd
components.
Also would be good to remove foundation-sites
since that's another (dated) UI library and standardize on antd
A few components that can be replaced from a quick glance:
Popup
-> Popover / Popconfirm / Modal / AlertSlidingPanel
-> DrawerProbably several others too
Argo-ui xtem versio is very old, 2.4.0. Currently,xterm version is > 4.0.0. Is it possible to update xterm version?
Redesign V2 input component according design:
https://www.figma.com/proto/0lfWk3817so9UpCEsrWZdu/argo-CD?page-id=0%253A1&node-id=138%3A26
I've always wondered that the Helm icon in the Argo CD UI looks a bit strange, but today I decided to go down that rabbit hole and found out that this is actually being rendered by custom icon font. This screenshot is from Edge, but it looks similarly bad on all other browser I had available (Chrome and Firefox):
Planning to add some documentation around using yalc. Need to confirm a few things and then I can raise a PR
do we need to publish the argo-ui repo after every change that we want reflected?
do we need to yalc add
on the main (argo-workflows) repo after every change?
it happens sometimes that the already running webpack dev server does not pick up the change even though node_modules are updated. It seems to use the one in memory. Any pointers on how to fix this ?
I am a front-end engineer who recently started using Argo Workflows in my company. Argo Workflows is an excellent workflow engine, but I thought the UI could use more improvement.
First, I would improve the static analysis tool. tslint is already deprecated and it is recommended to use ESLint and typescript-eslint.
https://palantir.github.io/tslint/
⚠️ TSLint has been deprecated as of 2019. Please see this issue for more details: Roadmap: TSLint → ESLint. typescript-eslint is now your best option for linting TypeScript.
So can I work on this?
Please provide a way to change the color of argocd-ui by adding the colors in argocd-cm configmap rather than using it from custom CCS
{
"Version": "v2.4.0+655be25",
"BuildDate": "2022-04-15T00:29:43Z",
"GitCommit": "655be25f871d109a7f346c84bf985b397aa87fd9",
"GitTreeState": "clean",
"GoVersion": "go1.18.1",
"Compiler": "gc",
"Platform": "linux/amd64",
"KustomizeVersion": "v4.4.1 2021-11-11T23:36:27Z",
"HelmVersion": "v3.8.1+g5cb9af4",
"KubectlVersion": "v0.23.1",
"JsonnetVersion": "v0.18.0"
}
Right now the banner color is so dark that text is not clearly visible, match the left-side panel theme to match better overall experience
{
"Version": "v2.4.0+655be25",
"BuildDate": "2022-04-15T00:29:43Z",
"GitCommit": "655be25f871d109a7f346c84bf985b397aa87fd9",
"GitTreeState": "clean",
"GoVersion": "go1.18.1",
"Compiler": "gc",
"Platform": "linux/amd64",
"KustomizeVersion": "v4.4.1 2021-11-11T23:36:27Z",
"HelmVersion": "v3.8.1+g5cb9af4",
"KubectlVersion": "v0.23.1",
"JsonnetVersion": "v0.18.0"
}
Describe the bug
Buttons change their sizes in different states (focus, hover, etc.). It causes element jumping during interaction with buttons.
Like mentioned in this issue: argoproj/argo-cd#6946
To Reproduce
Expected behavior
Buttons keep their size and don’t move each other and other content.
Screenshots
Hello,
I hope your day is going well.
I’ve noticed that the current tag is more than two years old. I wonder how easy it is to release a new one to be used by other projects. I understand that there may have not been much work on this, but there were still some contributions.
Thanks.
Redesign V2 dropdown component
https://www.figma.com/proto/0lfWk3817so9UpCEsrWZdu/argo-CD?page-id=0%253A1&node-id=138%3A26
Hi,
ArgoCD Team, could you please make the /settings/repos faster?
Current Problem:
We have about 50+ Repos connected and everytime we need to visit the page it needs forever to check them all.
Solution:
Either implement paging with a search or async checking of the repositories.
Thx in advance.
Sorry found no guidlines how to write a appropirate request :)
Best Regards Kani
I'm developing a system level extension and I'm having an issue where there's a sb-page-wrapper
class that has a padding of 230px that shifts my extension to the left as shown in this picture. I'd like to have my extension be able to use the space right next to the black nav bar on the left.
There's also another div with style .cd-layout--extension .cd-layout__content--sb-expanded
that has padding-left: 230px
as well, which leads me to believe there's a bug where we're accidently applying the padding twice.
When Argo CD runs subpath mode and share origin with multiple applications and uses same local storage key, it became not to work.
As my experience, external application uses theme
key in local storage and save "DARK" or "LIGHT" to it.
After that, when I access to Argo CD, it outputs a following error in a browser.
VM172:1 Uncaught SyntaxError: Unexpected token 'D', "DARK" is not valid JSON
at JSON.parse (<anonymous>)
at 10180 (main.9ecae91d8fd1deedf944.js:2:1501193)
at i (main.9ecae91d8fd1deedf944.js:2:2463187)
at 58535 (main.9ecae91d8fd1deedf944.js:2:2104618)
at i (main.9ecae91d8fd1deedf944.js:2:2463187)
at main.9ecae91d8fd1deedf944.js:2:2468811
at main.9ecae91d8fd1deedf944.js:2:2468821
10180 @ main.9ecae91d8fd1deedf944.js:2
i @ main.9ecae91d8fd1deedf944.js:2
58535 @ main.9ecae91d8fd1deedf944.js:2
i @ main.9ecae91d8fd1deedf944.js:2
(anonymous) @ main.9ecae91d8fd1deedf944.js:2
(anonymous) @ main.9ecae91d8fd1deedf944.js:2
I think it occurs below because theme
item is not JSON.
https://github.com/argoproj/argo-ui/blob/master/v2/shared/context/theme.tsx#L10
So I think this should change key name more specific like "argo-ui-theme" because Argo CD can run by subpath mode.
Or should add error handlings to it.
fix #564
When I discover applications on like https://argocd.com/service/applications/, search applications and then click it.
But it is redirected to https://argocd.com/service/applications//{application-name}.
And an empty page is shown also.
for the soultion, the slash in the end has to be removed.
Is this a feature request of a bug?
Bug
What happened
Running:
docker build .
results in the following error:
$ webpack --config ./src/app/webpack.config.js
/src/node_modules/webpack/bin/webpack.js:348
throw err;
^
SyntaxError: Error parsing /src/node_modules/node-libs-browser/package.json: Unexpected token � in JSON at position 0
at JSON.parse (<anonymous>)
at readPackage (module.js:133:52)
at tryPackage (module.js:143:13)
at Function.Module._findPath (module.js:225:20)
at Function.Module._resolveFilename (module.js:553:25)
at Function.Module._load (module.js:482:25)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/src/node_modules/webpack/lib/node/NodeSourcePlugin.js:8:25)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at WebpackOptionsApply.process (/src/node_modules/webpack/lib/WebpackOptionsApply.js:71:25)
at webpack (/src/node_modules/webpack/lib/webpack.js:37:48)
at processOptions (/src/node_modules/webpack/bin/webpack.js:335:15)
at yargs.parse (/src/node_modules/webpack/bin/webpack.js:396:2)
at Object.Yargs.self.parse (/src/node_modules/webpack/node_modules/yargs/yargs.js:533:18)
at Object.<anonymous> (/src/node_modules/webpack/bin/webpack.js:152:7)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
at Function.Module.runMain (module.js:701:10)
at startup (bootstrap_node.js:193:16)
at bootstrap_node.js:617:3
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The command '/bin/sh -c NODE_ENV='production' yarn build && yarn cache clean && yarn install --production' returned a non-zero code: 1
What you expect to happen
The image should build successfully
Details
I'm using latest master
b0676cd
The problem is an extra newline character at the end of package.json
argo-cd and argo-workflows Nav bar doesn't have a
tag. So currently we cannot open it from right click
.
In addition, browser doesn't register page histories, so we cannot go forward
history after go back
page.
Generally if it has a
tag, we can open it from right click
like followings.
I'm not sure this is argo-ui
issue or not.
Right now help-chat button theme looks odd looking at the entire ArgoCD UI, please match the theme same as what is used for the left-side panel.
{
"Version": "v2.4.0+655be25",
"BuildDate": "2022-04-15T00:29:43Z",
"GitCommit": "655be25f871d109a7f346c84bf985b397aa87fd9",
"GitTreeState": "clean",
"GoVersion": "go1.18.1",
"Compiler": "gc",
"Platform": "linux/amd64",
"KustomizeVersion": "v4.4.1 2021-11-11T23:36:27Z",
"HelmVersion": "v3.8.1+g5cb9af4",
"KubectlVersion": "v0.23.1",
"JsonnetVersion": "v0.18.0"
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.