@dataloop-ai/components 0.17.134 → 0.18.1

package/src/layouts/DlDatasetBrowser/DemoComponents/MainContent/EmptyState/LayoutEmptyState.vue

@@ -0,0 +1,227 @@
+<template>
+    <div class="layout-empty-state grid-cols-2">
+        <div class="flex full-width text-center justify-center">
+            <upload-data />
+        </div>
+        <div class="flex full-width text-center justify-center">
+            <dl-code-editor
+                v-model="codeEditorValue"
+                width="485px"
+                height="547px"
+                :language="language"
+                :theme="theme"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi'
+import UploadData from './UploadData.vue'
+import { DlCodeEditor } from '../../../../../components'
+import { DlCodeEditorTheme } from '../../../../../components/types'
+
+export default defineComponent({
+    name: 'LayoutEmptyState',
+    components: {
+        UploadData,
+        DlCodeEditor
+    },
+    setup() {
+        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(() => {
+            if (
+                // @ts-ignore
+                window.DlComponents.isDark.value
+            ) {
+                return DlCodeEditorTheme.Dark
+            }
+            return DlCodeEditorTheme.Light
+        })
+
+        return {
+            codeEditorValue,
+            language,
+            theme
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.layout-empty-state {
+    display: grid;
+    width: 100%;
+}
+</style>

package/src/layouts/DlDatasetBrowser/DemoComponents/MainContent/EmptyState/UploadData.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="dl-layout-upload-data">
+        <dl-empty-state
+            icon-size="100px"
+            class="dl-layout-upload-data__empty-state"
+            icon=""
+            title=""
+        >
+            <template #cta="">
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        gap: 10px;
+                        padding-bottom: 20px;
+                    "
+                >
+                    <dl-icon
+                        icon="icon-dl-upload"
+                        size="20px"
+                        color="dl-color-darker"
+                    />
+                    <dl-typography
+                        size="20px"
+                        color="dl-color-darker"
+                    >
+                        Upload data (files, folders & annotations)
+                    </dl-typography>
+                </div>
+                <dl-typography
+                    size="12px"
+                    color="dl-color-medium"
+                >
+                    Models can be trained, evaluated with data (and if there's
+                    ground-truth, you'll have precision-recall and confusion
+                    matrix), and deployed as a service in the Dataloop platform,
+                    with an endpoint for use from outside.
+                </dl-typography>
+                <div style="padding-top: 20px">
+                    <dl-button label="Upload Data" />
+                </div>
+            </template>
+
+            <template #links>
+                <div style="display: flex; gap: 15px">
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-sdk-documentation"
+                        flat
+                        uppercase
+                        label="SDK"
+                        size="s"
+                        color="secondary"
+                    />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-file"
+                        flat
+                        label="Documentation"
+                        size="s"
+                        color="secondary"
+                    />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-youtube"
+                        flat
+                        label="Video"
+                        size="s"
+                        color="secondary"
+                    />
+                </div>
+            </template>
+        </dl-empty-state>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import {
+    DlEmptyState,
+    DlButton,
+    DlTypography,
+    DlIcon
+} from '../../../../../components'
+
+export default defineComponent({
+    name: 'UploadData',
+    components: {
+        DlEmptyState,
+        DlButton,
+        DlTypography,
+        DlIcon
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-layout-upload-data {
+    &__empty-state {
+        min-width: 400px;
+        min-height: 300px;
+        max-width: 400px;
+        padding-top: 100px;
+    }
+}
+</style>