@dataloop-ai/components 0.18.0 → 0.18.2

package/src/demos/DlCodeEditor/DlCodeEditorDemo.vue

@@ -0,0 +1,247 @@
+<template>
+    <div>
+        <dl-switch
+            v-model="isDark"
+            left-label="Dark Mode"
+        />
+        <dl-switch
+            v-model="lines"
+            left-label="code lines"
+        />
+        <dl-switch
+            v-model="readonly"
+            left-label="readonly"
+        />
+        <dl-code-editor
+            v-model="codeEditorValue"
+            width="45vw"
+            height="75vh"
+            :language="language"
+            :theme="theme"
+            :readonly="readonly"
+            :options="options"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from 'vue-demi'
+import { DlCodeEditor, DlSwitch } from '../../components'
+import { DlCodeEditorOptions, DlCodeEditorTheme } from '../../components/types'
+
+export default defineComponent({
+    name: 'DlCodeEditorDemo',
+    components: {
+        DlSwitch,
+        DlCodeEditor
+    },
+    setup() {
+        const readonly = ref(false)
+        const isDark = ref(false)
+        const lines = ref(false)
+
+        const codeEditorValue = ref(
+            'import urllib3\n' +
+                'urllib3.disable_warnings()\n' +
+                'from base64 import b64encode\n' +
+                'import os\n' +
+                'import sys\n' +
+                'import json\n' +
+                'import getpass\n' +
+                'from optparse import OptionParser\n' +
+                'from datetime import datetime, timedelta\n' +
+                'import time\n' +
+                'from time import gmtime, strftime, strptime\n' +
+                'from operator import itemgetter, attrgetter\n' +
+                'from purity_fb import PurityFb, FileSystem, FileSystemSnapshot, SnapshotSuffix, rest\n' +
+                '\n' +
+                '# Global Variables\n' +
+                "VERSION = '2.0.0'\n" +
+                "HEADER = 'Pure Storage Take FlashBlade Snapshot (' + VERSION + ')'\n" +
+                "BANNER = ('=' * 132)\n" +
+                'DEBUG_FLAG = False\n' +
+                'VERBOSE_FLAG = False\n' +
+                "COOKIE = ''\n" +
+                '\n' +
+                'def parsecl():\n' +
+                "    usage = 'usage: %prog [options]'\n" +
+                "    version = '%prog ' + VERSION\n" +
+                '    description = "This application has been developed using Pure Storage v1.12 RESTful Web Service interfaces. Developed and tested using Python 3.9.5 Please contact ron@purestorage.com for assistance."\n' +
+                '\n' +
+                '    parser = OptionParser(usage=usage, version=version, description=description)\n' +
+                '\n' +
+                '\n' +
+                "    parser.add_option('-d', '--debug',\n" +
+                "                      action = 'store_true',\n" +
+                "                      dest = 'DEBUG_FLAG',\n" +
+                '                      default = False,\n' +
+                "                      help = 'Debug [default: %default]')\n" +
+                '    \n' +
+                "    parser.add_option('-f', '--filesystem',\n" +
+                "                      action = 'store',\n" +
+                "                      type = 'string',\n" +
+                "                      dest = 'fs',\n" +
+                "                      help = 'FlashBlade File System')\n" +
+                '        \n' +
+                "    parser.add_option('-r', '--replicant',\n" +
+                "                      action = 'store',\n" +
+                "                      type = 'string',\n" +
+                "                      dest = 'flashBladeRep',\n" +
+                "                      help = 'FlashBlade Replicant array')\n" +
+                '                      \n' +
+                "    parser.add_option('-s', '--server',\n" +
+                "                      action = 'store',\n" +
+                "                      type = 'string',\n" +
+                "                      dest = 'flashBlade',\n" +
+                "                      help = 'FlashBlade array')\n" +
+                '    \n' +
+                "    parser.add_option('-t', '--token',\n" +
+                "                      action = 'store',\n" +
+                "                      type = 'string',\n" +
+                "                      dest = 'API_TOKEN',\n" +
+                "                      help = 'Pure API Token')\n" +
+                '\n' +
+                "    parser.add_option('-S', '--suffix',\n" +
+                "                      action = 'store',\n" +
+                "                      type = 'string',\n" +
+                "                      dest = 'suffix',\n" +
+                "                      help = 'File system snapshot suffix')\n" +
+                '\n' +
+                "    parser.add_option('-v', '--verbose',\n" +
+                "                      action = 'store_true',\n" +
+                "                      dest = 'VERBOSE_FLAG',\n" +
+                '                      default = False,\n' +
+                "                      help = 'Verbose [default: %default]')\n" +
+                '\n' +
+                '    (options, args) = parser.parse_args()\n' +
+                '\n' +
+                "    '''\n" +
+                '    print("Options:", options)\n' +
+                '    print("Args:", args)\n' +
+                "    '''\n" +
+                '    \n' +
+                '    return(options)\n' +
+                '\n' +
+                'def main():\n' +
+                '    # Setup variables\n' +
+                '    global DEBUG_FLAG\n' +
+                '    exit_code = 0\n' +
+                '\n' +
+                '    # Check for command line parameters\n' +
+                '    options = parsecl()\n' +
+                '    API_TOKEN = options.API_TOKEN\n' +
+                '    flashBlade = options.flashBlade\n' +
+                '    flashBladeRep = options.flashBladeRep\n' +
+                '    fs = options.fs\n' +
+                '    suffix = options.suffix\n' +
+                '    DEBUG_FLAG = options.DEBUG_FLAG\n' +
+                '    VERBOSE_FLAG = options.VERBOSE_FLAG\n' +
+                '    \n' +
+                '    if DEBUG_FLAG:\n' +
+                "        print('API Token:', API_TOKEN)\n" +
+                "        print('FlashBlade:', flashBlade)\n" +
+                "        print('Relplicant:', flashBladeRep)\n" +
+                "        print('File System:', fs)\n" +
+                "        print('Suffix:', suffix)\n" +
+                "        print('Debug Flag:', DEBUG_FLAG)\n" +
+                "        print('Verbose Flag:', VERBOSE_FLAG)\n" +
+                '\n' +
+                '    if flashBlade == None:\n' +
+                "        sys.exit('Exiting: You must provide FlashBlade details')\n" +
+                '        \n' +
+                '    if API_TOKEN == None:\n' +
+                "        sys.exit('Exiting: You must provide FlashBlade API Token details')\n" +
+                '\n' +
+                '    if fs == None:\n' +
+                "        sys.exit('Exiting: You must provide FlashBlade file system')\n" +
+                '\n' +
+                '    print(BANNER)\n' +
+                "    print(HEADER + ' - ' + flashBlade)\n" +
+                "    print(strftime('%d/%m/%Y %H:%M:%S %Z', gmtime()))\n" +
+                '    print(BANNER)\n' +
+                '\n' +
+                '    # create PurityFb object for a certain array\n' +
+                '    fb = PurityFb(flashBlade)\n' +
+                '    # this is required for versions before Purity//FB 2.1.3 because they only supports self-signed\n' +
+                '    # certificates. in later versions, this may be unnecessary if you have imported a certificate.\n' +
+                '    fb.disable_verify_ssl()\n' +
+                '    \n' +
+                '    try:\n' +
+                '        res= fb.login(API_TOKEN)\n' +
+                '    except rest.ApiException as e:\n' +
+                '        print("Exception when logging in to the array: %s\\n" % e)\n' +
+                '\n' +
+                '    if res:\n' +
+                '        try:\n' +
+                '            if flashBladeRep:\n' +
+                '                if suffix:\n' +
+                '                  # create a snapshot with suffix and replicate to target array\n' +
+                '                  res = fb.file_system_snapshots.create_file_system_snapshots(sources=[fs],\n' +
+                '                                                                              suffix=SnapshotSuffix(suffix),\n' +
+                '                                                                              send=True,\n' +
+                '                                                                              targets=[flashBladeRep])\n' +
+                '                else:\n' +
+                '                  # create a snapshot without suffix and replicate to target array\n' +
+                '                  res = fb.file_system_snapshots.create_file_system_snapshots(sources=[fs],\n' +
+                '                                                                              send=True,\n' +
+                '                                                                              targets=[flashBladeRep])\n' +
+                '            else:\n' +
+                '                if suffix:\n' +
+                '                  # create a snapshot with suffix for the file system\n' +
+                '                  res = fb.file_system_snapshots.create_file_system_snapshots(sources=[fs],\n' +
+                '                                                                             suffix=SnapshotSuffix(suffix))\n' +
+                '                else:\n' +
+                '                  # create a snapshot without suffix for the file system\n' +
+                '                  res = fb.file_system_snapshots.create_file_system_snapshots(sources=[fs])\n' +
+                '                \n' +
+                '            if VERBOSE_FLAG:\n' +
+                '                print(res)\n' +
+                '            \n' +
+                "            print('Snapshot created for', fs, 'suffix', res.items[0].suffix) \n" +
+                '\n' +
+                '        except rest.ApiException as e:\n' +
+                '            print("Exception when creating file system snapshots: %s\\n" % e)        \n' +
+                '\n' +
+                '    fb.logout()\n' +
+                '    print(BANNER)\n' +
+                "    print(strftime('%d/%m/%Y %H:%M:%S %Z', gmtime()))\n" +
+                '    print(BANNER)\n' +
+                '    sys.exit(exit_code)\n' +
+                '\n' +
+                'main()'
+        )
+        const language = ref('python')
+
+        const theme = computed(() => {
+            return isDark.value
+                ? DlCodeEditorTheme.Dark
+                : DlCodeEditorTheme.Light
+        })
+
+        const options = computed<DlCodeEditorOptions>(() => ({
+            lineNumbers: lines.value
+        }))
+
+        watch(codeEditorValue, (val) => {
+            console.log('@@@', val)
+        })
+
+        return {
+            lines,
+            codeEditorValue,
+            language,
+            isDark,
+            theme,
+            readonly,
+            options
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.layout-empty-state {
+    display: grid;
+    width: 100%;
+}
+</style>

package/src/demos/DlCodeEditor/index.ts

@@ -0,0 +1,2 @@
+import DlCodeEditorDemo from './DlCodeEditorDemo.vue'
+export { DlCodeEditorDemo }

package/src/demos/DlConfusionMatrixDemo.vue

@@ -1,51 +1,107 @@
 <template>
-    <dl-confusion-matrix
-        :matrix="matrix"
-        :labels="labels"
-    />
+    <div>
+        <dl-confusion-matrix
+            :matrix="matrix"
+            :labels="labels"
+        />
+
+        <dl-confusion-matrix
+            :matrix="matrix"
+            :labels="labels"
+            is-empty
+            :empty-state-props="{
+                responsive: true,
+                style: 'min-height: 350px;',
+                bgSize: '130px',
+                bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                title: 'Lorem ipsum',
+                subtitle:
+                    'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                info: 'To learn more about this analytics, read our documentation.'
+            }"
+        >
+            <template #links="">
+                <div style="display: flex; gap: 5px; padding: 0 20px">
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-sdk-documentation"
+                        flat
+                        uppercase
+                        label="SDK"
+                    />
+                    <div class="break" />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-file"
+                        flat
+                        label="Documentation"
+                    />
+                    <div class="break" />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-youtube"
+                        flat
+                        label="Video"
+                    />
+                </div>
+            </template>
+        </dl-confusion-matrix>
+    </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlConfusionMatrix } from '../components'
-export default defineComponent({
-    components: {
-        DlConfusionMatrix
-    },
-    setup() {
-        const matrix = []
-        const labels = []
-        const size = 10
+import { DlConfusionMatrix, DlButton } from '../components'
 
-        const getLink = (number: number) => {
-            return `www.confusion-matrix.com/cell-${number}`
-        }
+const getLink = (number: number) => {
+    return `www.confusion-matrix.com/cell-${number}`
+}
 
-        for (let i = 0; i < size; i++) {
-            const row = []
-            for (let j = 0; j < size; j++) {
-                const value = Math.floor(Math.random() * 10)
-                row.push({
-                    value,
-                    link: getLink(value)
-                })
-            }
-            matrix.push(row)
+const getMatrix = (size: number) => {
+    const newMatrix = []
+
+    for (let i = 0; i < size; i++) {
+        const row = []
+        for (let j = 0; j < size; j++) {
+            const value = Math.floor(Math.random() * 10)
+            row.push({
+                value,
+                link: getLink(value)
+            })
         }
+        newMatrix.push(row)
+    }
+    return newMatrix
+}
 
-        // const items = [
-        //     { title: 'Van', image: 'https://picsum.photos/200/200' },
-        //     { title: 'Truck', image: 'https://picsum.photos/200/200' },
-        //     { title: 'Motorcycle', image: 'https://picsum.photos/200/200'},
-        //     { title: 'Car', image: 'https://picsum.photos/200/200'},
-        //     { title: 'Bus', image: 'https://picsum.photos/200/200'}
-        // ]
+const getLabels = (size: number) => {
+    const items = ['Van', 'Truck', 'Motorcycle', 'Car', 'Bus']
 
-        const items = ['Van', 'Truck', 'Motorcycle', 'Car', 'Bus']
+    // const items = [
+    //     { title: 'Van', image: 'https://picsum.photos/200/200' },
+    //     { title: 'Truck', image: 'https://picsum.photos/200/200' },
+    //     { title: 'Motorcycle', image: 'https://picsum.photos/200/200'},
+    //     { title: 'Car', image: 'https://picsum.photos/200/200'},
+    //     { title: 'Bus', image: 'https://picsum.photos/200/200'}
+    // ]
+    const newLabels = []
 
-        for (let i = 0; i < size; i++) {
-            labels.push(items[Math.floor(Math.random() * items.length)])
-        }
+    for (let i = 0; i < size; i++) {
+        newLabels.push(items[Math.floor(Math.random() * items.length)])
+    }
+
+    return newLabels
+}
+
+export default defineComponent({
+    components: {
+        DlConfusionMatrix,
+        DlButton
+    },
+    setup() {
+        const SIZE = 10
+        const matrix = getMatrix(SIZE)
+        const labels = getLabels(SIZE)
 
         return { matrix, labels, getLink }
     }

package/src/demos/DlDemoPage.vue

@@ -0,0 +1,235 @@
+<template>
+    <DlThemeProvider :is-dark="darkMode">
+        <div
+            style="display: flex; width: 100%; align-items: center; align-content; center;"
+        >
+            <dl-typography
+                color="dl-color-medium"
+                variant="p"
+                style="margin: 10px 0px 20px 0px; width: 90%"
+            >
+                <div
+                    style="
+                        background-image: url(https://dataloop.ai/wp-content/uploads/2020/03/logo.svg);
+                        width: 160px;
+                        height: 28px;
+                        display: inline-block;
+                    "
+                />
+                Components library
+            </dl-typography>
+            <div style="display: flex; align-items: center">
+                <dl-icon
+                    icon="icon-dl-light-theme"
+                    size="24px"
+                    :color="
+                        !darkMode ? 'dl-color-secondary' : 'dl-color-darker'
+                    "
+                />
+                <dl-switch
+                    v-model="darkMode"
+                    style="margin: 0 20px"
+                />
+                <dl-icon
+                    icon="icon-dl-dark-theme"
+                    size="20px"
+                    :color="darkMode ? 'dl-color-secondary' : 'dl-color-darker'"
+                />
+            </div>
+        </div>
+        <div class="layout-wrapper">
+            <div class="sidebar">
+                <dl-search
+                    v-model="filterTerm"
+                    style="margin-bottom: 5px"
+                />
+
+                <dl-button
+                    v-if="activeDemo"
+                    outlined
+                >
+                    <span style="text-transform: capitalize">
+                        Selected: {{ computeDemoName(activeDemo.name) }}
+                    </span>
+                </dl-button>
+                <dl-list
+                    bordered
+                    clickable
+                    style="
+                        margin-top: 15px;
+                        min-width: 200px;
+                        height: 100%;
+                        height: calc(100vh - 18vh);
+                        overflow: auto;
+                    "
+                >
+                    <template #default="{ clickable }">
+                        <dl-list-item
+                            v-for="(demo, index) in filteredDemos"
+                            :key="demo.name"
+                            :separator="index !== filteredDemos.length - 1"
+                            :clickable="clickable"
+                            :class="isSelectedDemo(demo) ? 'selected' : ''"
+                            style="text-transform: capitalize"
+                            @click="setActiveDemo(demo)"
+                        >
+                            {{ computeDemoName(demo.name) }}
+                        </dl-list-item>
+                    </template>
+                </dl-list>
+            </div>
+            <div class="content">
+                <div style="display: flex; justify-content: center">
+                    <dl-typography
+                        size="h2"
+                        variant="h2"
+                        style="text-transform: capitalize"
+                    >
+                        {{
+                            activeDemo
+                                ? computeDemoName(activeDemo.name)
+                                : 'No selected'
+                        }}
+                        component
+                    </dl-typography>
+                </div>
+                <component
+                    :is="activeDemo.component"
+                    v-if="activeDemo"
+                    class="data-container"
+                />
+            </div>
+        </div>
+    </DlThemeProvider>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, shallowRef } from 'vue-demi'
+import {
+    DlThemeProvider,
+    DlButton,
+    DlListItem,
+    DlList,
+    DlTypography,
+    DlSearch,
+    DlSwitch,
+    DlIcon
+} from '../components'
+import Demos from '.'
+
+export default defineComponent({
+    name: 'DlComponentsDemo',
+    components: {
+        DlThemeProvider,
+        DlButton,
+        DlListItem,
+        DlList,
+        DlTypography,
+        DlSearch,
+        DlSwitch,
+        DlIcon
+    },
+    props: {
+        isDark: { required: false, default: false, type: Boolean }
+    },
+    setup(props) {
+        const darkMode = ref(props.isDark)
+        const filterTerm = ref('')
+        const names = Object.keys(Demos)
+        const demos: {
+            name: string
+            component: any
+        }[] = names.map((n: string) => ({
+            name: n,
+            // @ts-ignore
+            component: Demos[n]
+        }))
+
+        const filteredDemos = computed(() => {
+            if (!filterTerm.value || !filterTerm.value.length) {
+                return demos
+            }
+
+            return demos.filter((demo: { name: string; component: any }) => {
+                return demo.name
+                    .toLowerCase()
+                    .includes(filterTerm.value.toLowerCase())
+            })
+        })
+
+        const activeDemo = shallowRef(
+            window.localStorage.getItem('dl-active-demo')
+                ? demos.find(
+                      (d) =>
+                          d.name ===
+                          window.localStorage.getItem('dl-active-demo')
+                  ) ?? null
+                : null
+        )
+
+        const setActiveDemo = (demo: { name: string; component: any }) => {
+            activeDemo.value = demo
+            filterTerm.value = ''
+            window.localStorage.setItem('dl-active-demo', demo.name)
+        }
+
+        const computeDemoName = (name: string) => {
+            return name.includes('Dl')
+                ? name.split('Demo')[0]
+                : 'Dl' + name.split('Demo')[0]
+        }
+
+        const isSelectedDemo = (demo: { name: string; component: any }) => {
+            return activeDemo.value?.name === demo.name
+        }
+
+        return {
+            darkMode,
+            activeDemo,
+            setActiveDemo,
+            filterTerm,
+            filteredDemos,
+            computeDemoName,
+            isSelectedDemo
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.layout-wrapper {
+    display: flex;
+}
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+}
+
+.content {
+    padding: 20px 30px;
+    flex-grow: 1;
+}
+
+.data-container {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    max-width: 100%;
+    overflow: auto;
+    padding: 20px;
+    margin: 0 auto;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 950px;
+    resize: both;
+    box-shadow: var(--dl-menu-shadow);
+}
+
+.selected {
+    ::v-deep .row {
+        color: var(--dl-color-secondary) !important;
+        background-color: var(--dl-color-fill);
+    }
+}
+</style>