Events tab should hint if there are no events available

[jsoref]

If you are trying to resolve an environment-specific issue or have a one-off question about the edge case that does not require a feature then please consider asking a question in argocd slack channel.

Checklist:

• [x] I've searched in the docs and FAQ for my answer: https://bit.ly/argocd-faq.
• [x] I've included steps to reproduce the bug.
• [x] I've pasted the output of argocd version.

Describe the bug

I'm constantly clicking the events tab only to be told there are no events

To Reproduce

1. Visit https://cd.apps.argoproj.io/applications/argo-rollouts
2. Click a box, e.g. https://cd.apps.argoproj.io/applications/argo-rollouts?node=rbac.authorization.k8s.io%2FClusterRole%2F%2Fargo-rollouts-aggregate-to-admin%2F0
3. Click Events, i.e. https://cd.apps.argoproj.io/applications/argo-rollouts?node=rbac.authorization.k8s.io%2FClusterRole%2F%2Fargo-rollouts-aggregate-to-admin%2F0&tab=events

Expected behavior

The events tab should be gray or somehow hint that as of some time there were no events available

Screenshots

Version

{
    "Version": "v1.8.0+9e61354",
    "BuildDate": "2020-12-11T16:52:16Z",
    "GitCommit": "9e61354fa25b179e74e6425a7ebd4136a97e672b",
    "GitTreeState": "clean",
    "GoVersion": "go1.14.12",
    "Compiler": "gc",
    "Platform": "linux/amd64",
    "KsonnetVersion": "v0.13.1",
    "KustomizeVersion": "v3.8.1 2020-07-16T00:58:46Z",
    "HelmVersion": "v3.4.1+gc4e7485",
    "KubectlVersion": "v1.17.8",
    "JsonnetVersion": "v0.17.0"
}

Logs

Paste any relevant application logs here.

[reginapizza]

Hello! I was trying to work on coming up with a fix for this issue. My original plan was to just add a parenthesis with the number of events to the tab for now (ex. Events (0)), but at the moment I'm stuck in an infinite loop with the events number rendering and was wondering if someone could help me find a way to either get out of it or suggest a better way to render the events number.

This file is huge, so in order to avoid pasting the whole thing, I'm just providing the main pieces of code I've added and if you need to see the whole file for more context, it can found on my branch here.

I've added numOfEvents to state:

constructor(props: RouteComponentProps<{name: string}>) {
        super(props);
        this.state = {
            page: 0,
            numOfEvents: 0,
        };
    }

(immediately before return statement) Logic to set state:

if (this.state.numOfEvents === 0) {
    services.applications.events(application.metadata.name).then(events => {
        console.log(events);
        this.setState({numOfEvents : events.length})
    });
}

Events tab object in tabs array:

{
    title: 'EVENTS' + ` (${this.state.numOfEvents})`,
    key: 'event',
    content: <ApplicationResourceEvents applicationName={application.metadata.name} />
}

The main problem for this entire issue is that the tabs do not know about the data contained within their content.

Something I also considered was refactoring the events tab to make it into a new component, but I'm not sure if that's an acceptable solution or not. Any input is greatly appreciated, thank you!