Fix styling of dropdown's in dark mode

[herbrandson]

Dropdown's are hard to view in dark mode

[simarpreetsingh-019]

As far as I can understand, we need to change the color code in settings.scss file so that it will be more visible.

If that's the only thing, I would like to work on this issue.

if there is anything else needed in this issue, which is needed/asked, please guide me so that I could have a better understanding of this issue.

[herbrandson]

Yeah, you're on the right track. We're using React Select for the drop downs. You can see an example of where it's being used in namespaceFilter.tsx. The css for the Select control should all be found in select.scss. The colors we want should all come from the variables being declared in settings.scss (just like you suggested). Really the tricky part of this one is going to be figuring out which css classes that control exposes and setting everything correctly. I think it's going to just be a bit of trial and error until it looks good. Also, we'll want to make sure that whatever changes we make for dark mode don't break "light" mode.

Also, just to make sure you're aware... you can toggle between light and dark mode from the "Profile" menu option. Just scroll down and toggle the "Use Dark Mode" switch to go between the two.

Hope that helps. Let me know if you have any other questions. Thx!

[simarpreetsingh-019]

@herbrandson just one thing, is there some resources where I can get help to set it up offline to check and do changes to not mess up anything else while doing it, apart from reading about it from the Development section's Part of k8dash in Main Readme.md? if so, could you give their reference here?

I would love to work on this issue, but could I get some time for it ( min2-3 days because having some papers for the next 2 days)

[herbrandson]

Not really. But, let me know if you run into issues with getting a local environment working after following the readme.md and I'll be happy to lend a hand getting you unstuck :)

[simarpreetsingh-019]

@herbrandson I tried setting up docker, starting minikube, cloning the repo, and then starting the project as is there in the docs of how to start with development for the client. Good news. it started and the localhost got setup. problem is I can't see anything, as it will only show loading and not anything else, what could I be missing?

[ericblackburn]

A shot in the dark. When you startup the server, what do you see for Version and Available APIs?

For example, I get

[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node .`
OIDC_URL:  None
API URL:  https://10.40.40.100:6443
[HPM] Proxy created: /  ->  https://10.40.40.100:6443
[HPM] Subscribed to http-proxy events:  [ 'error', 'proxyRes', 'close' ]
Server started. Listening on port 4654
Version Info:  {
    "major": "1",
    "minor": "17",
    "gitVersion": "v1.17.2",
    "gitCommit": "59603c6e503c87169aea6106f57b9f242f64df89",
    "gitTreeState": "clean",
    "buildDate": "2020-01-18T23:22:30Z",
    "goVersion": "go1.13.5",
    "compiler": "gc",
    "platform": "linux/amd64"
}
Available APIs:  [
    "acme.cert-manager.io/v1alpha3",
    "admissionregistration.k8s.io/v1",
    "apiextensions.k8s.io/v1",
    "apiregistration.k8s.io/v1",
    "apps/v1",
    "authentication.k8s.io/v1",
    "authorization.k8s.io/v1",
    "autoscaling/v1",
    "batch/v1",
    "cert-manager.io/v1alpha3",
    "certificates.k8s.io/v1beta1",
    "coordination.k8s.io/v1",
    "discovery.k8s.io/v1beta1",
    "events.k8s.io/v1beta1",
    "extensions/v1beta1",
    "metrics.k8s.io/v1beta1",
    "networking.k8s.io/v1",
    "node.k8s.io/v1beta1",
    "policy/v1beta1",
    "rbac.authorization.k8s.io/v1",
    "scheduling.k8s.io/v1",
    "storage.k8s.io/v1"
]

Further down that path, do you see anything in that server terminal that looks like an error?

[simarpreetsingh-019]

One thing to confirm, do I need to set up nodeport also? And after getting the token from Server-account-token where do i need to use it?

[ericblackburn]

I don't think you need the nodeport.

I just tried to go through the steps, using a new minikube cluster and I was able to get k8dash to load via the following steps.

Start a new minikube cluster

$ minikube start -p k8dash
😄  [k8dash] minikube v1.8.2 on Ubuntu 18.04
✨  Automatically selected the virtualbox driver. Other choices: docker, none
🔥  Creating virtualbox VM (CPUs=2, Memory=6000MB, Disk=20000MB) ...
🐳  Preparing Kubernetes v1.17.3 on Docker 19.03.6 ...
🚀  Launching Kubernetes ... 
🌟  Enabling addons: default-storageclass, storage-provisioner
⌛  Waiting for cluster to come online ...
🏄  Done! kubectl is now configured to use "k8dash"

This will populate ./kube/config.  So, ensure that the context is currently this minikube cluster that was setup. kubectl config use-context k8dash Double check that you get use kubectl to see the content there. I get

$ kubectl get pods -A
NAMESPACE     NAME                          READY   STATUS    RESTARTS   AGE
kube-system   coredns-6955765f44-gv266      1/1     Running   0          3m50s
kube-system   coredns-6955765f44-xslc7      1/1     Running   0          3m49s
kube-system   etcd-m01                      1/1     Running   0          3m52s
kube-system   kube-apiserver-m01            1/1     Running   0          3m52s
kube-system   kube-controller-manager-m01   1/1     Running   0          3m52s
kube-system   kube-proxy-88kn7              1/1     Running   0          3m49s
kube-system   kube-scheduler-m01            1/1     Running   0          3m52s
kube-system   storage-provisioner           1/1     Running   1          3m55s

EDIT: Setup the service account Server-account-token at this point

Next, I build and startup k8dash stuff in the following way

1. In a terminal window, start from the k8dash checkout 1.1 cd server 1.2 npm i 1.3 npm start 1.4 Leave this terminal open, so the server can remain running
2. In another terminal window, start from the k8dash checkout 2.1 cd client 2.2 npm i 2.3 npm start 2.4 Again, leave this terminal open, so the client side will run

After the client starts up, it should open up a browser tab. There will be a scary error message, but there is also an X option in the top right of the error panel. Click the X and that should take you to the Token input page, which is where you input the token from Server-account-token that is obtained via kubectl describe secret k8dash-sa-token-xxxxx.

[ericblackburn]

Another possible break point might be the kubectl version, which is really meant to only be 1 minor version way from the cluster version at any point. For example, if kubectl version is 1.18, it will work with cluster's on 1.16-1.18.

$ kubectl version
Client Version: version.Info{Major:"1", Minor:"18", GitVersion:"v1.18.9", GitCommit:"94f372e501c973a7fa9eb40ec9ebd2fe7ca69848", GitTreeState:"clean", BuildDate:"2020-09-16T13:56:40Z", GoVersion:"go1.13.15", Compiler:"gc", Platform:"linux/amd64"}
Server Version: version.Info{Major:"1", Minor:"17", GitVersion:"v1.17.3", GitCommit:"06ad960bfd03b39c8310aaf92d1e7c12ce618213", GitTreeState:"clean", BuildDate:"2020-02-11T18:07:13Z", GoVersion:"go1.13.6", Compiler:"gc", Platform:"linux/amd64"}

[ericblackburn]

If you already tried to replicate my path, please note the EDIT

Also, I am on Ubuntu. So, it will be hard to replicate the Docker for Windows environment, it looks like you are on. Ideally, the k8dash server log would report any particular issues that it is having.

[simarpreetsingh-019]

server@1.0.0 start C:\Users\Jasvinder Singh\Desktop\SP\github cloned repos\k8dash\server cross-env DEBUG_VERBOSE=true nodemon .

[nodemon] 1.19.4 [nodemon] to restart at any time, enter rs [nodemon] watching dir(s): . [nodemon] watching extensions: js,mjs,json [nodemon] starting node . OIDC_URL: None API URL: https://127.0.0.1:32772 [HPM] Proxy created: / -> https://127.0.0.1:32772 [HPM] Subscribed to http-proxy events: [ 'error', 'proxyRes', 'close' ] Server started. Listening on port 4654 (node:10400) ExperimentalWarning: The dns.promises API is experimental Error getting cluster info { Error: connect ECONNREFUSED 127.0.0.1:32772 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1106:14) errno: 'ECONNREFUSED', code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 32772 }

Looks like I am having an error

[ericblackburn]

Ideally, if kubectl works then k8dash will work. I am wondering whether there is a problem loading the kubeconfig or something else with routing in Docker for Windows.

To validate that the kubeconfig isn't the issue, are you able to kubectl get pods -A and see what I saw?

Following up on that, I wonder where that kubeconfig is. k8dash/server/index.js is getting the kubeconfig from the call new k8s.KubeConfig();. The logic looks for the kubeconfig in the home directory of your OS, in a subdirectory .kube/config. Open that configuration and make sure that it is the configuration for the minikube cluster you created.

Even if that is the right config, maybe there is another environment variable that is hijacking the path that k8s.KubeConfig(); uses to search for the config. The code for this k8s module is here, and in particular the logic that finds the home directory likely should be using this line for Windows. If it doesn't reach that line it might be that one of the other environment variable checks, above that particular line of code, is providing an alternative path to the HOME directory.

You might be able to get some insight quickly by adding a log statement under this line to look like the following, so we can make sure that the minikube context is being seen

const kc = new k8s.KubeConfig();
console.log('Loaded context: ', kc.currentContext);

[herbrandson]

Hey @simarpreetsingh-019 , are you still interested in working on this issue? Are you still blocked on getting things working on Windows? Anything we can do to help?

[simarpreetsingh-019]

@herbrandson sorry I was not able to connect with you during the whole time, got infected with our novel virus during my exams, just got back with the development. some points to discuss: is there any update on the client-side? 2 weeks back, it started to deploy locally with windows popping up showing the dashboard start. But now, I can't start it because it got stuck with errors when I run npm start on the client side.

[herbrandson]

@simarpreetsingh-019 sorry, to hear you got COVID. My son also caught it at while at university. What a mess!

From reading through the thread above, it looks like @ericblackburn was helping you get a working development environment going. Were you able to work through his last couple of suggestions? For example, does kubectl get pods -A work for you?

Can you explain more about what errors you're seeing when running npm start on the client side?

[simarpreetsingh-019]

@herbrandson i followed @ericblackburn steps , before getting affected , when i was trying to so , i got to see client side working with web page getting displayed, but can't enter the token.

but now, when i try to run npm start in client , it shows :

client@0.1.0 start C:\Users\Jasvinder Singh\Desktop\SP\github cloned repos\k8dash\client cross-env react-scripts start C:\Users\Jasvinder Singh\Desktop\SP\github cloned repos\k8dash\client\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:231 appTsConfig.compilerOptions[option] = suggested; ^ TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible at verifyTypeScriptSetup (C:\Users\Jasvinder Singh\Desktop\SP\github cloned repos\k8dash\client\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:231:45) at Object. (C:\Users\Jasvinder Singh\Desktop\SP\github cloned repos\k8dash\client\node_modules\react-scripts\scripts\start.js:31:1) at Module._compile (internal/modules/cjs/loader.js:776:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:829:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! client@0.1.0 start: cross-env react-scripts start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the client@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Jasvinder Singh\AppData\Roaming\npm-cache\_logs\2020-11-17T16_54_38_803Z-debug.log

and after running this kubectl get pods -A , i got

NAMESPACE NAME READY STATUS RESTARTS AGE kube-system coredns-f9fd979d6-ssx7h 1/1 Running 4 41d kube-system etcd-minikube 1/1 Running 2 5d20h kube-system k8dash-87fd8b696-bdldd 0/1 NodeAffinity 0 40d kube-system k8dash-87fd8b696-x5smp 1/1 Running 1 4d20h kube-system k8dash-87fd8b696-xgw8l 0/1 NodeAffinity 0 5d20h kube-system kube-apiserver-minikube 1/1 Running 2 5d20h kube-system kube-controller-manager-minikube 1/1 Running 8 41d kube-system kube-proxy-jlcjx 1/1 Running 4 41d kube-system kube-scheduler-minikube 1/1 Running 4 41d kube-system storage-provisioner 1/1 Running 18 41d

I have tried the steps that was suggested when i got error from running client side. but still no response. i will try to delete and re install npm and node's latest version also and will try after that.

[Hamjaster]

Is this issue still going, I'd like to work on it? guidance needed :)